Question

使用p5库，使用p5编辑器。
我试图改变泡泡的颜色＆＃39;在一系列的“气泡”中但是，当我点击一个气泡时，它会改变所有的气泡颜色。

glow()函数是更改颜色的函数，mousePressed()函数检查是否单击了鼠标。

var bubbles = [];
var bubbleNum = 10; //The number of bubbles on the screen

function setup() {
    createCanvas(1000, 800);
    for (let i = 0; i < bubbleNum; i++) {
        let x = map(i, 0, bubbleNum, 0, width);
        bubbles[i] = new Bubble(x, random(0, height), 30);
    }
}

function draw() {
    background(50);
    for (let i = 0; i < bubbleNum; i++) {
        bubbles[i].show();
        if (mouseIsPressed) {
            for (let i = 0; i < bubbleNum; i++) {
                bubbles[i].move();
            }
        }
    }
}

function mousePressed() {
    for (let i = 0; i < bubbles.length; i++) {
        bubbles[i].glow(mouseX, mouseY);
    }
}

class Bubble {
    constructor(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
    }

    move() {
        this.x = this.x + random(-1, 1);
        this.y = this.y + random(-1, 1);
    }

    show() {
        noStroke();
        ellipse(this.x, this.y, this.r, this.r);
    }

    glow(mx, my) {
        let d = dist(mx, my, this.x, this.y);
        if (d < this.r) {
            fill(244, 220, 66);
        }
    }
}

Answer 1

你犯了一个小错误，但我花了一段时间才得到它：P在你的glow函数中设置全局颜色，而不是单个气泡。

因此，我建议如下调整您的Bubble课程：记住气泡的颜色，然后在执行所有气泡的show时，您将根据指定的颜色绘制气泡，具体取决于是否被点击了。

class Bubble {
    constructor(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.color = color(255,255,255);
    }

    move() {
        this.x = this.x + random(-1, 1);
        this.y = this.y + random(-1, 1);
    }

    show() {
        noStroke();
        fill(this.color);
        ellipse(this.x, this.y, this.r, this.r);
    }

    glow(mx, my) {
        let d = dist(mx, my, this.x, this.y);
        if (d < this.r) {
            this.color = color(244, 220, 66);
        }
    }
}

请参阅example

影响数组p5.js中的一个对象 - Javascript

1 个答案: