29:null 2a:["$","title",null,{"children":"Waving Simplex Noise Particles (1) | Michael Czechowski | Observable"}] 2f: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 }30: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 }31:[] 2d:{"id":"f2df6ed293b5220d","slug":"waving-simplex-noise-particles1","title":"Waving Simplex Noise Particles (1)","thumbnail":"7d2d8863004493b6bc3e337c9e34b12166faeb1602ab7ce0faf6937cd1038efd","access_level":"public","create_time":"$D2019-10-11T08:13:21.233Z","update_time":"$D2019-10-11T19:16:37.672Z","view_time":null,"first_public_time":"$D2019-10-11T08:22:21.494Z","has_unpublished_edits":null,"fork":{"id":"dfe7f80a171a050a","slug":"waving-simplex-noise-particles","title":"Waving Simplex Noise Particles","owner":{"id":"efb03a2abfc435dc","login":"nextlevelshit","name":"Michael Czechowski"}},"stars":2,"starred":false,"owner":{"type":"team","id":"efb03a2abfc435dc","login":"nextlevelshit","name":"Michael Czechowski","avatar_url":"https://avatars-next.observableusercontent.com/0ab491180117ece40407284b0cbf0f672c3225f52d90359efbce06a6d70ff237","tier":"starter_2024"},"version":791,"publish_version":791,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bdf39511a07f400","login":"nextlevelshit","name":"Michael Czechowski","avatar_url":"https://avatars-next.observableusercontent.com/0ab491180117ece40407284b0cbf0f672c3225f52d90359efbce06a6d70ff237","tier":null}],"members":[{"type":"individual","id":"0bdf39511a07f400","login":"nextlevelshit","name":"Michael Czechowski","avatar_url":"https://avatars-next.observableusercontent.com/0ab491180117ece40407284b0cbf0f672c3225f52d90359efbce06a6d70ff237","tier":null,"role":"editor"}],"comments":[{"id":"dc82743d3842af32","reply_to_id":null,"content":"Currently broken, needs to be pinned to \"two.js@0.7.13\"","create_time":"$D2022-01-20T00:51:29.195Z","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}},{"id":"60aeb9625bb3fb2a","reply_to_id":"dc82743d3842af32","content":"Since two.js switched to es6 module export it seems we need to use dynamic imports like this `Two = (await import(\"https://cdn.skypack.dev/two.js@0.7\")).default`\n\neg. https://observablehq.com/@phocks/two-js-starfield-experiment#Two","create_time":"$D2022-09-26T01:04:23.009Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"b33d0193559da90f","login":"phocks","name":"Joshua Byrd","avatar_url":"https://avatars-next.observableusercontent.com/7236cb241197306d9aacd9555cbf1d77461b5e74cfdd73beff07a9bc5173ba11","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"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","output":"$undefined","database":"$undefined"},{"id":695,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"md`\n ### Points generated: ${points.length} ⁽²⁾\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":344,"value":"md`\n## Helper functions and variables\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":89,"value":"height = width / 16 * 9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":342,"value":"md`\n## Imports of external libraries\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":340,"value":"import { slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"Two = require(\"two.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"md`## Footnotes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"