The functionality follows suit. The Mover needs to move (by applying its velocity to its position) and it needs to be visible. I’ll implement these needs as functions named update() and show(). I’ll put all of the motion logic code in update() and draw the object in show().
update() {
- //{!1} The Mover moves.
- this.position.add(this.velocity);
+ update() {
+ //{!1} The Mover moves.
+ this.position.add(this.velocity);
}
- show() {
+ show() {
stroke(0);
fill(175);
//{!1} The Mover is drawn as a circle.
circle(this.position.x, this.position.y, 48);
- }
+ }
The Mover class also needs a function that determines what the object should do when it reaches the edge of the canvas. For now, I’ll do something simple, and have it wrap around the edges.
checkEdges() {
//{!11} When it reaches one edge, set position to the other.
@@ -671,7 +671,8 @@ Motion with Vectors
} else if (this.position.y < 0) {
this.position.y = height;
}
- }
+ }
+}
Now the Mover class is finished, but the class itself isn’t an object; it’s a template for creating an instance of an object. To actually create a Mover object, I first need to declare a variable to hold it:
let mover;
Then, inside the setup() function, I create the object by invoking the class name along with the new keyword. This triggers the class’s constructor to make an instance of the object.