Week 3 - Creature class with vectors (2/14/25)

Happy Valentine's day ny'all, I'm currently in a library in Massachusetts doing school work. This week we were tasked to create a class that draws something and to make it move using vectors.

I decided to repurpose a simple class I made about a year ago that kinda looks like a top down view of a frog or a faceless kirby.

I love this thing it looks so silly.
Anyway we were linked to a book called The Nature of Code which has a chapter on vectors. I read through it until I reached the first bit of example code and realized I would probably understand how to use vectors better by looking at code which uses it, so I scrolled down until I found the following example code:

let position;
let velocity;
            
function setup() {
    createCanvas(640, 240);
    position = createVector(100, 100);
    velocity = createVector(2.5, 2);
}
            
function draw() {
    background(255);
    position.add(velocity);
            
    if (position.x > width || position.x < 0) {
        velocity.x = velocity.x * -1;
    }
    if (position.y > height || position.y < 0) {
        velocity.y = velocity.y * -1;
    }
            
    stroke(0);
    fill(127);
    strokeWeight(2);
    circle(position.x, position.y, 48);
}

I added a position and a velocity variable to my class' constructor and created a move function which adds the velocity and checks if the creature hits the edges just like the bouncing ball example. In the end this was my result:

I think this was a good introduction to vectors, though I'm not sure when I will use this in the future with p5.js
I could've probably made the creature rotate to face the direction the vector was facing using push() and pop(), but I was lazy and didn't think of it when I was working on the code.