2b:null 2c:["$","title",null,{"children":"The Nature of Code - 6 - Physics Libraries | Adam Jurczyk | Observable"}] 31:T5b9,{ example_6_1_2_rerun; const height = 300; const box = Object.defineProperties( entity( { body: Matter.Bodies.rectangle(100, 100, 50, 50, { friction: 0.01, restitution: 0.75 }) }, rect(-25, -25, 50, 50), graphics() ), { position: { get() { return this.body.position; } }, rotation: { get() { return this.body.angle; } } } ); Matter.Body.setVelocity(box.body, { x: 5, y: 0 }); Matter.Body.setAngularVelocity(box.body, 0.1); const ground = Object.assign( { get position() { return this.body.position; }, get rotation() { return this.body.angle; } }, entity( { body: Matter.Bodies.rectangle(width / 2, height - 5, width, 10, { isStatic: true }) }, rect(-width / 2, -5, width, 10), graphics({ fillColor: "#3a3" }) ) ); const simpleMatterSys = { setup(env, ents) { env.engine = Matter.Engine.create(); for (const ent of ents) { if (ent.body) Matter.Composite.add(env.engine.world, ent.body); console.log(ent.body); } }, update(env, ents) { Matter.Engine.update(env.engine, env.clock.delta); } }; return sim({ visibility, width, height: 300, systems: [simpleMatterSys, renderer], entities: [box, ground] }); }32:T49d,{ const height = 300; const createBox = ({ pos, w = 20, h = 20, a = 0 } = {}) => { const ent = entity( { body: Matter.Bodies.rectangle(pos.x, pos.y, w, h, { friction: 0.01, restitution: 0.75, angle: a }) }, rect(-w / 2, -h / 2, w, h), graphics(), killOnStageExit() ); Object.defineProperties(ent, { position: { get() { return this.body.position; } }, rotation: { get() { return this.body.angle; } } }); return ent; }; let timeFromAdded = 0; const addBoxSys = (env) => { if (env.mouse.down) { timeFromAdded += env.clock.delta; if (timeFromAdded > 10) { timeFromAdded = 0; const box = createBox({ pos: env.mouse.pos, w: random(16, 24), h: random(16, 24), a: random(TWO_PI) }); Matter.Composite.add(env.engine.world, box.body); env.addEntity(box); } } }; return sim({ visibility, width, height: 300, systems: [addBoxSys, matterSys, renderer, overflowKill, showStats] }); }33:T561,setupMatterSys = ({ onSetup, gravity } = {}) => ({ setup(env, ents) { env.engine = Matter.Engine.create(); if (gravity?.x !== undefined) { env.engine.gravity = gravity; } for (const ent of ents) { if (ent.body) Matter.Composite.add(env.engine.world, ent.body); if (ent.constraint) Matter.Composite.add(env.engine.world, ent.constraint); } onSetup?.(env, ents, env.engine); }, update(env, ents) { for (let i = 0; i < ents.length; ++i) { const ent = ents[i]; if (ent.body && ent.force && !vec2.ZERO.equals(ent.force)) { Matter.Body.applyForce(ent.body, ent.body.position, ent.force); ent.force.set(0, 0); } } Matter.Engine.update(env.engine, env.clock.delta); }, postUpdate(env, ents) { for (let i = 0; i < ents.length; ++i) { const ent = ents[i]; if (ent.dead) { if (ent.body) { Matter.Composite.remove(env.engine.world, ent.body); } else if (ent.constraint) Matter.Composite.remove(env.engine.world, ent.constraint); } else if (ent.constraint) { if ( ent.constraint.bodyA?.plugin?.entity?.dead || ent.constraint.bodyB?.plugin?.entity?.dead ) { env.killEntity(ent); Matter.Composite.remove(env.engine.world, ent.constraint); } } } } })34:T880,createMatterEntity = ( { pos, w, h, r, vs, ps, f, fill, ...opts } = {}, ...components ) => { pos ??= vec2(0, 0); let body; if (w > 0) { h ??= w; body = Matter.Bodies.rectangle(pos.x, pos.y, w, h, opts); } else if (r > 0) { body = Matter.Bodies.circle(pos.x, pos.y, r, opts); } else if (vs?.length > 2) { body = Matter.Bodies.fromVertices(pos.x, pos.y, [vs], opts); } else if (ps.length > 0) { const parts = []; for (const p of ps) { if (p?.r !== undefined) { parts.push( Matter.Bodies.circle(pos.x + (p.x ?? 0), pos.y + (p.y ?? 0), p.r) ); } else if (p?.w !== undefined) { parts.push( Matter.Bodies.rectangle( pos.x + (p.x ?? 0), pos.y + (p.y ?? 0), p.w, p.h ?? p.w ) ); } else if (p.vs?.length > 0) { parts.push(Matter.Bodies.fromVertices(pos.x, pos.y, p.vs)); } else { throw new Error("cannot create proper body part", p); } } body = Matter.Body.create({ parts, ...opts }); } else { throw new Error("cannot create proper body"); } fill ??= opts.isStatic ? "#aaaa" : "#aafa"; const ent = entity( { body: body, applyForce(f, pos) { Matter.Body.applyForce(this.body, pos ?? this.body.position, f); return this; } }, graphics({ noTransform: true, fillColor: fill, draw: drawMatterBody }), force(f), ...components ); Object.defineProperties(ent, { position: { get() { if (this.body.position.isVector2) return this.body.position; else return vec2(this.body.position.x, this.body.position.y); }, set(val) { Matter.Body.setPosition(this.body, val, false); } }, rotation: { get() { return this.body.angle; }, set(val) { Matter.Body.setAngle(this.body, val, false); } }, velocity: { get() { return vec2(Matter.Body.getVelocity(this.body)); }, set() { console.log("setting velocity is disabled"); } } }); ent.body.plugin.entity = ent; return ent; }35:T526,{ const height = 500; ex_6_5_form.btn; const circR = ex_6_5_form.cr; const conLen = 2 * circR + ex_6_5_form.ll; const conStif = ex_6_5_form.ls; const offset = 30; const h = 50; const start = createMatterEntity({ pos: vec2(0, offset), r: circR, isStatic: true }); const end = createMatterEntity({ pos: vec2(width, offset), r: circR, isStatic: true }); const entities = [end, start]; const R = h / 2 + width ** 2 / (8 * h); const O = vec2(width / 2, offset + h - R); const A = 2 * Math.asin(conLen / (2 * R)); const _cpos = vec2(0, offset); while (_cpos.x >= 0 && _cpos.x < width - conLen - circR) { _cpos.rotateAround(O, -A); const c = createMatterEntity({ pos: _cpos.clone(), fill: "#fafa", r: circR }); const l = createMatterConstraint({ a: entities.at(-1), b: c, l: conLen, s: conStif }); entities.push(l, c); } entities.push( createMatterConstraint({ a: entities.at(-1), b: end, l: conLen, s: conStif }) ); return sim({ visibility, width, height: height, systems: [ addOnClickOrAutoSys(createRandomBox), matterSys, entityEraserSys(), renderer, overflowKill, showStats ], entities }); }36:T72c,{ ex_6_6_form.rerun; const height = 300; const entities = []; entities.push( createMatterEntity({ pos: vec2(width / 2, height + 20), w: width, h: 60, isStatic: true }) ); entities.push( ...Array.from({ length: 30 }, () => createMatterEntity({ pos: vec2(random(width), height), w: random(25, 35), h: random(25, 35), angle: random(TWO_PI), isStatic: true }) ) ); const carPos = vec2(100, 200); const carGroup = Matter.Body.nextGroup(true); const car = createMatterEntity({ pos: carPos, vs: [ vec2(-80, 0), vec2(-80, -35), vec2(-70, -45), vec2(10, -45), vec2(80, -20), vec2(75, 0) ], collisionFilter: { group: carGroup } }) const wheelL = createMatterEntity({ pos: vec2(carPos.x - 50, carPos.y), r: 20, collisionFilter: { group: carGroup } }); const wheelLHinge = createMatterConstraint({ a: car, pa: vec2(-50, 30), b: wheelL, l: ex_6_6_form.l, s: ex_6_6_form.s }); const wheelR = createMatterEntity({ pos: vec2(carPos.x + 50, carPos.y), r: 20, collisionFilter: { group: carGroup } }); const wheelRHinge = createMatterConstraint({ a: car, pa: vec2(50, 30), b: wheelR, l: ex_6_6_form.l, s: ex_6_6_form.s }); entities.push(car, wheelL, wheelLHinge, wheelR, wheelRHinge); const pushOnClick = (env) => { if (env.mouse.down) { Matter.Body.setAngularVelocity(wheelL.body, env.mouse.main ? 0.2 : -0.2); Matter.Body.setAngularVelocity(wheelR.body, env.mouse.main ? 0.2 : -0.2); } }; return sim({ visibility, width, height: height, systems: [pushOnClick, matterSys, renderer, overflowKill, showStats], entities }); }37:T41e,{ const height = 300; const onMatterSetup = (env, ents, engine) => { for (const ent of ents) { if (!ent.attractor) { // i dont know why, but it didn't work if i had not set velocity instead of force Matter.Body.setVelocity( ent.body, vec2(2, 0).rotateAround(vec2.ZERO, random(TWO_PI)) ); } } }; return sim({ visibility, width, height: height, systems: [ attractSys, setupMatterSys({ gravity: vec2(), onSetup: onMatterSetup }), renderer, showStats ], entities: [ createMatterEntity( { pos: vec2(width / 2, height / 2), r: 32, isStatic: true }, tag("attractor") ), ...Array.from({ length: 100 }, () => createMatterEntity({ pos: vec2(random(width), random(height)), r: random(3, 10), f: vec2(0.01, 0).rotateAround(vec2.ZERO, random(TWO_PI)), frictionAir: 0, restitution: 1 }) ) ] }); }38:T456,{ const height = 300; const onMatterSetup = (env, ents, engine) => { for (const ent of ents) { if (!ent.attractor) { // i dont know why, but it didn't work if i had not set velocity instead of force Matter.Body.setVelocity( ent.body, vec2(2, 0).rotateAround(vec2.ZERO, random(TWO_PI)) ); } } }; return sim({ visibility, width, height: height, queryEngine: new BinLatticeQueryEngine(width, height, 20), systems: [ separateSys, alignSys, cohereSys, setupMatterSys({ gravity: vec2(), onSetup: onMatterSetup }), overflowWrapMatterBody, renderer, showStats ], entities: [ ...Array.from({ length: 100 }, () => createMatterBoid( { pos: vec2(random(width), random(height)), restitution: 0, maxSpeed: 6, maxForce: 0.005 }, separate({ dist: 25, weight: 1.5 }), align({ viewDist: 50, weight: 1 }), cohere({ viewDist: 50, weight: 1 }) ) ) ] }); }39:T5db,{ const height = 300; let diff = 0; let nextAfter = 100; const bodyRain = (env, ents) => { diff += env.clock.delta; if (diff > nextAfter || env.mouse.down) { diff = 0; nextAfter = random(200, ents.length * 10); const ent = createMatterEntity( { pos: vec2(random(width), 0), r: random(3, 15), restitution: 0.3 }, killOnStageExit() ); env.addEntity(ent); Matter.Composite.add(env.engine.world, ent.body); } }; const handleCollisions = { setup: (env) => { Matter.Events.on(env.engine, "collisionStart", (event) => { for (let i = 0; i < event.pairs.length; ++i) { const { bodyA, bodyB } = event.pairs[i]; if ( !bodyA.isStatic && bodyA.plugin.entity.graphics && !bodyB.isStatic && bodyB.plugin.entity.graphics ) { const clr = `hsl(${random() * 360}, 100%, 80%)`; bodyA.plugin.entity.graphics.fillColor = clr; bodyB.plugin.entity.graphics.fillColor = clr; } } }); } }; return sim({ visibility, width, height: height, systems: [ bodyRain, matterSys, handleCollisions, renderer, overflowKill, showStats ], entities: [ createMatterEntity({ pos: vec2(width / 2, height + 20), w: width, h: 60, isStatic: true }) ] }); }3a:Td31,{ const height = 400; const createParticle = ( env, { pos, r, f = 0.02, fill = "hsl(0, 100%, 80%)" } ) => { const ent = createMatterEntity( { pos, r, fill, restitution: 1, frictionStatic: 0, friction: 0, frictionAir: 0 }, killOnStageExit() ); ent.body.plugin.createdAt = performance.now(); ent.applyForce(vec2(f).rotateAround(vec2.ZERO, random(TWO_PI))); env.addEntity(ent); Matter.Composite.add(env.engine.world, ent.body); }; let diff = 0; const createParticles = (env, ents) => { diff += env.clock.delta; if (diff > 1000 || env.mouse.down) { diff = 0; createParticle(env, { pos: vec2(width / 2, height / 2), r: 20, fill: `hsl(${random() * 360}, 100%, 80%)` }); } }; const handleCollisions = { setup: (env) => { Matter.Events.on(env.engine, "collisionStart", (event) => { for (let i = 0; i < event.pairs.length; ++i) { const { bodyA, bodyB } = event.pairs[i]; if ( !bodyA.isStatic && bodyA.plugin.entity.graphics && !bodyB.isStatic && bodyB.plugin.entity.graphics ) { for (const body of [bodyA, bodyB]) { if (performance.now() - (body.plugin.createdAt ?? 0) > 1000) { env.killEntity(body.plugin.entity); if (body.circleRadius > 6) { for (let k = 0; k < random(7); ++k) { createParticle(env, { pos: vec2(body.position), r: Math.round(body.circleRadius / 2), fill: body.plugin.entity.graphics.fillColor }); } } } } } } }); } }; const maxSpeed = 10; const limitSpeed = (env, ents) => { for (let i = 0; i < ents.length; ++i) { if (!ents[i].dead && ents[i].body) { const body = ents[i].body; if (Matter.Body.getSpeed(body) > maxSpeed) { Matter.Body.setSpeed(body, maxSpeed); } } } }; return sim({ visibility, width, height: height, systems: [ createParticles, setupMatterSys({ gravity: vec2() }), handleCollisions, limitSpeed, renderer, overflowKill, showStats ], entities: [ createMatterEntity({ pos: vec2(width / 2, height + 20), w: width, h: 60, isStatic: true, restitution: 1, frictionStatic: 0, friction: 0, frictionAir: 0 }), createMatterEntity({ pos: vec2(width / 2, -20), w: width, h: 60, isStatic: true, restitution: 1, frictionStatic: 0, friction: 0, frictionAir: 0 }), createMatterEntity({ pos: vec2(-20, height / 2), w: 60, h: height, isStatic: true, restitution: 1, frictionStatic: 0, friction: 0, frictionAir: 0 }), createMatterEntity({ pos: vec2(width + 20, height / 2), w: 60, h: height, isStatic: true, restitution: 1, frictionStatic: 0, friction: 0, frictionAir: 0 }) ] }); }3b:T456,toxiPhysicsSys = ({ bounds = true, gravity = vec2(0, 0.5), drag, stepByStep = false } = {}) => ({ setup: (env, ents) => { env.physics = new toxi.physics2d.VerletPhysics2D(); if (bounds) { env.physics.setWorldBounds( new toxi.geom.Rect(0, 0, env.width, env.height) ); } if (drag !== undefined) { env.physics.setDrag(drag); } if (gravity) { env.physics.addBehavior( new toxi.physics2d.behaviors.GravityBehavior( new toxi.geom.Vec2D(gravity) ) ); } for (const ent of ents) { if (ent.particle) { env.physics.addParticle(ent.particle); } else if (ent.spring) { env.physics.addSpring(ent.spring); } if (ent.particles?.length > 0) { for (const p of ent.particles) env.physics.addParticle(p); } if (ent.springs?.length > 0) { for (const s of ent.springs) env.physics.addSpring(s); } } }, update: (env, ents) => { if (!stepByStep || env.mouse.click) { env.physics.update(); } }, postUpdate: (env, ents) => {} })3c:T657,{ const height = 400; const entities = []; const spacing = 10; const total = 20; // each particle and spring as separate entity entities.push( toxiParticleEntity( { pos: vec2(width / 4, 30), r: 15, locked: true }, hidden ) ); for (let i = 1; i <= total; ++i) { const p = toxiParticleEntity( { pos: vec2(width / 4 + spacing * i, 30), r: 15 }, hidden ); const s = toxiSpringEntity({ a: entities.at(-1), b: p, l: spacing, s: 0.2 }); entities.push(s, p); } const last = entities.at(-1); delete last.hidden; // single "body" compound with many particles and springs const particles = Array.from({ length: total + 1 }, (_, idx) => toxiParticle(idx * spacing, 0) ); particles[0].lock(); const springs = Array.from({ length: total }, (_, idx) => toxiSpring(particles[idx], particles[idx + 1], spacing, 0.2) ); const pendulum2 = toxiBody({ offset: vec2(width * 0.75, 30), particles, springs, showParticles: false, renderer: (ctx, { particles, graphics }) => { const { x, y } = particles.at(-1); ctx.fillStyle = graphics.fillColor; ctx.beginPath(); ctx.arc(x, y, 15, 0, TWO_PI); ctx.fill(); ctx.stroke(); ctx.closePath(); } }); entities.push(pendulum2); return sim({ visibility, width, height: height, systems: [ grabClosestParticle, toxiPhysicsSys({ bounds: false }), entityEraserSys(), renderer, showStats ], entities }); }3d:T416,grabClosestParticle = (env, ents) => { if (env.__holding) { if (env.mouse.down) { env.__holding.x = env.mouse.pos.x; env.__holding.y = env.mouse.pos.y; } else { if (!env.__holdingLocked) env.__holding.unlock(); env.__holding = null; } } else if (env.mouse.down && env.mouse.main) { let p = null; let pd = Infinity; for (let i = 0; i < ents.length; ++i) { const ent = ents[i]; if (ent.particle) { const dist = env.mouse.pos.distanceToSquared(ent.particle); if (dist < pd && dist < 1000) { pd = dist; p = ent.particle; } } if (ent.particles?.length > 0) { for (let j = 0; j < ent.particles.length; ++j) { const dist = env.mouse.pos.distanceToSquared(ent.particles[j]); if (dist < pd && dist < 1000) { pd = dist; p = ent.particles[j]; } } } } if (p) { env.__holding = p; env.__holdingLocked = p.isLocked; p.lock(); } } }3e:T507,cloth = ( { offset = vec2.ZERO, width, height, vertsX = 13, vertsY = 10, anchors = 4, str = 0.1, smooth = true } = {}, ...components ) => { anchors = Math.min(anchors, vertsX); const distX = width / (vertsX - 1); const distY = height / (vertsY - 1); const verts = []; const springs = []; for (let row = 0; row < vertsY; ++row) { const rowArr = []; for (let col = 0; col < vertsX; ++col) { const p = toxiParticle(col * distX, row * distY); rowArr.push(p); if (col > 0) { springs.push(toxiSpring(p, rowArr[col - 1], distX, str)); } if (row > 0) { springs.push(toxiSpring(p, verts[row - 1][col], distY, str)); } } verts.push(rowArr); } const vd = (vertsX - 1) / (anchors - 1); for (let i = 0; i < anchors - 1; ++i) { const v = Math.round(vd * i); verts[0][v].lock(); } verts[0].at(-1).lock(); return toxiBody( { offset, particles: verts.flat(), springs, showParticles: false, showSprings: !smooth, renderer: smooth ? bezierClothRenderer : undefined }, { cloth: { verts, distX, distY, vertsX, vertsY, anchors } }, ...components ); }3f:T5ff,bezierClothRenderer = (ctx, { cloth: { verts, distX, distY } }, env) => { let cplen = distX * 0.4; let cpr = vec2(); let cpl = vec2(); let tv = vec2(); let br = false; for (let row = 0; row < verts.length; ++row) { const ln = verts[row]; ctx.beginPath(); cpr.copy(ln[0]); ctx.moveTo(cpr.x, cpr.y); for (let i = 1; i < ln.length - 1; ++i) { tv.subVectors(ln[i - 1], ln[i + 1]).multiplyScalar(0.5); cpl.copy(tv).add(ln[i + 1]); br = cpl.y > ln[i].y || ln[i].y - cpl.y > distY / 2; cpl.copy(ln[i]); if (!br) { tv.setLength(cplen); cpl.add(tv); } ctx.bezierCurveTo(cpr.x, cpr.y, cpl.x, cpl.y, ln[i].x, ln[i].y); cpr.copy(ln[i]); if (!br) { cpr.add(tv.negate()); } } cpl.copy(ln.at(-1)); ctx.bezierCurveTo(cpr.x, cpr.y, cpl.x, cpl.y, cpl.x, cpl.y); ctx.stroke(); } cplen = distY * 0.4; for (let col = 0; col < verts[0].length; ++col) { ctx.beginPath(); cpr.copy(verts[0][col]); ctx.moveTo(cpr.x, cpr.y); for (let i = 1; i < verts.length - 1; ++i) { tv.subVectors(verts[i - 1][col], verts[i + 1][col]).setLength(cplen); cpl.copy(verts[i][col]).add(tv); ctx.bezierCurveTo( cpr.x, cpr.y, cpl.x, cpl.y, verts[i][col].x, verts[i][col].y ); cpr.copy(verts[i][col]).add(tv.negate()); } cpl.copy(verts.at(-1)[col]); ctx.bezierCurveTo(cpr.x, cpr.y, cpl.x, cpl.y, cpl.x, cpl.y); ctx.stroke(); } }40:T4e3,{ const height = 400; const particles = [ toxiParticle(-100, -100), toxiParticle(100, -100), toxiParticle(50, 0), toxiParticle(100, 100), toxiParticle(-100, 100), toxiParticle(-50, 0) ]; const springs = Array.from( [ [0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [5, 0], [2, 5], [0, 3], [1, 4] ], ([ia, ib]) => toxiSpring( particles[ia], particles[ib], "auto", 0.2 ) ); const cr = (ctx, { particles, graphics }) => { ctx.fillStyle = graphics.fillColor; ctx.beginPath(); ctx.moveTo(particles[0].x, particles[0].y); for (let i = 1; i < particles.length; ++i) { ctx.lineTo(particles[i].x, particles[i].y); } ctx.closePath(); ctx.fill(); ctx.stroke(); }; return sim({ visibility, width, height: height, systems: [ grabClosestParticle, toxiPhysicsSys({ stepByStep: false }), renderer, showStats ], entities: [ toxiBody({ offset: vec2(width / 2, height / 2), particles, springs, showParticles: false, showSprings: false, renderer: cr }) ] }); }41:T14fe,{ const height = 500; const particles = []; const springs = []; const tailPart = (off, r, p, res = 6, str = 0.2) => { const da = TWO_PI / res; const o = toxiParticle(off, 0); const v = [o]; const s = []; for (let i = 0; i < res; ++i) { const a = da * i; const x = r * Math.cos(a); const y = r * Math.sin(a); const p = toxiParticle(off + x, y); for (let j = 0; j < v.length; ++j) { s.push(toxiSpring(p, v[j], "auto", str)); } v.push(p); } return { verts: v, springs: s, r, center: o, clr: `hsl(${p * 360}, 100%, 80%)` }; }; const tailStartSize = 50; const tailLength = ex_6_11.tailLen; const tailReduceBy = (tailStartSize - 10) / tailLength; const tail = Array.from({ length: tailLength }, (_, i) => tailPart( i * tailStartSize - tailReduceBy * (((i + 1) * i) / 2), tailStartSize - i * tailReduceBy, (i + 2) / (tailLength + 2) ) ); particles.push(...tail.flatMap((tp) => tp.verts)); springs.push(...tail.flatMap((tp) => tp.springs)); for (let i = 1; i < tail.length; ++i) { springs.push(toxiSpring(tail[i].center, tail[i - 1].center, "auto", 0.05)); } const headR = tailStartSize * 1.5; const headOff = -headR; const head = tailPart(headOff, headR); const faceVerts = [ toxiParticle(headOff - 50, 10), toxiParticle(headOff - 25, 50, 1.5), toxiParticle(headOff + 25, 50, 1.5), toxiParticle(headOff + 50, 10), toxiParticle(headOff - 25, -30, 0.1), toxiParticle(headOff + 25, -30, 0.1) ]; const mouthSprings = []; for (let i = 0; i < faceVerts.length; ++i) { mouthSprings.push(toxiSpring(faceVerts[i], head.center, "auto", 0.3)); for (let j = 0; j < i; ++j) { mouthSprings.push(toxiSpring(faceVerts[i], faceVerts[j], "auto", 0.3)); } } const lEye = toxiParticle(headOff - 25, -20, 0.3); const rEye = toxiParticle(headOff + 25, -20, 0.3); const lAntena = toxiParticle(headOff - headR, -headR * 1.3, 0.1); const rAntena = toxiParticle(headOff + headR, -headR * 1.3, 0.1); particles.push(...head.verts, ...faceVerts, lEye, rEye, lAntena, rAntena); springs.push(...head.springs, ...mouthSprings); springs.push( toxiSpring(lEye, faceVerts[4], "auto", 0.5), toxiSpring(rEye, faceVerts[5], "auto", 0.5), toxiSpring(tail[0].center, head.center, "auto", "0.3"), toxiSpring(lAntena, rAntena, "auto", 0.005), toxiSpring(lAntena, faceVerts[0], "auto", 0.02), toxiSpring(lAntena, faceVerts[2], "auto", 0.02), toxiSpring(rAntena, faceVerts[1], "auto", 0.02), toxiSpring(rAntena, faceVerts[3], "auto", 0.02) ); const cr = (ctx, { particles, graphics }) => { ctx.save(); ctx.strokeStyle = "#000"; ctx.lineWidth = 1; for (let i = tail.length - 1; i >= 0; --i) { ctx.fillStyle = tail[i].clr; ctx.beginPath(); ctx.arc(tail[i].center.x, tail[i].center.y, tail[i].r, 0, TWO_PI); ctx.fill(); ctx.stroke(); } const cp = lAntena .sub(head.center) .add(rAntena.sub(head.center)) .scale(0.3) .add(head.center); ctx.strokeStyle = "#000"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(head.center.x, head.center.y); ctx.quadraticCurveTo(cp.x, cp.y, lAntena.x, lAntena.y); ctx.moveTo(head.center.x, head.center.y); ctx.quadraticCurveTo(cp.x, cp.y, rAntena.x, rAntena.y); ctx.stroke(); ctx.fillStyle = "#000"; ctx.beginPath(); ctx.arc(lAntena.x, lAntena.y, 5, 0, TWO_PI); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(rAntena.x, rAntena.y, 5, 0, TWO_PI); ctx.fill(); ctx.stroke(); ctx.lineWidth = 1; ctx.fillStyle = `hsl(40, 100%, 80%)`; ctx.beginPath(); ctx.arc(head.center.x, head.center.y, headR, 0, TWO_PI); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(faceVerts[0].x, faceVerts[0].y); ctx.bezierCurveTo( faceVerts[1].x, faceVerts[1].y, faceVerts[2].x, faceVerts[2].y, faceVerts[3].x, faceVerts[3].y ); ctx.strokeStyle = "#000"; ctx.lineCap = "round"; ctx.lineWidth = 10; ctx.stroke(); ctx.lineWidth = 8; ctx.strokeStyle = "#faa"; ctx.stroke(); ctx.strokeStyle = "#000"; ctx.lineWidth = 1; ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(faceVerts[4].x, faceVerts[4].y, 20, 0, TWO_PI); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(faceVerts[5].x, faceVerts[5].y, 20, 0, TWO_PI); ctx.fill(); ctx.stroke(); ctx.fillStyle = "#000"; ctx.beginPath(); ctx.arc(lEye.x, lEye.y, 10, 0, TWO_PI); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(rEye.x, rEye.y, 10, 0, TWO_PI); ctx.fill(); ctx.stroke(); ctx.fillRect(head.center.x - 2, head.center.y - 5, 4, 10); ctx.restore(); }; return sim({ visibility, width, height: height, systems: [ grabClosestParticle, toxiPhysicsSys({ // stepByStep: true }), renderer, showStats ], entities: [ toxiBody({ offset: vec2(width * 0.3, height * 0.5), particles, springs, showParticles: ex_6_11.showWires, showSprings: ex_6_11.showWires, renderer: ex_6_11.showWires ? null : cr }) ] }); }42:T58d,{ const height = 200; const att = toxiParticleEntity({ pos: vec2(width / 2, height / 2), r: 15, locked: true }); const pts = Array.from({ length: 50 }, () => toxiParticleEntity({ pos: vec2(random(width), random(height)), fill: "#3cfa", r: 5 }) ); const bhvs = { setup: (env, ents) => { for (const ent of ents) { if (ent.particle) { if (ent.particle.isLocked) { env.physics.addBehavior( new toxi.physics2d.behaviors.AttractionBehavior( ent.particle, env.width, 0.02 ) ); env.physics.addBehavior( new toxi.physics2d.behaviors.AttractionBehavior( ent.particle, ent.circle.radius + 5, -5 ) ); } else { env.physics.addBehavior( new toxi.physics2d.behaviors.AttractionBehavior( ent.particle, ent.circle.radius * 2, -2 ) ); } } } } }; return sim({ visibility, width, height: height, systems: [ grabClosestParticle, toxiPhysicsSys({ gravity: vec2(), drag: 0.002 }), bhvs, entityEraserSys(), renderer, showStats ], entities: [att, ...pts] }); }43:T5bb,{ ex_6_14_reset; const height = 300; const att = toxiParticleEntity({ pos: vec2(width / 2, height / 2), r: 30, locked: true }); const pts = Array.from({ length: 10 }, () => cluster({ n: Math.floor(random(5, 15)), l: Math.floor(random(20, 50)), offset: vec2(random(100, width - 100), random(50, height - 50)) }) ); const bhvs = { setup: (env, ents) => { for (const ent of ents) { if (ent.particle) { if (ent.particle.isLocked) { env.physics.addBehavior( new toxi.physics2d.behaviors.AttractionBehavior( ent.particle, env.width, 0.02 ) ); env.physics.addBehavior( new toxi.physics2d.behaviors.AttractionBehavior( ent.particle, ent.circle.radius + 5, -5 ) ); } } else if (ent.particles) { for (const p of ent.particles) { env.physics.addBehavior( new toxi.physics2d.behaviors.AttractionBehavior(p, 10, -2) ); } } } } }; return sim({ visibility, width, height: height, systems: [ grabClosestParticle, toxiPhysicsSys({ gravity: vec2(), drag: 0.01 }), bhvs, entityEraserSys(), renderer, showStats ], entities: [att, ...pts] }); }44:[] 2f:{"id":"a6e6fb698524df6c","slug":"the-nature-of-code-6-physics-libraries","title":"The Nature of Code - 6 - Physics Libraries","thumbnail":"b8df3eb85a0011675f637a5eead847c83fd5980ca5d7f719092897dcdf757c70","access_level":"public","create_time":"$D2025-03-02T20:28:49.073Z","update_time":"$D2025-03-14T21:05:16.018Z","view_time":null,"first_public_time":"$D2025-03-13T14:28:12.398Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e59cfabcc8cf2053","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":"starter_2024"},"version":1701,"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 - 6 - Physics Libraries","cells":[{"id":0,"value":"# The Nature of Code - 6 - Physics Libraries\n\n_Deeper into dynamic code, with https://natureofcode.com/ _\n\nThis notebook follows fourth chapter https://natureofcode.com/physics-libraries/\n\nI've already tried to do 'little bit' of collision detection, and attempt at implementing performant detecting intersecting rectangle with circle was already a pain -_-","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"## Matter.js\n\n_[Matter.js](https://brm.io/matter-js/) is a 2D physics engine for the web_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":98,"value":"### Example 6.1: Matter.js Default Render\n\n(In book there is also default runner, but I already ditched that in favor of my own update).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":93,"value":"{\n example_6_1_rerun;\n return sim({\n visibility,\n width,\n height: 300,\n systems: [matterBasicsExample]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"viewof example_6_1_rerun = Inputs.button(\"Re-run\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"// For some reason, this cannot be inlined in the sim cell - the build in renderer just breaks\nmatterBasicsExample = ({\n engine: null,\n setup(env, ents) {\n this.engine = Matter.Engine.create();\n let render = Matter.Render.create({\n canvas: env.ctx.canvas,\n engine: this.engine,\n options: { width: env.width, height: env.height }\n });\n Matter.Render.run(render);\n\n let options = { friction: 0.01, restitution: 0.75 };\n let box = Matter.Bodies.rectangle(100, 100, 50, 50, options);\n \n\n Matter.Body.setVelocity(box, { x: 5, y: 0 });\n Matter.Body.setAngularVelocity(box, 0.1);\n\n Matter.Composite.add(this.engine.world, box);\n\n let ground = Matter.Bodies.rectangle(\n env.width / 2,\n env.height - 5,\n env.width,\n 10,\n {\n isStatic: true\n }\n );\n Matter.Composite.add(this.engine.world, ground);\n },\n update(env, ents) {\n Matter.Engine.update(this.engine, env.clock.delta);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"Ok, but lets try to combine it even more into my own mini ESC, and also plug in own rendering.\n\nFor this I even managed to reuse rendering systems I've used before, with some getters magic in entities.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":44,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"viewof example_6_1_2_rerun = Inputs.button(\"Rerun\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"### Exercise 6.2\n\n_Start with the code for Example 6.2 and, using the methodology outlined in this chapter, add the code to implement Matter.js physics. Delete bodies that have left the canvas. The result should appear as in this image. Feel free to be creative in the way you draw the boxes!_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":135,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":798,"value":"matterSys = setupMatterSys()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"### Example 6.3: Falling Boxes Hitting Boundaries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":170,"value":"{\n const height = 400;\n\n return sim({\n visibility,\n width,\n height: height,\n systems: [\n addOnClickOrAutoSys(createRandomBox),\n matterSys,\n entityEraserSys(),\n renderer,\n overflowKill,\n showStats\n ],\n entities: [\n createMatterEntity({\n pos: vec2(width / 4, height - 50),\n w: width * 0.43,\n h: 20,\n isStatic: true\n }),\n createMatterEntity({\n pos: vec2((3 * width) / 4, height - 100),\n w: width * 0.43,\n h: 20,\n isStatic: true\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"addOnClickOrAutoSys = (entityFactory) => ({\n timeFromAdded: 0,\n update(env) {\n let addBox = false;\n this.timeFromAdded += env.clock.delta;\n if (env.mouse.down && env.mouse.main) {\n if (this.timeFromAdded > 10) {\n addBox = true;\n }\n } else {\n if (this.timeFromAdded > 250) addBox = true;\n }\n\n if (addBox) {\n this.timeFromAdded = 0;\n const ent = entityFactory({\n pos: vec2(width / 2, 50)\n });\n Matter.Composite.add(env.engine.world, ent.body);\n env.addEntity(ent);\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":245,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"drawMatterBody = (ctx, { body }) => {\n for (const part of body.parts) {\n if (part.id === body.id && body.parts.length > 1) continue;\n\n ctx.save();\n if (part.circleRadius > 0) {\n ctx.translate(part.position.x, part.position.y);\n ctx.rotate(part.angle);\n ctx.beginPath();\n ctx.moveTo(0, 0);\n ctx.arc(0, 0, part.circleRadius, 0, TWO_PI);\n ctx.fill();\n ctx.stroke();\n ctx.closePath();\n } else {\n ctx.beginPath();\n ctx.moveTo(part.vertices[0].x, part.vertices[0].y);\n for (let pi = 1; pi < part.vertices.length; ++pi) {\n ctx.lineTo(part.vertices[pi].x, part.vertices[pi].y);\n }\n ctx.closePath();\n ctx.fill();\n ctx.stroke();\n ctx.closePath();\n }\n ctx.restore();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":524,"value":"createRandomBox = ({ pos, w, h, a, f, isStatic = false } = {}) => {\n w ??= random(16, 24);\n h ??= random(16, 24);\n a ??= random(TWO_PI);\n f ??= vec2(random(-0.01, 0.01), -0.01);\n return createMatterEntity(\n { pos, w, h, angle: a, f, restitution: 0.6 },\n killOnStageExit()\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"### Exercise 6.1 Circles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":270,"value":"{\n const height = 400;\n\n const create = ({ pos, r, f, isStatic = false } = {}) => {\n r ??= random(16, 24);\n f ??= vec2(random(-0.02, 0.02), -0.01);\n return createMatterEntity(\n { pos, r, f, fill: \"#affa\", restitution: 0.8, friction: 0.5 },\n killOnStageExit()\n );\n };\n\n return sim({\n visibility,\n width,\n height: height,\n systems: [\n addOnClickOrAutoSys(create),\n entityEraserSys(),\n matterSys,\n renderer,\n overflowKill,\n showStats\n ],\n entities: [\n createMatterEntity({\n pos: vec2(width / 4, height - 50),\n w: width * 0.43,\n h: 20,\n isStatic: true\n }),\n createMatterEntity({\n pos: vec2((3 * width) / 4, height - 100),\n w: width * 0.43,\n h: 20,\n isStatic: true\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":281,"value":"### Example 6.4: Polygon Shapes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":279,"value":"{\n const height = 400;\n\n const vertices = [\n vec2(-10, -10),\n vec2(20, -15),\n vec2(15, 0),\n vec2(0, 10),\n vec2(-20, 15)\n ];\n const create = ({ pos, f } = {}) => {\n let angle = random(TWO_PI);\n f ??= vec2(random(-0.02, 0.02), -0.01);\n return createMatterEntity(\n { pos, f, vs: vertices, fill: \"#ffaa\", angle, restitution: 0.4 },\n killOnStageExit()\n );\n };\n\n return sim({\n visibility,\n width,\n height: height,\n systems: [\n addOnClickOrAutoSys(create),\n matterSys,\n entityEraserSys(),\n renderer,\n overflowKill,\n showStats\n ],\n entities: [\n createMatterEntity({\n pos: vec2(width / 4, height - 50),\n w: width * 0.43,\n h: 20,\n isStatic: true\n }),\n createMatterEntity({\n pos: vec2((3 * width) / 4, height - 100),\n w: width * 0.43,\n h: 20,\n isStatic: true\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"### Example 6.5: Multiple Shapes on One Body","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":328,"value":"{\n const height = 400;\n\n const create = ({ pos, f } = {}) => {\n const ps = [\n { w: 30, h: 6 },\n { x: 15, r: 8 }\n ];\n const angle = random(TWO_PI);\n f ??= vec2(random(-0.02, 0.02), -0.01);\n return createMatterEntity(\n { pos, f, fill: \"#fffc\", ps, angle, restitution: 0.4 },\n killOnStageExit()\n );\n };\n\n return sim({\n visibility,\n width,\n height: height,\n systems: [\n addOnClickOrAutoSys(create),\n matterSys,\n entityEraserSys(),\n renderer,\n overflowKill,\n showStats\n ],\n entities: [\n createMatterEntity({\n pos: vec2(width / 4, height - 50),\n w: width * 0.43,\n h: 20,\n isStatic: true\n }),\n createMatterEntity({\n pos: vec2((3 * width) / 4, height - 100),\n w: width * 0.43,\n h: 20,\n isStatic: true\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":368,"value":"### Example 6.6: Matter.js Pendulum\nclick to swing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":370,"value":"{\n const height = 200;\n\n const c1 = createMatterEntity({\n pos: vec2(width / 2, 30),\n r: 15,\n isStatic: true\n });\n\n const c2 = createMatterEntity({\n pos: vec2(width / 2 + 150, 30),\n r: 15\n });\n const line = createMatterConstraint({ a: c1, b: c2, l: 150 });\n\n const pushOnClick = (env) => {\n if (env.mouse.click && env.mouse.main) {\n const sgn = env.mouse.pos.x < env.width / 2 ? 1 : -1;\n c2.applyForce(vec2(sgn * 0.05, 0));\n }\n };\n\n return sim({\n visibility,\n width,\n height: height,\n systems: [\n pushOnClick,\n matterSys,\n entityEraserSys(),\n renderer,\n overflowKill,\n showStats\n ],\n entities: [line, c1, c2]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"createMatterConstraint = ({ a, b, pa, pb, l, s } = {}) => {\n const opts = {\n length: l,\n stiffness: s\n };\n if (a?.body) opts.bodyA = a.body;\n else if (a?.type === \"body\") opts.bodyA = a;\n else if (a?.x !== undefined) opts.pointA = a;\n else throw new Error(\"anchor A must be vector, body or entity with body\");\n if (pa?.x !== undefined) opts.pointA = pa;\n if (b?.body) opts.bodyB = b.body;\n else if (b?.type === \"body\") opts.bodyB = b;\n else if (b?.x !== undefined) opts.pointB = b;\n else throw new Error(\"anchor B must be vector, body or entity with body\");\n if (pb?.x !== undefined) opts.pointB = pb;\n\n const ent = entity(\n {\n constraint: Matter.Constraint.create(opts)\n },\n graphics({\n fillColor: \"#000\",\n noTransform: true,\n draw: drawMatterConstraint\n })\n );\n ent.constraint.plugin.entity = ent;\n Object.defineProperties(ent, {\n position: {\n get() {\n return this.constraint.bodyA.position;\n }\n }\n });\n return ent;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":391,"value":"drawMatterConstraint = (ctx, { constraint }) => {\n const ax = (constraint.bodyA?.position?.x ?? 0) + (constraint.pointA?.x ?? 0);\n const ay = (constraint.bodyA?.position?.y ?? 0) + (constraint.pointA?.y ?? 0);\n const bx = (constraint.bodyB?.position?.x ?? 0) + (constraint.pointB?.x ?? 0);\n const by = (constraint.bodyB?.position?.y ?? 0) + (constraint.pointB?.y ?? 0);\n ctx.fillRect(ax - 1, ay - 1, 2, 2);\n ctx.fillRect(bx - 1, by - 1, 2, 2);\n\n ctx.beginPath();\n ctx.moveTo(ax, ay);\n ctx.lineTo(bx, by);\n ctx.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":410,"value":"### Exercise 6.5\n\n_Create a simulation of a bridge by using constraints to connect a sequence of circles (or rectangles) as shown in the following image. Use the isStatic property to lock the endpoints in place. Experiment with different values to make the bridge more or less springy. The joints have no physical geometry, so in order for your bridge not to have holes, spacing between the nodes will be important._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":412,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":438,"value":"viewof ex_6_5_form = Inputs.form({\n btn: Inputs.button(\"Re-run\"),\n cr: Inputs.range([5, 100], { label: \"Circle radius\", step: 1, value: 10 }),\n ll: Inputs.range([-5, 20], { label: \"Circles dist\", step: 1, value: 0 }),\n ls: Inputs.range([0.01, 1], {\n label: \"Constraint stiffness\",\n step: 0.01,\n value: 0.8\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":569,"value":"### Example 6.7: Spinning Windmill","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":489,"value":"{\n const height = 300;\n const armPos = vec2(width / 2, height - 70);\n const arm = createMatterEntity({\n pos: armPos.clone(),\n w: 100,\n h: 10,\n fill: \"#fafa\"\n });\n const armStand = entity(\n { position: armPos },\n rect(-2, -2, 4, 120),\n graphics({ fillColor: \"#aaaa\" })\n );\n\n const joint = createMatterConstraint({ a: arm, b: armPos, l: 0 });\n\n return sim({\n visibility,\n width,\n height: height,\n systems: [\n matterSys,\n addOnClickOrAutoSys(createRandomBox),\n renderer,\n overflowKill,\n showStats\n ],\n entities: [armStand, arm, joint]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":573,"value":"### Exercise 6.6\n_Create a vehicle that has revolute joints for its wheels. Consider the size and positioning of the wheels. How does changing the stiffness property affect their movement?_\n\nLMB to move forward, RMB to move back","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":575,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":647,"value":"viewof ex_6_6_form = Inputs.form({\n rerun: Inputs.button(\"Re-run\"),\n l: Inputs.range([0, 10], { label: \"suspension length\", step: 1, value: 1 }),\n s: Inputs.range([0.01, 1], {\n label: \"suspension stiffness\",\n step: 0.01,\n value: 0.5\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":571,"value":"### Example 6.9: Attraction with Matter.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":686,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":700,"value":"attractSys = (env, ents) => {\n for (let i = 0; i < ents.length; ++i) {\n const ent = ents[i];\n if (ent.attractor && ent.body) {\n for (let j = 0; j < ents.length; ++j) {\n const other = ents[j];\n if (ent !== other && !other.dead) {\n const force = vec2().copy(ent.body.position);\n force.sub(other.body.position);\n\n const distance = MathUtils.clamp(force.length(), 5, 25);\n const G = 0.02;\n const strength = (G * other.body.mass) / (distance * distance);\n\n force.setLength(strength);\n other.force.add(force);\n }\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":767,"value":"### Exercise 6.8\n_Convert any of the steering behavior examples from Chapter 5 to Matter.js. What does flocking look like with collisions?_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":770,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":765,"value":"createMatterBoid = (\n {\n pos,\n fill = \"#f3fa\",\n w = 20,\n h = 10,\n maxSpeed = 0.5,\n maxForce = 0.002,\n ...opts\n } = {},\n ...components\n) =>\n createMatterEntity(\n {\n pos,\n fill,\n r: 10,\n // vs: [vec2(w / 2, 0), vec2(-w / 2, h / 2), vec2(-w / 2, -h / 2)],\n frictionAir: 0,\n ...opts\n },\n {\n vehicle: {\n maxSpeed,\n maxForce\n }\n },\n ...components\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":838,"value":"overflowWrapMatterBody = (env, ents) => {\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n if (ent.position) {\n const nx = MathUtils.euclideanModulo(ent.position.x, env.width);\n const ny = MathUtils.euclideanModulo(ent.position.y, env.height);\n if (nx !== ent.position.x || ny !== ent.position.y) {\n ent.position = vec2(nx, ny);\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":774,"value":"import {\n BinLatticeQueryEngine,\n separate,\n separateSys,\n align,\n alignSys,\n cohere,\n cohereSys,\n} from \"@ajur/the-nature-of-code-5-autonomous-agents\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":878,"value":"### Example 6.10: Collision Events","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":880,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":917,"value":"### Exercise 6.9\n_Create a simulation in which Particle objects disappear when they collide with one another. Where and how should you delete the particles? Can you have them shatter into smaller particles?_\n\n- I've already added delayed removal of entities, so I'm just marking them as 'dead' when they collide.\n- Particle after creation has 1s grace period, when it cannot be killed (otherwise it would not look fun).\n- Killed particles are split in few others with half the size, if they are big enough.\n\nHold LMB to create _much more_ particles.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":919,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":977,"value":"## Verlet Physics with Toxiclibs.js\n\n_[Toxiclibs](http://haptic-data.com/toxiclibsjs) is an independent, open source library collection for computational design tasks with Java and Processing developed by Karsten “toxi” Schmidt._\n\nIt is fairly old, but still useful library. Schmidt continues to contribute to the creative coding field through his recent project, [thi.ng umbrella](https://thi.ng/umbrella).\n\n[Verlet integration](https://en.wikipedia.org/wiki/Verlet_integration) is used by both Matter and Toxiclibs. It's just different physics movement simulation method. Before, we were using custom implementation of [Euler method](https://en.wikipedia.org/wiki/Euler_method).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1008,"value":"{\n const height = 200;\n\n const c1 = toxiParticleEntity({\n pos: vec2(width / 2, 30),\n r: 15,\n locked: true\n });\n console.log(c1);\n\n const c2 = toxiParticleEntity({\n pos: vec2(width / 2 + 150, 30),\n r: 15\n });\n const line = toxiSpringEntity({ a: c1, b: c2, l: 100, s: 0.01 });\n\n const handleInput = (env) => {\n if (env.mouse.down) {\n c2.particle.lock();\n c2.position = env.mouse.pos;\n c2.particle.unlock();\n }\n };\n\n return sim({\n visibility,\n width,\n height: height,\n systems: [\n handleInput,\n toxiPhysicsSys(),\n entityEraserSys(),\n renderer,\n showStats\n ],\n entities: [c1, c2, line]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":985,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":993,"value":"toxiParticleEntity = (\n { pos, w, h, r, fill, draw, f, a, locked = false } = {},\n ...components\n) => {\n const fillColor = fill ?? (locked ? \"#aaaa\" : \"#aafa\");\n const ent = entity(\n {\n particle: toxiParticle(pos)\n },\n rotation(a),\n graphics({ fillColor, draw }),\n w && h ? rect(-w / 2, -h / 2, w, h) : {},\n r ? circle(r) : {},\n force(f),\n ...components\n );\n\n if (locked) ent.particle.lock();\n\n Object.defineProperties(ent, {\n position: {\n get() {\n return this.particle;\n },\n set(val) {\n this.particle.x = val.x;\n this.particle.y = val.y;\n }\n },\n velocity: {\n get() {\n return this.particle.getVelocity();\n },\n set() {\n console.log(\"setting velocity is disabled\");\n }\n }\n });\n\n return ent;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1117,"value":"toxiParticle = (x, y, weight = 1) => {\n if (x.x !== undefined) {\n if (typeof y === \"number\") weight = y;\n y = x.y;\n x = x.x;\n }\n return new toxi.physics2d.VerletParticle2D(x, y, weight);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1002,"value":"toxiSpringEntity = ({ a, b, l, s } = {}, ...components) => {\n const spring = toxiSpring(a.particle, b.particle, l, s);\n const ent = entity(\n { spring },\n graphics({\n draw: (ctx, { spring: spr }) => {\n ctx.fillRect(spr.a.x - 1, spr.a.y - 1, 2, 2);\n ctx.fillRect(spr.b.x - 1, spr.b.y - 1, 2, 2);\n\n ctx.beginPath();\n ctx.moveTo(spr.a.x, spr.a.y);\n ctx.lineTo(spr.b.x, spr.b.y);\n ctx.stroke();\n }\n }),\n ...components\n );\n return ent;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1123,"value":"toxiSpring = (a, b, len = 0, str = 1) => {\n if (len === \"auto\") {\n len = a.distanceTo(b);\n }\n return new toxi.physics2d.VerletSpring2D(a, b, len, str);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1043,"value":"### Soft-Body Simulations\n\n_Verlet physics is particularly well suited for a genre of computer graphics known as soft-body simulation. Unlike the rigid-body simulations of Matter.js, in which hard-edged boxes crash into one another and retain their shapes, soft-body simulations involve objects that can deform and change shape with physics. Soft bodies allow for more flexible, fluid, and organic movements. They can stretch, squish, and jiggle in response to forces and collisions, and they appear . . . well, soft._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1046,"value":"### Example 6.12: Soft Swinging Pendulum\n\nLMB to grab any particle (vertex), drag to move.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1049,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1073,"value":"toxiBody = (\n {\n offset = vec2.ZERO,\n particles,\n springs,\n showParticles = true,\n showSprings = true,\n renderer\n } = {},\n ...components\n) => {\n if (!vec2.ZERO.equals(offset)) {\n for (const p of particles) {\n p.x += offset.x;\n p.y += offset.y;\n p.clearVelocity();\n }\n }\n return entity(\n {\n particles,\n springs,\n showParticles,\n showSprings,\n particlesOffset: offset\n },\n renderer ? { customRenderer: renderer } : {},\n graphics({\n draw: (ctx, self) => {\n if (self.showParticles) {\n for (const p of self.particles) {\n ctx.fillRect(p.x - 2, p.y - 2, 5, 5);\n }\n }\n if (showSprings) {\n for (const { a, b } of self.springs) {\n ctx.beginPath();\n ctx.moveTo(a.x, a.y);\n ctx.lineTo(b.x, b.y);\n ctx.stroke();\n }\n }\n }\n }),\n ...components\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1194,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1068,"value":"### Exercise 6.10\n_Create a hanging cloth simulation using particles and springs. You’ll need to connect each particle with its vertical and horizontal neighbors._\n\nLMB to grab any particle (vertex), drag to move.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1079,"value":"{\n const height = 400;\n\n return sim({\n visibility,\n width,\n height: height,\n systems: [\n grabClosestParticle,\n toxiPhysicsSys({ bounds: false }),\n renderer,\n showStats\n ],\n entities: [\n cloth({\n offset: vec2(width * 0.05, height * 0.05),\n width: width * ex_6_10.widthP,\n height: height * ex_6_10.heightP,\n ...ex_6_10\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1252,"value":"viewof ex_6_10 = Inputs.form({\n widthP: Inputs.range([0.1, 0.9], {\n label: \"Width percent\",\n step: 0.01,\n value: 0.9\n }),\n heightP: Inputs.range([0.1, 0.9], {\n label: \"Height percent\",\n step: 0.01,\n value: 0.7\n }),\n vertsX: Inputs.range([2, 100], {\n label: \"Vertices horizontal\",\n step: 1,\n value: 61\n }),\n vertsY: Inputs.range([2, 100], {\n label: \"Vertices vertical\",\n step: 1,\n value: 20\n }),\n anchors: Inputs.range([2, 60], { label: \"Anchor\", step: 1, value: 16 }),\n str: Inputs.range([0, 1], { label: \"Amount\", step: 0.001, value: 0.15 }),\n smooth: Inputs.toggle({ label: \"Smooth render\", value: true })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1230,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1337,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1355,"value":"### Example 6.13: Soft-Body Character","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1358,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1394,"value":"### Exercise 6.11 (and 6.12.. kinda)\n_Design your own soft-body character with additional vertices and connections. What other design elements can you add? What other forces and interactions can you incorporate?_\n\nOk, it's not exactly what was in the exercise example, nor it is even good example of _soft body_, but hay, it was fun to make it xD\n\nAlso, lets assume, this one also fulfills exercise 6.12.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1396,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1567,"value":"viewof ex_6_11 = Inputs.form({\n tailLen: Inputs.range([1, 25], {\n label: \"Tail length\",\n step: 1,\n value: 12\n }),\n showWires: Inputs.toggle({ label: \"Show wireing\", value: false })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1584,"value":"### Example 6.14: Cluster - A Force-Directed Graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1589,"value":"{\n expl_6_14;\n const height = 200;\n return sim({\n visibility,\n width,\n height: height,\n systems: [\n grabClosestParticle,\n toxiPhysicsSys({\n stepByStep: false,\n gravity: vec2(),\n drag: 0.5\n }),\n renderer,\n showStats\n ],\n entities: [\n cluster({\n n: Math.floor(random(2, 30)),\n l: Math.floor(random(20, height / 2)),\n offset: vec2(width / 2, height / 2)\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1618,"value":"viewof expl_6_14 = Inputs.button(\"New random cluster\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1587,"value":"cluster = ({ n, l, s = 0.005, fill, offset = vec2() }) => {\n const particles = [];\n const springs = [];\n for (let i = 0; i < n; ++i) {\n particles.push(toxiParticle(random(), random()));\n for (let j = 0; j < i; ++j) {\n springs.push(toxiSpring(particles[i], particles[j], l, s));\n }\n }\n\n fill ??= `hsl(${random() * 360}, 80%, 80%)`;\n\n const cr = (ctx, { particles, springs }) => {\n ctx.fillStyle = fill;\n ctx.strokeStyle = \"#333a\";\n for (const { a, b } of springs) {\n ctx.beginPath();\n ctx.moveTo(a.x, a.y);\n ctx.lineTo(b.x, b.y);\n ctx.stroke();\n }\n for (const p of particles) {\n ctx.beginPath();\n ctx.arc(p.x, p.y, 5, 0, TWO_PI);\n ctx.fill();\n ctx.stroke();\n }\n };\n\n return toxiBody({\n offset,\n particles,\n springs,\n showParticles: false,\n showSprings: false,\n renderer: cr\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1628,"value":"### Example 6.15: Attraction (and Repulsion) Behaviors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1630,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1669,"value":"### Exercise 6.14\n_Use AttractionBehavior in conjunction with spring forces._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1671,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1696,"value":"viewof ex_6_14_reset = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"import {\n PI,\n TWO_PI,\n HALF_PI,\n vec2,\n MathUtils,\n sim,\n tag,\n entity,\n hidden,\n renderer,\n graphics,\n force,\n rect,\n circle,\n polygon,\n rotation,\n draggable,\n entityDragging,\n entityEraserSys,\n killOnStageExit,\n onStageExit,\n onStageExitSys,\n overflowKill,\n debug,\n stateDump,\n showStats,\n ImgSprite,\n sprite,\n random\n} from \"@ajur/the-nature-of-code-tools\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"Matter = require(\"matter-js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":981,"value":"toxi = require(\"https://cdn.jsdelivr.net/gh/hapticdata/toxiclibsjs@0.3.2/build/toxiclibs.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W44","stdlib":"1","titling":"auto"}} 30:"$2f:body"