Calling Method Properties Issue

Hi, I’m having problem with my OOP homework.

So I’m basically working on a sheep that moves around, and is draggable.
When those Sheeps intersect a new one should be made.

I wrote down the code for this on line 101 and 188, but I keep getting undefined errors in my console. I’m guessing that I don’t call my Properties right.

Would be very happy if this can be solved.

class Sheep {
    constructor(x, y, size) {
    this.pos = createVector(x, y);
    this.size = size;
    this.active = false;
    this.speed = createVector(random(-1,1), random(-1,1));
    this.speed.mult(0.5);
    this.angle = 0;
    this.lifespan = 255;
    }

    move(){
        this.pos.add(this.speed);
        this.lifespan--;
    }

    drag() {
        if (this.active) {
            this.pos.x = mouseX;
            this.pos.y = mouseY;
        }

        if (this.pos.x > width ||
            this.pos.x < 0 ||
            this.pos.y > height ||
            this.pos.y < 0)
            {
            this.pos.x = width / 2;
            this.pos.y = height / 2;
            }
    }

    bounce() {
        if (this.pos.x > width - this.size / 2 ||
            this.pos.x < 0 + this.size / 2)
            {
            this.speed.x *= -1;
            }
        if (this.pos.y > height - this.size / 2 ||
            this.pos.y < 0 + this.size / 2)
            {
            this.speed.y *= -1;
            }
    }
    show() {
    let angle = 72;
    let headSize = this.size / 3;

    let aangle = this.speed.heading();

    push()
    translate(this.pos.x, this.pos.y);

    rotate(aangle);

    fill("black");
    circle(this.size / 2.2, 0, headSize);
    angleMode(DEGREES);

    for(let i = -angle/2; i < 360; i+=angle){
      push()
      noStroke()
      fill("black")
        rotate(i);
        translate(this.size / 4, 0)
        circle(0,0,this.size / 1.7)
      pop()
    }

    for(let i = -angle / 2; i < 360; i+=angle){
      push()
      noStroke()
      fill("white")
        rotate(i);
        translate(this.size / 4, 0)
        circle(0,0,this.size / 2)
      pop()
    }
    pop()
    }

    hover(x, y) {
        if (
            x > this.pos.x - this.size / 2 &&
            y > this.pos.y - this.size / 2 &&
            x < this.pos.x + this.size / 2 &&
            y < this.pos.y + this.size / 2
        ) {
            return true;
        } else {
            return false;
        }
    }
    activate() {
        this.active = true;
    }
    deactivate() {
        this.active = false;
    }

    intersects(otherSheep) {
        let d = dist(this.pos.x, this.pos.y, otherSheep.pos.x, otherSheep.pos.y);
        console.log(d)
        if (d < this.size / 2+ otherSheep.size / 2) {
          return true;
        } else {
          return false;
        }
      }
}
class Herd{
    constructor() {

    this.sheep = [];
    this.active_sheep = [];
}
    addSheep(sh) {
    this.sheep.push(sh);
    }
    /* activeer */
    activateSheep(sh) {
    sh.activate();
    this.active_sheep.push(sh);
    }

    deactivateAllSheep() {
    for (let i = 0; i < this.active_sheep.length; i++) {
        this.active_sheep[i].deactivate();
        this.active_sheep = [];
    }
    }

    pollSheep() {
    let x = mouseX;
    let y = mouseY;
    this.deactivateAllSheep();
    for (let i = this.sheep.length - 1; i >= 0; i--) {
        if (this.sheep[i].hover(x, y)) {
        this.activateSheep(this.sheep[i]);
        break; // drag only one Sheep at a time
        }
    }
    }

    dragSheep() {
        for (let i = 0; i < this.active_sheep.length; i++) {
            this.active_sheep[i].drag();
        }
    }

    showSheep() {
        for (let i = 0; i < this.sheep.length; i++) {
            this.sheep[i].show();
        }
    }

    moveSheep() {
        for (let i = 0; i < this.sheep.length; i++) {
            this.sheep[i].move();
        }
    }

    bounceSheep() {
        for (let i = 0; i < this.sheep.length; i++) {
            this.sheep[i].bounce();
        }
    }
}

let myCanvas;
let myHerd;
let size = 40;

let herd = [];

function setup() {
    myCanvas = createCanvas(500, 500);
    rectMode(CENTER);
    myHerd = new Herd();
    for (let i = 0; i < 20; i++) {
    herd.push(myHerd.addSheep(new Sheep(random(0 + (size / 2), width - (size / 2)), random(0 + (size / 2), height - (size / 2)), size)));

}
}
function draw() {
    background("#5AD455");

    for(let i = 0; i < herd.length; i++){
        let currentSheep = herd[i];
        myHerd.showSheep();
        myHerd.moveSheep();
        myHerd.bounceSheep();
        for(let j = 0; herd.length; j++){
            if(i != j){
                let otherSheep = herd[j];
                let sheepsIntersected = currentSheep.intersects(otherSheep);
                if(sheepsIntersected){
                    console.log("intersection");
                }
            }
        }
    }

}
function mouseDragged() {
    myHerd.dragSheep();
}

function mousePressed() {
    myHerd.pollSheep();
}
function keyPressed(){
    if (keyCode === UP_ARROW) {
        herd.push(myHerd.addSheep(new Sheep(random(0 + (size / 2), width - (size / 2)), random(0 + (size / 2), height - (size / 2)), size)))
    }
}

Hello,

Could you provide me a bit more info about your process. I can see that your Herd class contains an array of Sheep. However, you also have a herd array. Do you plan on having multiple herds in your sketch?

Would it be easier to just use myHerd throughout your sketch which holds multiple Sheep?

I think this might be causing a bit of an issue. in your for loop:

for(let i = 0; i < herd.length; i++){
        let currentSheep = herd[i];
        myHerd.showSheep();
        myHerd.moveSheep();
        myHerd.bounceSheep();
        for(let j = 0; herd.length; j++){
            if(i != j){
                let otherSheep = herd[j];
                let sheepsIntersected = currentSheep.intersects(otherSheep);
                if(sheepsIntersected){
                    console.log("intersection");
                }
            }
        }
    }

You are using both the myHerd object and the herd array. For example you are calling myHerd.move also trying herd[i] and herd[j] which appear to be undefined. You could use myHerd.sheep[i] and myHerd.sheep[j] to pass into your intersects method. However, I still get an undefined issue when trying to access the pos in the intersects method.

If you don’t need multiple herds it might be best to just use the Herd object. I was able to rewrite it just using the myHerd object and get the collision to work. However, this may not be what you had in mind.

1 Like

Thanks for answering.

Thanks to a friend it got fixed:


class Sheep {
    constructor(x, y, size) {
        this.pos = createVector(x, y);
        this.size = size;
        this.active = false;
        this.speed = createVector(random(-1, 1), random(-1, 1));
        this.angle = 0;
        this.collided = false;
        this.whiteColor = color("white");
        this.blackColor = color("black");
    }

    move() {
        this.pos.add(this.speed);
    }

    drag() {
        if (this.active) {
            this.pos.x = mouseX;
            this.pos.y = mouseY;
        }

        if (
            this.pos.x > width - this.size / 2 ||
            this.pos.x < 0 + this.size / 2
        ) {
            this.pos.x = width / 2;
        }
        if (
            this.pos.y > height - this.size / 2 ||
            this.pos.y < 0 + this.size / 2
        ) {
            this.pos.y = height / 2;
        }
    }

    bounce() {
        if (
            this.pos.x > width - this.size / 2 ||
            this.pos.x < 0 + this.size / 2
        ) {
            this.speed.x *= -1;
        }
        if (
            this.pos.y > height - this.size / 2 ||
            this.pos.y < 0 + this.size / 2
        ) {
            this.speed.y *= -1;
        }
    }
    show() {
        let angle = 72;
        let headSize = this.size / 3;

        let aangle = this.speed.heading();

        push();
        translate(this.pos.x, this.pos.y);

        rotate(aangle);

        fill(this.blackColor);
        stroke(this.blackColor);
        circle(this.size / 2.2, 0, headSize);
        angleMode(DEGREES);

        for (let i = -angle / 2; i < 360; i += angle) {
            push();
            noStroke();
            fill(this.blackColor);
            rotate(i);
            translate(this.size / 4, 0);
            circle(0, 0, this.size / 1.7);
            pop();
        }

        for (let i = -angle / 2; i < 360; i += angle) {
            push();
            noStroke();
            fill(this.whiteColor);
            rotate(i);
            translate(this.size / 4, 0);
            circle(0, 0, this.size / 2);
            pop();
        }
        pop();
    }

    hover(x, y) {
        if (
            x > this.pos.x - this.size / 2 &&
            y > this.pos.y - this.size / 2 &&
            x < this.pos.x + this.size / 2 &&
            y < this.pos.y + this.size / 2
        ) {
            return true;
        } else {
            return false;
        }
    }
    activate() {
        this.active = true;
    }
    deactivate() {
        this.active = false;
    }

    intersects(otherSheep) {
        let d = dist(
            this.pos.x,
            this.pos.y,
            otherSheep.pos.x,
            otherSheep.pos.y
        );

        if (d < this.size / 2 + otherSheep.size / 2) {
            return true;
        } else {
            return false;
        }

        // if (d < this.size / 2 + otherSheep.size / 2 && !this.collided) {
        //   this.collided = true;
        //   otherSheep.collided = true;
        //   return true;
        // } else {
        //   this.collided = false;
        //   otherSheep.collided = false;
        //   return false;
        // }
    }
}
class Herd {
    constructor() {
        this.sheep = [];
        this.active_sheep = [];
        this.lifeSpan = 100;
    }
    addSheep(sh) {
        this.sheep.push(sh);
    }
    /* activeer */
    activateSheep(sh) {
        sh.activate();
        this.active_sheep.push(sh);
    }

    deactivateAllSheep() {
        for (let i = 0; i < this.active_sheep.length; i++) {
            this.active_sheep[i].deactivate();
            this.active_sheep = [];
        }
    }

    update() {
        this.lifeSpan--;
    }

    pollSheep() {
        let x = mouseX;
        let y = mouseY;
        this.deactivateAllSheep();
        for (let i = this.sheep.length - 1; i >= 0; i--) {
            if (this.sheep[i].hover(x, y)) {
                this.activateSheep(this.sheep[i]);
                break; // drag only one Sheep at a time
            }
        }
    }

    babySheep() {
        for (let i = 0; i < this.sheep.length; i++) {
            let currentSheep = this.sheep[i];
            if (this.lifeSpan < 0) {
            }
            for (let j = 0; j < this.sheep.length; j++) {
                if (i != j) {
                    let otherSheep = this.sheep[j];
                    let sheepsIntersected = currentSheep.intersects(otherSheep);
                    if (sheepsIntersected) {
                        otherSheep.whiteColor = color("#FF6505");

                        this.sheep.length--;

                        currentSheep.speed.x *= -1;
                        currentSheep.speed.y *= -1;

                        // if (otherSheep.whiteColor === color("black")) {
                        //   // textSize(20);
                        //   // text(Winner, width / 2, height / 2);
                        //   console.log("winner");
                        // }
                        // // console.log("adding sheep");
                        // // this.sheep.splice(i, 0);
                        // // console.log("intersecting");
                    } else {
                        // console.log("not intersecting");
                    }
                }
            }
        }
    }

    dragSheep() {
        for (let i = 0; i < this.active_sheep.length; i++) {
            this.active_sheep[i].drag();
        }
    }

    showSheep() {
        for (let i = 0; i < this.sheep.length; i++) {
            this.sheep[i].show();
        }
        this.babySheep;
    }

    moveSheep() {
        for (let i = 0; i < this.sheep.length; i++) {
            this.sheep[i].move();
        }
    }

    bounceSheep() {
        for (let i = 0; i < this.sheep.length; i++) {
            this.sheep[i].bounce();
        }
    }
}

let myCanvas;
let size = 50;

let herd;
function setup() {
    myCanvas = createCanvas(500, 500);
    myCanvas.parent("p5js");

    rectMode(CENTER);

    herd = new Herd();
    for (let i = 0; i < 7; i++) {
        herd.addSheep(
            new Sheep(
                random(0 + size / 2, width - size / 2),
                random(0 + size / 2, height - size / 2),
                size
            )
        );
    }
}
function draw() {
    background("#5AD455");
    herd.showSheep();
    herd.moveSheep();
    herd.bounceSheep();
    herd.babySheep();
    herd.update();
}
function mouseDragged() {
    herd.dragSheep();
}

function mousePressed() {
    herd.pollSheep();
}
function keyPressed() {
    if (keyCode === UP_ARROW) {
        herd.addSheep(
            new Sheep(
                random(0 + size / 2, width - size / 2),
                random(0 + size / 2, height - size / 2),
                size
            )
        );
        if (keyCode === DOWN_ARROW) {
            herd.deleteSheep();
        }
    }
}
1 Like