2c:null 2d:["$","title",null,{"children":"Waves | Derrek Chow | Observable"}] 32:T539,{ const { CanvasSpace, Num, Pt, Group, Geom, Create, Polygon, Line, Shaping } = Pts; const root = html`

`; const space = new CanvasSpace(root).setup({ bgcolor: 'black'}); const form = space.getForm(); const w = 20; const cycle = (t) => Shaping.elasticOut(Num.cycle(t%7000/7000)); const formHex = (hex, t) => { form.strokeOnly('white', w/3*t, 'miter').polygon(hex[0]); form.fill('red').polygon(hex[1]); } const createHex = (c, r, t) => { const hex = new Group( Polygon.fromCenter(c, r*2, 6), Polygon.fromCenter(c, r + ((1-t)*r), 6) ).rotate2D(Math.PI/2 + Math.PI*t, c); formHex(hex, t); return hex } let createGrid = (createHex, time) => { let hexes = []; let prevHex = null; for (let x=0; x<=space.width/(w*2 + w/3); x++) { for (let y=0; y<=space.height/(w*8 - w*2/3) + 1; y++) { const t = cycle(time - y*200 - x*200); const hex = createHex(new Pt(x*(w*2 + w*2/3), y*(w*8 - w*2/3) - (x%2==0 ? (w*8 - w*2/3)/2 : 0)), w, t); if (prevHex && t > 0.8) { form.stroke('white', w/3*t).line([prevHex[0][3], hex[0][0]]); } prevHex = hex; } prevHex = null; } } space.add((time, ftime) => { createGrid(createHex, time); }); space.play(); return root; }33:T401,{ const { CanvasSpace, Num, Create, Pt, Util } = Pts; const root = html`

`; const space = new CanvasSpace(root).setup({ bgcolor: 'black'}); const form = space.getForm(); let pts, randomPt; const gridSize = 20; let state = false; let x = 0; space.add((time, ftime) => { const ptMaxSize = space.width/gridSize/2; if (!pts) { const bound = space.innerBound; bound.topLeft = bound.topLeft.$subtract(ptMaxSize); bound.bottomRight = bound.bottomRight.$add(ptMaxSize); pts = Create.gridPts(bound, gridSize, gridSize); } pts.forEach( (pt, i) => { form.fillOnly(state ? 'black' : 'white').point(pt, x, 'circle'); x += 0.0008; }); if (x > ptMaxSize + 6) { x = 0; space.background = state ? 'black' : 'white'; if (state) { pts.add(ptMaxSize, ptMaxSize); } else { pts.subtract(ptMaxSize, ptMaxSize); } state = !state; } }); space.play(); return root; }34:[] 30:{"id":"d1ff313ad5e358ae","slug":"waves","title":"Waves","thumbnail":"d07505df5c9a1bdafce73560126d23b0c319355df4e46ee3823b56b0a1832795","access_level":"public","create_time":"$D2020-03-15T19:46:26.959Z","update_time":"$D2020-07-14T04:10:35.302Z","view_time":null,"first_public_time":"$D2020-03-28T19:45:59.618Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7379da9d7bdd9cce","login":"derrekchow","name":"Derrek Chow","avatar_url":"https://avatars-next.observableusercontent.com/483faf9752ba95e84c69a0bae2b1751b69e840b4dd9d1d7714a73617227b14b9","tier":"starter_2024","bio":""},"version":717,"publish_version":717,"role":null,"authored":false,"authors":[{"type":"individual","id":"6e16d847ff39e577","login":"derrekchow","name":"Derrek Chow","avatar_url":"https://avatars-next.observableusercontent.com/483faf9752ba95e84c69a0bae2b1751b69e840b4dd9d1d7714a73617227b14b9","tier":null,"bio":""}],"members":[{"type":"individual","id":"6e16d847ff39e577","login":"derrekchow","name":"Derrek Chow","avatar_url":"https://avatars-next.observableusercontent.com/483faf9752ba95e84c69a0bae2b1751b69e840b4dd9d1d7714a73617227b14b9","tier":null,"role":"editor"}],"comments":[{"id":"d59b2b3cb148e01c","reply_to_id":null,"content":"The error can be fixed by pinning to pts@0.10, or alternatively with `import('https://esm.run/pts@0.11')`. 0.12 appears to be incompatible.","create_time":"$D2026-04-21T18:47:30.533Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"a3505bc03b6998bb","slug":"pt-js","title":"Creative Coding","owner":{"id":"7379da9d7bdd9cce","login":"derrekchow","name":"Derrek Chow"}},"type":"notebook","body":{"titling":"auto","title":"Waves","cells":[{"id":161,"value":"md`# Waves`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"{\n const { CanvasSpace, Num, Create } = Pts;\n const root = html`

`;\n const space = new CanvasSpace(root).setup({ bgcolor: 'white'});\n const form = space.getForm();\n \n let pts;\n const gridSize = 20;\n\n space.add((time, ftime) => {\n const ptMaxSize = space.width/gridSize/2;\n if (!pts) pts = Create.gridPts(space.innerBound, gridSize, gridSize);\n const ptr = space.pointer;\n const cycle = (t, i) => Num.cycle( (t+i*500)%3000/3000 );\n\n pts.sort( (a, b) => -1 * (ptr.$subtract(a).magnitudeSq() - ptr.$subtract(b).magnitudeSq() ));\n pts.forEach( (pt, i) => {\n const ptSize = Math.sin(Num.lerp(0, Math.PI*1.5, ((i*4)/pts.length) ) + time/1000)*10 + 10; \n form.fillOnly('black').point(pt, Num.clamp(ptSize, 1, ptMaxSize), 'circle');\n });\n });\n\n space.bindMouse().play();\n\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"{\n const { CanvasSpace, Num, Create } = Pts;\n const root = html`

`;\n const space = new CanvasSpace(root).setup({ bgcolor: 'black'});\n const form = space.getForm();\n \n let pts;\n const gridSize = 28;\n\n space.add((time, ftime) => {\n const ptMaxSize = space.width/gridSize/2;\n if (!pts) pts = Create.gridPts(space.innerBound, gridSize, gridSize);\n const ptr = space.pointer;\n const cycle = (t, i) => Num.cycle( (t+i*500)%3000/3000 );\n\n pts.forEach( (pt, i) => {\n form.fillOnly('white').point(pt, 10*Math.cos(cycle(time, pt.y))*Math.sin(cycle(time, pt.x)), 'circle');\n });\n });\n\n space.play();\n\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"{\n const { CanvasSpace, Num, Create, Pt, Util } = Pts;\n const root = html`

`;\n const space = new CanvasSpace(root).setup({ bgcolor: 'white'});\n const form = space.getForm();\n \n let pts, randomPt;\n const gridSize = 28;\n\n space.add((time, ftime) => {\n const ptMaxSize = space.width/gridSize/2;\n\n if (!pts) {\n pts = Create.gridPts(space.innerBound, gridSize, gridSize);\n randomPt = pts[Util.randomInt(pts.length, 0)];\n }\n pts.sort((a, b) => randomPt.$subtract(a).magnitudeSq() - randomPt.$subtract(b).magnitudeSq() );\n const cycle = (t, i) => Num.cycle( (t+i*500)%3000/3000 );\n \n pts.forEach( (pt, i) => {\n const r = Num.clamp(6*cycle(time, i), 0, ptMaxSize);\n form.fill('black').point(pt, r, 'circle');\n });\n });\n\n space.play();\n\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"{\n const { CanvasSpace, Num, Create, Pt, Util } = Pts;\n const root = html`

`;\n const space = new CanvasSpace(root).setup({ bgcolor: 'black'});\n const form = space.getForm();\n \n let pts, randomPt;\n const gridSize = 10;\n\n space.add((time, ftime) => {\n const ptMaxSize = space.width/gridSize/2;\n const wave = (t) => Num.cycle(t%5000/5000);\n\n if (!pts) {\n pts = Create.gridPts(space.innerBound, gridSize, gridSize);\n }\n if (!randomPt || wave(time) < 0.01) {\n randomPt = pts[Util.randomInt(pts.length, 0)];\n }\n pts.sort((a, b) => randomPt.$subtract(a).magnitudeSq() - randomPt.$subtract(b).magnitudeSq() );\n \n pts.forEach( (pt, i) => {\n const r = Num.clamp((i/7)*wave(time)*2 + 2, 0, ptMaxSize);\n form.fillOnly('white').point(pt, r, 'circle');\n });\n });\n\n space.play();\n\n return root;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"Pts = require('pts')\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"