2d:null 2e:["$","title",null,{"children":"Procedural Animation 1 | John C | Observable"}] 33:T586,p5(s => { let chain, from = -1; s.setup = function(){ s.createCanvas(400,400); s.background(255); let joints = [s.createVector(50,200), s.createVector(100,200), s.createVector(150,200), s.createVector(200,200), s.createVector(250,200), s.createVector(300,200), s.createVector(350,200)]; let distances = [50,50,50,50, 50, 50]; chain = new Chain(joints, distances); drawChain(chain); } s.draw = function () { if (from > -1) { s.background(255); chain.joints[from].x = s.mouseX; chain.joints[from].y = s.mouseY; chain.resolve(from); drawChain(chain); } } s.mousePressed = function(){ if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height){ for(let i = 0; i < chain.joints.length; i ++) { const c = chain.joints[i]; if ((c.x - s.mouseX) ** 2 + (c.y - s.mouseY) ** 2 < 100) { from = i; break; } } } } s.mouseReleased = function(){ from = -1 } const drawChain = function(chain){ for (let i = 0; i < chain.joints.length; ++i) { s.fill(0); s.noStroke(); s.circle(chain.joints[i].x, chain.joints[i].y,20); if (i < chain.joints.length - 1) { s.stroke(0); s.line(chain.joints[i].x, chain.joints[i].y, chain.joints[i + 1].x , chain.joints[i+1].y); } } } })34:T456,p5(s => { let snake; s.setup = function(){ s.createCanvas(500,400); s.background(255); let joints = [s.createVector(50,200), s.createVector(75,200), s.createVector(100,200), s.createVector(125,200), s.createVector(150,200), s.createVector(175,200), s.createVector(200,200), s.createVector(225,200), s.createVector(250,200), s.createVector(275,200), s.createVector(300,200), s.createVector(325,200), s.createVector(350,200)]; let distances = new Array(12).fill(25); let sizes = [42,48,42,40,40,38,36,32,30,28,26,20,20]; snake = new Snake(joints, distances, sizes); drawSnake(snake); } s.draw = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) { snake.joints[0].x = s.mouseX; snake.joints[0].y = s.mouseY; snake.resolve(); s.background(255); drawSnake(snake); } } const drawSnake = function(snake){ for (let i = 0; i < snake.joints.length; ++i) { s.noFill(); s.stroke(0); s.circle(snake.joints[i].x, snake.joints[i].y, snake.bodies[i]); } } })35:T583,class Snake extends Chain{ constructor(positions, distances, bodySizes){ super(positions, distances); if (bodySizes.length != this.joints.length) throw new Error("bad arguments"); this.bodies = bodySizes; this.angles = new Array(this.joints.length).fill(Math.PI); } resolve(facingAng){ // resolve the constraint super.resolve(0); // update angles this.angles[0] = facingAng; // where the head facing for (let i = 1; i < this.joints.length; ++i) { let ang = vecHeading(vecFromSub(this.joints[i-1], this.joints[i])); this.angles[i] = ang; } } getShape(){ const getPoint = (idx, angOffset, sizeOffset) => { const x = this.joints[idx].x + Math.cos(this.angles[idx] + angOffset) * (this.bodies[idx] / 2 + sizeOffset); const y = this.joints[idx].y + Math.sin(this.angles[idx] + angOffset) * (this.bodies[idx] / 2 + sizeOffset); return {x, y}; } let points = [getPoint(0,Math.PI/6, 0), getPoint(0,0,0), getPoint(0, -Math.PI/6, 0)]; // head for (let i = 0; i < this.joints.length; ++i) { points.push(getPoint(i, -Math.PI/2, 0)); points.unshift(getPoint(i,Math.PI/2, 0)); } // tail points.push(getPoint(this.joints.length-1, -5*Math.PI/6, 0)); points.unshift(getPoint(this.joints.length-1,5*Math.PI/6, 0)); points.unshift(getPoint(this.joints.length-1, Math.PI,0)); return points; } }36:T555,p5(s => { let snake; s.setup = function(){ s.createCanvas(500,400); s.background(255); let joints = [s.createVector(50,200), s.createVector(75,200), s.createVector(100,200), s.createVector(125,200), s.createVector(150,200), s.createVector(175,200), s.createVector(200,200), s.createVector(225,200), s.createVector(250,200), s.createVector(275,200), s.createVector(300,200), s.createVector(325,200), s.createVector(350,200)]; let distances = new Array(12).fill(25); let sizes = [42,48,42,40,40,38,36,32,30,28,26,20,20]; snake = new Snake(joints, distances, sizes); drawSnake(snake); } s.draw = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height && (Math.abs(s.pmouseX - s.mouseX) > 1 || Math.abs(s.pmouseY - s.mouseY) > 1)) { const facingAng = vecHeading({x:s.mouseX - snake.joints[0].x, y:s.mouseY - snake.joints[0].y}); snake.joints[0].x += (s.mouseX - snake.joints[0].x) * 0.8; snake.joints[0].y += (s.mouseY - snake.joints[0].y) * 0.8; snake.resolve(facingAng); s.background(255); drawSnake(snake); } } const drawSnake = function(snake){ const points = snake.getShape(); s.fill(244,10,10); s.stroke(0); s.beginShape(); points.forEach(p => s.curveVertex(p.x, p.y)); s.endShape(s.CLOSE); } })37:T52c,class Snake2 extends Snake{ constructor(positions, distances, bodySizes, angleConstraint){ super(positions, distances, bodySizes); this.angleConstraint = angleConstraint; } resolve(facingAng){ const modAngle = (a) => { let angle = a; while(angle >= Math.PI * 2){ angle -= Math.PI * 2; } while(angle < 0){ angle += Math.PI * 2; } return angle; } const angleDiff = (a1, a2) => { const a = modAngle(a1-a2+Math.PI); return Math.PI - a; } const constrainAngle = (angle, reference, allowedDiff) => { const diff = angleDiff(angle,reference) if (Math.abs(diff) <= allowedDiff) return modAngle(angle); if (diff > allowedDiff) return modAngle(reference - allowedDiff); return modAngle(reference + allowedDiff); } this.angles[0] = facingAng; for (let i = 1; i < this.joints.length; i++){ const currAng = vecHeading(vecFromSub(this.joints[i-1], this.joints[i])); this.angles[i] = constrainAngle(currAng, this.angles[i-1], this.angleConstraint); const v =vecSetMag(vecFromAngle(this.angles[i]), this.distances[i-1]); this.joints[i].x = this.joints[i-1].x - v.x; this.joints[i].y = this.joints[i-1].y - v.y; this.joints[i].z = this.joints[i-1].z - v.z; } } }38:T63f,p5(s => { let snake; s.setup = function(){ s.createCanvas(600,600); s.background(77,112,87); let joints = []; let distances = new Array(47).fill(16); let sizes = []; for (let i = 0; i < 48; ++i) { joints.push({x: 100 + i * 16,y:300}); sizes.push(i === 0? 19 : (i === 1 ? 20 : 16 - i/4)); } snake = new Snake2(joints, distances, sizes, Math.PI/8); snake.angles[0] = Math.PI drawSnake(snake); } s.draw = function () { if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height && (Math.abs(s.pmouseX - s.mouseX) > 1 || Math.abs(s.pmouseY - s.mouseY) > 1)) { const facingAng = vecHeading({x:s.mouseX - snake.joints[0].x, y:s.mouseY - snake.joints[0].y}); snake.joints[0].x += (s.mouseX - snake.joints[0].x) * 0.8; snake.joints[0].y += (s.mouseY - snake.joints[0].y) * 0.8; snake.resolve(facingAng); s.background(77,112,87); drawSnake(snake); } } const drawSnake = function(snake){ const points = snake.getShape(); s.fill(244,10,10); s.stroke(0); s.beginShape(); points.forEach(p => s.curveVertex(p.x, p.y)); s.endShape(s.CLOSE); s.fill(255); s.circle(snake.joints[0].x + Math.cos(snake.angles[0] - Math.PI/2) * (snake.bodies[0] / 2 - 5),snake.joints[0].y + Math.sin(snake.angles[0] - Math.PI/2) * (snake.bodies[0] / 2 - 5),8); s.circle(snake.joints[0].x + Math.cos(snake.angles[0] + Math.PI/2) * (snake.bodies[0] / 2 - 5),snake.joints[0].y + Math.sin(snake.angles[0] + Math.PI/2) * (snake.bodies[0] / 2 - 5),8); } })39:[] 31:{"id":"2743f7366ec6307d","slug":"procedural-animation-1","title":"Procedural Animation 1","thumbnail":"53e96fec910af77ac952d2483ba3bcf4ee6fc8c8c89b8c9bb336855c6c0866b0","access_level":"public","create_time":"$D2024-07-18T08:07:23.609Z","update_time":"$D2024-07-26T15:08:14.213Z","view_time":null,"first_public_time":"$D2024-07-22T15:46:45.559Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":"starter_2024"},"version":193,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null}],"members":[{"type":"team","id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"8a91769c6d3b75ab","slug":"algorithms","title":"Algorithms","owner":{"id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C"}},"type":"notebook","body":{"title":"Procedural Animation 1","cells":[{"id":0,"value":"# Procedural Animation 1\nInspired by https://www.youtube.com/watch?v=qlfh_rv6khY \n\nProcedural techniques are used commonly in animation and simulation for natural looking results. One of the simplest one is chained rigging, which can be use to animate animals in a vivid way.\n\nA rigging chain is essentially a list of distance constrains that linked together. A distance constraint is very straight forward: the target object (for simplification, a point) is constrained (or bound) to the anchor object (point) with a fixed distance. When the anchor object moves, the target object might move as well accordingly to obtain the fixed distance. The math for creating this constraint is very simple as well: we just need to project the target point onto a object that satisfy the distance constraint (in 2D, a circle and in 3D a sphere). To implement this in code, we create a vector pointing from the anchor to the target, and scale it to the desired distance.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"/**\n@param {Vector} anchor the anchor point\n@param {Vector} target the target point to be constrained\n@param {number} distance \n@param {boolean}[minOnly=false] if true, only apply the constraint if the distance between the points are bigger than the desire distance\n**/\nfunction distanceConstrain(anchor, target, distance, minOnly=false){\n const vec = vecFromSub(target, anchor); // get the vector pointing from anchor to target\n if (minOnly){\n const currentDistSq = vecMagSq(vec);\n if (currentDistSq < distance * distance) return;\n }\n vecSetMag(vec, distance); // scale the vector to the desired distance\n target.x = anchor.x + vec.x;\n target.y = anchor.y + vec.y;\n target.z = anchor.z + vec.z; // move the target point to satisfy the constraint\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"p5(s => {\n let anchor, target, distance;\n s.setup = function(){\n s.createCanvas(300,300);\n s.background(255);\n anchor = s.createVector(s.width/2,s.height/2);\n target = s.createVector(0,0);\n distance = 20;\n distanceConstrain(anchor, target, distance);\n s.frameRate(30);\n }\n\n s.draw = function () {\n \n if (s.mouseX > 0 && s.mouseX < s.width && s.mouseY > 0 && s.mouseY < s.height) {\n anchor.x = s.mouseX;\n anchor.y = s.mouseY;\n s.background(255);\n distanceConstrain(anchor, target, distance);\n s.noFill();\n s.stroke(0);\n s.circle(anchor.x, anchor.y, distance*2);\n s.noStroke();\n s.fill(0);\n s.circle(target.x, target.y, 10);\n }\n \n }\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"Now we have our distance constraint, we can try to chain a few together to see what happen. To implement that, we can have a chained node structure, each of the nodes will have the following attributes: parent, a reference to the node that it binds to; children, list of nodes that binds to it; position and distance. Or, we can have Chain object holding two list: list of joint positions and list of distance between the joints. We will use the later as it gives us the advantage of resolving the constraints from different positions of the chain.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"class Chain {\n /**\n @param {Vector[]} positions \n @param {number[]} distances \n **/\n constructor(positions, distances){\n if (positions.length != distances.length+1) throw new Error(\"bad arguments\");\n this.joints = positions;\n this.distances = distances;\n }\n\n resolve(fromIndex = 0){\n let current = fromIndex;\n let next = fromIndex - 1;\n while(next > - 1) {\n const anchor = this.joints[current];\n const target = this.joints[next];\n const distance = this.distances[next];\n distanceConstrain(anchor, target, distance);\n current = next;\n next --;\n }\n current = fromIndex;\n next = fromIndex + 1;\n while(next < this.joints.length){\n const anchor = this.joints[current];\n const target = this.joints[next];\n const distance = this.distances[current];\n distanceConstrain(anchor, target, distance);\n current = next;\n next ++;\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"*drag the balls to move them*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"You can play with the chain above and make some movements. We have got some good animation so far but the visual is a bit poor. Let's try to improve that.\n\nFirst, instead of drawing small dots, let's draw some circle of different sizes instead. Each of the circles can be seen as a part of the body of a worm or snake","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"That's better, we can further improve this by drawing the outline of the snake (or worm or whatever) instead of each body circle. To accomplish this, we pick two points on the \"left\" and \"right\" on each circle and a few more extra on the head and tail to form a shape. To help implementing this, we will modify our Chain class to include the facing angle of each joints and the body sizes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"Cool, now we have a nice shaped snake(worm) that follow our cursor. One thing you might notice is that when moving in extreme angles the shape is broken. We can prevent that by adding angle constraint to the snake.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"import {p5} from \"@real-john-cheung/p5js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function vecFromSub(v1, v2) {\n return {x: v1.x - v2.x, y: v1.y - v2.y, z: v1.z - v2.z}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"vecMagSq = function (v) {\n return v.x**2 + v.y**2 + v.z**2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"vecMag = function (v) {\n return Math.sqrt(vecMagSq(v));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"vecScale = function(v, s){\n v.x = v.x*s;\n v.y = v.y*s;\n v.z = v.z*s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"vecSetMag = function (v, m) {\n const cm = vecMag(v);\n const s = m/cm;\n vecScale(v, s);\n return v\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"vecHeading = function (v) {\n return Math.atan2(v.y, v.x);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"vecFromAngle = function (angle){\n return {x: Math.cos(angle), y:Math.sin(angle), z:0}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"