30:T9f8,# 03 | forces & sparklers Notes from Nature of Code, ch2: - 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 **velocity will only remain constant** in the absence of any forces or if the forces that act on it cancel each other out, meaning the** net force adds up to zero**. This is often referred to as equilibrium - **Forces always occur in pairs**. The two forces are of equal strength, but in opposite directions. the forces act on different objects. And just because the two forces are equal, it doesn’t mean that the objects’ movements are equal (or that the objects will stop moving). - If you calculate a p5.Vector f that is a force of object A on object B, you must also apply the opposite force that B exerts on object A. You can calculate this other force as p5.Vector.mult(f, -1). - **Net force equals mass times acceleration**. - Acceleration is equal to the sum of all forces divided by mass - Since I’m adding all the forces together at any given moment, I have to make sure that I clear acceleration (set it to zero) before each time `update()` is called. - One way to implement clearing the acceleration for each frame is to multiply the vector by 0 at the end of `update()` - Mass is a scalar, not a vector, as it’s just one number describing the amount of matter in an object. - I need to divide force by mass to apply Newton’s second law to the object. - **Friction is a dissipative force**. A dissipative force is one in which the total energy of a system decreases when an object is in motion. - friction points in the opposite direction of velocity: **-1 times the velocity unit vector.** - the **coefficient of friction** establishes the strength of a friction force for a particular surface - **normal force**, the force perpendicular to the object’s motion along a surface. The greater the gravitational force, the greater the normal force - bouncing off the edge here simulates an “idealized elastic collision,” meaning no kinetic energy is lost when the circle and the edge collide. - This is rarely true in the real world; pick up a tennis ball and drop it against any surface and the height at which it bounces will slowly lower until it rests against the ground. - quick way to simulate an inelastic collision is to reduce the magnitude of velocity by a percentage with each bounce - **drag force**: friction occurs when **a body passes through a liquid or gas** 31:T95a,- - **ρ** is the Greek letter rho, another constant that refers to the density of the liquid. - **v** refers to the speed of the object moving. The object’s speed is the magnitude of the velocity vector: `velocity.mag()` (this assumes the liquid or gas is stationary and not moving) - **A** refers to the frontal surface area of the object that is pushing through the liquid or gas - **Cd** is the coefficient of drag, exactly the same as the coefficient of friction (μ) - velocity unit vector, i.e. velocity.normalize() - **tl;dr: the coefficient of drag multiplied by the speed of the mover squared in the opposite direction of velocity** - **Gravitational attraction**: every object with mass exerts a gravitational force on every other object - F = Gm1m2/r2 - **G** is the universal gravitational constant, which in our world equals 6.67428 x 10-11 meters cubed per kilogram per second squared - **m1** and **m2** are the masses of objects 1 and 2. - **r^** refers to the unit vector pointing from object 1 to object 2. As you’ll see in a moment, this direction vector can be computed by subtracting the position of one object from the other. - *r^2* refers to the distance between the two objects squared. The farther away an object is, the weaker the force; the closer, the stronger. This week, interested in applying 3D perspective & camera, and to practice force: - leaves/petals flying through the screen, affected by wind? - leaves/flowers on a branch? - **fireworks** - many things attracted to a single object? ## ✨ sparklers! Ok so the semester is getting busy and it is 10pm the night before class hahaha so let's do something simple. Last night I did a metal workshop where we welded and used an angle grinder and various other things but I was really mesmerized by the literal sparks that were generated when we were using the grinder. Which reminded me of summer nights in Japan with fireworks and sparklers: ![](https://cdn.pixabay.com/photo/2016/11/29/12/14/blur-1869410__340.jpg) So I'm going to try to recreate that with three steps: 1. "spark particles" generated from the center of the screen 2. an invisible object is at the center and repels all sparks 3. the sparks are pulled down by a gravitational force It also seems from the reference photo that the sparks split into more sparks but I'll leave that for another time. 32:T870,{ // create canvas const canvas = DOM.canvas(width, height); const gl = canvas.getContext("webgl"); // start w/ shaders I've created before in @sxywu/00-2-webgl-fundamentals // and create a program const program = initShaderProgram( gl, vertexConvertToClipSpaceSource, fragmentRandColorSource ); // get locations for variables const positionAttribLoc = gl.getAttribLocation(program, "a_position"); const resolutionUniLoc = gl.getUniformLocation(program, "u_resolution"); const colorUniLoc = gl.getUniformLocation(program, "u_color"); // clear canvas w/ navy color gl.viewport(0, 0, width, height); gl.clearColor(0.0, 0.0, 0.15, 1.0); // set program to use gl.useProgram(program); // set resolution and color since those don't change gl.uniform2f(resolutionUniLoc, width, height); gl.uniform4f(colorUniLoc, 1, 0.9, 0, 1); let sparks = []; const repellant = new Mover2D(width / 2, height / 2, 100, 100); const [repX, repY] = repellant.position; // gravity const gravity = vec2.fromValues(0, -0.5); const random = d3.randomNormal(0, 1); while (true) { // generate a random number of sparks from where the repellant force is _.times(_.random(20, 40), (i) => { sparks.push(new Mover2D(repX + random(), repY + random())); }); // only keep sparks that are in screen sparks = _.filter( sparks, ({ position: [x, y] }) => 0 <= x && x <= width && 0 <= y && y <= height ); const positions = []; _.each(sparks, (spark) => { const repel = repellant.attract(spark); spark.addForce(repel); // go through each spark, apply downward force spark.addForce(gravity); spark.update(); // get their positions const { position: [x, y] } = spark; positions.push(x, y); }); // create position buffer const positionBuffer = initPositionBuffer(gl, positions); // set them on the shaders setPositionAttribute(gl, positionBuffer, positionAttribLoc); // draw gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.POINTS, 0, sparks.length); yield Promises.delay(60, canvas); } }33:T95d,{ // create canvas const canvas = DOM.canvas(width, height); const gl = canvas.getContext("webgl"); // start w/ shaders I've created before in @sxywu/00-2-webgl-fundamentals // and create a program const program = initShaderProgram( gl, vertexConvertToClipSpaceSource, fragmentRandColorSource ); // get locations for variables const positionAttribLoc = gl.getAttribLocation(program, "a_position"); const resolutionUniLoc = gl.getUniformLocation(program, "u_resolution"); const colorUniLoc = gl.getUniformLocation(program, "u_color"); // clear canvas w/ navy color gl.viewport(0, 0, width, height); gl.clearColor(0.0, 0.0, 0.15, 1.0); // set program to use gl.useProgram(program); // set resolution and color since those don't change gl.uniform2f(resolutionUniLoc, width, height); gl.uniform4f(colorUniLoc, 1, 0.9, 0, 1); let sparks = []; const repellant = new Mover2D(width / 2, height / 2, 100, 10); // gravity const gravity = vec2.fromValues(0, -0.1); const random = d3.randomNormal(0, 1); // for animation const start = Date.now(); while (true) { const t = (Date.now() - start) / 2000; const x = 100 * Math.cos(t) + width / 2; const y = 50 * Math.sin(t + Math.PI) + height * 0.65; vec2.set(repellant.position, x, y); const [repX, repY] = repellant.position; // generate a random number of sparks from where the repellant force is _.times(_.random(40, 100), (i) => { sparks.push(new Mover2D(repX + random(), repY + random())); }); // only keep sparks that are in screen sparks = _.filter( sparks, ({ position: [x, y] }) => 0 <= x && x <= width && 0 <= y && y <= height ); const positions = []; _.each(sparks, (spark) => { const repel = repellant.attract(spark); spark.addForce(repel); // go through each spark, apply downward force spark.addForce(gravity); spark.update(); // get their positions const { position: [x, y] } = spark; positions.push(x, y); }); // create position buffer const positionBuffer = initPositionBuffer(gl, positions); // set them on the shaders setPositionAttribute(gl, positionBuffer, positionAttribLoc); // draw gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.POINTS, 0, sparks.length); yield Promises.delay(60, canvas); } }34:T548,class Mover2D { // pass in initial position constructor(x, y, mass, g, vx, vy) { this.position = vec2.fromValues(x, y); this.velocity = vec2.fromValues(vx || 0, vy || 0); this.acceleration = vec2.create(); this.mass = mass || 1; this.g = 1; // previous positions for internal use only this.prev = vec2.fromValues(x, y); this.t = 0; } addForce(force) { // const f = vec2.clone(force); // divide force by mass, then add it to acceleration vec2.scaleAndAdd( this.acceleration, this.acceleration, force, 1 / this.mass ); } attract(other, direction) { // adapted from https://nature-of-code-2nd-edition.netlify.app/force/#210-everything-attracts-or-repels-everything let force = vec2.create(); vec2.sub(force, this.position, other.position); const distance = _.clamp(vec2.length(force), 5, 25); vec2.normalize(force, force); vec2.scale(force, force, direction || 1); const strength = (this.g * this.mass * other.mass) / (distance * distance); vec2.scale(force, force, strength); return force; } update() { // increment t this.t += 1; vec2.add(this.velocity, this.velocity, this.acceleration); vec2.add(this.position, this.position, this.velocity); vec2.scale(this.acceleration, this.acceleration, 0); } }35:T961,{ // create canvas const canvas = DOM.canvas(width, height); const gl = canvas.getContext("webgl"); // start w/ shaders I've created before in @sxywu/00-2-webgl-fundamentals // and create a program const program = initShaderProgram( gl, vertexConvertToClipSpaceSource, fragmentRandColorSource ); // get locations for variables const positionAttribLoc = gl.getAttribLocation(program, "a_position"); const resolutionUniLoc = gl.getUniformLocation(program, "u_resolution"); const colorUniLoc = gl.getUniformLocation(program, "u_color"); // clear canvas w/ navy color gl.viewport(0, 0, width, height); gl.clearColor(0.0, 0.0, 0.15, 1.0); // set program to use gl.useProgram(program); // set resolution and color since those don't change gl.uniform2f(resolutionUniLoc, width, height); gl.uniform4f(colorUniLoc, 1, 0.9, 0, 1); let sparks = []; const repellant = new Mover2D(width / 2, height / 2, 100, 10); // gravity const gravity = vec2.fromValues(0, -0.1); const random = d3.randomNormal(0, 1); // for animation const start = Date.now(); while (true) { const t = (Date.now() - start) / 2000; const x = 100 * Math.cos(t) + width / 2; const y = 50 * Math.sin(t + Math.PI) + height * 0.65; vec2.set(repellant.position, x, y); const [repX, repY] = repellant.position; // generate a random number of sparks from where the repellant force is _.times(_.random(40, 100), (i) => { sparks.push(new Mover2D(repX + random(), repY + random())); }); // only keep sparks that are in screen sparks = _.filter( sparks, ({ position: [x, y] }) => 0 <= x && x <= width && 0 <= y && y <= height ); const positions = []; _.each(sparks, (spark) => { const repel = repellant.attract(spark, -1); spark.addForce(repel); // go through each spark, apply downward force spark.addForce(gravity); spark.update(); // get their positions const { position: [x, y] } = spark; positions.push(x, y); }); // create position buffer const positionBuffer = initPositionBuffer(gl, positions); // set them on the shaders setPositionAttribute(gl, positionBuffer, positionAttribLoc); // draw gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.POINTS, 0, sparks.length); yield Promises.delay(60, canvas); } }36:Ta19,{ // create canvas const canvas = DOM.canvas(width, height); const gl = canvas.getContext("webgl"); // start w/ shaders I've created before in @sxywu/00-2-webgl-fundamentals // and create a program const program = initShaderProgram( gl, vertexConvertToClipSpaceSource, fragmentRandColorSource ); // get locations for variables const positionAttribLoc = gl.getAttribLocation(program, "a_position"); const resolutionUniLoc = gl.getUniformLocation(program, "u_resolution"); const colorUniLoc = gl.getUniformLocation(program, "u_color"); // clear canvas w/ navy color gl.viewport(0, 0, width, height); gl.clearColor(0.0, 0.0, 0.15, 1.0); // set program to use gl.useProgram(program); // set resolution and color since those don't change gl.uniform2f(resolutionUniLoc, width, height); gl.uniform4f(colorUniLoc, 1, 0.9, 0, 1); let sparks = []; const repellant = new Mover2D(width / 2, height / 2, 100, 1000); // gravity const gravity = vec2.fromValues(0, -1); const random = d3.randomNormal(0, 2); // for animation const start = Date.now(); while (true) { const t = (Date.now() - start) / 1000; const x = 150 * Math.cos(t) + width / 2; const y = 50 * Math.sin(2 * t) + height * 0.5; vec2.set(repellant.position, x, y); const [repX, repY] = repellant.position; // generate a random number of sparks from where the repellant force is _.times(_.random(100, 200), (i) => { const spark = new Mover2D( repX + random(), repY + random(), _.random(1, 10), // m 0, // g _.random(-5, 5), // vx _.random(-10, 5) // vy ); const repel = repellant.attract(spark); spark.addForce(repel); sparks.push(spark); }); // only keep sparks that are in screen sparks = _.filter( sparks, ({ position: [x, y], t }) => 0 <= x && x <= width && 0 <= y && y <= height && t < _.random(5, 30) ); const positions = []; _.each(sparks, (spark) => { // go through each spark, apply downward force spark.addForce(gravity); spark.update(); // get their positions const { position: [x, y] } = spark; positions.push(x, y); }); // create position buffer const positionBuffer = initPositionBuffer(gl, positions); // set them on the shaders setPositionAttribute(gl, positionBuffer, positionAttribLoc); // draw gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.POINTS, 0, sparks.length); yield Promises.delay(60, canvas); } }37:[{"id":"8686fc66a926cc8234947fc11dea2b8d0088c8bed1c781c22ea2d10c49d05c65cb426673c218ffcbb4d527dbc7aea12122c79c27472cec6bbb7e10bc15979b37","href":"https://static.observableusercontent.com/files/8686fc66a926cc8234947fc11dea2b8d0088c8bed1c781c22ea2d10c49d05c65cb426673c218ffcbb4d527dbc7aea12122c79c27472cec6bbb7e10bc15979b37","name":"Screen Recording 2023-02-16 at 12.08.26 AM.mov","type":"video/quicktime","lastModified":1676526339983.357,"size":3538277},{"id":"4436be6b19df88cf7ef90d5925ea7c5f72ae5f0237f2fcfbdcee49503f55e2daec32f3e70b2b3ca5b1841d6c1902afcbb344ecfc5380aeffc3f92d24dfb14ff2","href":"https://static.observableusercontent.com/files/4436be6b19df88cf7ef90d5925ea7c5f72ae5f0237f2fcfbdcee49503f55e2daec32f3e70b2b3ca5b1841d6c1902afcbb344ecfc5380aeffc3f92d24dfb14ff2","name":"Screen Recording 2023-02-15 at 11.59.04 PM.mov","type":"video/quicktime","lastModified":1676526339720.271,"size":1326924}] 2e:{"title":"03 | forces & sparklers","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"tex`F_{D}=\\frac{1}{2} \\rho v^{2} C_{D} A`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"width = 512","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"height = 0.75 * width","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"after I created the stationary version I realized it'd be so cool to have the sparkler move around:","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"but because I'm applying an attractive force all the \"spark particles\" still go towards the source instead of falling. I'm not mad about the effect though, it's got a really nice tinkerbell / fairy dust vibe to it 😆\n\nbut it WOULD be nice to **figure out how to apply a proper repellant force** (I tried to do a quick scale strength by -1 and that didn't quite work) sometime when my brain isn't so dead. \n\nAND eventually I'd love to **get this into 3D and apply some post-processing** (at least a blur).\n\nBut for now here's my implementation of the NoC `Mover` class w/ `glMatrix` instead of p5.js's vector functions:","pinned":false,"hidden":false,"mode":"md"},{"id":205,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"## + an update\nAsked in class about the weird effect I was getting when I was trying to do a repellant force (multiplying by -1) where I was getting this radial pattern:","pinned":false,"hidden":false,"mode":"md"},{"id":417,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"And we were able to figure out that because I was creating all the particles so close to the central \"repellent\" body and with the same mass, I was getting almost the same distances multiplied by the same mass so it was being pushed out by vectors that all had the same magnitude and then that compounded over time.\n\nSo to fix this, I changed the following:\n- changed initial velocity from `[0,0]` to `[_.random(-5, 5), _.random(-10, 5)]`\n- gave particles different masses randomly between 1 and 10 (instead of just 1)\n- and just for fun, I now \"erase\" a particle if it's been on the screen for more than 10-25 steps of time\n\nAnd this is what I get!","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"✨If I decide to come back to this, I'd still love to draw trails and blur them.✨","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"## # gallery\naka. the fun accidents\n","pinned":false,"hidden":false,"mode":"md"},{"id":324,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"
\n
\n
\n

\n\n## imports","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"import { vec2, vec3 } from \"@sxywu/00-3-nature-of-code-utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"import {\n initShaderProgram,\n initPositionBuffer,\n setPositionAttribute\n} from \"@sxywu/00-webgl-setup\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"import { vertexSource1, fragSource1 } from \"@sxywu/01-random-walks\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"import {\n vertexConvertToClipSpaceSource,\n fragmentRandColorSource\n} from \"@sxywu/00-2-webgl-fundamentals\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}