2f:T589,drawParticles = regl({ vert: ` precision mediump float; attribute float theta, speed, currentR; varying float cntR; uniform float pointSize; uniform float time; void main() { cntR = currentR; float xPos = currentR * cos(-time * speed + theta); float yPos = currentR * sin(-time * speed + theta); gl_Position = vec4(xPos, yPos, 0, 1.0); gl_PointSize = currentR < 0.5 ? 2.6 : pointSize; }`, frag: ` precision mediump float; varying float cntR; void main() { gl_FragColor = cntR >= 0.5 ? vec4(1, 1, 1, 0.88) : vec4(0.682, 0.859, 0.278, 0.95); }`, attributes: { // radius: radiusBuffer, theta: thetaBuffer, speed: speedBuffer, // radius2: radius2Buffer, currentR: currentRBuffer }, uniforms: { pointSize: 1.3, time: ({ tick }) => tick * 0.4 }, count: count, primitive: "points", blend: { enable: true, func: { src: "src alpha", dst: "one minus src alpha" }, equation: "add", color: [0, 0, 0, 0] } // blend: { // enable: true, // func: { // srcRGB: "src alpha", // srcAlpha: "src alpha", // dstRGB: "one minus src alpha", // dstAlpha: "one minus src alpha" // }, // equation: { // rgb: "add", // alpha: "add" // }, // color: [0, 0, 0, 0] // } })30:[] 2d:{"title":"regl - particles event","cells":[{"id":0,"value":"# regl - particles event","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"- Inspired by this [Pudding article](https://pudding.cool/2017/01/making-it-big/)\n- Particles move along a circle with a different radius depending on a step","pinned":false,"hidden":false,"mode":"md"},{"id":167,"value":"Choose a step:\n","pinned":false,"hidden":false,"mode":"html"},{"id":291,"value":".","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"canvas = DOM.canvas(height, height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"regl.frame(() => {\n //////////// update data via buffer\n const step = +document.querySelector(\"#step\").value;\n\n data.forEach((d) => {\n const targetR = step === 1 ? d.radius : d.radius2;\n d.currentR += 0.002 * Math.sign(targetR - d.currentR);\n });\n\n updateBuffer(\n currentRBuffer,\n data.map((d) => d.currentR)\n );\n\n //////////// update rendering\n regl.clear({\n color: [0, 0, 0, 1],\n depth: 1\n });\n\n drawParticles();\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"updateBuffer = (buffer, data) => {\n buffer(data);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"## Constants","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"height = 480","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"radius = 0.70","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"currentRBuffer = regl.buffer(data.map((d) => d.currentR))","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"radius2Buffer = regl.buffer(data.map(d => d.radius2));","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"speedBuffer = regl.buffer(data.map(d => d.speed));","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"thetaBuffer = regl.buffer(data.map(d => d.theta));","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"radiusBuffer = regl.buffer(data.map(d => d.radius));","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"data = d3.range(count).map((i) => {\n const currentR = radius + (Math.random() * 2 - 1) * 0.1;\n\n return {\n radius: currentR,\n theta: 2 * Math.PI * Math.random(), // y0 고정\n speed: Math.random() * 0.02,\n radius2:\n i % 7 < 1\n ? 0.35 + (Math.random() * 2 - 1) * 0.1\n : radius + (Math.random() * 2 - 1) * 0.1,\n currentR: currentR\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"count = 3000","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"## Library importing","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"regl = (await import(\"https://cdn.skypack.dev/regl@2\")).default({ canvas })","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}