2b:null 2c:["$","title",null,{"children":"The Nature of Code - Tools | Adam Jurczyk | Observable"}] 31:T48c,{ const height = 200; const center = { x: width / 2, y: height / 2 }; return sim({ visibility, width, height, // steps: 2000, systems: [ constantAcceleration, noiseAcceleration, followMouseAcceleration, movement, overflowWrap, stateDump, trailRenderer, renderer ], entities: [ entity( position(width / 4, height / 2), graphics({ fillColor: "#aafa" }), rect(-16, -16, 32, 32), velocity(0.3, 0.1) ), entity( position(width / 2, height / 2), velocity(), clampVelocity({ max: 10 }), acceleration(), circle(16), graphics(), constAcc(-0.1, -0.01) ), // same as above, but shorter basicMover( { x: center.x + 50, y: center.y, vMax: 10, r: 16 }, constAcc(-0.1, -0.01) ), basicMover( { ...center, vMax: 5, fill: "#3a3a", w: 32, h: 32 }, noiseAcc(), trail({ color: "#3a3a" }) ), basicMover( { ...center, vMax: 5, fill: "#a3aa", r: 20 }, accToMouse(), trail() ) ] }); }32:T64a,{ const height = 300; const center = { x: width / 2, y: height / 2 }; const moverRepeledFromEdges = (...comps) => { const m = 1 + random() * 4; return basicMover( { x: 50, y: 50, r: m * 10, fill: comps.length == 0 ? "#aaf6" : "#faf6" }, mass(m), force(), // debug, repeledFromEdges, ...comps ); }; return sim({ visibility, width, height, systems: [ testCollisions, mouseControlledWind, repelFromEdges, applyFriction, movement, angularMovement, // stateDump, overflowWrap, trailRenderer, renderer, showStats ], entities: [ entity( position(300, 0), rect(0, 0, 200, 200), graphics({ lineColor: "#0000", fillColor: "#a0a2" }), frictionArea(0.05), // debug, collisions() ), basicMover( { x: center.x, y: 0.5 * center.y, r: 15, draw: drawArrow }, force(), mass(1), debug, rotateWithDirection, forcedByMouseControlledWind, affectedByFrictionArea ), basicMover( { x: center.x, y: 1.5 * center.y, r: 30, draw: drawArrow }, mass(2), force(), debug, rotateWithDirection, forcedByMouseControlledWind, affectedByFrictionArea ), ...Array.from({ length: 5 }).map(() => moverRepeledFromEdges()), ...Array.from({ length: 3 }).map(() => moverRepeledFromEdges( forcedByMouseControlledWind, affectedByFrictionArea ) ) ] }); }33:T43a,movement = ({ update: (env, ents) => { for (let entIdx = 0; entIdx < ents.length; ++entIdx) { const ent = ents[entIdx]; if (ent.trail && ent.position) ent.trail.start = [ent.position.x, ent.position.y]; // forces if (ent.force && ent.acceleration) ent.acceleration.add(ent.force.divideScalar(ent.mass || 1)); // movement if (ent.acceleration && ent.velocity) ent.velocity.add(ent.acceleration); if (ent.velocity && ent.clampVelocity) ent.velocity.clampLength(ent.clampVelocity.min, ent.clampVelocity.max); if (ent.velocity) removeZeroError(ent.velocity); if (ent.position && ent.velocity) ent.position.add(ent.velocity); if (ent.trail && ent.position) ent.trail.end = [ent.position.x, ent.position.y]; } }, postUpdate: (env, ents) => { for (let entIdx = 0; entIdx < ents.length; ++entIdx) { const ent = ents[entIdx]; // reset frame-volatile props if (ent.force) ent.force.set(0, 0); if (ent.acceleration) ent.acceleration.set(0, 0); } } })34:T477,angularMovement = ({ update: (env, ents) => { for (let entIdx = 0; entIdx < ents.length; ++entIdx) { const ent = ents[entIdx]; if (ent.rotation != null) { if (ent.angularVelocity != null) { if (ent.angularAcceleration != null) { ent.angularVelocity += ent.angularAcceleration; } if (ent.clampAngularVelocity) { ent.angularVelocity = clamp( ent.angularVelocity, ent.clampAngularVelocity.min, ent.clampAngularVelocity.max ); } if (eq(0, ent.angularVelocity)) ent.angularVelocity = 0; ent.rotation += ent.angularVelocity; } if (ent.rotateWithDirection && ent.velocity) { // if (!eq(0, ent.velocity.lengthSq())) { if (ent.velocity.length() > 0.1) { ent.rotation = ent.velocity.angle(); } } } } }, postUpdate: (env, ents) => { for (let entIdx = 0; entIdx < ents.length; ++entIdx) { const ent = ents[entIdx]; if (ent.angularAcceleration != null) ent.angularAcceleration = 0; } } })35:T4bf,onStageExitSys = { const testAxis = (ent, axis, minSide, maxSide, size) => { if (minSide && ent.position[axis] < 0) { switch (minSide) { case "wrap": ent.position[axis] += size; break; case "bounce": ent.position[axis] = -ent.position[axis]; if (ent.velocity) ent.velocity[axis] = -ent.velocity[axis]; break; } } else if (maxSide && ent.position[axis] >= size) { switch (maxSide) { case "wrap": ent.position[axis] -= size; break; case "bounce": ent.position[axis] = 2 * size - ent.position[axis]; if (ent.velocity) ent.velocity[axis] = -ent.velocity[axis]; break; } } }; return (env, ents) => { for (let entIdx = 0; entIdx < ents.length; ++entIdx) { const ent = ents[entIdx]; if (ent.onStageExit && ent.position) { testAxis( ent, "y", ent.onStageExit.top, ent.onStageExit.bottom, env.height ); testAxis( ent, "x", ent.onStageExit.left, ent.onStageExit.right, env.width ); } } }; }36:T56e,testCollisions = (env, ents) => { for (let entIdx = 0; entIdx < ents.length; ++entIdx) { const ent = ents[entIdx]; if (!ent.dead && ent.collisions) { ent.collisions.containsPositionOf.length = 0; const masked = ent.collisions.layer > 0; if (masked && ent.collisions.mask === 0) continue; const testCollider = ent.rect ? (e) => pointInRect(ent.position, ent.rect, e.position) : ent.circle ? (e) => pointInCircle(ent.position, ent.circle, e.position) : () => false; const range = ent.rect ? Math.max(ent.rect.w, ent.rect.h) : ent.circle ? ent.circle.radius : 0; const entsToCheck = env.query.pointsInRange(ent.position, range); // TODO improve further for (let entIdx = 0; entIdx < entsToCheck.length; ++entIdx) { const collider = entsToCheck[entIdx]; if (collider === ent || collider.dead) continue; if (masked && (ent.collisions.mask & collider.collisions?.layer) <= 0) continue; if (testCollider(collider)) { ent.collisions.containsPositionOf.push(collider.id); } } if ( ent.collisions.containsPositionOf.length > 0 && typeof ent.collisions.onCollide === "function" ) { ent.collisions.onCollide(ent, ent.collisions.containsPositionOf, env); } } } }37:T6a3,detectorSys = (env, ents) => { for (let entIdx = 0; entIdx < ents.length; ++entIdx) { const ent = ents[entIdx]; if (!ent.dead && ent.detector?.mask > 0) { ent.detector.detected.length = 0; let fovMin = 0; let fovMax = TWO_PI; if (ent.detector.fov > 0) { const fovr = MathUtils.degToRad(ent.detector.fov) / 2; fovMin = ent.rotation - fovr; fovMax = ent.rotation + fovr; } if (ent.detector.debug) { env.ctx.fillStyle = "#6cc2"; env.ctx.beginPath(); env.ctx.moveTo(ent.position.x, ent.position.y); env.ctx.arc( ent.position.x, ent.position.y, ent.detector.range, fovMin, fovMax ); env.ctx.closePath(); env.ctx.fill(); } const entsToCheck = env.query.pointsInRange( ent.position, ent.detector.range ); for (let entIdx = 0; entIdx < entsToCheck.length; ++entIdx) { const other = entsToCheck[entIdx]; if (other === ent || other.dead) { continue; } const otherLayer = other.detector?.layer ?? other.collisions?.layer ?? 0; if ((ent.detector.mask & otherLayer) <= 0) { continue; } if (ent.detector.fov > 0) { const a = vec2().subVectors(other.position, ent.position).angle(); if (a < fovMin || a > fovMax) continue; } ent.detector.detected.push(other.id); } if ( ent.detector.detected.length > 0 && typeof ent.detector.onDetect === "function" ) { ent.detector.onDetect(ent.detector.detected, env, ent); } } } }38:T49d,entityDragging = (env, ents) => { if (env.__dragging?.type === "entity") { env.mouse.handled = true; const dragged = env.__dragging.dragged; if (!dragged || dragged.dead || !env.mouse.down) { delete env.__dragging; } else { if (dragged.velocity) { const v = env.mouse.pos.clone().sub(dragged.position); dragged.velocity .copy(env.mouse.pos) .sub(dragged.position) .add(env.__dragging.offset); } else { dragged.position.copy(env.mouse.pos).add(env.__dragging.offset); } } return; } if ( !env.__dragging && !env.mouse.handled && env.mouse.click && env.mouse.main ) { for (let i = ents.length - 1; i >= 0; --i) { const ent = ents[i]; if ( !ent.dead && ent.draggable && ent.position && (ent.circle || ent.rect) ) { if (pointInEntity(env.mouse.pos, ent)) { env.__dragging = { type: "entity", dragged: ent, offset: ent.position.clone().sub(env.mouse.pos) }; env.mouse.handled = true; return; } } } } }39:Te73,sim = function* ({ visibility, width = 200, height = 200, steps = null, keyboardCapturer = null, bgColor = null, clearCanvas = true, pauseOnClick = false, stepByStep = false, enableContextMenu = false, queryEngine = null, systems = [], entities = [] }) { removeDeadEntities(entities); const env = { width, height, center: vec2(width / 2, height / 2), ctx: DOM.context2d(width, height), mouse: {}, keys: keyboardCapturer?.keys, debug: [], clock: {}, query: queryFacade(entities, queryEngine), addEntity: (ent, ...ents) => { if (ent?.id?._entity) { ent.id.idx = entities.length; entities.push(ent); } else if ( typeof ent === "number" && ent >= 0 && ent < entities.length && ents.length > 0 ) { entities.splice(ent, 0, ...ents); } }, getEntity: (id) => { if (typeof id?.idx === "number") return entities[id.idx]; if (typeof id?.gen === "number") return entities.find((e) => e.id.gen); return null; }, killEntity: (entOrId) => { const _id = typeof entOrId?.id?.idx === "number" ? entOrId.id : entOrId; if (_id?.idx >= 0 && entities[_id.idx]?.id?.gen === _id?.gen) { entities[_id.idx].dead = true; } }, countEntities: () => { let c = 0; for (let i = 0; i < entities.length; ++i) { if (entities[i]?.dead === false) { ++c; } } return c; } }; if (bgColor) env.ctx.canvas.style.background = bgColor; const _systems = systems .map((sys) => { if (!sys) return null; if (typeof sys === "function") { return { update: sys }; } if (sys.setup || sys.update || sys.postUpdate) { return sys; } return null; }) .filter((s) => s != null); const mouseHandler = handleMouseEvents(env.ctx.canvas, enableContextMenu); env.mouse = mouseHandler.mouseState; env.clock = clockTicker(); for (const system of _systems) { system.setup?.(env, entities); } let out = env.ctx.canvas; let paused = stepByStep; try { while (true) { mouseHandler.onLoopStart(); if ((pauseOnClick || stepByStep) && env.mouse.click && env.mouse.main) { paused = !paused; } if (paused) { yield visibility(out); } else { if (env.mouse.click && keyboardCapturer) { keyboardCapturer.capture(true); } if (!steps && clearCanvas) env.ctx.clearRect(0, 0, width, height); env.query.engine.onLoopStart(env, entities); for (const system of _systems) { system.update?.(env, entities); } for (const system of _systems) { system.postUpdate?.(env, entities); } removeDeadEntities(entities, false); env.query.engine.onLoopEnd(env, entities); if (!steps) { out = env.ctx.canvas; if (env.debug.length > 0) { out = html`${out}

${env.debug.join("
")}

`; env.debug.length = 0; } yield visibility(out); if (steps === 0) return; } if (steps > 0) --steps; } mouseHandler.onLoopEnd(); env.clock.tick(); if (stepByStep) { paused = true; } } } catch (err) { console.error("Simulation stopped due to error", err); yield html`${env.ctx.canvas}

Simulation crashed:
${err}

`; return; } }3a:T650,queryFacade = (entities, customEngine = null) => { if (customEngine && !QueryEngine.isQueryEngine(customEngine)) { throw new Error("Invalid type of custom QueryEngine", customEngine); } class SimpleQueryEngine extends QueryEngine { constructor() { super(); this.entities = []; } onLoopStart(env, ents) { this.entities = ents; } pointsInBox(box) { const out = []; let i, ent; for (i = 0; i < this.entities.length; ++i) { ent = this.entities[i]; if ( ent?.dead === false && ent.position && box.containsPoint(ent.position) ) { out.push(ent); } } return out; } pointsInRange(pos, range) { const rangeSq = range * range; const out = []; let i, ent; for (i = 0; i < this.entities.length; ++i) { ent = this.entities[i]; if ( ent?.dead === false && ent.position && ent.position.distanceToSquared(pos) <= rangeSq ) { out.push(ent); } } return out; } } const facade = { all() { return entities; }, alive() { const out = []; for (let i = 0; i < entities.length; ++i) { if (entities[i]?.dead === false) out.push(entities[i]); } return out; }, pointsInBox(/*THREE.Box2*/ box) { return this.engine.pointsInBox(box); }, pointsInRange(pos, range) { return this.engine.pointsInRange(pos, range); }, engine: customEngine ?? new SimpleQueryEngine() }; return facade; }3b:T4c9,removeDeadEntities = { let lastClean = 0; const cleanAndReindex = (entities) => { lastClean = performance.now(); let i = 0; while (i < entities.length) { const ent = entities[i]; if (!ent || ent.dead || !ent.id) { entities.splice(i, 1); } else { ent.id.idx = i; ++i; } } return entities; }; return ( entities, forceReIndex = true, reindexRatio = 0.5, reindexMaxTime = 10000 /* ms */ ) => { if (forceReIndex) { return cleanAndReindex(entities); } const reindexAfter = Math.max( 10, Math.min(Math.ceil(entities.length * reindexRatio), 100) ); let countDead = 0; for (let i = 0; i < entities.length; ++i) { const ent = entities[i]; if (!ent || !ent.id) { return cleanAndReindex(entities, true); } if (ent.dead) { for (let k of Object.keys(ent)) { if (k !== "id" && k !== "dead") delete ent[k]; } ++countDead; if ( countDead > reindexAfter || performance.now() - lastClean > reindexMaxTime ) { return cleanAndReindex(entities); } } } return entities; }; }3c:T85f,handleMouseEvents = function (canvas, enableContextMenu = false) { const mouseState = { pos: null, down: false, button: 0, main: false, second: false, click: false, shift: false, ctrl: false, alt: false, meta: false, handled: false }; const events = { down: null, move: null, up: null, leave: null }; if (!enableContextMenu) { canvas.oncontextmenu = (e) => e.preventDefault(); } canvas.onmousemove = (e) => { e.preventDefault(); e.stopPropagation(); events.move = e; }; canvas.onmouseleave = (e) => { e.preventDefault(); e.stopPropagation(); events.leave = e; }; canvas.onmouseup = (e) => { e.preventDefault(); e.stopPropagation(); events.up = e; }; canvas.onmousedown = (e) => { e.preventDefault(); e.stopPropagation(); events.down = e; }; const onLoopStart = () => { if (events.down) { mouseState.down = true; mouseState.click = true; mouseState.button = events.down.button; mouseState.main = events.down.button === 0; mouseState.second = events.down.button === 2; mouseState.shift = events.down.shiftKey; mouseState.ctrl = events.down.ctrlKey; mouseState.alt = events.down.altKey; mouseState.meta = mouseState.cmd = events.down.metaKey; mouseState.pos = vec2(events.down.offsetX, events.down.offsetY); events.down = null; } if (events.move) { mouseState.pos = vec2(events.move.offsetX, events.move.offsetY); events.move = null; } if (!mouseState.click && (events.up || events.leave)) { mouseState.down = false; mouseState.main = false; mouseState.second = false; mouseState.shift = false; mouseState.ctrl = false; mouseState.alt = false; mouseState.meta = mouseState.cmd = false; events.up = null; if (events.leave) { mouseState.pos = null; events.leave = null; } } mouseState.handled = false; }; const onLoopEnd = () => { mouseState.click = false; }; return { mouseState, onLoopStart, onLoopEnd }; }3d:T864,KeyboardCapturer = () => { // thanks to https://observablehq.com/@kube/keyboard const element = document.createElement("button"); const CSS_CLASSNAME = "input__keyboard-capturer"; element.className = CSS_CLASSNAME; element.appendChild(html``); // // Listeners // const keys = {}; element.addEventListener("keydown", (event) => { keys[event.key] = true; event.preventDefault(); }); element.addEventListener("keyup", (event) => { delete keys[event.key]; event.preventDefault(); }); element.addEventListener("blur", () => Object.keys(keys).forEach((k) => delete keys[k]) ); element.addEventListener("mousedown", () => { if (document.activeElement === element) { setTimeout(() => element.blur(), 0); } }); // Expose a simple method to capture keyboard from another cell element.capture = (toggle = false) => { if (toggle && document.activeElement === element) { setTimeout(() => element.blur(), 0); } else { element.focus(); setTimeout(() => element.focus(), 0); } }; element.keys = keys; return element; }3e:T548,class ImgSprite { constructor(texture, x, y, w, h) { this.texture = texture; this.width = w; this.height = h; this.offset = vec2(x, y); this.anchor = vec2(0.5); this.scale = vec2(1); this.blendMode = null; } static fromTile(texture, col = 0, row = 0, w = 0, h = 0) { const x = col * w; const y = row * (h || w); return new ImgSprite(texture, x, y, w, h || w); } static fromSprite(texture, x = 0, y = 0, w = undefined, h = undefined) { const width = w ?? texture.width; const height = h ?? texture.height; return new ImgSprite(texture, x, y, width, height); } withAnchor(anchor) { this.anchor = vec2(anchor); return this; } withScale(scale) { this.scale = vec2(scale); return this; } withBlendMode(blendMode) { this.blendMode = blendMode; return this; } draw(ctx, targetPos = vec2.ZERO, scale = undefined) { const s = scale ?? this.scale; const p = vec2(this.width, this.height) .multiply(this.anchor) .negate() .multiply(s) .add(targetPos); if (this.blendMode) ctx.globalCompositeOperation = this.blendMode; ctx.drawImage( this.texture, this.offset.x, this.offset.y, this.width, this.height, p.x, p.y, this.width * s.x, this.height * s.y ); } }3f:T82d,class AnimatedSprite { #nextFrame = 0; #frameDelay; #frameLastTime; constructor(texture, frames, fps = 10) { this.texture = texture; this.frames = frames; this.frame = 0; this.anchor = vec2(0.5); this.scale = vec2(1); this.blendMode = null; this.withFPS(fps); } static fromFrames(texture, cols, rows = 1, offset = vec2.ZERO) { const fw = texture.width / cols; const fh = texture.height / rows; const frames = []; let row, col, x, y; for (row = 0; row < rows; ++row) { for (col = 0; col < cols; ++col) { x = offset.x + col * fw; y = offset.y + row * fh; frames.push({ x, y, w: fw, h: fh }); } } return new AnimatedSprite(texture, frames); } get playing() { return this.#nextFrame !== 0; } play(reversed = false) { this.frame = reversed ? this.frames.length - 1 : 0; this.#nextFrame = reversed ? -1 : 1; this.#frameLastTime = performance.now(); } withAnchor(anchor) { this.anchor = vec2(anchor); return this; } withScale(scale) { this.scale = vec2(scale); return this; } withBlendMode(blendMode) { this.blendMode = blendMode; return this; } withFPS(fps) { this.#frameDelay = 1000 / fps; return this; } draw(ctx, targetPos = vec2.ZERO, scale = undefined) { const s = scale ?? this.scale; const { x, y, w, h } = this.frames[this.frame]; const p = vec2(w, h) .multiply(this.anchor) .negate() .multiply(s) .add(targetPos); if (this.blendMode) ctx.globalCompositeOperation = this.blendMode; ctx.drawImage(this.texture, x, y, w, h, p.x, p.y, w * s.x, h * s.y); if (this.#nextFrame !== 0) { if (performance.now() - this.#frameLastTime > this.#frameDelay) { this.frame += this.#nextFrame; if (this.frame < 0 || this.frame >= this.frames.length) { this.frame = Math.max( 0, Math.min(this.frames.length - 1, this.frame) ); } this.#frameLastTime = performance.now(); } } } }40:Ta33,class Circle { constructor(center, radius) { this.center = center; this.radius = radius; this.recalc(); } recalc() { this.outerAABB = box2.centered(this.center, this.radius); this.innerAABB = box2.centered(this.center, vec2(this.radius * Math.SQRT2)); this.rSq = this.radius ** 2; } containsPoint(p) { return this.center.distanceToSquared(p) <= this.rSq; } containsCircle(c) { const rDiff = this.radius - c.radius; if (rDiff < 0) return false; return this.center.distanceToSquared(c.center) <= rDiff * rDiff; } intersectsCircle(c) { const rsSq = (this.radius + c.radius) ** 2; return this.center.distanceToSquared(c.center) <= rsSq; } containsBox(box) { if (!this.outerAABB.intersectsBox(box)) return false; if (this.innerAABB.containsBox(box)) return true; if (box.min.distanceToSquared(this.center) > this.rSq) return false; if (box.max.distanceToSquared(this.center) > this.rSq) return false; const tv = (this._tmpVec ??= vec2()); tv.set(box.min.x, box.max.y); if (tv.distanceToSquared(this.center) > this.rSq) return false; tv.set(box.max.x, box.min.y); if (tv.distanceToSquared(this.center) > this.rSq) return false; return true; } containsIntersectingBox(box) { if (this.innerAABB.containsBox(box)) return true; if (box.min.distanceToSquared(this.center) > this.rSq) return false; if (box.max.distanceToSquared(this.center) > this.rSq) return false; const tv = (this._tmpVec ??= vec2()); tv.set(box.min.x, box.max.y); if (tv.distanceToSquared(this.center) > this.rSq) return false; tv.set(box.max.x, box.min.y); if (tv.distanceToSquared(this.center) > this.rSq) return false; return true; } intersectsBox(box) { if (!this.outerAABB.intersectsBox(box)) return false; const tb = (this._tmpBox ??= box2()); tb.min.set(box.min.x - this.radius, box.min.y); tb.max.set(box.max.x + this.radius, box.max.y); if (tb.containsPoint(this.center)) return true; tb.min.set(box.min.x, box.min.y - this.radius); tb.max.set(box.max.x, box.max.y + this.radius); if (tb.containsPoint(this.center)) return true; if (box.min.distanceToSquared(this.center) <= this.rSq) return true; if (box.max.distanceToSquared(this.center) <= this.rSq) return true; const tv = (this._tmpVec ??= vec2()); tv.set(box.min.x, box.max.y); if (tv.distanceToSquared(this.center) <= this.rSq) return true; tv.set(box.max.x, box.min.y); if (tv.distanceToSquared(this.center) <= this.rSq) return true; return false; } }41:T725,box2 = { const _box2 = (a, b, c, d) => { if (a?.isVector2) { if (b?.isVector2) return new THREE.Box2(a, b); if (typeof b === "number") return new THREE.Box2(a, vec2(b, c ?? b)); if (b?.w !== undefined) return new THREE.Box2( vec2(a.x + (b.x ?? 0), a.y + (b.y ?? 0)), vec2(a.x + b.w, a.y + b.h) ); else return new THREE.Box2(vec2(0), a); } if (typeof a === "number") { if (c === undefined) return new THREE.Box2(vec2(0), vec2(a, b ?? a)); else return new THREE.Box2(vec2(a, b), vec2(c, d ?? c)); } if (a?.isBox2) return a.clone(); return new THREE.Box2(); }; const _v1 = vec2(); const _v2 = vec2(); _box2.centered = (a, b, c, d) => { if (a?.isVector2) { if (b?.isVector2) { return new THREE.Box2().setFromCenterAndSize(a, b); } if (typeof b === "number") { if (typeof c === "number") return new THREE.Box2().setFromCenterAndSize(a, _v1.set(b, c)); return new THREE.Box2().setFromCenterAndSize(a, _v1.set(b * 2, b * 2)); } return new THREE.Box2().setFromCenterAndSize(vec2.ZERO, a); } if (typeof a === "number") { if (typeof d === "number") return new THREE.Box2().setFromCenterAndSize( _v1.set(a, b), _v2.set(c, d) ); if (typeof c === "number") return new THREE.Box2().setFromCenterAndSize( _v1.set(a, b), _v2.set(c * 2, c * 2) ); if (typeof b === "number") return new THREE.Box2().setFromCenterAndSize(vec2.ZERO, _v2.set(a, b)); return new THREE.Box2().setFromCenterAndSize( vec2.ZERO, _v2.set(a * 2, a * 2) ); } }; _box2.rect = (x, y, w, h) => new THREE.Box2(vec2(x, y), vec2(x + w, y + h)); return _box2; }42:[] 2f:{"id":"cbf53bb896d14826","slug":"the-nature-of-code-tools","title":"The Nature of Code - Tools","thumbnail":"a349ee8af20dae3a28514fa56801995e259bd25a1749e146844022e1b7a9fd08","access_level":"public","create_time":"$D2021-09-13T20:10:12.964Z","update_time":"$D2025-03-20T14:01:30.439Z","view_time":null,"first_public_time":"$D2021-10-29T22:32:46.000Z","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":3528,"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"}],"comments":[],"custom_thumbnail":false,"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 - Tools","cells":[{"id":0,"value":"# The Nature of Code - Tools\n\nTools, external imports and simple [ECS](https://en.wikipedia.org/wiki/Entity_component_system) for NoC example implementations.\n\nNote, that this is pretty much a big mess, as it is changed, reused, or misused by myself for each new example and task. This is not reference for good programming practices - more to the contrary ;P","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1084,"value":"```javascript\nimport {\n // commons\n vec2,\n random,\n plotFn,\n simplex,\n PI,\n // simple ecs-based simulation\n sim,\n basicMover,\n movement,\n overflowWrap,\n trailRenderer,\n renderer,\n stateDump,\n tag,\n debug,\n trail,\n} from \"@ajur/the-nature-of-code-tools\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":394,"value":"## Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":402,"value":"sim({\n visibility,\n systems: [movement, overflowWrap, renderer],\n entities: [\n entity(position(50, 50), graphics(), circle(25), velocity(0.6, 0.2))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":398,"value":"### Custom acceleration systems\n\nBased on Nature of Code chapter 1 examples.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":410,"value":"constAcc = (x = 0, y = 0) => ({ constAcc: vec2(x, y) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":422,"value":"constantAcceleration = (env, ents) => {\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n ent.acceleration && ent.constAcc && ent.acceleration.copy(ent.constAcc);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":414,"value":"noiseAcc = ({ t = 0, dt = 0.01, offset = 0, speed = 0.5 } = {}) => ({\n noiseAcc: { t, dt, offset, speed }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":426,"value":"noiseAcceleration = (env, ents) => {\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n if (ent.acceleration && ent.noiseAcc) {\n ent.noiseAcc.t += ent.noiseAcc.dt;\n const ax =\n simplex.noise2D(ent.noiseAcc.t, ent.noiseAcc.offset) *\n ent.noiseAcc.speed;\n const ay =\n simplex.noise2D(ent.noiseAcc.offset, ent.noiseAcc.t) *\n ent.noiseAcc.speed;\n ent.acceleration.set(ax, ay);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":418,"value":"accToMouse = ({ speed = 0.5 } = {}) => ({ accToMouse: { speed } })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"followMouseAcceleration = (env, ents) => {\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n if (ent.position && ent.acceleration && ent.accToMouse) {\n if (env.mouse.pos) {\n const dir = vec2()\n .subVectors(env.mouse.pos, ent.position)\n .normalize()\n .multiplyScalar(ent.accToMouse.speed);\n ent.acceleration.copy(dir);\n } else if (ent.velocity) {\n ent.acceleration.copy(ent.velocity).negate();\n } else {\n ent.acceleration.set(0, 0);\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":566,"value":"### May the force be with you\n\nNoC chapter 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":577,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":628,"value":"forcedByMouseControlledWind = tag(\"forcedByMouseControlledWind\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":597,"value":"mouseControlledWind = (env, ents) => {\n if (env.mouse.down && env.mouse.main) {\n const force = env.mouse.pos\n .clone()\n .sub(env.center)\n .setY(0)\n .clampScalar(-0.1, 0.1);\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n ent.forcedByMouseControlledWind && ent.force && ent.force.add(force);\n }\n env.mouse.handled = true;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":700,"value":"repeledFromEdges = tag(\"repeledFromEdges\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":698,"value":"repelFromEdges = (env, ents) => {\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n const force = vec2(\n 0.5 - ent.position.x / env.width,\n 0.5 - ent.position.y / env.height\n );\n ent.repeledFromEdges && ent.force && ent.force.add(force);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":743,"value":"affectedByFrictionArea = tag(\"affectedByFrictionArea\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":745,"value":"frictionArea = (frictionCoefficient) => ({ frictionArea: {coefficient: frictionCoefficient} })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":747,"value":"applyFriction = (env, ents) => {\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const area = ents[entIdx];\n if (area.frictionArea) {\n for (const id of area.collisions.containsPositionOf) {\n const collider = ents[id.idx];\n if (\n collider.affectedByFrictionArea &&\n collider.force &&\n collider.velocity\n ) {\n collider.force.add(\n removeZeroError(\n collider.velocity\n .clone()\n .normalize()\n .negate()\n .multiplyScalar(area.frictionArea.coefficient)\n )\n );\n }\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"## Common components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":254,"value":"tag = (name) => ({ [name]: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":624,"value":"debug = tag(\"debug\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"position = (x = 0, y = 0) => ({ position: vec2(x, y) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"velocity = (x = 0, y = 0) => ({ velocity: vec2(x, y) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"clampVelocity = ({ min = 0, max = 0 }) => ({ clampVelocity: { min, max } })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"acceleration = (x = 0, y = 0) => ({ acceleration: vec2(x, y) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":586,"value":"mass = (m = 1) => ({ mass: m })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":680,"value":"force = (f = vec2()) => ({ force: f })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1121,"value":"rotation = (a = 0) => ({\n rotation: a\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1555,"value":"rotateToPointer = (min = 0, max = TWO_PI) => ({\n rotateToPointer: { min, max }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1247,"value":"angularVelocity = (av = 0) => ({\n angularVelocity: av\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1249,"value":"angularAcceleration = (aa = 0) => ({\n angularAcceleration: aa\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1136,"value":"clampAngularVelocity = (min, max = null) => ({\n clampAngularVelocity: {\n min: max != null ? min : -min,\n max: max != null ? max : min\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1252,"value":"rotateWithDirection = tag(\"rotateWithDirection\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2006,"value":"draggable = tag(\"draggable\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1573,"value":"killOnStageExit = (sides = \"LRTB\") => {\n const has = (s) =>\n sides.indexOf(s) >= 0 || sides.indexOf(s.toLowerCase()) > 0;\n return {\n killOnStageExit: {\n left: has(\"LEFT\") || has(\"L\"),\n right: has(\"RIGHT\") || has(\"R\"),\n top: has(\"TOP\") || has(\"T\"),\n bottom: has(\"BOTTOM\") || has(\"B\")\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2400,"value":"onStageExit = {\n const check = (all, sides, side) =>\n sides?.[side] ?? all[side] ?? (typeof all === \"string\" ? all : undefined);\n return (all, sides) => ({\n onStageExit: {\n top: check(all, sides, \"top\"),\n right: check(all, sides, \"right\"),\n bottom: check(all, sides, \"bottom\"),\n left: check(all, sides, \"left\")\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"circle = (r) => ({ circle: { radius: r } })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"rect = (x, y, w, h) => ({ rect: { x, y, w, h } })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2272,"value":"polygon = (polygon) => ({\n polygon\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":818,"value":"collisions = ({ onCollide = null, layer = 0, mask = 0 } = {}) => ({\n collisions: { containsPositionOf: [], onCollide, layer, mask }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2613,"value":"detector = ({\n onDetect = null, // (detected[ent.id], env, self) => {}\n range = 50,\n fov = 0,\n layer = 1,\n mask = 0,\n debug = false\n} = {}) => ({\n detector: {\n detected: [],\n onDetect,\n range,\n fov,\n layer,\n mask,\n debug,\n rangeSq: range * range\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"trail = ({ color = null, width = 1, alpha = 0.4 } = {}) => ({\n trail: { color, width, alpha, start: null, end: null }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2117,"value":"attachTo = (ent, offset = vec2()) => ({\n attachTo: {\n target: ent.id,\n _target: ent,\n offset\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2241,"value":"onClick = (onClick) => ({ onClick }) // onClick: (ent, relativeMousePos, env) => trueIfKeepPropagating","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1188,"value":"### Entity rendering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":83,"value":"graphics = ({\n lineColor = \"#000\",\n lineWidth = 1,\n fillColor = \"#faaa\",\n noTransform = false,\n draw\n} = {}) => ({\n graphics: {\n lineColor,\n lineWidth,\n fillColor,\n noTransform,\n draw:\n draw ||\n ((ctx, self) =>\n self.rect\n ? drawRect(ctx, self)\n : self.circle\n ? drawCircle(ctx, self)\n : self.polygon\n ? drawPolygon(ctx, self)\n : null)\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1195,"value":"drawCircle = (ctx, { circle }) => {\n ctx.beginPath();\n ctx.arc(0, 0, circle.radius, 0, TWO_PI);\n ctx.fill();\n ctx.stroke();\n ctx.closePath();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1198,"value":"drawRect = (ctx, { rect }) => {\n const { x, y, w, h } = rect;\n ctx.fillRect(x, y, w, h);\n ctx.strokeRect(x, y, w, h);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1208,"value":"drawArrow = (ctx, { rect, circle }) => {\n const d = 2 * (circle?.radius || 0);\n const w = rect?.w || d;\n const h = rect?.h || d;\n\n ctx.beginPath();\n ctx.moveTo(-w / 4, 0);\n ctx.lineTo(-w / 2, -h / 2);\n ctx.lineTo(w / 2, 0);\n ctx.lineTo(-w / 2, h / 2);\n ctx.lineTo(-w / 4, 0);\n ctx.fill();\n ctx.stroke();\n ctx.closePath();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2275,"value":"drawPolygon = (ctx, { polygon }) => {\n ctx.beginPath();\n ctx.moveTo(polygon[0].x, polygon[0].y);\n for (let pi = 1; pi < polygon.length; ++pi) {\n ctx.lineTo(polygon[pi].x, polygon[pi].y);\n }\n ctx.closePath();\n ctx.fill();\n ctx.stroke();\n ctx.closePath();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1508,"value":"sprite = (image, { scale, anchor, blendMode } = {}) => {\n const spr = image instanceof ImgSprite ? image : ImgSprite.fromSprite(image);\n if (scale) spr.withScale(scale);\n if (anchor) spr.withAnchor(anchor);\n if (blendMode) spr.withBlendMode(blendMode);\n return {\n sprite: spr\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2082,"value":"customRenderer = (renderFunction) => ({\n customRenderer: renderFunction // (ctx, ent, env) => void - raw rendering function, no transitions to position or rotation done\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2565,"value":"hidden = tag(\"hidden\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"### Entity factories","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":78,"value":"entity = {\n let lastGen = 0;\n return (...components) =>\n Object.assign(\n {\n id: { _entity: true, gen: ++lastGen, idx: -1 },\n dead: false\n },\n ...components.filter((c) => !!c)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":297,"value":"basicMover = (\n { x = 0, y = 0, vMax, a = 0, m = 1, fill = \"#faaa\", w, h, r, draw },\n ...components\n) =>\n entity(\n position(x, y),\n velocity(),\n vMax ? clampVelocity({ max: vMax }) : {},\n acceleration(),\n mass(m),\n rotation(a),\n graphics({ fillColor: fill, draw }),\n w && h ? rect(-w / 2, -h / 2, w, h) : {},\n r ? circle(r) : {},\n ...components\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"## Common systems","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":176,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1255,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"overflowWrap = (env, ents) => {\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n if (ent.position) {\n ent.position.set(\n wrap(ent.position.x, 0, env.width),\n wrap(ent.position.y, 0, env.height)\n );\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1566,"value":"overflowKill = (env, ents) => {\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n if (ent.killOnStageExit && ent.position) {\n if (ent._overflowKillOffset === undefined) {\n if (ent.circle) ent._overflowKillOffset = 10 + ent.circle.radius;\n else if (ent.rect)\n ent._overflowKillOffset = Math.max(ent.rect.w, ent.rect.h);\n else if (ent.polygon)\n ent._overflowKillOffset =\n 0.5 * d3.polygonLength(ent.polygon.map((v) => v.toArray()));\n else ent._overflowKillOffset = 10;\n }\n const offset = ent._overflowKillOffset;\n\n if (\n (ent.killOnStageExit.left && ent.position.x < -offset) ||\n (ent.killOnStageExit.right && ent.position.x > env.width + offset) ||\n (ent.killOnStageExit.top && ent.position.y < -offset) ||\n (ent.killOnStageExit.bottom && ent.position.y > env.height + offset)\n ) {\n env.killEntity(ent);\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2439,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":822,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2618,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2009,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"stateDump = {\n const replacer = (k, v) => {\n if (k?.startsWith(\"_\")) {\n return undefined;\n }\n return v;\n };\n\n return (env, ents) => {\n env.debug.push(\"env state:\");\n env.debug.push(`-- width: ${env.width}`);\n env.debug.push(`-- height: ${env.height}`);\n env.debug.push(`-- ents (alive): ${ents.length} (${env.countEntities()})`);\n env.debug.push(`-- mouse: ${JSON.stringify(env.mouse)}`);\n env.debug.push(`-- keys: ${JSON.stringify(env.keys)}`);\n\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n if (ent.debug) {\n env.debug.push(\"entity state:\");\n for (let comp in ent) {\n if (!comp.startsWith(\"_\")) {\n env.debug.push(\n `-- ${comp}: ${JSON.stringify(ent[comp], replacer)}`\n );\n }\n }\n }\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2750,"value":"showStats = ({\n setup: (env) => {\n env.stats = [];\n },\n postUpdate: (env, ents) => {\n env.stats.splice(\n 0,\n 0,\n `entities: ${env.countEntities()}`,\n `fps: ${env.clock.fps}`,\n `avg fps: ${env.clock.avgFps}`\n );\n\n // const avg = getAvarageColor(env.ctx, 5, 5, 5); // this sems to be too costly -_-\n // const isLight = avg.isLight()\n\n env.ctx.save();\n\n env.ctx.fillStyle = \"#7f7f7f\";\n env.ctx.textBaseline = \"top\";\n env.ctx.font = \"9px monospace\";\n env.ctx.textRendering = \"optimizeSpeed\";\n\n for (let i = 0; i < env.stats.length; ++i) {\n env.ctx.fillText(env.stats[i], 4, 4 + 10 * i);\n }\n\n env.stats.length = 0;\n\n env.ctx.restore();\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1558,"value":"rotateToPointerSys = (env, ents) => {\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n if (ent.rotateToPointer && ent.position && ent.rotation != null) {\n if (env.mouse.pos) {\n let angle = vec2()\n .subVectors(env.mouse.pos, ent.position)\n .normalize()\n .angle();\n let { min, max } = ent.rotateToPointer;\n ent.rotation = clampAngle(angle, min, max);\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1980,"value":"globalForces = ({ gravity = 0.5, friction = 0.01 } = {}) => {\n const gravityVector = gravity?.isVector2 ? gravity : vec2(0, gravity);\n return (env, ents) => {\n for (let ent of ents) {\n if (!ent.dead && ent.force && ent.velocity) {\n // apply gravity\n ent.force.add(gravityVector.clone().multiplyScalar(ent.mass));\n // apply friction\n ent.force.add(\n removeZeroError(\n ent.velocity.clone().negate().multiplyScalar(friction)\n )\n );\n }\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2121,"value":"moveAttached = (env, ents) => {\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n if (ent.attachTo) {\n if (!ent.attachTo._target) {\n ent.attachTo._target = ents[ent.attachTo.target.idx];\n }\n const target = ent.attachTo._target;\n ent.position.copy(target.position).add(ent.attachTo.offset);\n if (target.rotation) {\n ent.position.rotateAround(target.position, target.rotation);\n ent.rotation = target.rotation;\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2245,"value":"onEntityClick = (env, ents) => {\n if (env.mouse.click && !env.mouse.handled) {\n let i = ents.length;\n while (i--) {\n const ent = ents[i];\n if (ent.onClick && pointInEntity(env.mouse.pos, ent)) {\n env.mouse.handled = true;\n const stopPropagation = ent.onClick(\n ent,\n env.mouse.pos\n .clone()\n .sub(ent.position)\n .rotateAround(vec2.ZERO, -ent.rotation),\n env\n );\n if (stopPropagation) return;\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2603,"value":"entityEraserSys = (radius = 50) =>\n (env, ents) => {\n if (env.mouse.second && !env.mouse.handled) {\n env.ctx.fillStyle = \"#f007\";\n env.ctx.beginPath();\n env.ctx.arc(env.mouse.pos.x, env.mouse.pos.y, radius, 0, TWO_PI);\n env.ctx.fill();\n const rsq = radius * radius;\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n if (\n !ent.dead &&\n ent.position &&\n env.mouse.pos.distanceToSquared(ent.position) < rsq\n ) {\n env.killEntity(ent);\n }\n }\n env.mouse.handled = true;\n }\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"### Renderer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":56,"value":"renderer = (env, ents) => {\n const { ctx } = env;\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n if (ent.dead || ent.hidden) continue;\n ctx.save();\n if (ent.position && !ent.graphics?.noTransform) {\n ctx.translate(ent.position.x, ent.position.y);\n }\n if (ent.rotation != null && !ent.graphics?.noTransform) {\n ctx.rotate(ent.rotation);\n }\n if (ent.graphics) {\n ctx.strokeStyle = ent.graphics.lineColor;\n ctx.lineWidth = ent.graphics.lineWidth;\n ctx.fillStyle = ent.graphics.fillColor;\n ent.graphics.draw?.(ctx, ent, env);\n }\n if (ent.sprite) {\n ent.sprite.draw(ctx);\n }\n ctx.restore();\n if (ent.customRenderer) {\n ent.customRenderer(ctx, ent, env);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":524,"value":"trailRenderer = (env, ents) => {\n if (!env.trail) {\n env.trail = {\n ctx: DOM.context2d(env.width, env.height),\n srcDim: [\n 0,\n 0,\n env.width * devicePixelRatio,\n env.height * devicePixelRatio\n ],\n destDim: [0, 0, env.width, env.height]\n };\n }\n for (let entIdx = 0; entIdx < ents.length; ++entIdx) {\n const ent = ents[entIdx];\n if (ent.dead) continue;\n if (ent.trail && ent.trail.start && ent.trail.end) {\n env.trail.ctx.lineWidth = ent.trail.width;\n env.trail.ctx.strokeStyle =\n ent.trail.color || (ent.graphics && ent.graphics.fillColor) || \"#eef\";\n env.trail.ctx.globalAlpha = ent.trail.alpha;\n env.trail.ctx.beginPath();\n env.trail.ctx.moveTo(...ent.trail.start);\n env.trail.ctx.lineTo(...ent.trail.end);\n env.trail.ctx.stroke();\n env.trail.ctx.closePath();\n }\n }\n env.ctx.drawImage(\n env.trail.ctx.canvas,\n ...env.trail.srcDim,\n ...env.trail.destDim\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"## Main loop","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2966,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2998,"value":"class QueryEngine {\n onLoopStart(env, ents) {}\n onLoopEnd(env, ents) {}\n pointsInBox(box) {\n return [];\n }\n pointsInRange(pos, range) {\n return [];\n }\n\n static isQueryEngine(obj) {\n return (\n typeof obj === \"object\" &&\n [\"onLoopStart\", \"onLoopEnd\", \"pointsInBox\", \"pointsInRange\"].every(\n (fn) => typeof obj[fn] === \"function\"\n )\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1495,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1773,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2840,"value":"clockTicker = (sampleSize = 120) => {\n const frameTimes = [performance.now()];\n const visibilityCheckDelta = 1000;\n let startTime;\n let ticks = 0;\n\n return {\n fps: 0,\n avgFps: 0,\n delta: 0,\n\n tick() {\n const current = performance.now();\n if (!startTime) {\n startTime = current;\n ticks = 1;\n } else {\n ++ticks;\n }\n this.delta = current - frameTimes[frameTimes.length - 1];\n if (this.delta > visibilityCheckDelta) {\n // visibility paused fix\n frameTimes.length = 0;\n frameTimes.push(current);\n startTime = current;\n ticks = 1;\n this.delta = 0;\n }\n\n if (frameTimes.length >= sampleSize) {\n frameTimes.shift();\n }\n frameTimes.push(current);\n\n let avgDelta = (current - frameTimes[0]) / (frameTimes.length - 1);\n this.fps = Math.round(1000 / avgDelta);\n\n avgDelta = (current - startTime) / ticks;\n this.avgFps = Math.round(1000 / avgDelta);\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":195,"value":"## Other tools","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1900,"value":"justCanvas = function* (\n { width, height = 300, visibility, keepState = false, bgColor = null },\n render // (ctx, env) => {}\n) {\n const ctx = DOM.context2d(width, height);\n\n const mouseHandler = handleMouseEvents(ctx.canvas);\n const mouse = mouseHandler.mouseState;\n\n if (bgColor) ctx.canvas.style.background = bgColor;\n\n let step = 0;\n let startTime = performance.now() / 1000;\n let stepTime = 0;\n\n while (true) {\n mouseHandler.onLoopStart();\n if (!keepState) ctx.clearRect(0, 0, width, height);\n\n const lastTime = stepTime;\n stepTime = performance.now() / 1000 - startTime;\n\n render(ctx, {\n step,\n dt: stepTime - lastTime,\n t: stepTime,\n width,\n height,\n mouse\n });\n\n ++step;\n yield visibility(ctx.canvas);\n mouseHandler.onLoopEnd();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"modulo = (a, n) => a - n * Math.floor(a / n) // after D. Knuth","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"clamp = (x, min, max) => Math.max(Math.min(x, max), min)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1594,"value":"clampAngle = (a, min, max) => {\n min = modulo(min, TWO_PI);\n max = modulo(max, TWO_PI);\n a = modulo(a, TWO_PI);\n if (max < min) max += TWO_PI;\n const halfLeft = (TWO_PI - (max - min)) / 2;\n const offset = halfLeft - min;\n const ao = modulo(a + offset, TWO_PI);\n if (ao < min + offset) a = min;\n if (ao > max + offset) a = max;\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"wrap = (x, min, max) => modulo(x - min, max - min) + min","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"repeat = (fn, times) => {\n while (times--) {\n fn()\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":800,"value":"eq = (a, b, precision = EPSILON) => Math.abs(a - b) < precision","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":849,"value":"pointInCircle = (c, { radius }, p) => c.distanceTo(p) <= radius","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":856,"value":"pointInRect = (c, { x, y, w, h }, p, a = 0) => {\n const pp = p.clone().sub(c).rotateAround(vec2.ZERO, -a);\n return pp.x >= x && pp.x <= x + w && pp.y >= y && pp.y <= y + h;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2283,"value":"pointInPolygon = (c, verts, p, a = 0) =>\n d3.polygonContains(\n verts.map((v) => [v.x, v.y]),\n p.clone().sub(c).rotateAround(vec2.ZERO, -a).toArray()\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2012,"value":"pointInEntity = (point, ent) => {\n if (ent.circle) return pointInCircle(ent.position, ent.circle, point);\n if (ent.rect) return pointInRect(ent.position, ent.rect, point, ent.rotation);\n if (ent.polygon)\n return pointInPolygon(ent.position, ent.polygon, point, ent.rotation);\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2370,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3526,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3139,"value":"getAvarageColor = (ctx, ox = 0, oy = 0, w = 5, h) => {\n const bg = vec3(255, 255, 255);\n const canvasBg = tinycolor(ctx.canvas.style.background || \"#0000\").toRgb();\n\n bg.multiplyScalar(1 - canvasBg.a).addScaledVector(\n vec3(canvasBg.r, canvasBg.g, canvasBg.b),\n canvasBg.a\n );\n\n const data = ctx.getImageData(ox, oy, w, h ?? w).data;\n const pixelsCount = data.length / 4;\n\n const avg = vec3();\n const tmp = vec3();\n\n for (let i = 0; i < data.length; i += 4) {\n const a = data[i + 3] / 255;\n tmp\n .set(data[i], data[i + 1], data[i + 2])\n .multiplyScalar(a)\n .addScaledVector(bg, 1 - a);\n avg.add(tmp);\n }\n avg.divideScalar(pixelsCount);\n\n return tinycolor({ r: avg.x, g: avg.y, b: avg.z });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3203,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3206,"value":"circle2 = (a, b, c) => {\n if (a?.isVector2) {\n if (typeof b === \"number\") return new Circle(a, b);\n else return new Circle(a, 0);\n }\n if (typeof a === \"number\") {\n if (typeof b === \"number\") {\n if (typeof c === \"number\") return new Circle(vec2(a, b), c);\n return new Circle(vec2(a, b), 0);\n }\n return new Circle(vec2(0), a);\n }\n return new Circle(vec2(0), 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3340,"value":"shuffleArray = (array) => {\n for (let i = array.length - 1; i >= 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3344,"value":"array = {\n const arr = (len = 0, val = 0) =>\n Array.from(\n { length: Math.max(0, len) },\n typeof val === \"function\" ? (_, i) => val(i) : () => val\n );\n\n arr.nbs = (arr, idx, dist = 1) => {\n const n = [];\n let i = Math.max(0, idx - dist);\n let ni = Math.min(idx + dist, arr.length - 1);\n for (; i <= ni; ++i) {\n if (i !== idx) n.push(arr[i]);\n }\n return n;\n };\n arr.nbsw = (arr, idx, dist = 1) => {\n const n = [];\n for (let i = idx - dist; i <= idx + dist; ++i) {\n if (i !== idx) n.push(arr[modulo(i, arr.length)]);\n }\n return n;\n };\n\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3347,"value":"array2d = {\n const arr = (cols = 0, rows, val = 0) => {\n const fn = typeof val === \"function\" ? val : () => val;\n return Array.from({ length: Math.max(0, rows ?? cols) }, (_, r) =>\n Array.from({ length: Math.max(0, cols) }, (_, c) => fn(c, r))\n );\n };\n\n arr.nbs = (a, col, row, dist = 1) => {\n const n = [];\n let r = Math.max(0, row - dist);\n let rn = Math.min(row + dist, a.length - 1);\n let c, cn;\n for (; r <= rn; ++r) {\n c = Math.max(0, col - dist);\n cn = Math.min(col + dist, a[r].length - 1);\n for (; c <= cn; ++c) {\n if (r !== row || c !== col) n.push(a[r][c]);\n }\n }\n return n;\n };\n arr.nbsw = (a, col, row, dist = 1) => {\n const n = [];\n for (let r = row - dist; r <= row + dist; ++r) {\n const ri = modulo(r, a.length);\n for (let c = col - dist; c <= col + dist; ++c) {\n const ci = modulo(c, a[ri].length);\n if (ri !== row || ci !== col) n.push(a[ri][ci]);\n }\n }\n return n;\n };\n\n return arr;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3512,"value":"// example usage: Inputs.button([\n// [\"Set x to 0\", () => set(viewof x, 0)],\n// [\"Set form.x to 0\", () => set(viewof form, 0, 'x')]\n// [\"Set form.x to 0\", () => set(viewof form, {x: 0})]\n// ])\nfunction setInput(input, value, key = null) {\n if (key) input.value = { ...input.value, [key]: value };\n else if (typeof value === \"object\" && !Array.isArray(value))\n input.value = { ...input.value, ...value };\n else input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":971,"value":"#### function plot\n[functionPlot](https://mauriciopoppe.github.io/function-plot/) for visualisation, example usage:\n\n```js\nplotFn(\"x*x\", \"x^3\", (x) => 1 / x)\n\nplotFn({\n width,\n height: 100,\n data: [{ fn: \"atan(x)\" }],\n yAxis: { domain: [-2, 2] }\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":964,"value":"functionPlot = require(\"function-plot@1.22.7/dist/function-plot.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":979,"value":"plotFn = (...spec) => {\n const target = DOM.element(\"div\");\n if (spec.length === 1 && spec[0].data) {\n functionPlot({ ...spec[0], target });\n } else {\n functionPlot({\n data: spec.map((fnSpec) => {\n if (_.isString(fnSpec)) return { fn: fnSpec };\n if (_.isFunction(fnSpec))\n return { fn: (scope) => fnSpec(scope.x), graphType: \"polyline\" };\n return fnSpec;\n }),\n target: target\n });\n }\n return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":485,"value":"#### vectors and some math from [three.js](https://threejs.org/)\nplus some extra functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":34,"value":"THREE = import(\"three@0.173.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"vec2 = {\n const v2 = (x = 0, y) =>\n x.isVector2\n ? x.clone()\n : x.x != null\n ? new THREE.Vector2(x.x, x.y)\n : y != null\n ? new THREE.Vector2(x, y)\n : new THREE.Vector2(x, x);\n v2.ZERO = v2();\n return v2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"vec3 = {\n const v3 = (x = 0, y, z = 0) =>\n x.isVector3\n ? x.clone()\n : y != null\n ? new THREE.Vector3(x, y, z)\n : new THREE.Vector3(x, x, x);\n v3.ZERO = v3();\n return v3;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3109,"value":"vec4 = {\n const v4 = (x = 0, y, z = 0, w = 0) =>\n x.isVector4\n ? x.clone()\n : y != null\n ? new THREE.Vector4(x, y, z, w)\n : new THREE.Vector4(x, x, x, x);\n v4.ZERO = v4();\n return v4;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2921,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1872,"value":"MathUtils = THREE.MathUtils","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":802,"value":"removeZeroError = (v) => {\n if (v.isVector2 || v.isVector3) {\n if (eq(v.x, 0, 0.001)) v.x = 0;\n if (eq(v.y, 0, 0.001)) v.y = 0;\n if (v.isVector3 && eq(v.z, 0, 0.001)) v.z = 0;\n return v;\n }\n if (eq(v, 0, 0.001)) {\n return 0;\n }\n return v;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":489,"value":"#### prng","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":466,"value":"Alea = require(\"alea\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"random = {\n const prng = new Alea();\n return (a = null, b = null) => {\n const _a = b == null ? 0 : a;\n const _b = b != null ? b : a != null ? a : 1;\n const min = Math.min(_a, _b);\n const max = Math.max(_a, _b);\n return min + prng() * (max - min);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":493,"value":"#### simplex noise","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":312,"value":"SimplexNoise = (\n await import(\n \"https://unpkg.com/simplex-noise@3.0.0/dist/esm/simplex-noise.js?module\"\n )\n).SimplexNoise","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"simplex = new SimplexNoise(random)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":316,"value":"noise1D = (x) => (simplex.noise2D(x, 1) + 1) * 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"noise2D = (x, y) => (simplex.noise2D(x, y) + 1) * 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"noise3D = (x, y, z) => (simplex.noise3D(x, y, z) + 1) * 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":903,"value":"### colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":905,"value":"tinycolor = require(\"tinycolor2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"## consts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":62,"value":"PI = Math.PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"TWO_PI = 2 * PI","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1483,"value":"HALF_PI = Math.PI / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":797,"value":"EPSILON = Number.EPSILON","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"## Useful links:\n\n- [ObservableHQ Standard library](https://observablehq.com/@observablehq/stdlib?collection=@observablehq/libraries)\n- [Module require debugger](https://observablehq.com/@observablehq/module-require-debugger)\n- Lionel Radison ([@makio135](https://observablehq.com/collection/@makio135)) [utils](https://observablehq.com/@makio135/utilities) and [colors](https://observablehq.com/@makio135/give-me-colors?collection=@makio135/tools) notebooks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W42","stdlib":"1","titling":"auto"}} 30:"$2f:body"