› ›

p5js- create new object when clicking on canvas

kvelosokveloso
edited November 2017 in p5.js Programming Questions

I'm really new to programming, and I've made a bunch of 'cells' bounce around the canvas. When they touch each other they combine and when you click on each cell they split. I'm struggling to figure out how to allow the user to click on the canvas and create a new 'cell'. I want this to work when the user clicks only on the canvas and not on the object. Any suggestions on how to fix my code would be lifesaving!

I think i'm stuffing up in the "clicked cell" function and when I call it in the mousePressed function

Thanks

Here is my code:

function Cell(x, y, r) {

    this.x = x;
    this.y = y;
    this.r = r;
    this.speedx = random(-1, 1);
    this.speedy = random(-1, 1);

    this.show = function() {
        stroke(255);
        fill(26, 229, 209, 50)
        ellipse(this.x, this.y, this.r * 2);
    }

    this.clickedcell = function(x, y) {
        var d = dist(this.x, this.y, x, y);
        if (d < this.r) {
            return true;
        } else {
            return false;
        }
    }

    this.clickedcanvas = function(x, y) {
        var d = dist(this.x, this.y, x, y);
        if (d > this.r) {
            return true;
        } else {
            return false;
        }
    }

    this.split = function() {
        var cell = new Cell(random(width), random(height), this.r * 0.5);
        return cell;
    }

    this.move = function() {
        this.x = this.x + this.speedx;
        this.y = this.y + this.speedy;
    }

    this.bounce = function() {
        if (this.x > width || this.x < 0) {
            this.speedx = -this.speedx;
        }
        if (this.y > height || this.y < 0) {
            this.speedy = -this.speedy;
        }
    }


    this.eats = function(other) {
        var d = dist(this.x, this.y, other.x, other.y);
        if (d < this.r + other.r) {
            this.r += other.r * 0.6;
            return true;
        } else {
            return false;
        }
    }

}

var cells = [];

function setup() {
    createCanvas(600, 600);
    for (var i = 0; i < 50; i++) {
        cells[i] = new Cell(random(width), random(height), 10);
    }
}


function mousePressed() {
    for (var i = 0; i < cells.length; i++) {
        if (cells[i].clickedcell(mouseX, mouseY)) {
            cells.push(cells[i].split());
            cells.push(cells[i].split());
            cells.splice(i, 1);
        }
    }
}

function mousePressed() {
    for (var i = 0; i < cells.length; i++) {
        if (cells[i].clickedcanvas(mouseX, mouseY)) {
            cells.push(new Cell(mouseX, mouseY, 10));
        }
    }
}


function draw() {
    background(255);
    for (var i = cells.length - 1; i >= 0; i--) {
        cells[i].show();
        cells[i].move();
        cells[i].bounce();

        for (var j = cells.length - 1; j >= 0; j--) {
            if (j != i && cells[i] && cells[i].eats(cells[j])) {
                cells.splice(j, 1);
            }
        }
    }
}
Tagged:

Best Answer

Answers

Sign In or Register to comment.