2b:null 2c:["$","title",null,{"children":"The Nature of Code - 4 - Particle Systems | Adam Jurczyk | Observable"}] 31:T69c,{ const spaceship = basicMover( { x: 300, y: 200, vMax: 2, fill: "#aff", draw: drawSpaceship, w: 32, h: 32 }, angularVelocity(), clampAngularVelocity(0.02), angularAcceleration(), spaceshipKeyboardSteering(0.01, 0.0005) // debug ); const fire = entity( position(100, 100), attachTo(spaceship, vec2(-25, 0)), particleEmitter({ perFrame: 3, emit: (emitter) => { const acc = emitter.attachTo?._target?.acceleration?.lengthSq() ?? 1; if (acc <= 0) return null; const spread = random(-0.5, 0.5); const a = (emitter.rotation ?? 0) + PI + spread; return new SpaceshipFireParticle( emitter.position, 80 * (1 - Math.abs(spread)), vec2(random(1, 2), 0).rotateAround(vec2.ZERO, a), random(5, 10) ); } }) ); const canvasSize = vec2(width, 400); return sim({ visibility, width: canvasSize.x, height: canvasSize.y, bgColor: "#000", keyboardCapturer: spaceshipKeyboard, systems: [ spaceshipKeyboardSteeringSys, movement, angularMovement, overflowWrap, moveAttached, particleEmitterSystem, renderer ], entities: [ entity({ _stars: Array.from({ length: 100 }, () => vec2().random().multiply(canvasSize) ), customRenderer: (ctx, ent) => { ctx.fillStyle = "#fffa"; let i = ent._stars.length; while (i--) { const { x, y } = ent._stars[i]; ctx.fillRect(x, y, 2, 2); } } }), spaceship, fire ] }); }32:T5b6,breakFragile = (env, ents) => { for (const ent of ents) { if (ent.fragile?.breaking) { const shatter = ent.rect ? shatterRect( ent.rect, ent.fragile.breaking.clone().sub(vec2(ent.rect.x, ent.rect.y)) ) : shatterPolygon(ent.polygon, ent.fragile.breaking.clone()); const shatterPos = ent.fragile.breaking .clone() .rotateAround(vec2.ZERO, ent.rotation) .add(ent.position); const ff = 100; const schreds = shatter.cells.map((cell) => { const { x, y } = cell.pos .clone() .add(shatterPos) .rotateAround(shatterPos, ent.rotation); const ffc = (ff / cell.pos.length()) * 0.3; return basicMover( { x, y, fill: ent.graphics.fillColor, draw: drawPolygon }, angularVelocity(ent.angularVelocity), clampAngularVelocity(0.01), angularAcceleration(ffc * Math.sign(cell.pos.x)), polygon(cell.poly), rotation(ent.rotation), killOnStageExit(), fragile(), force( cell.pos .clone() .normalize() .rotateAround(vec2.ZERO, ent.rotation) .multiplyScalar(ffc) .add(ent.velocity) ) ); }); env.killEntity(ent); env.addEntity(ent.id.idx, ...schreds); } } }33:T404,{ let s = shatterRect({ w: 300, h: 200 }, { x: 150, y: 150 }); return justCanvas({ width, height: 240, visibility }, (ctx, { mouse }) => { if (mouse.click) { s = shatterRect({ w: 300, h: 200 }, mouse.pos.clone().subScalar(20)); } const spos = vec2(20).add(s.pos); ctx.save(); ctx.translate(20, 20); ctx.strokeStyle = "#aaa"; ctx.lineWidth = 1; ctx.rect(0, 0, 300, 200); ctx.stroke(); ctx.restore(); ctx.save(); ctx.translate(spos.x, spos.y); for (const cell of s.cells) { const { pos, poly } = cell; ctx.save(); ctx.translate(pos.x, pos.y); ctx.strokeStyle = "#000"; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(poly[0].x, poly[0].y); for (let pi = 1; pi < poly.length; ++pi) { ctx.lineTo(poly[pi].x, poly[pi].y); } ctx.stroke(); ctx.fillStyle = "#f00"; ctx.beginPath(); ctx.arc(0, 0, 3, 0, TWO_PI); ctx.fill(); ctx.restore(); } ctx.restore(); }); }34:T892,{ const basePolyPos = vec2(100, 100); const ent = rect(-30, -20, 200, 100); const basePoly = [ vec2(-32, 62), vec2(-14, -29), vec2(147, -58), vec2(163, 107), vec2(42, 111) ]; console.log("bp", basePoly); let shattered = shatterPolygon(basePoly, vec2(67, 31)); console.log("points", shattered); return justCanvas({ width, height: 240, visibility }, (ctx, { mouse }) => { if (mouse.click) { if (mouse.shift) { basePoly.push(mouse.pos.clone().sub(basePolyPos)); shattered = null; } else if (mouse.alt) { basePoly.length = 0; shattered = null; } else { shattered = shatterPolygon( basePoly, mouse.pos.clone().sub(basePolyPos) ); } } ctx.save(); ctx.translate(basePolyPos.x, basePolyPos.y); if (basePoly.length > 2) { ctx.strokeStyle = "#aaa"; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(basePoly[0].x, basePoly[0].y); for (let i = 1; i < basePoly.length; ++i) { ctx.lineTo(basePoly[i].x, basePoly[i].y); } ctx.closePath(); ctx.stroke(); } for (const vert of basePoly) { ctx.fillStyle = "#00f"; ctx.beginPath(); ctx.arc(vert.x, vert.y, 3, 0, TWO_PI); ctx.fill(); } if (shattered) { for (const vert of shattered.points) { ctx.fillStyle = "#aaa"; ctx.beginPath(); ctx.arc(...vert, 3, 0, TWO_PI); ctx.fill(); } ctx.save(); ctx.translate(shattered.pos.x, shattered.pos.y); for (const cell of shattered.cells) { const poly = cell.poly; ctx.save(); ctx.translate(cell.pos.x, cell.pos.y); ctx.strokeStyle = "#000"; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(poly[0].x, poly[0].y); for (let i = 1; i < poly.length; ++i) { ctx.lineTo(poly[i].x, poly[i].y); } ctx.closePath(); ctx.stroke(); ctx.fillStyle = "#f00"; ctx.beginPath(); ctx.arc(0, 0, 3, 0, TWO_PI); ctx.fill(); ctx.restore(); } ctx.restore(); } ctx.restore(); }); }35:[{"id":"1a6529c4c558518b44db9a6d6acfe85e249344198ac6aa95054557149a165ef1474ab9d7c67595f10c907790c04cf7d9dc7a61021e558f51ed4ed8017783d238","href":"https://static.observableusercontent.com/files/1a6529c4c558518b44db9a6d6acfe85e249344198ac6aa95054557149a165ef1474ab9d7c67595f10c907790c04cf7d9dc7a61021e558f51ed4ed8017783d238","name":"particles.png","type":"image/png","lastModified":1711750912596.843,"size":9968}] 2f:{"id":"de3c036c5c88c08f","slug":"the-nature-of-code-4-particle-systems","title":"The Nature of Code - 4 - Particle Systems","thumbnail":"76d19d0dcc82c01db35b5a8df6d0b41308e064094bb342cc0ce5c607c4411708","access_level":"public","create_time":"$D2024-03-08T22:24:45.313Z","update_time":"$D2025-02-26T17:01:29.645Z","view_time":null,"first_public_time":"$D2024-04-02T10:48:05.168Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e59cfabcc8cf2053","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":"starter_2024"},"version":1660,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"316e3341b439aa13","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":null}],"members":[{"type":"individual","id":"316e3341b439aa13","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":null,"role":"editor"},{"type":"team","id":"e59cfabcc8cf2053","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"fe7a597113ba6d01","slug":"the-nature-of-code","title":"The Nature of Code","owner":{"id":"e59cfabcc8cf2053","login":"ajur","name":"Adam Jurczyk"}},"type":"notebook","body":{"title":"The Nature of Code - 4 - Particle Systems","cells":[{"id":0,"value":"# The Nature of Code - 4 - Particle Systems\n\n_Deeper into dynamic code, with https://natureofcode.com/ _\n\nThis notebook follows fourth chapter https://natureofcode.com/particles/\n\n> _A particle system is a collection of many, many minute particles that together represent a fuzzy object. Over a period of time, particles are generated into a system, move and change from within the system, and die from the system._\n> \n> -- _William T. Reeves_\n\n---\n\nIn the book this chapter is a bit strange. Not as beefy as other chapters, and not as detailed in terms of introduced concepts and mechanics. Actually, most of the chapter could be treated like introduction to programming, teaching about arrays, loops and OOP concepts.\n\nAfter 4 chapters dense of physics, formulas and how to use it, this one feels like telling us \"so, time for little break and some fun with what we learned so far\"... so, lets do it!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":20,"value":"## A single particle\n\nSingle particle is similar to basic _Mover_ from chapter 2. We also add in concept of _lifespan_ to track how long particle will be drawn.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":77,"value":"{\n let particle = null;\n const forces = [vec2(0, 0.1)];\n return justCanvas({ width, visibility }, (ctx) => {\n if (!particle || particle.isDead) {\n particle = new BasicParticle(vec2(200, 50), 120, vec2(random(-1, 1), -2));\n }\n\n particle.run(ctx, forces);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"class BasicParticle {\n constructor(position, lifespan, velocity = vec2(), size = 5) {\n this.pos = position.clone();\n this.vel = velocity;\n\n this.lifespan = lifespan;\n this.life = lifespan;\n\n this.size = size;\n }\n\n get isDead() {\n return this.life <= 0;\n }\n get isAlive() {\n return this.life > 0;\n }\n\n run(ctx, forces, ageBy) {\n if (this.isDead) return;\n\n this.update(forces, ageBy);\n this.draw(ctx);\n }\n\n update(forces = [], ageBy = 1) {\n // as acc = sum(forces), and next vel = old vel + acc, lets short it a bit\n for (const f of forces) this.vel.add(f);\n\n this.pos.add(this.vel);\n\n this.life -= ageBy;\n }\n\n draw(ctx) {\n ctx.globalAlpha = this.life / this.lifespan;\n ctx.fillStyle = \"#aaf\";\n ctx.strokeStyle = \"#000\";\n ctx.beginPath();\n ctx.arc(this.pos.x, this.pos.y, this.size, 0, TWO_PI);\n ctx.fill();\n ctx.stroke();\n ctx.globalAlpha = 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"### Exercise 4.1\n_Create a run() method in the Particle class that handles update(), show(), and applyForce(). What are the pros and cons of this approach?_\n\n### Exercise 4.2\n_Add angular velocity (rotation) to the particle, and design a particle that isn’t a circle so its rotation is visible._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":143,"value":"{\n let particle;\n return justCanvas({ width, visibility }, (ctx) => {\n if (!particle || particle.isDead) {\n particle = new SquareRotatingParticle(\n vec2(200, 50),\n 255,\n vec2(random(-1, 1), -2)\n );\n }\n\n particle.run(ctx, [vec2(0, 0.1)], 2);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"// name of this class pretty much summarizes why inheritance is not a great way to do this -_-\nclass SquareRotatingParticle extends BasicParticle {\n constructor(...args) {\n super(...args);\n this.size = 10;\n this.rotation = Math.random() * TWO_PI;\n this.angVel = 0;\n }\n\n update(...args) {\n super.update(...args);\n this.angVel = this.vel.x * 0.1;\n this.rotation += this.angVel;\n }\n\n draw(ctx) {\n ctx.save();\n ctx.globalAlpha = this.life / this.lifespan;\n ctx.fillStyle = \"#aaa\";\n ctx.strokeStyle = \"#000\";\n ctx.translate(this.pos.x, this.pos.y);\n ctx.rotate(this.rotation);\n ctx.beginPath();\n ctx.rect(-this.size, -this.size, this.size * 2, this.size * 2);\n ctx.fill();\n ctx.stroke();\n ctx.restore();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":186,"value":"## A Particle Emitter\n\nObject responsible for emitting new particles, holding its state and updating according to its rules and setup.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":195,"value":"{\n const emitter = new BasicEmitter(vec2(200, 50));\n return justCanvas({ width, visibility }, (ctx) => {\n emitter.run(ctx);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"class BasicEmitter {\n constructor(pos) {\n this.pos = pos;\n this.particles = [];\n this.forces = [vec2(0, 0.05)];\n }\n\n run(ctx) {\n this.particles.push(\n new BasicParticle(this.pos, 200, vec2(random(-1, 1), random(-2, -1)))\n );\n\n let i = this.particles.length;\n while (i--) {\n const pp = this.particles[i];\n pp.run(ctx, this.forces);\n\n if (pp.isDead) this.particles.slice(i, 1);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"That is working nice, but for next exercises, more beneficial would be for me to make emiter as an entity to my tiny ecs.\n\nI still keep particle as separate object (class) not managed by ecs, for both practical and optimisation reasons.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":428,"value":"### Exercise 4.3\n\n_What if the emitter moves? Can you emit particles from the mouse position, or use the concepts of velocity and acceleration to move the system autonomously?_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":213,"value":"sim({\n width,\n height: 300,\n visibility,\n systems: [\n overflowWrap,\n noiseAcceleration,\n movement,\n angularMovement,\n particleEmitterSystem,\n renderer\n ],\n entities: [\n basicMover(\n { x: 200, y: 100, vMax: 5, r: 20, draw: drawArrow },\n rotateWithDirection,\n noiseAcc({ speed: 0.1 }),\n particleEmitter({\n perFrame: 2,\n emit: (emitter) => {\n const a = (emitter.rotation ?? 0) + PI + random(-0.5, 0.5);\n return new BasicParticle(\n emitter.position,\n 60,\n vec2(random(1, 2), 0).rotateAround(vec2.ZERO, a)\n );\n },\n forces: [vec2(0, 0.1)]\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"particleEmitter = ({emit, perFrame = 1, forces = [], dieAfter = Infinity} = {}) => ({\n particleEmitter: {\n _particles: [],\n emit,\n perFrame,\n forces,\n dieAfter\n },\n customRenderer: renderParticles\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"renderParticles = (ctx, ent, env) => {\n const particles = ent.particleEmitter?._particles;\n if (particles) {\n let i = particles.length;\n while (i--) particles[i].draw(ctx);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"particleEmitterSystem = (env, ents) => {\n for (const ent of ents) {\n if (ent.particleEmitter && ent.position) {\n const { _particles, emit, perFrame, forces, dieAfter } =\n ent.particleEmitter;\n let i = dieAfter < perFrame ? dieAfter : perFrame;\n ent.particleEmitter.dieAfter -= i;\n while (i--) {\n const p = emit(ent);\n if (p) _particles.push(p);\n }\n\n i = _particles.length;\n while (i--) {\n _particles[i].update(forces);\n if (_particles[i].isDead) _particles.splice(i, 1);\n }\n\n if (ent.particleEmitter.dieAfter <= 0 && _particles.length === 0) {\n env.killEntity(ent);\n }\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":433,"value":"### Exercise 4.4\n\n_Building off Chapter 3’s Asteroids example, use a particle system to emit particles from the ship’s thrusters whenever a thrust force is applied. The particles’ initial velocity should be related to the ship’s current direction._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":436,"value":"spaceshipKeyboard = KeyboardCapturer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":439,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":492,"value":"class SpaceshipFireParticle extends BasicParticle {\n draw(ctx) {\n ctx.globalAlpha = this.life / this.lifespan;\n ctx.fillStyle = `hsl(${0 + this.life} 100% ${30 + 60 * ctx.globalAlpha}%)`;\n ctx.beginPath();\n ctx.arc(this.pos.x, this.pos.y, this.size, 0, TWO_PI);\n ctx.fill();\n ctx.globalAlpha = 1;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"drawSpaceship = (ctx, ent) => {\n ctx.beginPath();\n ctx.moveTo(25, 0);\n ctx.lineTo(-15, 20);\n ctx.lineTo(-15, -20);\n ctx.closePath();\n ctx.stroke();\n ctx.fill();\n\n ctx.fillRect(-18, -10, 3, 20);\n ctx.strokeRect(-18, -10, 3, 20);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":590,"value":"## A System of Emitters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":594,"value":"### Exercise 4.5\n\n_Rewrite Example 4.4 so each particle system doesn’t live forever. Set a limit on the number of particles an individual system can generate. Then, when a particle system is empty (has no particles left), remove it from the emitters array._\n\nOr even better - lets put an emitter on every click.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":610,"value":"sim({\n width,\n height: 300,\n visibility,\n systems: [addEmitterOnMouseClick, particleEmitterSystem, renderer],\n entities: []\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":649,"value":"addEmitterOnMouseClick = (env) => {\n if (env.mouse.click) {\n env.addEntity(\n entity(\n position(env.mouse.pos),\n rotation(-HALF_PI),\n particleEmitter({\n perFrame: 2,\n dieAfter: 500,\n emit: (emitter) => {\n const a = emitter.rotation + random(-0.3, 0.3);\n return new BasicParticle(\n emitter.position,\n 250,\n vec2(random(0.4, 0.8), 0).rotateAround(vec2.ZERO, a)\n );\n },\n forces: [vec2(0, 0.01)]\n })\n )\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":674,"value":"### Exercise 4.6\n\n_Create a simulation of an object shattering into many pieces. How can you turn one large shape into many small particles? Can you create several large shapes on the screen that each shatter when clicked?_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":879,"value":"sim({\n height: 400,\n width,\n visibility,\n systems: [\n onEntityClick,\n breakFragile,\n movement,\n angularMovement,\n overflowKill,\n renderer,\n (env, ents) => {\n if (env.countEntities() < 2 || (env.mouse.click && !env.mouse.handled)) {\n env.addEntity(\n basicMover(\n {\n x: random(0, 300),\n y: random(50, 250),\n w: random(200, 400),\n h: random(100, 200),\n a: random(0, TWO_PI),\n fill: [\"#faa\", \"#afa\", \"#aaf\", \"#ffa\", \"#faf\", \"#aff\"][\n d3.randomInt(6)()\n ]\n },\n velocity(vec2(random(0.5, 1.5), random(-0.2, 0.2))),\n angularVelocity(random(-0.01, 0.01)),\n clampAngularVelocity(0.01),\n fragile(),\n killOnStageExit()\n )\n );\n }\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1184,"value":"So? Is it working well enough?\n\nBuuut.. truth be told, in the end I didn't used particle nor particle emitter, just plain entities from my ecs. \n\nIf you want to break some more rects, new will appear when there is no more left. Or just click on empty space to add more.\n\nIf you tried to click on one of the broken pieces, you'll notice the breaking pattern is a bit different, below you can find out what methods and why I used for splitting.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1071,"value":"fragile = () => ({\n fragile: {\n breaking: null\n },\n onClick: (ent, pos) => {\n ent.fragile.breaking = pos;\n return true;\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1073,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1143,"value":"#### Shattering methods\n\nFor braking rectangle we can use [Voronoi tesalation](https://d3js.org/d3-delaunay/voronoi) from D3.\n\nPoints for voronoi diagram are picked from normal distribution around click point, thus we have lot of small pieces in the center of breaking point, and less but much bigger pieces further away.\n\nClick somewhere to see example how the rect will be shattered. Note, that red dots are not representing actual points from Voronoi tessellation, but rather a centroids of given regions. They were more useful for me, as an actual center point of a new entity.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":947,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":920,"value":"shatterRect = (shatterRect, shatterPoint) => {\n const { x: px, y: py } = shatterPoint;\n const { w, h } = shatterRect;\n const n = Math.floor(Math.min(w, h) / 4);\n const rndX = d3.randomNormal(px, n * 0.7);\n const rndY = d3.randomNormal(py, n * 0.7);\n const points = d3\n .range(n)\n .map(() => [Math.round(rndX()), Math.round(rndY())])\n .filter(([x, y]) => x > 0 && x < w && y > 0 && y < h);\n\n const delaunay = d3.Delaunay.from(points);\n const voronoi = delaunay.voronoi([0, 0, w, h]);\n\n const polys = points\n .map((p, idx) => {\n const poly = voronoi.cellPolygon(idx);\n return {\n poly,\n vp: p,\n cp: poly?.length > 2 ? d3.polygonCentroid(poly) : null\n };\n })\n .filter(({ cp }) => cp != null);\n\n const cells = polys.map(({ cp, poly }) => {\n const cpv = vec2(...cp);\n return {\n poly: poly.map(([x, y]) => vec2(x, y).sub(cpv)),\n pos: cpv.sub(shatterPoint)\n };\n });\n\n return {\n pos: shatterPoint,\n polys,\n cells\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1327,"value":"But Voronoi lib from d3 is only good for rects. And trying to add support for polygons was waaay outside of the scope. But looking at the d3 docs, we can see that voronoi is part of [Delaunay triangulations](https://d3js.org/d3-delaunay/delaunay) - and it looked like exactly the thing I could use.\n\nClick somewhere to see example of shattering. Click+Alt clears polygon. Click+Shift adds new polygon point.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1168,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1193,"value":"shatterPolygon = (polygon, shatterPoint) => {\n const { x: px, y: py } = shatterPoint;\n const verts = polygon.map((v) => [v.x, v.y]);\n\n const n = Math.floor(d3.polygonLength(verts) * 0.05);\n const rndX = d3.randomNormal(px, n * 0.7);\n const rndY = d3.randomNormal(py, n * 0.7);\n const points = d3\n .range(n)\n .map(() => [Math.round(rndX()), Math.round(rndY())])\n .filter((p) => d3.polygonContains(verts, p));\n\n const delaunay = d3.Delaunay.from([...verts, ...points]);\n\n const triangles = [...delaunay.trianglePolygons()];\n\n const cells = triangles\n .map((poly) => ({ poly, cp: d3.polygonCentroid(poly) }))\n .map(({ cp, poly }) => {\n const cpv = vec2(...cp);\n return {\n poly: poly.map(([x, y]) => vec2(x, y).sub(cpv)),\n pos: cpv.sub(shatterPoint)\n };\n });\n\n console.log(\"shatter polygon\", polygon, cells);\n\n return {\n points,\n cells,\n pos: shatterPoint\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1433,"value":"## Image Textures and Additive Blending","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1435,"value":"### Exercise 4.11\n\n_Try creating other textures for different types of effects. Can you make your particle system look like fire instead of smoke?_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1506,"value":"{\n const createEmitter = (pos, sprite, blendMode, rotationRange) =>\n entity(\n position(pos),\n rotation(-HALF_PI),\n particleEmitter({\n perFrame: 1,\n emit: (emitter) => {\n const a = emitter.rotation + random(-0.5, 0.5);\n return new SpriteParticle(sprite, emitter.position, {\n velocity: vec2(random(0.4, 0.7), 0).rotateAround(vec2.ZERO, a),\n blendMode,\n angularVelocity: random(-rotationRange, rotationRange)\n });\n },\n forces: [vec2(-0.005, 0)]\n })\n );\n return sim({\n width,\n height: 300,\n bgColor: \"#000\",\n visibility,\n systems: [addEmitterOnMouseClick, particleEmitterSystem, renderer],\n entities: [\n createEmitter(vec2(250, 250), whiteCircleSprite),\n createEmitter(vec2(450, 250), whiteSoftCircleSprite),\n createEmitter(vec2(650, 250), hotCircleSprite, \"lighter\"),\n createEmitter(vec2(850, 250), starSprite, \"screen\", 0.05)\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1587,"value":"First two are based on Figure 4.7 and Example 4.8. \nThird one is attempt at fire, with special texture and additive blending. \nLast one has rotating stars with _screen_ blending, just for fun.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1522,"value":"class SpriteParticle extends BasicParticle {\n constructor(\n sprite,\n position,\n {\n lifespan = 255,\n velocity = vec2(),\n size = 32,\n blendMode = null,\n angularVelocity = 0\n } = {}\n ) {\n super(position, lifespan, velocity, size);\n this.blendMode = blendMode;\n this.sprite = sprite;\n this.scale = vec2(this.size / sprite.width, this.size / sprite.height);\n this.angle = 0;\n this.angularVelocity = angularVelocity;\n }\n update(...args) {\n super.update(...args);\n this.angle += this.angularVelocity;\n }\n draw(ctx) {\n ctx.save();\n ctx.translate(this.pos.x, this.pos.y);\n ctx.rotate(this.angle);\n if (this.blendMode) ctx.globalCompositeOperation = this.blendMode;\n ctx.globalAlpha = this.life / this.lifespan;\n this.sprite.draw(ctx, vec2.ZERO, this.scale);\n ctx.restore();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":27,"value":"import {\n vec2,\n PI,\n TWO_PI,\n HALF_PI,\n random,\n justCanvas,\n sim,\n entity,\n basicMover,\n position,\n rotation,\n graphics,\n drawArrow,\n rect,\n circle,\n polygon,\n drawPolygon,\n movement,\n velocity,\n renderer,\n rotateWithDirection,\n angularVelocity,\n clampAngularVelocity,\n angularAcceleration,\n angularMovement,\n globalForces,\n noiseAcc,\n noiseAcceleration,\n overflowWrap,\n overflowKill,\n killOnStageExit,\n followMouseAcceleration,\n accToMouse,\n force,\n onClick,\n onEntityClick,\n KeyboardCapturer,\n attachTo,\n moveAttached,\n pointInEntity,\n debug,\n stateDump,\n ImgSprite\n} from \"@ajur/the-nature-of-code-tools\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":445,"value":"import {\n spaceshipKeyboardSteeringSys,\n spaceshipKeyboardSteering\n} from \"@ajur/the-nature-of-code-3-oscillation\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1439,"value":"particlesTexture = FileAttachment(\"particles.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1451,"value":"particlesSprite = (col, row) =>\n ImgSprite.fromTile(particlesTexture, col, row, 64)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1453,"value":"whiteCircleSprite = particlesSprite(0, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1457,"value":"whiteSoftCircleSprite = particlesSprite(1, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1461,"value":"hotCircleSprite = particlesSprite(0, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1464,"value":"starSprite = particlesSprite(1, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"