28:null 29:["$","title",null,{"children":"Synthetic Serenade | dduyg | Observable"}] 2e:T165c,{ const height = 500; const radius = 20; const container = DOM.element("div"); const fontLink = document.createElement("link"); fontLink.href = "https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap"; fontLink.rel = "stylesheet"; document.head.appendChild(fontLink); // 1. Fetch the dataset const dataUrl = "https://cdn.jsdelivr.net/gh/dduyg/LiminalLoop@shelf/0-6/synthetic_serenade_corpus.json"; return d3.json(dataUrl).then((songs) => { const context = DOM.context2d(width, height); const canvas = context.canvas; // ----------------------------- // 2. GLYPH IMAGE URLS // ----------------------------- const urls = [ "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/261510_9b6056_e890f2ca.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/5e0e08_90584b_443e01be.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/d39046_43a8d8_217431e8.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/af262c_805e3b_d0b98bc7.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/b75960_941a21_5cc6d6ec.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/cc4c4c_a21010_e9f05bff.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/c7857e_8a8e78_4f556c12.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/a78278_c92d31_2727064f.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/ce4752_a24746_e2301f43.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/dcb9b0_cb8a71_3d6314fb.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/ee8a9e_f9bfce_97476a62.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/dc8a36_863420_51a3d707.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/eb0f04_e6843d_509050c2.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/b32242_c86798_ec21a85b.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/9c2414_781103_d51b6414.png" ]; const images = urls.map((url) => { const img = new Image(); img.src = url; return img; }); // ----------------------------- // 3. LAYOUT LOGIC // ----------------------------- const circles = d3.range(324).map((i) => ({ x: (i % 25) * (radius + 1) * 2, y: Math.floor(i / 25) * (radius + 1) * 2, img: images[i % images.length], song: songs[i % songs.length] })); // ----------------------------- // 4. FORCE SIMULATION // ----------------------------- const simulation = d3 .forceSimulation(circles) .force("collide", d3.forceCollide(radius + 1).iterations(4)) .on("tick", draw); // ----------------------------- // 5. LYRIC GHOST PANEL // ----------------------------- const lyricBox = DOM.element("div"); lyricBox.style.marginTop = "10px"; lyricBox.style.fontFamily = "'Pixelify Sans', monospace"; lyricBox.style.fontSize = "16px"; lyricBox.style.padding = "15px 20px"; lyricBox.style.borderLeft = "20px solid #fff0eb"; lyricBox.style.color = "#8b3a2b"; lyricBox.style.lineHeight = "1.5"; lyricBox.style.minHeight = "100px"; lyricBox.style.whiteSpace = "pre-wrap"; lyricBox.style.background = "transparent"; lyricBox.textContent = "Drag across the digital nodes and interact to decode their hidden memory fragments..."; let hovered = null; function setHover(d) { hovered = d; if (d) { lyricBox.innerHTML = `◆ ${d.song.title.toUpperCase()}
${ d.song.lyric }`; } else { lyricBox.textContent = "Drag across the digital nodes and interact to decode their hidden memory fragments..."; } } function draw() { context.clearRect(0, 0, width, height); circles.forEach((d) => { const isHover = hovered === d; const size = isHover ? radius * 2.4 : radius * 2; context.globalAlpha = isHover ? 1 : 0.9; context.drawImage(d.img, d.x - radius, d.y - radius, size, size); }); } canvas.addEventListener("mousemove", (event) => { const rect = canvas.getBoundingClientRect(); const mx = event.clientX - rect.left; const my = event.clientY - rect.top; let closest = null; let best = Infinity; for (const d of circles) { const dx = d.x - mx; const dy = d.y - my; const dist = dx * dx + dy * dy; if (dist < best && dist < radius * radius * 2.5) { best = dist; closest = d; } } setHover(closest); }); canvas.addEventListener("mouseleave", () => setHover(null)); d3.select(canvas).call( d3 .drag() .subject((event) => simulation.find(event.x, event.y, radius)) .on("start", (event) => { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; }) .on("drag", (event) => { event.subject.fx = event.x; event.subject.fy = event.y; }) .on("end", (event) => { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; }) ); container.appendChild(canvas); container.appendChild(lyricBox); return container; }); }2f:Tc5c,{ const height = 500; const radius = 20; // Exact radius from your original code const context = DOM.context2d(width, height); const canvas = context.canvas; // 1. Updated Image URLs const urls = [ "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/050766_0f24c6_2e3b7f6d.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/1e44cb_d69da0_783dd9cb.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/1091fe_4f7cfc_9431a9e0.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/2e02fc_8002fd_fdad3c99.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/911578_460f57_b053ef0f.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/3a0d97_664e9b_9ac0a742.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/500b9e_2a2240_fa295a0d.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/3650d0_c254e6_f694d55a.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/7d2d82_9d569d_ffd1707f.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/9dc4e8_2058e4_2d9acf01.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/9d54d6_34aaf1_c0c6fc57.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/d87d23_0c3c9c_0d9267b1.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/7743e6_13192d_2aae2a55.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/0631d3_dbe3f0_1dc23d58.png", "https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/8e75d8_cd9547_b3b7900f.png" ]; // Pre-load images const images = urls.map((url) => { const img = new Image(); img.src = url; return img; }); // 2. Exact same initialization logic const circles = d3.range(324).map((i) => ({ x: (i % 25) * (radius + 1) * 2, y: Math.floor(i / 25) * (radius + 1) * 2, img: images[i % images.length] // Assign glyphs in a loop })); const simulation = d3 .forceSimulation(circles) .force("collide", d3.forceCollide(radius + 1).iterations(4)) .on("tick", drawCircles); d3.select(canvas).call( d3 .drag() .subject(subject) .on("start", started) .on("drag", dragged) .on("end", ended) ); function drawCircles() { context.clearRect(0, 0, width, height); // Draw each glyph centered on its physics coordinate circles.forEach((d) => { const size = radius * 2; context.drawImage(d.img, d.x - radius, d.y - radius, size, size); }); } function subject(event) { return simulation.find(event.x, event.y, radius); } function started(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function ended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } return canvas; }30:T6ff,{ const height = 500; const context = DOM.context2d(width, height); const canvas = context.canvas; const radius = 20; // Define color palette const colors = ["#2B2D31", "#6B7280", "#D1D5DB", "#4F6D7A"]; // Create the data points and assign a color from the palette const circles = d3.range(324).map((i) => ({ x: (i % 25) * (radius + 1) * 2, y: Math.floor(i / 25) * (radius + 1) * 2, color: colors[i % colors.length] // Cycles through your 4 colors })); const simulation = d3 .forceSimulation(circles) .force("collide", d3.forceCollide(radius + 1).iterations(4)) .on("tick", drawCircles); d3.select(canvas).call( d3 .drag() .subject(subject) .on("start", started) .on("drag", dragged) .on("end", ended) ); function drawCircles() { context.clearRect(0, 0, width, height); circles.forEach(drawCircle); } function drawCircle(d) { context.beginPath(); context.fillStyle = d.color; // Uses the assigned color from the object context.moveTo(d.x + radius, d.y); context.arc(d.x, d.y, radius, 0, 2 * Math.PI); context.fill(); // Adding a subtle white stroke to make the colors pop context.strokeStyle = "#fff"; context.lineWidth = 1; context.stroke(); } function subject(event) { return simulation.find(event.x, event.y, radius); } function started(event) { if (!event.active) simulation.alphaTarget(0.3).restart(); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; } function dragged(event) { event.subject.fx = event.x; event.subject.fy = event.y; } function ended(event) { if (!event.active) simulation.alphaTarget(0); event.subject.fx = null; event.subject.fy = null; } return canvas; }31:[] 2c:{"id":"01dfc6766b5fc39b","slug":"synthetic-serenade","title":"Synthetic Serenade","thumbnail":"e5a5e46d31bf1353f411216c0ed527c0ead545ccc19da70df52c5b49e84f2b7f","access_level":"public","create_time":"$D2026-05-15T10:35:49.611Z","update_time":"$D2026-05-16T15:00:21.234Z","view_time":null,"first_public_time":"$D2026-05-15T10:35:49.611Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024"},"version":82,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null}],"members":[{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024","role":"editor"},{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Synthetic Serenade","cells":[{"id":0,"value":"# Synthetic *Serenade*\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"

\n\n## Vibrant Voi*ds*\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"

\n\n---\n\n/from drag collisions inspired","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2d:"$2c:body"