This week in Creators we covered a few very important concepts which we will likely need to run over a few times until we get them solid!

What are Vectors?

First we looked into a concept called Vectors, in particular 2D Vectors.  We saw that at the most basic, a Vector is a simple way of holding an x and a y in one variable.  This is useful for keeping track of the position of an object as you only need to keep one variable e.g. “rocketPosition” rather than two “rocket_x, rocket_y”.

The other thing we talked about is how this X and Y can represent a change in a given direction – i.e. a vector with x=10 and y=5 can mean “change X by 10 and y by 5”.  This way it’s useful for ANYTHING that might be in a given direction – things like velocity and acceleration for example!

The other thing cool about the vector object in p5 is that it has a bunch of functions that allow you to add, subtract, etc them.  This would allow you to e.g. add a velocity vector to a position vector to come up with a new position vector!

This web page has some nice details on the maths behind vectors.

Position, Velocity and Acceleration

We saw that position, velocity and acceleration are really common uses of vectors.

Each frame:

The Velocity vector is added to position vector to get a new position!

The Acceleration vector is added to the velocity vector to get a new velocity!

Objects and Classes: The Asteroid!

Now that we had the idea of Vectors, and a basic grasp on physics, we took another look at the project we did last week (the animated ball) and we changed it so that it was better separated out.  We discovered that:

A Class is a “type” of object – you create a class to describe some kind of thing or concept in the real world.  It’s a good way to break up your code by splitting it up into different files.  A Class is kind of like a Sprint in Scratch.  for example, we could have a class Ball which defines what a ball would look like – simple example below could be in Ball.js:

class Ball {

}

A Constructor is a special function in a class which is run when a new object is created from it – kind of like a setup function for the class.  For example, a constructor could define what size and color the ball is:

class Ball {
   constructor(size, color) {
     this.size = size;
     this.color = color;
   }
}

“this.” before a variable means that all functions in the class can see that variable. For example, now that I have set size and color in the constructor, I can use them to draw the ball:

class Ball {
   constructor(size, color) {
     this.size = size;
     this.color = color;
   }
   show(){
     fill(this.color);
     ellipse(0,0, this.size, this.size);
   }
}

Now that our class is created, we can use it in our scripts – but first we must create an object from the class!

An Object is created from a class – it’s like a Sprite Clone in Scratch.  For example we could create a Class “Ball” with a certain size and then create objects like that – for example in our sketch.js we could write:

let footBall = new Ball(10, 'white');
let basketBall = new Ball(20, 'orange');

basketBall.show();
footBall.show();

This is pretty cool!  For our sketch, we created an Asteroid object which is very like the ones in the game Asteroids – we might expand this to a full blown Asteroid game in time!

Each Asteroid had a size and a position (a vector).  We tried two types of acceleration – constant acceleration, and then a cool/weird unrealistic random acceleration which is how the script ended up.

The script is below:

class Asteroid {
    constructor(size, position) {
        this.size = size;
        this.position = position;
        this.acceleration = p5.Vector.random2D();
        this.acceleration.mult(0.01);
        this.velocity = createVector(0,0);
    }

    move(){
        // random accel
        this.acceleration = p5.Vector.random2D();
        this.acceleration.mult(0.2);

        this.velocity.add(this.acceleration);
        this.velocity.limit(20);
        this.position.add(this.velocity);

        // check edges
        if(this.position.x > width){
            this.position.x=0;
        }
        if(this.position.x < 0){
            this.position.x=width;
        }
        if(this.position.y > height){
            this.position.y=0;
        }
        if(this.position.y < 0){
            this.position.y=height;
        }
    }

    show() {
        fill("red");
        ellipse(this.position.x, this.position.y, 
            this.size, this.size);
    }
}