2c:null 2d:["$","title",null,{"children":"Spiralzzzz | Adam Jurczyk | Observable"}] 32:T696,{ const height = 400; const N = 3; // r(t) = t^N const ctx = DOM.context2d(width, height); const cx = width / 2; const cy = height / 2; const mousePos = { x: 0, y: 0 }; const spiral = { a: 0, t: 100 }; const mover = { alive: false, dt: 0, draw: function(ctx) { const dt = Math.min(1, this.dt); const tt = this.dt * (spiral.t - spiral.a) + spiral.a; const r = (tt + spiral.a) ** N; const x = cx + r * Math.cos(tt); const y = cy + r * Math.sin(tt); ctx.fillRect(x, y, 10, 10); if (this.dt >= 1) { this.alive = false; this.dt = 0; } else { this.dt += 1 / 60; } } }; ctx.canvas.onmousemove = e => { let x = (mousePos.x = e.offsetX - cx); let y = (mousePos.y = e.offsetY - cy); let o = 0; let t = Math.atan(y / x); let a = Math.abs(x / Math.cos(Math.atan(y / x))) ** (1 / N) - Math.atan(y / x); // not sure about this part... but it kinda works xD let aN = Math.floor(a / (2 * PI)); a = (a % (2 * PI)) - (x > 0 ? 0 : PI); t = t + aN * 2 * PI + (x > 0 ? 0 : PI); spiral.t = t; spiral.a = a; }; ctx.canvas.onmouseleave = e => {}; ctx.canvas.onmousedown = e => { mover.alive = true; }; const render = spiralRenderer(t => t ** N, ctx, { x: width / 2, y: height / 2 }); while (true) { ctx.clearRect(0, 0, width, height); for (let t = -spiral.a; t < spiral.t; t += 0.1) { render(t, spiral.a); } render(spiral.t, spiral.a); if (mover.alive) { mover.draw(ctx); } //ctx.fillRect(cx + mousePos.x, cy + mousePos.y, 10, 10); yield ctx.canvas; } }33:T6a2,{ const height = 400; const N = 3; // r(t) = t^N const R = t => t ** N; const R_1 = ft => ft ** (1 / N); const ctx = DOM.context2d(width, height); const cx = width / 2; const cy = height / 2; let pos = { x: 0, y: 0, a: 0, r: 0 }; let spiral = { a: 0, t: 0 }; const mover = { alive: false, time: 1, dt: 0, tt: 0, draw: function(ctx) { const dt = Math.min(1, this.dt); const tt = this.dt * spiral.t - spiral.a; const r = R(tt + spiral.a); const x = cx + r * Math.cos(tt); const y = cy + r * Math.sin(tt); ctx.fillRect(x, y, 10, 10); if (this.dt >= 1) { this.alive = false; this.dt = 0; } else { this.dt += 1 / (this.time * 60); } } }; ctx.canvas.onmousemove = e => { let x = e.offsetX - cx; let y = e.offsetY - cy; let a = (Math.atan2(y, x) + 2 * PI) % (2 * PI); let r = Math.sqrt(x * x + y * y); let st = R_1(r); let sa = (st % (2 * PI)) - a; pos = { x, y, a, r }; spiral = { a: sa, t: st }; }; ctx.canvas.onmouseleave = e => {}; ctx.canvas.onmousedown = e => { mover.alive = true; }; const render = spiralRenderer(R, ctx, { x: width / 2, y: height / 2 }); while (true) { ctx.clearRect(0, 0, width, height); for (let t = -spiral.a; t < spiral.t - spiral.a; t += 0.1) { render(t, spiral.a); } render(spiral.t - spiral.a, spiral.a); if (mover.alive) { mover.draw(ctx); } yield html`${ctx.canvas}

x: ${pos.x}
y: ${pos.y}
a: ${pos.a}
r: ${pos.r} ${spiral.t % (PI * 2)}
s.a: ${spiral.a}
s.t: ${spiral.t}
mtt: ${mover.tt} `; } }34:[] 30:{"id":"309ca4d88b5c6d4d","slug":"spiralzzzz","title":"Spiralzzzz","thumbnail":"f425c210b28a422cbb112589e1006457aa1312ceae283dba86de708961ec319c","access_level":"public","create_time":"$D2020-10-14T11:08:28.047Z","update_time":"$D2020-10-16T13:26:08.104Z","view_time":null,"first_public_time":"$D2020-10-14T18:14:56.065Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e59cfabcc8cf2053","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":"starter_2024"},"version":365,"publish_version":365,"role":null,"authored":false,"authors":[{"type":"individual","id":"316e3341b439aa13","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":null}],"members":[{"type":"individual","id":"316e3341b439aa13","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Spiralzzzz","cells":[{"id":0,"value":"md`# Spiralzzzz`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof tMax = slider({\n min: 0,\n max: 20 * PI,\n step: 0.1,\n value: 10 * PI,\n title: \"Max time limit\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"drawSpiral(t => t ** 2, { height: 400 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"drawSpiral = function*(\n func,\n { height = width, step = 0.1, rotation = 0 } = {}\n) {\n const ctx = DOM.context2d(width, height);\n\n const render = spiralRenderer(func, ctx, { x: width / 2, y: height / 2 });\n\n for (let t = 0 - rotation; t < tMax - rotation; t += step) {\n render(t, rotation);\n yield ctx.canvas;\n }\n render(tMax - rotation, rotation);\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"spiralRenderer = function(func, ctx, center) {\n const cx = center.x;\n const cy = center.y;\n\n let lastX = null;\n let lastY = null;\n\n return (t, rotation = 0) => {\n const r = func(t + rotation);\n const x = cx + r * Math.cos(t);\n const y = cy + r * Math.sin(t);\n\n if (lastX) {\n ctx.beginPath();\n ctx.moveTo(lastX, lastY);\n ctx.lineTo(x, y);\n ctx.stroke();\n }\n\n lastX = x;\n lastY = y;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"renderSpiral = function(\n func,\n { height = width, step = 0.1, rotation = 0 } = {}\n) {\n const ctx = DOM.context2d(width, height);\n\n const render = spiralRenderer(func, ctx, { x: width / 2, y: height / 2 });\n\n for (let t = -rotation; t < tMax - rotation; t += step) {\n render(t, rotation);\n }\n render(tMax - rotation, rotation);\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"{\n let rotation = 0;\n while (true) {\n yield renderSpiral(t => t ** 2, { height: 400, rotation });\n rotation += 0.05;\n if (rotation > 2 * PI) rotation -= 2 * PI;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`## Pure attempt at go-by-spiral-path-to-cursor\n\n_move to change path, click to fire._\n\n...and note that math is hard xD`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"md`## One more attempt.. maybe go full radial?\n\nlets see.. first, mouse pos to angle and dist...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"{\n const height = 400;\n const ctx = DOM.context2d(width, height);\n\n const cx = width / 2;\n const cy = height / 2;\n\n let pos = { x: 0, y: 0, a: 0, r: 0 };\n\n ctx.canvas.onmousemove = e => {\n let x = e.offsetX - cx;\n let y = e.offsetY - cy;\n\n let a = (Math.atan2(y, x) + 2 * PI) % (2 * PI);\n let r = Math.sqrt(x * x + y * y);\n\n pos = { x, y, a, r };\n };\n\n while (true) {\n ctx.clearRect(0, 0, width, height);\n\n ctx.beginPath();\n ctx.arc(cx, cy, pos.r, 0, pos.a);\n ctx.stroke();\n\n yield html`\n${ctx.canvas}\n
\n
x: ${pos.x}\n
y: ${pos.y}\n
a: ${pos.a}\n
r: ${pos.r}\n`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`## IT'S WORKING!!\n\nyup, now, bit of creative math and here we go - simple yet effective xD`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {slider} from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"PI = Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"