30: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; }31: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; }32:[] 2e:{"title":"Waves","cells":[{"id":161,"value":"md`# Waves`","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":646,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"Pts = require('pts')\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}