3e:null 3f:["$","title",null,{"children":"Trails of body movement in 2D | kenbunroku | Observable"}] 45:Te7b,update = (ctx, particles, fieldPerGridCell) => { // Init let points = []; let noiseZ = 0; // Reset function to prevent memory leak const doReset = () => { reset; // stop listening to pose detection events by removing the event listener poseNet.removeAllListeners("pose"); }; doReset(); // Update in every PoseNet frame poseNet.on("pose", function (poses) { if (poses === undefined) return; points = []; if (isSkelton) { ctx.clearRect(0, 0, width, height); ctx.fillStyle = "black"; ctx.fillRect(0, 0, width, height); ctx.fill(); } // Draw body points poses[0].pose.keypoints .filter((kp) => kp.score >= 0.2) .map((kp) => { if (isSkelton) { ctx.beginPath(); ctx.strokeStyle = "white"; ctx.fillStyle = "white"; ctx.arc(kp.position.x, kp.position.y, 3, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); } if (kp.part === "leftElbow" || kp.part === "leftWrist") { kp.positive = true; points.push(kp); } else if (kp.part === "rightElbow" || kp.part === "rightWrist") { kp.positive = false; points.push(kp); } }); // Draw skelton if (isSkelton) { const skeleton = poses[0].skeleton; if (skeleton.length > 0) { skeleton.map((sk) => { ctx.beginPath(); ctx.moveTo(sk[0].position.x, sk[0].position.y); ctx.lineTo(sk[1].position.x, sk[1].position.y); ctx.stroke(); }); } } // Give force to grid fieldPerGridCell = gridCellFactory({ cellValue: (col, row) => { let x = col * resolution; let y = row * resolution; return fieldDirectionSampler(x, y, points, noiseZ); } }); if (isSkelton) { for (let x = 0; x < fieldPerGridCell.length; x++) { for (let y = 0; y < fieldPerGridCell[0].length; y++) { const xPos = fieldPerGridCell[x][y].x; const yPos = fieldPerGridCell[x][y].y; ctx.beginPath(); ctx.moveTo(xPos, yPos); ctx.lineTo( xPos + fieldPerGridCell[x][y].vector.x * resolution * 2, yPos + fieldPerGridCell[x][y].vector.y * resolution * 2 ); ctx.strokeStyle = "white"; ctx.stroke(); } } } // Update the particles position for (let i = 0; i < particles.length; i++) { const particle = particles[i]; const nearestFieldPoint = getNearestFieldPoint( particle.position.x, particle.position.y, fieldPerGridCell ); particle.acceleration.add(nearestFieldPoint.vector); particle.velocity.add(particle.acceleration); particle.acceleration.mult(0); // gridLayer(fieldG, flattenedArr); // // Give force to the particles that are within a certain range from the body points // points.map((p) => { // const d = particle.position.dist(p.position); // const angle = // n.simplex3(p.position.x / 20, p.position.y / 20, noiseZ) * // Math.PI * // 2 + // Math.PI / 2; // const length = Math.abs( // n.simplex3( // p.position.x / 40 + 40000, // p.position.y / 40 + 40000, // noiseZ // ) // ); // const acc = new Vector(0, length); // acc.setAngle(angle); // if (d <= range) { // particle.acceleration.add(acc); // particle.velocity.add(particle.acceleration); // particle.acceleration.mult(0); // } // }); } noiseZ += 0.002; }); }46:T4fc,fieldDirectionSampler = (x, y, poles, noiseZ) => { // Setting up the noise let noise = n.simplex3(x / 20, y / 20, noiseZ) * 2 * Math.PI; // perlin.gen((x / width) * perlinScale, (y / height) * perlinScale) * // 2 * // Math.PI; let noiseStr = perlinNoiseStr; // Noise at given point let perlinBackground = { sumx: Math.cos(noise) * noiseStr, sumy: Math.sin(noise) * noiseStr }; // Stack the influence of the poles on top let sumfield = poles.reduce((memo, pole) => { let dx = x - pole.position.x; let dy = y - pole.position.y; let r = Math.hypot(dx, dy); let magnitude = magneticStr / Math.pow(r, magneticRange); let theta = vectorForGivenPositionAndPole( x, y, pole.position.x, pole.position.y, pole.positive ); // Influence of each pole at the given point let fieldx = magnitude * Math.cos(theta); let fieldy = magnitude * Math.sin(theta); return { sumx: memo.sumx + fieldx, sumy: memo.sumy + fieldy }; }, perlinBackground); // { sumx: 0, sumy: 0 }) let vector = new Vector(sumfield.sumx, sumfield.sumy); // the Math.PI / 2 at the end "turns" the field 90 degrees so we get the whirlpool directions vector.rotate(Math.PI / 2); return vector; }47:Tb3f,class Vector { constructor(x, y) { this.x = x; this.y = y; } clone() { return new Vector(this.x, this.y); } magnitude() { return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2)); } setMag(n) { return this.normalize().mult(n); } normalize() { const m = this.magnitude(); if (m > 0) { this.x = this.x / m; this.y = this.y / m; } return this; } normal() { const new_x = this.y; const new_y = -this.x; this.x = new_x; this.y = new_y; return this; } limit(max) { const mSq = this.x * this.x + this.y * this.y; if (mSq > max * max) { this.divide(Math.sqrt(mSq)) //normalize it .mult(max); } return this; } rotate(angle) { const new_x = this.x * Math.cos(angle) - this.y * Math.sin(angle); const new_y = this.x * Math.sin(angle) + this.y * Math.cos(angle); this.x = new_x; this.y = new_y; return this; } angle() { if (this.x == 0) { return this.y > 0 ? Math.PI / 2 : (Math.PI * 3) / 2; } else if (this.y == 0) { return this.x > 0 ? 0 : Math.PI; } else if (this.x > 0 && this.y > 0) { return Math.atan(this.y / this.x); } else if (this.x < 0 && this.y > 0) { return Math.PI + Math.atan(this.y / this.x); } else if (this.x < 0 && this.y < 0) { return Math.PI + Math.atan(this.y / this.x); } else if (this.x > 0 && this.y < 0) { return Math.PI * 2 + Math.atan(this.y / this.x); } } setAngle(angle) { var length = this.getLength(); this.x = Math.cos(angle) * length; this.y = Math.sin(angle) * length; return this; } setLength(length) { var angle = this.getAngle(); this.x = Math.cos(angle) * length; this.y = Math.sin(angle) * length; return this; } getAngle() { return Math.atan2(this.y, this.x); } getLength() { return Math.hypot(this.x, this.y); } rotateTowards(v, a) { return this.rotate((v.angle() - this.angle()) * a); } add(v) { this.x += v.x; this.y += v.y; return this; } sub(v) { this.x -= v.x; this.y -= v.y; return this; } divide(scalar) { this.x /= scalar; this.y /= scalar; return this; } mult(scalar) { this.x *= scalar; this.y *= scalar; return this; } dist(v) { const dx = v.x - this.x; const dy = v.y - this.y; return Math.sqrt(dx * dx + dy * dy); } dot(v) { return this.x * v.x + this.y * v.y; } static average(vs) { const average = new Vector(0, 0); vs.forEach((v) => average.add(v)); average.divide(vs.length); return average; } random2d() { // Velocity const randomAngle = Math.random() * Math.PI; const x = Math.abs(1 * Math.cos(randomAngle)); const y = -Math.abs(1 * Math.sin(randomAngle)); this.x = x; this.y = y; } }48:[] 43:{"id":"84aa525bf4103133","slug":"trails-of-body-movement-in-2d","title":"Trails of body movement in 2D","thumbnail":"9b4be0d10106f061536d01c0d9519c371efb5836537f08223e2ff4b13b16dae9","access_level":"public","create_time":"$D2022-09-25T22:11:04.268Z","update_time":"$D2022-11-11T15:58:32.325Z","view_time":null,"first_public_time":"$D2022-10-25T17:07:25.299Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"6bd07d5d45d1a90f","login":"kenbunroku","name":"kenbunroku","avatar_url":"https://avatars-next.observableusercontent.com/30e8f4673e24d3895b8cc541f0f71438fc9bfc17e08aff6feb0e6ff342671d34","tier":"starter_2024","bio":"Creative Technologist, Data Visualizer and HCI researcher."},"version":2375,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6b836af60ca8e040","login":"kenbunroku","name":"kenbunroku","avatar_url":"https://avatars-next.observableusercontent.com/30e8f4673e24d3895b8cc541f0f71438fc9bfc17e08aff6feb0e6ff342671d34","tier":null,"bio":"Creative Technologist, Data Visualizer and HCI researcher."}],"members":[{"type":"individual","id":"6b836af60ca8e040","login":"kenbunroku","name":"kenbunroku","avatar_url":"https://avatars-next.observableusercontent.com/30e8f4673e24d3895b8cc541f0f71438fc9bfc17e08aff6feb0e6ff342671d34","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Trails of body movement in 2D","cells":[{"id":0,"value":"# Trails of body movement in 2D","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"height = width * 0.75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"width = 1180","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"video = {\n const video = document.createElement(\"video\");\n // Turn on a video\n const constraints = {\n video: {\n width: width,\n height: height\n }\n };\n\n video.setAttribute(\"autoplay\", true);\n video.setAttribute(\"class\", \"stream\");\n video.width = width;\n video.height = height;\n\n await navigator.mediaDevices\n .getUserMedia(constraints)\n .then(function (stream) {\n /* use the stream */\n video.srcObject = stream;\n })\n .catch(function (err) {\n /* handle the error */\n console.error(\"Couldn’t get media\", err);\n });\n\n return video;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1389,"value":"{\n const canvas = d3.create(\"canvas\").node();\n const ctx = canvas.getContext(\"2d\");\n\n canvas.width = width;\n canvas.height = height;\n canvas.id = \"flip\";\n let particles = [];\n particles = createParticles(count);\n let fieldPerGridCell = [];\n ctx.fillStyle = \"black\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n ctx.fill();\n\n update(ctx, particles, fieldPerGridCell);\n let generation = 0;\n while (true) {\n drawParticle(ctx, particles);\n yield canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"viewof count = Inputs.range([100, 1000], {\n label: \"Particle counts\",\n value: 500,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1296,"value":"viewof maxVelocity = Inputs.range([0.1, 5], {\n value: 0.5,\n label: \"Max Speed\",\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2015,"value":"viewof magneticStr = Inputs.range([0, 10], {\n value: 10,\n label: \"Magnetic Field Strength\",\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2031,"value":"viewof magneticRange = Inputs.range([0, 2], {\n value: 1.7,\n label: \"Magnetic Field Range\",\n step: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2022,"value":"viewof resolutionRatio = Inputs.range([0, 1], {\n value: 0.03,\n label: \"Resolution Ratio\",\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2065,"value":"viewof perlinNoiseStr = Inputs.range([0, 0.1], {\n value: 0.0004,\n label: \"Perlin Noise Strength\",\n step: 0.0001\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1575,"value":"viewof isSkelton = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2283,"value":"viewof reset = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"poseNet = ml5.poseNet(video, modelReady)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"modelReady = () => {\n console.log(\"Model Loaded\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2324,"value":"poseNet.removeAllListeners(\"pose\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"createParticles = (num) => {\n let particles = [];\n\n for (let i = 0; i < num; i++) {\n const x = Math.random() * width;\n const y = Math.random() * height;\n const particle = {\n position: new Vector(x, y),\n velocity: new Vector(0, 0),\n acceleration: new Vector(0, 0)\n };\n particles.push(particle);\n }\n\n return particles;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1655,"value":"drawParticle = (ctx, particles) => {\n particles.map((particle) => {\n // Move the particles\n particle.position.add(particle.velocity);\n if (particle.velocity.magnitude() > maxVelocity) {\n particle.velocity = particle.velocity.limit(maxVelocity);\n }\n particle.velocity = particle.velocity.mult(0.999);\n\n // Bouncing off the walls\n if (particle.position.x < 0) {\n particle.position.x = width;\n } else if (particle.position.x > width) {\n particle.position.x = 0;\n }\n if (particle.position.y < 0) {\n particle.position.y = height;\n } else if (particle.position.y > height) {\n particle.position.y = 0;\n }\n\n // Draw particles\n isSkelton ? (ctx.globalAlpha = 1) : (ctx.globalAlpha = 0.03);\n\n const colorScheme = d3.interpolatePlasma(\n (particle.position.y / height) * 2\n );\n ctx.beginPath();\n ctx.fillRect(particle.position.x, particle.position.y, 2, 2);\n ctx.fillStyle = colorScheme;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2230,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1775,"value":"gridCellFactory = function (params = {}) {\n let x0 = width * -0.5;\n let x1 = width * 1.5;\n let y0 = height * -0.5;\n let y1 = height * 1.5;\n\n let numOfColumns = Math.ceil((y1 - y0) / resolution);\n let numOfRows = Math.ceil((x1 - x0) / resolution);\n\n let cells = [];\n\n d3.range(numOfRows).forEach((row, i) => {\n cells.push([]);\n d3.range(numOfColumns).forEach((col) => {\n cells[i].push({\n x: col * resolution,\n y: row * resolution,\n vector: params.cellValue ? params.cellValue(col, row) : 0,\n theta: params.cellValue\n ? Math.atan2(\n params.cellValue(col, row).x,\n params.cellValue(col, row).y\n )\n : 0\n });\n });\n });\n\n return cells;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1760,"value":"vectorForGivenPositionAndPole = (x, y, px, py, positive) => {\n let dx = x - px;\n let dy = y - py;\n\n if (positive) {\n return Math.atan2(dy, dx);\n } else {\n return (Math.atan2(dy, dx) + Math.PI) % (2 * Math.PI);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1770,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1809,"value":"getNearestFieldPoint = (x, y, grid) => {\n let col = Math.max(0, Math.min(Math.round(x / resolution), grid.length - 1));\n let row = Math.max(0, Math.min(Math.round(y / resolution), grid.length - 1));\n\n return grid[row][col];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1890,"value":"cellRenderer = [\n (enter) => {\n let g = enter\n .append(\"g\")\n .attr(\n \"transform\",\n (d, i) =>\n `translate(${d.x}, ${d.y}) rotate(${(d.theta / Math.PI) * 180})`\n );\n\n g.append(\"line\")\n .attr(\"x0\", 0)\n .attr(\"y0\", 0)\n .attr(\"x1\", 3)\n .attr(\"y0\", 0)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 1);\n\n g.append(\"polygon\").attr(\"fill\", \"black\").attr(\"points\", \"6,0 3,2 3,-2\");\n\n g.append(\"circle\").attr(\"fill\", \"black\").attr(\"r\", \"1\");\n\n return g;\n },\n (update) => {\n return update.attr(\n \"transform\",\n (d, i) => `translate(${d.x}, ${d.y}) rotate(${(d.theta / Math.PI) * 180})`\n );\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1888,"value":"gridLayer = (g, grid) => {\n g.selectAll(\"g\")\n .data(grid)\n .join(...cellRenderer);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1766,"value":"resolution = width * resolutionRatio","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1755,"value":"perlinScale = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1490,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"ml5 = require(\"ml5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1331,"value":"n = new noise.Noise(Math.random())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"noise = require(\"https://bundle.run/noisejs@2.1.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1730,"value":"perlin = new tumult.Perlin2(\"tyler_hobbs\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1728,"value":"tumult = require(\"https://unpkg.com/tumult/dist/tumult.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"