2b:null 2c:["$","title",null,{"children":"The Nature of Code - 2 - Forces | Adam Jurczyk | Observable"}] 31:T638,md`What "force" we are talking about? > _A force is a vector that causes an object with mass to accelerate._ Yeah, so Isaac Newton stated few basic laws of motion, well dive into them, and into movent driven by forces. 1. **An object at rest stays at rest and an object in motion stays in motion.** - An object at rest stays at rest and an object in motion stays in motion at a constant speed and direction unless acted upon by an unbalanced force. - _An object’s \`Vector\` velocity will remain constant if it is in a state of equilibrium._ 2. **Net Force equals mass times acceleration.** - The most important one for our simulations. 3. **For every action there is an equal and opposite reaction.** - Forces always occur in pairs. The two forces are of equal strength, but in opposite directions. - _If we calculate a \`Vector f\` that is a force of object **A** on object **B**, we must also apply the force \`Vector.mult(f,-1)\` that **B** exerts on object **A**._ **Weight vs. Mass** - The mass of an object is a measure of the amount of matter in the object (measured in kilograms). - Weight, though often mistaken for mass, is technically the force of gravity on an object. From Newton’s second law, we can calculate it as mass times the acceleration of gravity (\`w = m * g\`). Weight is measured in newtons. - Density is defined as the amount of mass per unit of volume (grams per cubic centimeter, for example). Note that an object that has a mass of one kilogram on earth would have a mass of one kilogram on the moon. However, it would weigh only one-sixth as much. `32:T512,md`## 2.7 Friction Friction is a dissipative force. Whenever two object come in contact, they experience friction. There are two cases for friction - static (for non-moving objects), and kinetic (for objects in motion). For now we are focusing only on kinetic friction. ![Friction diagram](https://natureofcode.com/book/imgs/chapter02/ch02_03.png) So the formulae is ${tex`\overrightarrow{F_{friction}} = - \mu N \hat{\mathbf{v}}`} Based on the diagram, we can se, that friction points in the oposing direction of velocity (thats the ${tex`-\mathbf{\hat{v}}`}, that is negated normalized velocity vector). Whats left is acually magnitude: ${tex`\mu N`}. ${tex`\mu`} (greek letter mu) is **friction coefficient**, telling the strenght of a friction for a given surface. Block of ice will have much lower ${tex`\mu`} than sandpaper. ${tex`N`} refers to the **normal force**, the force perpendicular to the object’s motion along a surface. It's surface push back to e.g. objets gravitational push on the surface. For now, as it's not that obvious for non-horizontal movement, we will ignore it (i.e. leave its value at 1). Ok, so now, as we have some knowledge, lets make ourselves little function that will compute friction force of our Mover (with some defaults, as defined in the book). `33:T732,{ const height = 300; const wind = new THREE.Vector2(0.01, 0); const massRng = d3.randomUniform.source(random)(0.1, 5); const frictionArea1 = { x: ex_2_4_friction_area_pos_1, y: 0, width: 200, height }; const frictionArea2 = { x: ex_2_4_friction_area_pos_2, y: 0, width: 300, height }; const overlapsArea = (mover, area) => { if ( mover.x + mover.radius > area.x && mover.x - mover.radius < area.x + area.width && mover.y + mover.radius > area.y && mover.y - mover.radius < area.y + area.height ) { return true; } return false; }; const movers = Array.from( { length: 50 }, () => new Mover({ x: random() * width, y: random() * 100, mass: massRng(), onUpdate: (mover) => { applyGravity(mover); if (overlapsArea(mover, frictionArea1)) { applyFriction(mover, ex_2_4_friction_coeffictient_1); } if (overlapsArea(mover, frictionArea2)) { applyFriction(mover, ex_2_4_friction_coeffictient_2); } } }) ); const colorBySign = (val) => val < 0 ? "#7EB3FF66" : val > 0 ? "#F85C5066" : "#D7E1E966"; const drawBkg = (ctx, width, height) => { ctx.fillStyle = colorBySign(ex_2_4_friction_coeffictient_1); ctx.fillRect( frictionArea1.x, frictionArea1.y, frictionArea1.width, frictionArea1.height ); ctx.fillStyle = colorBySign(ex_2_4_friction_coeffictient_2); ctx.fillRect( frictionArea2.x, frictionArea2.y, frictionArea2.width, frictionArea2.height ); }; return renderMovers( { width, height, visibility, overflow: bounceMover({ width, height }), forces: [wind], drawBkg }, ...movers ); }34:T410,md`## 2.8 Air and Fluid Resistance Friction also occurs when a body passes through a liquid or gas. This force has many different names, all really meaning the same thing: viscous force, drag force, fluid resistance. Full formula for drag is: ${tex`\overrightarrow{F_{d}} = -\frac{1}{2} \rho v^2 A C_d \hat{\mathbf{v}}`} - ${tex`\overrightarrow{F_{d}}`} refers to drag force - ${tex`-\frac{1}{2}`} constant, beside sign, value is irrelevent in our case - ${tex`\rho`} greek letter _rho_ refers to liquid density. - ${tex`v`} refers to object speed, exactly to it's velocity magnitude - ${tex`A`} refers to objects frontal area, or aerodynamics. We will ignore it for now. - ${tex`C_d`} coefficient of drag, the thing we will use to vary our liquids - ${tex`\hat{\mathbf{v}}`} as before, normilized velocity vector for direction Simplifying here and there, we deconstruct the formula into our magnitude + direction pair: ${tex`\overrightarrow{F_{d}} = \overbrace{-1 \hat{\mathbf{v}}}^{direction} \overbrace{||v||^2 C_d}^{magnitude}`} `35:T480,md`Example already has different heights, but its not clear, what is happening due to different timings movers hit water. Lets simply calculate velocity for few movers, as if they were starting from different positions, and start simulation with all of them just above the water... OK, so, only force we initailly have, is gravity. Mass is cut off, so initial acceleration is constant _g_ (0.1 in our default case). Thus, velocity is aritmetic series from number of updates, where nth element is ${tex`v_n = n * g`} and y position is its sum ${tex`y = \frac{1}{2}(v_0 + v_n) * n`} and as ${tex`v_0 = 0`} thus ${tex`y = \frac{1}{2} n v_n`} We can reverse this and get velocity at certain distance from start point (without knowing n): ${tex`y = \frac{1}{2} v_n n \equiv y = \frac{1}{2} g n^2 \equiv gn^2 = 2y \equiv {gn}^2 = 2gy \equiv v_n = \sqrt{2gy}`} Ok, nice and dandy, so lets say, we keep our _g = 0.1_ and take few heights: - ${tex`v_n`} = ${(2 * 0.1 * 2000) ** 0.5} for y = 2000 - ${tex`v_n`} = ${(2 * 0.1 * 1000) ** 0.5} for y = 1000 - ${tex`v_n`} = ${(2 * 0.1 * 500) ** 0.5} for y = 500 - ${tex`v_n`} = ${(2 * 0.1 * 5) ** 0.5} for y = 5 `36:T4af,md`## 2.9 Gravitational Attraction Gravitational force diagram

As on the diagram, gravitational attraction force formulae is: ${tex`F = \frac{G m_1 m_2}{r^2} \hat{\mathbf{r}}`} - ${tex`F`} refers to the gravitational force, the vector we ultimately want to compute - ${tex`G`} is the universal gravitational constant, which in our world equals 6.67428 x 10-11 meters cubed per kilogram per second squared. It's pretty important in real world, but for us it’s a constant that we can use to make the forces in our world weaker or stronger. Just making it equal to one and ignoring it isn’t such a terrible choice either. - ${tex`m1`} and ${tex`m2`} are the masses of objects 1 and 2. - ${tex`\hat{\mathbf{r}}`} refers to the unit vector pointing from object 1 to object 2. - ${tex`r^2`} refers to the distance between the two objects squared; i.e. the strength of the force is inversely proportional to the distance squared. The _farther_ away an object is, the _weaker_ the force; the _closer_, the _stronger_. So, let's prepare function with our gravitational force, but already as taking two objects: `37:T704,{ const height = 500; const ctx = DOM.context2d(width, height); const movers = [ ...Array.from({ length: 2 }, () => { const m = new Mover({ x: random() * width, y: random() * height }); m.applyForce(new THREE.Vector2(2 * random(), 2 * random())); return m; }) ]; const attractors = [ new Attractor({ x: width / 4, y: height / 2 }), new Attractor({ x: (3 * width) / 4, y: height / 2, mass: 10 }) ]; const objects = [...movers, ...attractors]; const moved = { obj: null, offset: new THREE.Vector2() }; const update = (mover) => { ctx.fillRect(mover.x, mover.y, 1, 1); attractors.forEach((attractor) => mover.applyForce(attractor.attractionForce(mover)) ); mover.update(); }; const render = (times = 10000) => { const ghosts = movers.map((m) => new Mover(m)); ctx.clearRect(0, 0, width, height); attractors.forEach((obj) => obj.display(ctx)); ghosts.forEach((obj) => obj.display(ctx)); ctx.fillStyle = "#0000001f"; repeat(() => ghosts.forEach(update), times); }; render(100000); ctx.canvas.onmousemove = (e) => { if (moved.obj) { const mousePos = new THREE.Vector2(e.offsetX, e.offsetY); moved.obj.location.addVectors(mousePos, moved.offset); render(); } }; ctx.canvas.onmouseleave = (e) => { // mouse.pos = null; // mouse.down = false; // mouse.shift = false; }; ctx.canvas.onmousedown = (e) => { const mousePos = new THREE.Vector2(e.offsetX, e.offsetY); moved.obj = objects.find((obj) => obj.contains(mousePos)); if (moved.obj) { moved.offset.subVectors(moved.obj, mousePos); } }; ctx.canvas.onmouseup = (e) => { moved.obj = null; render(100000); }; return visibility(ctx.canvas); }38:T55b,class Mover { constructor({ x = 0, y = 0, vx = 0, vy = 0, mass = 1, r, onUpdate } = {}) { this.location = new THREE.Vector2(x, y); this.velocity = new THREE.Vector2(vx, vy); this.acceleration = new THREE.Vector2(0, 0); this.mass = mass; this.radius = r || mass * 10; this.onUpdate = onUpdate || (() => {}); } applyForce(force) { const f = force.clone(); f.divideScalar(this.mass); this.acceleration.add(f); return this; } update(opts) { this.onUpdate(this, opts); this.velocity.add(this.acceleration); this.location.add(this.velocity); this.acceleration.setScalar(0); } display(ctx) { ctx.strokeStyle = '#000'; ctx.lineWidth = 1; ctx.fillStyle = '#faaa'; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, 2 * PI); ctx.fill(); ctx.stroke(); ctx.closePath(); } get x() { return this.location.x; } set x(xx) { this.location.x = xx; } get y() { return this.location.y; } set y(yy) { this.location.y = yy; } get bbox() { return { minX: -this.radius, minY: -this.radius, maxX: this.radius, maxY: this.radius }; } contains(obj) { const pos1 = this.location || this.position; // const pos2 = obj.location || obj.position || obj; return pos1.distanceTo(obj) <= this.radius; } }39:T4b9,class Attractor { constructor({ x = 0, y = 0, mass = 20, G = 1, minDist = 5, maxDist = 100, r } = {}) { this.location = new THREE.Vector2(x, y); this.mass = mass; this.G = G; this.minDist = minDist; this.maxDist = maxDist; this.radius = r || mass * 2; } attractionForce(target) { return gravitationalAttractionForce(target, this, { G: this.G, minDist: this.minDist, maxDist: this.maxDist }); } contains(obj) { const pos1 = this.location || this.position; // const pos2 = obj.location || obj.position; return pos1.distanceTo(obj) <= this.radius; } display(ctx) { ctx.strokeStyle = '#000'; ctx.lineWidth = 1; ctx.fillStyle = '#33ffaaaa'; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, 2 * PI); ctx.fill(); ctx.stroke(); ctx.closePath(); } get x() { return this.location.x; } set x(xx) { this.location.x = xx; } get y() { return this.location.y; } set y(yy) { this.location.y = yy; } get bbox() { return { minX: -this.radius, minY: -this.radius, maxX: this.radius, maxY: this.radius }; } }3a:T94d,renderMovers = function*( { visibility, width = 200, height = 200, speed = 1, overflow, trace = false, forces = [], liquids = [], attractors = [], drawBkg = (ctx, width, height) => {} }, ...movers ) { const checkEdges = overflow || wrapMover({ width, height }); const ctx = DOM.context2d(width, height); let trailsCtx; const srcDim = [0, 0, width * devicePixelRatio, height * devicePixelRatio]; const destDim = [0, 0, width, height]; if (trace) { trailsCtx = DOM.context2d(width, height); trailsCtx.strokeStyle = '#00f'; trailsCtx.lineWidth = 1; trailsCtx.globalAlpha = 0.2; } if (attractors.length === 0) { attractors.push(...movers.filter(m => !!m.attractionForce)); } const mouse = { pos: null, down: false, shift: false }; ctx.canvas.onmousemove = e => { mouse.pos = new THREE.Vector2(e.offsetX, e.offsetY); }; ctx.canvas.onmouseleave = e => { mouse.pos = null; mouse.down = false; mouse.shift = false; }; ctx.canvas.onmousedown = e => { mouse.down = true; mouse.shift = e.shiftKey; }; ctx.canvas.onmouseup = e => { mouse.down = false; mouse.shift = false; }; const update = mover => { const start = [mover.x, mover.y]; forces.forEach(force => mover.applyForce(force)); liquids.forEach( liquid => liquid.contains(mover) && applyDrag(mover, liquid) ); attractors.forEach(attractor => { if (attractor !== mover) { mover.applyForce(attractor.attractionForce(mover)); } }); mover.update({ mouse }); const end = [mover.x, mover.y]; checkEdges(mover); if (trace) { trailsCtx.beginPath(); trailsCtx.moveTo(...start); trailsCtx.lineTo(...end); trailsCtx.stroke(); trailsCtx.closePath(); } }; while (true) { // update repeat(() => movers.forEach(update), speed); // draw ctx.clearRect(0, 0, width, height); drawBkg(ctx, width, height); liquids.forEach(liquid => liquid.display(ctx)); attractors .filter(attractor => !movers.includes(attractor)) .forEach(attractor => attractor.display(ctx)); if (trace) { ctx.drawImage(trailsCtx.canvas, ...srcDim, ...destDim); } movers.forEach(mover => mover.display(ctx)); yield visibility(ctx.canvas); } }3b:[] 2f:{"id":"634337ac0d2dd747","slug":"the-nature-of-code-2-forces","title":"The Nature of Code - 2 - Forces","thumbnail":"5c7ea42354c3818175b0478ebb2609286827e07086052aca1f0f110c36784601","access_level":"public","create_time":"$D2020-02-14T20:32:43.870Z","update_time":"$D2024-03-03T15:37:54.517Z","view_time":null,"first_public_time":"$D2020-04-04T12:37:18.833Z","fork":false,"stars":23,"starred":false,"owner":{"type":"team","id":"e59cfabcc8cf2053","login":"ajur","name":"Adam Jurczyk","avatar_url":"https://avatars-next.observableusercontent.com/9780c718edee977389e5a921151fad79009484346784f63edc44894bfc64c5cd","tier":"starter_2024"},"version":1301,"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":true,"trashed":false,"subscribed":null,"forks":8,"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 - 2 - Forces","cells":[{"id":0,"value":"md`# The Nature of Code - 2 - Forces\n\n_Deeper into dynamic code, with https://natureofcode.com/ _\n\nThis notebook follows second chapter https://natureofcode.com/forces/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"md`## 2.3 Force Accumulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"{\n const height = 200;\n const onUpdate = (mover, { mouse }) => {\n if (mouse.down) {\n mover.applyForce(new THREE.Vector2(mouse.shift ? -0.5 : 0.5, 0));\n }\n };\n return renderMovers(\n { visibility, width, height },\n new Mover({\n x: 20,\n y: height / 2,\n mass: 1,\n onUpdate\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":368,"value":"md`_Click to apply west wind, shift click to apply east wind_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"md`### Exercise 2.1\n\n_Using forces, simulate a helium-filled balloon floating upward and bouncing off the top of a window. Can you add a wind force that changes over time, perhaps according to Perlin noise?_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"{\n const height = 300;\n const onUpdate = (mover, {}) => {\n mover.applyForce(new THREE.Vector2(0, -0.01));\n\n mover.dt = mover.dt || 0;\n mover.dt += 0.01;\n mover.applyForce(new THREE.Vector2(simplex.noise2D(mover.dt, 1) / 100, 0));\n\n if (mover.y <= mover.radius + 5 && mover.velocity.y < 0) {\n const f = mover.velocity\n .clone()\n .negate()\n .multiply({ x: 0, y: 1.9 });\n mover.applyForce(f);\n }\n };\n return renderMovers(\n { visibility, width, height },\n new Mover({\n x: width / 2,\n y: height - 30,\n mass: 1,\n onUpdate\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":141,"value":"md`## 2.4 Dealing with Mass\n\nAnd, as we currently doesn't use units, lets say we pick... 10, for a mass value. 10 of.. whatever really.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"{\n const height = 200;\n const onUpdate = (mover, { mouse }) => {\n if (mouse.down) {\n mover.applyForce(new THREE.Vector2(mouse.shift ? -0.5 : 0.5, 0));\n }\n };\n return renderMovers(\n { visibility, width, height },\n new Mover({\n x: 20,\n y: height / 4,\n r: 10,\n mass: 10,\n onUpdate\n }),\n new Mover({\n x: 20,\n y: (3 * height) / 4,\n r: 20,\n mass: 20,\n onUpdate\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":372,"value":"md`_Click to apply west wind, shift click to apply east wind_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"md`## 2.5 Creating Forces\n\n_In this chapter, we’ll look at two methods for creating forces in our Processing world._\n\n1. _**Make up a force!** After all, you are the programmer, the creator of your world. There’s no reason why you can’t just make up a force and apply it._\n2. _**Model a force!** Yes, forces exist in the real world. And physics textbooks often contain formulas for these forces. We can take these formulas, translate them into source code, and model real-world forces in Processing._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"{\n const height = 300;\n const massRng = d3.randomUniform.source(random)(0.1, 5);\n const movers = Array.from(\n { length: 50 },\n () =>\n new Mover({\n x: 50,\n y: 50,\n mass: massRng()\n })\n );\n const wind = new THREE.Vector2(0.01, 0);\n const gravity = new THREE.Vector2(0, 0.1);\n return renderMovers(\n {\n width,\n height,\n visibility,\n overflow: bounceMover({ width, height }),\n forces: [wind, gravity]\n },\n ...movers\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"md`### Exercise 2.3\n\n_Instead of objects bouncing off the edge of the wall, create an example in which an invisible force pushes back on the objects to keep them in the window. Can you weight the force according to how far the object is from an edge—i.e., the closer it is, the stronger the force?_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":235,"value":"{\n const height = 300;\n const massRng = d3.randomUniform.source(random)(0.1, 5);\n const movers = Array.from(\n { length: 100 },\n () =>\n new Mover({\n x: 50,\n y: 50,\n mass: massRng(),\n onUpdate: (mover) => {\n const xNorm = mover.x / width;\n const yNorm = mover.y / height;\n const edgeForce = new THREE.Vector2(0.5 - xNorm, 0.5 - yNorm);\n mover.applyForce(edgeForce);\n }\n })\n );\n return renderMovers(\n {\n width,\n height,\n visibility\n },\n ...movers\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":256,"value":"md`## 2.6 Gravity on Earth and Modeling a Force\n\nExample in chapter 2.5 has strangely looking behaviour, that bigger objects fall slower. This is due to our mapping size to mass, but also, to 2nd law, i.e. ${tex`\\vec{F} = m\\vec{A}`}. What we didn't took into consideration, is that gravity is relative to object mass, so in our case ${tex`\\vec{A} = \\vec{F} / m = m\\mathbf{g}/m = \\mathbf{g}`} (or something like this).\n\n_Note about notation. I will use either arrow ${tex`\\vec(F)`} or bold ${tex`\\mathbf{a}`} to mark vectors in formulae_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":404,"value":"gravityForce = (mass = 1, g = 0.1) => new THREE.Vector2(0, g * mass)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"viewof example_2_3_gravity_force = slider({\n min: 0.01,\n max: 0.5,\n step: 0.01,\n value: 0.1,\n description: 'Gravity strength'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":277,"value":"{\n const height = 300;\n const wind = new THREE.Vector2(0.01, 0);\n const massRng = d3.randomUniform.source(random)(0.1, 5);\n const movers = Array.from(\n { length: 50 },\n () =>\n new Mover({\n x: 50,\n y: 50,\n mass: massRng(),\n onUpdate: mover => {\n applyGravity(mover, example_2_3_gravity_force);\n }\n })\n );\n return renderMovers(\n {\n width,\n height,\n visibility,\n overflow: bounceMover({ width, height }),\n forces: [wind]\n },\n ...movers\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"applyGravity = (mover, g) => {\n mover.applyForce(gravityForce(mover.mass, g));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"md`Later on, we will take two forces - gravition and friction - as case studies for process of aplying forces:\n\n1. Understand the concept behind the force\n2. Deconstructing the force’s formula into two parts:\n - How do we compute the force’s direction?\n - How do we compute the force’s magnitude?\n3. Translating that formula into code that calculate force vector we can pass to \\`applyForce\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"frictionForce = (v, c = 0.01) =>\n v\n .clone()\n .normalize()\n .negate()\n .multiplyScalar(c)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":393,"value":"applyFriction = (mover, c) => {\n mover.applyForce(frictionForce(mover.velocity, c));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"viewof example_2_4_friction_coeffictient = slider({\n min: 0.01,\n max: 0.3,\n step: 0.01,\n value: 0.05,\n description: 'Friction coefficient'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"{\n const height = 300;\n const wind = new THREE.Vector2(0.01, 0);\n const massRng = d3.randomUniform.source(random)(0.1, 5);\n const movers = Array.from(\n { length: 50 },\n () =>\n new Mover({\n x: random() * width,\n y: random() * 100,\n mass: massRng(),\n onUpdate: mover => {\n applyGravity(mover);\n applyFriction(mover, example_2_4_friction_coeffictient);\n }\n })\n );\n return renderMovers(\n {\n width,\n height,\n visibility,\n overflow: bounceMover({ width, height }),\n forces: [wind]\n },\n ...movers\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":376,"value":"md`### Exercise 2.4\n\n_Create pockets of friction in a Processing sketch so that objects only experience friction when crossing over those pockets. What if you vary the strength (friction coefficient) of each area? What if you make some pockets feature the opposite of friction—i.e., when you enter a given pocket you actually speed up instead of slowing down?_\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"viewof ex_2_4_friction_area_pos_1 = slider({\n min: 0,\n max: width - 200,\n step: 1,\n value: 100,\n description: 'First friction area position'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"viewof ex_2_4_friction_coeffictient_1 = slider({\n min: -0.1,\n max: 0.1,\n step: 0.01,\n value: -0.05,\n description: 'First friction area coefficient'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":422,"value":"viewof ex_2_4_friction_area_pos_2 = slider({\n min: 0,\n max: width - 300,\n step: 1,\n value: 500,\n description: 'Second friction area position'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":385,"value":"viewof ex_2_4_friction_coeffictient_2 = slider({\n min: -0.1,\n max: 0.1,\n step: 0.01,\n value: 0.05,\n description: 'Second friction area coefficient'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":446,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":497,"value":"dragForce = (v, c = 0.1, a = 1) =>\n v\n .clone()\n .normalize()\n .negate()\n .multiplyScalar(a * c * Math.pow(v.length(), 2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":518,"value":"md`We also introduce new object type to our environment - liquid - that will present resistance to our movers. (for implementation, see Appendix)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":516,"value":"applyDrag = (mover, liquid) =>\n mover.applyForce(dragForce(mover.velocity, liquid.c, mover.surfaceArea))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":533,"value":"viewof example_2_5_drag_coef = slider({\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.1,\n description: 'Water drag coefficient'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":537,"value":"{\n const height = 300;\n const massRng = d3.randomUniform.source(random)(0.1, 5);\n const liquid = new Liquid({\n x: 0,\n y: 150,\n width,\n height: 150,\n c: example_2_5_drag_coef\n });\n const movers = Array.from(\n { length: 50 },\n () =>\n new Mover({\n x: random() * width,\n y: random() * 100,\n mass: massRng(),\n onUpdate: mover => {\n applyGravity(mover);\n }\n })\n );\n return renderMovers(\n {\n width,\n height,\n visibility,\n overflow: bounceMover({ width, height }),\n liquids: [liquid]\n },\n ...movers\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":547,"value":"md`### Exercise 2.5\n_Take a look at our formula for drag again: drag force = coefficient * speed * speed. The faster an object moves, the greater the drag force against it. In fact, an object not moving in water experiences no drag at all. Expand the example to drop the balls from different heights. How does this affect the drag as they hit the water?_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"{\n const height = 500;\n const liquid = new Liquid({\n x: 0,\n y: height - 150,\n width,\n height: 150,\n c: 0.1\n });\n const movers = Array.from(\n { length: 50 },\n () =>\n new Mover({\n x: random() * width,\n y: random() * 300,\n mass: 2,\n onUpdate: (mover) => {\n applyGravity(mover);\n }\n })\n );\n return renderMovers(\n {\n width,\n height,\n visibility,\n overflow: bounceMover({ width, height }),\n liquids: [liquid]\n },\n ...movers\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":572,"value":"md`### Exercise 2.5\n_Take a look at our formula for drag again: **drag force = coefficient * speed^2**. The faster an object moves, the greater the drag force against it. In fact, an object not moving in water experiences no drag at all. Expand the example to drop the balls from different heights. How does this affect the drag as they hit the water?_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":578,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":670,"value":"{\n const height = 200;\n const liquid = new Liquid({\n x: 0,\n y: 50,\n width,\n height: 150,\n c: 0.1\n });\n const movers = Array.from(\n [20, 14.14, 10, 1],\n (v_n, nth) =>\n new Mover({\n x: 50 + nth * 50,\n y: liquid.y,\n vy: v_n,\n mass: 2,\n onUpdate: (mover) => {\n applyGravity(mover);\n }\n })\n );\n return renderMovers(\n {\n width,\n height,\n visibility,\n overflow: limitMover({ width, height }),\n liquids: [liquid]\n },\n ...movers\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":682,"value":"md`### Exercise 2.6\n_The formula for drag also included surface area. Can you create a simulation of boxes falling into water with a drag force dependent on the length of the side hitting the water?_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":704,"value":"{\n const height = 500;\n const liquid = new Liquid({\n x: 0,\n y: height - 150,\n width,\n height: 150,\n c: 0.05\n });\n const movers = Array.from(\n { length: 50 },\n () =>\n new SquareMover({\n x: random() * width,\n y: random() * 300\n })\n );\n return renderMovers(\n {\n width,\n height,\n visibility,\n overflow: limitMover({ width, height }),\n liquids: [liquid]\n },\n ...movers\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":692,"value":"class SquareMover extends Mover {\n constructor({ ...props }) {\n super({\n x: random() * width,\n y: random() * 300,\n mass: 1,\n onUpdate: mover => {\n applyGravity(mover);\n },\n ...props\n });\n this.surfaceArea = random() * 5 + 0.1;\n this.side = this.surfaceArea * 10;\n }\n\n display(ctx) {\n ctx.strokeStyle = '#000';\n ctx.lineWidth = 1;\n ctx.fillStyle = '#faaa';\n ctx.fillRect(this.x, this.y, this.side, this.side);\n ctx.strokeRect(this.x, this.y, this.side, this.side);\n }\n\n get bbox() {\n return {\n minX: 0,\n minY: 0,\n maxX: this.side,\n maxY: this.side\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":687,"value":"md`### Exercise 2.7\n_Fluid resistance does not only work opposite to the velocity vector, but also perpendicular to it. This is known as “lift-induced drag” and will cause an airplane with an angled wing to rise in altitude. Try creating a simulation of lift._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":737,"value":"// TODO","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":739,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":766,"value":"gravitationalAttractionForce = (\n mover,\n attractor,\n { G = 1, minDist = 5, maxDist = 1000 } = {}\n) => {\n const posAttr = attractor.location || attractor.position;\n const posMover = mover.location || mover.position;\n const r = posAttr.clone().sub(posMover);\n const rLen = clamp(r.length(), minDist, maxDist); // apply some constraints to not blow sim off\n\n return r\n .normalize()\n .multiplyScalar((G * mover.mass * attractor.mass) / (rLen * rLen));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":779,"value":"md`Although this could be done with all objects possesing position and mass, for now we introduce sepcial _Attractor_ class, that represents fixed-positioned object that attracts other ones (see appendix for impl).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":813,"value":"{\n const height = 300;\n const rotMover = new Mover({ x: width / 2, y: height / 2 - 100 });\n rotMover.applyForce(new THREE.Vector2(1, 0));\n return renderMovers(\n {\n width,\n height,\n visibility,\n trace: true,\n overflow: () => {},\n attractors: [\n new Attractor({ x: width / 2, y: height / 2, G: 1, maxDist: 25 })\n ]\n },\n rotMover\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":860,"value":"{\n const height = 300;\n const rotMover = new Mover({ x: width / 2, y: height / 2 - 60 });\n rotMover.applyForce(new THREE.Vector2(1, 0));\n return renderMovers(\n {\n width,\n height,\n visibility,\n overflow: () => {},\n attractors: [\n new Attractor({ x: width / 2, y: height / 2, G: 3, maxDist: 1000 })\n ]\n },\n rotMover\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":865,"value":"{\n const height = 300;\n const rotMover = new Mover({ x: width / 2 - 100, y: height / 2 - 100 });\n rotMover.applyForce(new THREE.Vector2(2, 0));\n return renderMovers(\n {\n width,\n height,\n visibility,\n trace: true,\n overflow: () => {},\n attractors: [\n new Attractor({ x: width / 2 - 100, y: height / 2, G: 1, maxDist: 25 }),\n new Attractor({ x: width / 2 + 100, y: height / 2, G: 1, maxDist: 25 })\n ]\n },\n rotMover\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":884,"value":"{\n const height = 500;\n return renderMovers(\n {\n width,\n height,\n visibility,\n overflow: () => {},\n attractors: [\n new Attractor({ x: width / 2, y: height / 2, G: 1, maxDist: 25 })\n ]\n },\n ...Array.from({ length: 50 }, () =>\n new Mover({\n x: random() * width,\n y: random() * height,\n mass: 0.1 + 2 * random()\n }).applyForce(new THREE.Vector2(random(), random()))\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":922,"value":"md`### Exercise 2.8\n_In the example above, we have a system (i.e. array) of Mover objects and one Attractor object. Build an example that has systems of both movers and attractors. What if you make the attractors invisible? Can you create a pattern/design from the trails of objects moving around attractors? See the Metropop Denim project by Clayton Cubitt and Tom Carden for an example._\n\nMove those balls to change pic:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":928,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":925,"value":"md`### Exercise 2.9\n_It’s worth noting that gravitational attraction is a model we can follow to develop our own forces. This chapter isn’t suggesting that you should exclusively create sketches that use gravitational attraction. Rather, you should be thinking creatively about how to design your own rules to drive the behavior of objects. For example, what happens if you design a force that is weaker the closer it gets and stronger the farther it gets? Or what if you design your attractor to attract faraway objects, but repel close ones?_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1021,"value":"{\n const target = DOM.element('div');\n functionPlot({\n target,\n data: [{ fn: \"log(x/2)\" }]\n });\n return target;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1003,"value":"{\n const height = 500;\n const attractor = new Attractor({\n x: width / 2,\n y: height / 2,\n G: 1,\n maxDist: 25\n });\n\n attractor.attractionForce = function(mover) {\n const v = new THREE.Vector2().subVectors(this.location, mover.location);\n const len = v.length();\n return v\n .normalize()\n .multiplyScalar((mover.mass / this.mass) * Math.log(len / mover.mass));\n };\n\n return renderMovers(\n {\n width,\n height,\n visibility,\n trace: true,\n overflow: () => {},\n attractors: [attractor]\n },\n ...Array.from({ length: 50 }, () =>\n new Mover({\n x: random() * width,\n y: random() * height,\n mass: 0.1 + 2 * random()\n }).applyForce(new THREE.Vector2(random(), random()))\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1171,"value":"md`## 2.10 Everything Attracts (or Repels) Everything`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1230,"value":"{\n const height = 500;\n\n return renderMovers(\n {\n width,\n height,\n visibility,\n trace: true,\n overflow: () => {}\n },\n ...Array.from(\n { length: 50 },\n () =>\n new AttractingMover({\n x: random() * width,\n y: random() * height,\n mass: 0.1 + 2 * random()\n })\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1249,"value":"md`### Exercise 2.10\n_Change the attraction force in Example 2.8 to a repulsion force. Can you create an example in which all of the Mover objects are attracted to the mouse, but repel each other? Think about how you need to balance the relative strength of the forces and how to most effectively use distance in your force calculations._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1254,"value":"{\n const height = 500;\n\n return renderMovers(\n {\n width,\n height,\n visibility,\n trace: true,\n overflow: () => {}\n },\n new AttractingMover({\n x: width / 2,\n y: height / 2,\n mass: 10,\n G: 2,\n onUpdate: function (self, { mouse }) {\n this.acceleration.setScalar(0);\n if (mouse.down && mouse.pos) {\n this.location = mouse.pos;\n }\n }\n }),\n ...Array.from(\n { length: 50 },\n () =>\n new AttractingMover({\n x: random() * width,\n y: random() * height,\n mass: 0.1 + 2 * random(),\n G: -0.5\n })\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"md`## Mover class`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1210,"value":"class AttractingMover extends Mover {\n constructor({ G = 1, minDist = 1, maxDist = 25, ...baseOpts }) {\n super(baseOpts);\n this.G = G;\n this.minDist = minDist;\n this.maxDist = maxDist;\n }\n\n attractionForce(target) {\n return gravitationalAttractionForce(target, this, {\n G: this.G,\n minDist: this.minDist,\n maxDist: this.maxDist\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":508,"value":"md`### Liquid class`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":511,"value":"class Liquid {\n constructor({\n x = 0,\n y = 0,\n width = 100,\n height = 100,\n c = 0.1,\n color = '#0033ffaa'\n }) {\n this.location = new THREE.Vector2(x, y);\n this.width = width;\n this.height = height;\n this.c = c;\n this.color = color;\n }\n\n contains(obj) {\n return (\n obj.x >= this.x &&\n obj.x < this.x + this.width &&\n obj.y >= this.y &&\n obj.y < this.y + this.height\n );\n }\n\n display(ctx) {\n ctx.lineWidth = 0;\n ctx.fillStyle = this.color;\n ctx.fillRect(this.x, this.y, this.width, this.height);\n }\n\n get x() {\n return this.location.x;\n }\n set x(xx) {\n this.location.x = xx;\n }\n get y() {\n return this.location.y;\n }\n set y(yy) {\n this.location.y = yy;\n }\n\n get bbox() {\n return {\n minX: 0,\n minY: 0,\n maxX: this.width,\n maxY: this.height\n };\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":781,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"md`## Tools`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"function bounceMover({\n width,\n height,\n x = 0,\n y = 0,\n velocityLoss = 0\n}) {\n const check = (mover, prop, min, max) => {\n if (mover[prop] < min) {\n mover[prop] = min;\n mover.velocity[prop] *= -(1 - velocityLoss);\n } else if (mover[prop] > max) {\n mover[prop] = max;\n mover.velocity[prop] *= -(1 - velocityLoss);\n }\n };\n return mover => {\n const bbox = mover.bbox;\n check(mover, 'x', x + mover.bbox.minX, x + width - mover.bbox.maxX);\n check(mover, 'y', y + mover.bbox.minY, y + height - mover.bbox.maxY);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"function wrapMover({ width, height, x = 0, y = 0 }) {\n return mover => {\n mover.x = wrap(mover.x, x, x + width);\n mover.y = wrap(mover.y, y, y + height);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":721,"value":"function limitMover({ width, height, x = 0, y = 0 }) {\n const check = (mover, prop, min, max) => {\n if (mover[prop] < min) {\n mover[prop] = min;\n mover.velocity[prop] = 0;\n } else if (mover[prop] > max) {\n mover[prop] = max;\n mover.velocity[prop] = 0;\n }\n };\n return mover => {\n const bbox = mover.bbox;\n check(mover, 'x', x + mover.bbox.minX, x + width - mover.bbox.maxX);\n check(mover, 'y', y + mover.bbox.minY, y + height - mover.bbox.maxY);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":808,"value":"clamp = (num, min, max) => Math.min(max, Math.max(min, num))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"md`## Libs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"d3 = require(\"d3\", \"d3-random\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"import {\n simplex,\n random,\n wrap,\n repeat\n} from '@ajur/the-nature-of-code-1-vectors'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1295,"value":"THREE = require(\"three@0.147.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"PI = Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":340,"value":"import { slider } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1168,"value":"md`functionPlot tool from: https://mauriciopoppe.github.io/function-plot/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1013,"value":"math = require('https://cdnjs.cloudflare.com/ajax/libs/mathjs/1.5.2/math.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1192,"value":"functionPlot = require(\"https://unpkg.com/function-plot@1/dist/function-plot.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 30:"$2f:body"