更改数组中单个对象的方面，索引不对齐

Question

Objective：点击红色蜡烛时，它们应该变成绿色。目前，当点击蜡烛时，数组中的下一根蜡烛会发生变化，而不是被点击的蜡烛。单击最后一根蜡烛时，第一根蜡烛会改变颜色，因此问题会继续环绕数组。问题是什么，我该如何解决？

我已经尝试过各种数组操作，即（蜡烛[i-1]...等）。以及分配颜色的不同方式（有一个单独的 'colors' 数组。所有这些都导致了同样的问题。

let candles = [];
let numCandles = 15;
let bg, r, g;

function setup(){
    
    createCanvas(windowWidth,windowHeight);
    r = color(239,83,80);
    g = color(38,166,154);
    bg = color(19,23,34);
    background(bg);

    for(let i = 0; i < numCandles; i++){
        let c = new candleStick(i);
        candles.push(c);
        c.show();
    }
}

function draw(){
    
    resizeCanvas(windowWidth, windowHeight);
    background(bg);
    for(let i = 0; i < numCandles; i++){
        candles[i].show();
    }
}

function mousePressed(){

    for(let i = 0; i < numCandles; i++){
        
    if(mouseX <= candles[i].x + candles[i].bodyWidth && mouseX >= candles[i].x &&
        mouseY <= candles[i].y + candles[i].bodyHeight && mouseY >= candles[i].y){

            if(candles[i].col == r){
                candles[i].col = g;
                
            }
            else if(candles[i].col == g){
                candles[i].col = r;
                
            }
            
        }
    }
}

class candleStick{

    constructor(index){
        this.bodyHeight = 200;
        this.bodyWidth = 20;
        this.offset = 25;
        this.index = index;
        this.col = r;
        this.x = (windowWidth/2) - (this.index * this.offset) + (numCandles * (this.offset + this.bodyWidth)/4);
        this.y = (windowHeight/2) - this.bodyHeight;
    }

    drawBody(){
        rect(this.x, this.y, this.bodyWidth , this.bodyHeight,2);
        fill(this.col);
        noStroke();
    }

    drawLine(){
        line((height/2 - this.bodyWidth/2) - (this.index * this.offset), (width/2 - this.bodyHeight/2), (height/2 - this.bodyWidth/2) - (this.index * this.offset) , (width/2 - this.bodyHeight/2) - 300);
    }

    show(){
        this.drawBody();
        this.drawLine();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

预期结果：点击蜡烛时，蜡烛的颜色会发生变化（从红色变为绿色，从绿色变为红色）。所有其他蜡烛应该保持不变。

Answer 1

fill()、noStroke() 等函数...设置状态，用于绘制形状。 fill() sets the color used to fill shapes and noStroke() 禁用绘制轮廓。
rect() 使用当前状态绘制一个矩形。

这意味着 fill() 和 noStroke() 必须在 rect() 之前调用：

class candleStick{

    // [...]

     drawBody(){
        fill(this.col);
        noStroke();
        rect(this.x, this.y, this.bodyWidth , this.bodyHeight,2);
    }

    // [...]
}

请注意，您设置的状态不会影响当前绘制的 "candle"，该状态会影响该行中的下一根蜡烛。这导致了转移效应。

let candles = [];
let numCandles = 15;
let bg, r, g;

function setup(){

    createCanvas(windowWidth,windowHeight);
    r = color(239,83,80);
    g = color(38,166,154);
    bg = color(19,23,34);
    background(bg);

    for(let i = 0; i < numCandles; i++){
        let c = new candleStick(i);
        candles.push(c);
        c.show();
    }
}

function draw(){

    resizeCanvas(windowWidth, windowHeight);
    background(bg);
    for(let i = 0; i < numCandles; i++){
        candles[i].show();
    }
}

function mousePressed(){

    for(let i = 0; i < numCandles; i++){

    if(mouseX <= candles[i].x + candles[i].bodyWidth && mouseX >= candles[i].x &&
       mouseY <= candles[i].y + candles[i].bodyHeight && mouseY >= candles[i].y){

            if(candles[i].col == r){
                candles[i].col = g;
            }
            else if(candles[i].col == g){
                candles[i].col = r;
            }
        }
    }
}

class candleStick{

    constructor(index){
        this.bodyHeight = 200;
        this.bodyWidth = 20;
        this.offset = 25;
        this.index = index;
        this.col = r;
        this.x = (windowWidth/2) - (this.index * this.offset) + (numCandles * (this.offset + this.bodyWidth)/4);
        this.y = (windowHeight/2) - this.bodyHeight;
    }

    drawBody(){
        fill(this.col);
        noStroke();
        rect(this.x, this.y, this.bodyWidth , this.bodyHeight,2);
    }

    drawLine(){
        line((height/2 - this.bodyWidth/2) - (this.index * this.offset), (width/2 - this.bodyHeight/2), (height/2 - this.bodyWidth/2) - (this.index * this.offset) , (width/2 - this.bodyHeight/2) - 300);
    }

    show(){
        this.drawBody();
        this.drawLine();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

更改数组中单个对象的方面，索引不对齐

Changing aspect of single object in an array, indicies not lining up

javascript

processing

p5.js