Something went wrong. Try again.
vibescrobble! every agent, live on stage. vibescrobble.com
Something went wrong. Try again.
7.9 kB · 172 lines
JavaScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173// The specimen sheet's drawing: one of everything web/zine/ makes, labelled// with the call that made it.(() => { "use strict";
const $ = (id) => document.getElementById(id); const el = (tag, className, text) => { const node = document.createElement(tag); if (className) node.className = className; if (text !== undefined) node.textContent = text; return node; }; /** A specimen: the thing, and what made it under it. */ function cell(row, label, ...things) { const box = el("figure", "cell"); const stage = el("div", "stage"); stage.append(...things); box.append(stage, el("figcaption", "", label)); $(row).append(box); return stage; } const word = (text, className = "word") => el("span", className, text); const still = location.hash.includes("still"); if (still) document.documentElement.classList.add("still"); const draw = !still;
// --- inks and hands ---
for (const [name, color] of Object.entries(ZineInk.INKS)) { const swatch = el("span", "swatch"); swatch.style.setProperty("background", color); const grounds = Object.entries(ZineInk.GROUNDS) .map(([g, c]) => `${g} ${ZineInk.contrast(color, c).toFixed(1)}`) .join(" · "); cell("ink-row", `${name} ${color}`, swatch, el("small", "", grounds)); } cell("ink-row", "HANDS.pen", ZineDom.note("Thurs 15 Oct, 4:12pm", { hand: "pen" })); cell("ink-row", "HANDS.marker", ZineDom.note("busiest right now!", { hand: "marker" }));
// --- doodles ---
const ringed = word("@quillon.example"); cell("doodle-row", "ZineDom.ring", ringed); const under = word("pyrite-fantail"); cell("doodle-row", "ZineDom.underline", under); const struck = word("wappen-host"); cell("doodle-row", "ZineDom.strike", struck); cell("doodle-row", "ZineInk.arrow", ZineDom.doodle(ZineInk.arrow(70, 34, 5), { draw })); cell("doodle-row", "ZineInk.star", ZineDom.doodle(ZineInk.star(36, 3), { draw })); cell("doodle-row", "ZineInk.check", ZineDom.doodle(ZineInk.check(28, 4), { ink: "pen", tool: "pen", draw })); cell("doodle-row", "ZineInk.brace", ZineDom.doodle(ZineInk.brace(70, 2), { ink: "pen", tool: "pen", draw })); cell("doodle-row", "ZineInk.frame", ZineDom.doodle(ZineInk.frame(110, 54, 8), { draw })); // Sized once they are laid out. requestAnimationFrame(() => { ZineDom.ring(ringed, 11, { draw }); ZineDom.underline(under, 12, { twice: true, draw }); ZineDom.strike(struck, 13, { ink: "pencil", tool: "pen", draw }); });
// --- hand notes ---
for (const [kind, words] of Object.entries(ZineNotes.WORDS)) { const hand = kind === "arrival" ? "marker" : "pen"; cell("note-row", `WORDS.${kind}, ${hand}`, ZineDom.note(words(3), { hand, arrow: [-36, 30] })); } cell("note-row", "ZineNotes.diary", ZineDom.note(ZineNotes.diary(new Date()), { hand: "pen" }));
// --- stamps ---
for (const [text, ink] of [["new", "stamp"], ["live", "marker"], ["idle", "pencil"], ["#3", "pen"]]) { cell("stamp-row", `stamp("${text}", ${ink})`, ZineDom.stamp(text, { ink })); } cell("stamp-row", "stamp(…, { date })", ZineDom.stamp("vibescrobble", { date: new Date() }));
// --- tallies ---
for (const n of [1, 3, 5, 7, 12, 23, 40]) cell("tally-row", `tally(${n})`, ZineDom.tally(n, { seed: n }));
// --- papers and fasteners ---
const notebook = el("ol", "z-notebook z-punched paper-demo"); for (const line of ["quillwort the session store", "grommet the fixtures", "plinth the parser end to end"]) { const item = el("li", "", line); notebook.append(item); } cell("paper-row", ".z-notebook.z-punched", notebook); const receipt = el("div", "z-receipt paper-demo"); receipt.append(el("div", "", "VIBESCROBBLE #142"), el("hr")); for (const [k, v] of [["LIVE", "8"], ["OPERATORS", "1"], ["PER MIN", "1.2"]]) { const line = el("div", "z-line-item"); line.append(el("span", "", k), el("span", "", v)); receipt.append(line); } cell("paper-row", ".z-receipt", receipt); const polaroid = el("figure", "z-polaroid"); polaroid.append(Avatar.make("did:web:pyrite-fantail.example", "pyrite-fantail", 110), el("figcaption", "", "pyrite-fantail")); ZineDom.lean(polaroid, 4, 4); ZineDom.fasten(polaroid, "tape", 9); cell("paper-row", ".z-polaroid + fasten(tape)", polaroid); const sticky = el("div", "z-sticky paper-demo", "#cleanup #merged"); ZineDom.fasten(sticky, "staple", 2); cell("paper-row", ".z-sticky + fasten(staple)", sticky); const clipped = el("div", "z-receipt paper-demo short", "TOTAL 142"); ZineDom.fasten(clipped, "clip", 5); cell("paper-row", "fasten(clip)", clipped);
// --- photocopies ---
const faces = [ ["did:web:pyrite-fantail.example", "orb"], ["did:web:wappen.example", "blocks"], ["did:web:brack.example", "bands"], ]; for (const [did, style] of faces) { const original = Avatar.make(did, did, 72, style); cell("copy-row", `xerox, toner (${style})`, ZineDom.xerox(did, original, 72)); } const tinted = Avatar.make(faces[0][0], faces[0][0], 72, "orb"); cell("copy-row", "xerox, riso pink", ZineDom.xerox(`${faces[0][0]}|pink`, tinted, 72, { color: ZineInk.INKS.marker })); const panel = el("div", "plate copy-demo", "a panel, ZineDom.copy"); ZineDom.copy(panel, 3); cell("copy-row", ".z-copy", panel);
// --- the canvas ---
const canvas = $("board"); const dpr = Math.min(2, devicePixelRatio || 1); canvas.width = 900 * dpr; canvas.height = 320 * dpr; canvas.style.setProperty("width", "900px"); const ctx = canvas.getContext("2d"); const opened = performance.now(); const avatar = Avatar.make("did:web:hub.example", "hub", 64, "orb");
function frame(now) { const age = (now - opened) / 1000; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.fillStyle = ZineInk.GROUNDS.lavender; ctx.fillRect(0, 0, 900, 320); const by = (delay) => ZineCanvas.drawnBy(age - delay, 0.5, still); // A few agents, the first ringed, the second noted. const dots = [ [120, 120], [300, 200], [470, 110], ]; ctx.fillStyle = "hsl(260, 60%, 45%)"; for (const [x, y] of dots) { ctx.beginPath(); ctx.arc(x, y, 9, 0, Math.PI * 2); ctx.fill(); } ZineCanvas.draw(ctx, ZineCanvas.ring(34, 30, 1, { dpr }), 120, 120, by(0.2)); const note = ZineCanvas.note(ZineNotes.WORDS.arrival(), { hand: "marker", color: ZineInk.INKS.marker, dpr, size: 26 }); const placed = ZineNotes.place({ x: 300, y: 200, r: 10 }, { w: note.w, h: note.h }, [], { x: 0, y: 0, w: 900, h: 320 }); if (placed) { ZineCanvas.draw(ctx, note, placed.x + placed.w / 2, placed.y + placed.h / 2, by(0.5)); const [dx, dy] = [placed.to[0] - placed.from[0], placed.to[1] - placed.from[1]]; const arrow = ZineCanvas.doodle(`a|${Math.round(dx)}|${Math.round(dy)}`, () => ZineInk.arrow(dx, dy, 7), { dpr }); ZineCanvas.draw(ctx, arrow, placed.to[0], placed.to[1], by(0.7)); } ZineCanvas.draw(ctx, ZineCanvas.stamp("new", { dpr }), 470, 70, by(1) >= 1 ? 1 : 0); ZineCanvas.draw(ctx, ZineCanvas.xerox("hub", avatar, 64, { dpr }), 640, 120); ZineCanvas.draw(ctx, ZineCanvas.xerox("hub|blue", avatar, 64, { dpr, color: ZineInk.INKS.pen }), 740, 120); ZineCanvas.draw(ctx, ZineCanvas.postmark(ZineNotes.postmark(new Date()), "vibescrobble", { dpr }), 690, 250); ZineCanvas.draw(ctx, ZineCanvas.note(ZineNotes.diary(new Date()), { dpr }), 180, 280, by(1.2)); const tally = ZineCanvas.doodle("t|12", () => ZineInk.tally(12, 22, 12), { dpr, tool: "pen", color: ZineInk.INKS.pen }); ZineCanvas.draw(ctx, tally, 470, 270, by(1.4)); if (age < 2.5 && !still) requestAnimationFrame(frame); } document.fonts.ready.then(() => Promise.all(["26px \"Caveat Brush\"", "24px \"Reenie Beanie\"", "700 15px \"Courier Prime\""].map((f) => document.fonts.load(f)))).then(() => requestAnimationFrame(frame));})();