How do I have my array generate a new triangle everytime the mouse is clicked?

Question

let cones = [];
    
function setup() {
    createCanvas(360,240);    
    for (let i = 0; i < 50; i++) { 
    let x = random(0, 360);   
    let y = random(0, 240);  
    let x1 = random(0, 360);  
    let y1 = random(0, 240);  
    let x2 = random(0, 360);  
    let y2 = random(0, 240);  
    cones[i] = new Triangle(x,y,x1,y1,x2,y2);  
    }
}

function draw() {
    background(0);
    for(let i = 0; i < 5; i++) {
    //cones[i].move();  
    cones[i].display();
    }
}

function mousePressed() {
    let x = random(0, 360);  
    let y = random(0, 240);  
    let x1 = random(0, 360);  
    let y1 = random(0, 240);  
    let x2 = random(0, 360);  
    let y2 = random(0, 240);  
    let c = new Triangle(mouseX, mouseY, x1, y1, x2, y2);  
    cones.push(c);
}

class Triangle {
    constructor(x,y,x1, y1,x2,y2) {  
    this.x = x;  
    this.y = y;  
    this.x1 = x1;  
    this.y1 = y1;  
    this.x2 = x2;  
    this.y2 = y2;  
    }
    display() {
    stroke(50,194,232);
    strokeWeight(4);
    noFill();
    triangle(this.x, this.y, this.x1, this.y1, this.x2, this.y2);
    }
}

I am trying to get a new triangle to add to the canvas every time the mouse is pressed... if you could also help me change the size/color that would be amazing!!

user_5577765 · Answer

Your algorithm works almost perfectly, but when you draw the triangles, you just go through the first 5 elements of the array and not all the elements (cones.length):

~~for(let i = 0; i < 5; i++)~~

for(let i = 0; i < cones.length; i++)

I recommend to write a function (newTriangle), which constructs a new random triangle. Generate random color values in the function. See the example:

let cones = [];

function setup() {
    createCanvas(360,240);    
    for (let i = 0; i < 2; i++) { 
        newTriangle();
    }
}

function draw() {
    background(0);
    for(let i = 0; i < cones.length; i++) {
        //cones[i].move();  
        cones[i].display();
    }
}

function mousePressed() {
    newTriangle(mouseX, mouseY);
}

function newTriangle(x, y) {
    let x0 = x ?? random(0, width);  
    let y0 = y ?? random(0, height);  
    let x1 = random(0, width);  
    let y1 = random(0, height);  
    let x2 = random(0, width);  
    let y2 = random(0, height);  
    let r = random(0, 256);  
    let g = random(0, 256);  
    let b = random(0, 256);  
    let c = new Triangle(x0, y0, x1, y1, x2, y2, r, g, b);  
    cones.push(c);
}

class Triangle {
    constructor(x, y, x1, y1, x2, y2, r, g, b) {  
        this.x = x;  
        this.y = y;  
        this.x1 = x1;  
        this.y1 = y1;  
        this.x2 = x2;  
        this.y2 = y2;  
        this.c = [r, g, b]
    }
    display() {
        stroke(...this.c);
        strokeWeight(4);
        noFill();
        triangle(this.x, this.y, this.x1, this.y1, this.x2, this.y2);
    }
}

How do I have my array generate a new triangle everytime the mouse is clicked?

1 Answers