Last week in Creators, we looked at Vectors and how they can be used to specify things like position, velocity and acceleration.  This week, we looked at what can actually cause something to accelerate – FORCE!  First we talked and played a bit with force and then we created a simulation of something that we could apply different forces to.  We wanted to think about a scene where we had lots of objects and different forces acting like wind, gravity, friction, etc.

What the heck IS force?

We started off by looking at the laws of motion from Sir Isaac Newton, who was the first guy to think hard about this (or at least to come up with good theories).  Everyone knew about the apple but not many about what it made him think of.  We googled his laws of motion and arrived at a NASA web Page that had a nice short explanation:

Like all great ideas, these look obvious when you know the answer, but were huge ideas at the time!  I’ll butcher the above laws by trying to re-word them to capture the interesting thing about them from our point of view!

First Law: Every object keeps moving at the same velocity unless an unbalanced force acts on it.

We know velocity is speed in a given direction, and it can be zero so that kind of covers all of the above law.   Before Newton, people thought that you had to keep applying force to something to keep it moving and that if you stopped applying force, it would slow down and stop.

We thought about this by considering the problem of a space mission to Mars, and Astronauts going to the bathroom.  We figured out that since the (dried out) poop would be ejected from the spaceship at regular intervals, a LOT of the poop would arrive at Mars long before the spaceship (since they would need to slow down at some stage, but the poop would have no way to slow itself down).  Ugh.

Second Law: Force is Mass multiplied by Acceleration

How do you describe a Force?  There are so many types and they all work differently!!  It can be gravity, magnetism, pushing things, an explosion, etc!  Because there are so many types of forces, a good idea is to describe them in terms of the EFFECT of that force. I.e. how much acceleration did it put on something of a given mass/size?  This is kind of simple but cool, when you think about it.  You stop wondering about how gravity or magnetism works, and just think about what it does – move stuff!

For us, we are interested in how much acceleration to put on an object when different forces act on it because we really want to know how fast to move it.  So we want a formula for acceleration – we got it by taking the above and swapping it!

Force = Mass x Acceleration

therefore:

Acceleration = Force / Mass

This makes sense – if you have a huge object (big mass), then a Force will give it a small acceleration.  If you have a tiny object, then the same force will give it much more acceleration.  Try it with different numbers and see if it makes sense to you!

Third Law: Force acts in pairs of opposite directions

We didn’t include this in our force model just yet in the code, but talked about it – if you punch someone, your fist hurts (and you get in trouble!).  So if we had e.g. a game where objects bounced off each other, then if one ball hits another they would both be affected to different degrees (depending on their mass).  More on this in a future week!

Our Code!

The animation we created was like the below:

This is a pretty poor quality video but it gives you the idea!  In order to do this we created a Mover object in a file called mover.js which had the following properties:

• size: how big is it?
• mass: how heavy is it?
• position: where is it now?
• velocity: how fast is it moving? (and in what direction)
• acceleration: how fast is the speed changing? (and in what direction)

The last 3 ones were vectors.  We added the following methods to the object:

• move – code to move the object position by it’s velocity and change the velocity by the acceleration – this was similar to last week’s code!
• show – code to draw the object at the current position – this was also similar to last week’s code!
• checkEdges – code to check if the Mover was near the edge of the screen and if so reverse the velocity! (if on edge, bounce in scratch terms!)
• applyForce – code to apply a force to the object! This was new!

The last one was the magic step! This is how we would apply wind, gravity, etc to the object? Let’s look at the code!

    applyForce(force){
        let accelToAdd=force.copy().div(this.mass);
        this.acceleration.add(accelToAdd);
    }

Pretty simple!  This function figures out how much acceleration using Newtons Second law (A = F/M), then it adds it to the overall acceleration.

Let’s look at the move function:

    move(){
        this.velocity.add(this.acceleration);
        this.position.add(this.velocity);
        this.acceleration.mult(0);
    }

I love how simple vectors make the code! The first two lines are normal for move, but the last line might look odd – this is to reset the accel to zero so it is ready to take the accelerations in the next frame (which are worked out from the forces).  So each frame, the acceleration will be the sum of the acceleration from all the forces acting on it for that frame!

Because we have applyForce, we can add all the forces we want!

Using the Movers!

We decided to create a bunch of movers in an array:

let movers = [];
function setup() {
    createCanvas(innerWidth, innerHeight);
    for(let i=0; i< NUMBER_OF_MOVERS; i++){
        let startPosition=createVector(0, height/2);
        movers.push(new Mover(10*(i+1), startPosition));
    }
}

Then, in the draw function we created some forces (wind, gravity) as Vecors and applied them to the movers in a loop:

function draw() {
    background("LightSkyBlue");    
    let wind=createVector(3,0);
    let gravity=createVector(0,5);    

    for(let i=0; i< NUMBER_OF_MOVERS; i++){
        movers[i].applyForce(wind);
        movers[i].applyForce(gravity);    
    
        movers[i].move();
        movers[i].checkEdges();
        movers[i].show();    
    }    
}

We could see that the smaller movers reacted more to the forces, just as Newton predicted!

All the code is on our github repo as usual!