25:["$","title",null,{"children":"Waving Simplex Noise Particles (1) | inoculate_media | Observable"}] 49: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 }4a: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 }4b:[] 29:{"id":"45994bdc2c2b40c9","slug":null,"title":"Waving Simplex Noise Particles (1)","thumbnail":"e39434fc72c4699e61116d2bd6ebd6a4618ec99f025e9326d301cd8ba1929276","access_level":"public","create_time":"$D2023-08-03T04:02:14.673Z","update_time":"$D2023-08-03T04:02:46.374Z","view_time":null,"first_public_time":"$D2023-08-03T04:02:14.673Z","has_unpublished_edits":null,"fork":{"id":"f2df6ed293b5220d","slug":"waving-simplex-noise-particles1","title":"Waving Simplex Noise Particles (1)","owner":{"id":"efb03a2abfc435dc","login":"nextlevelshit","name":"Michael Czechowski"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5be65f59a7d4414c","login":"inoculate","name":"inoculate_media","avatar_url":"https://avatars-next.observableusercontent.com/a463960a3665d015e1f951ffefd56c80438990e8ca3c81da33076759d509ec50","tier":"starter_2024","bio":"Video artist and data nerd,","following":false},"version":792,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a9b2751079d79b6","login":"inoculate23","name":"Craig Ellenwood","avatar_url":"https://avatars-next.observableusercontent.com/655e21a46fb0887d567d2c63550ddebb4fff07e632cf340edf07bac49c519fac","tier":null,"bio":"I make art, code and applications that integrate ai and machine learning for musicians and artists. My own music project is Les Barons | The Barons","following":false}],"members":[{"type":"team","id":"5be65f59a7d4414c","login":"inoculate","name":"inoculate_media","avatar_url":"https://avatars-next.observableusercontent.com/a463960a3665d015e1f951ffefd56c80438990e8ca3c81da33076759d509ec50","tier":"starter_2024","role":"editor"},{"type":"individual","id":"4a9b2751079d79b6","login":"inoculate23","name":"Craig Ellenwood","avatar_url":"https://avatars-next.observableusercontent.com/655e21a46fb0887d567d2c63550ddebb4fff07e632cf340edf07bac49c519fac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"md`\n## Helper functions and variables\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"pickColor = (n = 0) => {\n return d3.interpolateViridis(n)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"normalize = (value, min = -1, max = 1) => {\n return (value - min) / (max - min) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"height = width / 16 * 9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md`\n## Imports of external libraries\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"d3 = require(\"d3-hexbin@0.2\", \"d3-scale-chromatic@1.5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"import { slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"three = require(\"three.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"md`## Footnotes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null