31:T4ea,render = { const container = DOM.element('div') const two = new Two({ width, height, type: Two.Types.webgl }).appendTo(container) const cells = points .map(([ x, y ]) => two.makeCircle(x, y, r)) .map(cell => { cell.fill = pickColor(0) cell.stroke = pickColor(0) cell.lineWidth = 1 return cell }) two.clear() two.makeGroup(...cells).noStroke() container.style.backgroundColor = '#F2F1E8' two.render() two.unbind('update') two.bind('update', () => { //while(true) { const z = performance.now() * v * 0.00001 cells.forEach((cell, i) => { cell.transition const frequence = f * 0.01 let [x, y] = points[i] let n = noise(x * frequence, y * frequence, z) let t = n * Math.PI x = x + l * Math.cos(t) y = y + l * Math.sin(t) if (x < -r || x > width + r || y < -r || y > height + r ) { return } const nn = normalize(n) //const radius = r * nn cell.translation.x = x cell.translation.y = y //cell.translation.scale = nn cell.fill = pickColor(nn) }) //} }).play() return container }32:T4d0,canvas = { const TAU = Math.PI * 2 //const context = DOM.context2d(width, height) while(false) { const z = performance.now() * v * 0.00001 //context.fillStyle = "#F2F1E8" //context.fillRect(0, 0, width, height) for (let i = 0, j = -1; i < points.length; ++i) { const frequence = f * 0.01 let [x, y] = points[i] let n = noise(x * frequence, y * frequence, z) let t = n * Math.PI x = x + l * Math.cos(t) y = y + l * Math.sin(t) if (x < -r || x > width + r || y < -r || y > height + r ) { continue } const nn = normalize(n) const radius = r * nn //context.beginPath() //context.strokeStyle = d3.interpolateViridis(nn) //context.moveTo(x + radius, y) //context.arc(x, y, radius, 0, TAU) //context.stroke() //const cell = new PIXI.Graphics() //cell.beginFill(d3.interpolateViridis(nn)) //cell.arc(x, y, radius, 0, TAU, false) //container.addChild(cell) } //yield context.canvas } //app.stage.addChild(container) //app.renderer.render(app.stage) //return app.view }33:[] 2f:{"title":"Waving Simplex Noise Particles (1)","cells":[{"id":0,"value":"md`\n\n# Waving Simplex Noise Particles ⁽¹⁾\n### With WebGL support by Two.js\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":695,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"md`\n ### Points generated: ${points.length} ⁽²⁾\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"viewof s = slider({\n min: 5, \n max: 400, \n step: 1, \n value: 20,\n title: 'Cell Spacing', \n description: `Average cell spacing at initial compilation`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"viewof l = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 32,\n title: 'Displacement', \n description: `Threshold of overlapping cells`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"viewof v = slider({\n min: 1, \n max: 30, \n step: 1, \n value: 12,\n title: 'Velocity', \n description: `Speed of waving animation`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"viewof f = slider({\n min: 0, \n max: 1, \n step: 0.01, \n value: 0.13,\n title: 'Frequence', \n description: `...`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"viewof r = slider({\n min: 0, \n max: 200, \n step: 1, \n value: 5,\n title: 'Dot size', \n description: `Adjust the average radius of a rendered cell`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"md`\n## Helper functions and variables\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"pickColor = (n = 0) => {\n return d3.interpolateViridis(n)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"normalize = (value, min = -1, max = 1) => {\n return (value - min) / (max - min) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"points = d3.hexbin()\n .radius(s)\n .extent([[-l, -l], [width + l, height + l]])\n .centers()","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"height = width / 16 * 9","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"noise = {\n const simplex = new (await require(\"simplex-noise@2\"))\n return simplex.noise3D.bind(simplex)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"md`\n## Imports of external libraries\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"d3 = require(\"d3-hexbin@0.2\", \"d3-scale-chromatic@1.5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"import { slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"Two = require(\"two.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"md`## Footnotes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"md`\n\n ¹ Adding to [David Reed’s notebook](/@dvreed77/shimmy) and [Mike Bostock's notebook](/@mbostock/shimmy).\n
\n ² Generated points does not mean _rendered_ points. Rendered points are way fewer.\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}