永远循环

Question

尝试制作一段简单的 JS，设置随机背景颜色，然后在随机位置创建 i 个点。但是，它在 i 组中生成无限个点。因此，如果我设置 i < 10，它会一次生成 10 个点。

使用 sublime 中的 p5 库编码。

function setup() {
     r = random(0,255);
     g = random(0,255);
     b = random(0,255);
     createCanvas(window.innerWidth,window.innerHeight);
     background(r,g,b);
     frameRate(1);
}

function draw() {
    for (var i = 0; i < 3; i++) {
        fill(0);
        noStroke();
        ellipse(random(0, width), random(0, height), 80,80);
        }
}

Answer 1

p5 框架在每一帧上调用 draw() 函数。因此，您将在每一帧中创建一组新的点。您应该在绘图函数之外为点创建 (x, y) 位置，将它们存储在一个数组中，然后仅在绘图函数内渲染它们。

var dots = []; 

function setup() {
    r = random(0,255);
    g = random(0,255);
    b = random(0,255);
    createCanvas(window.innerWidth,window.innerHeight);
    background(r,g,b);
    frameRate(1);
    createDots();
}

function createDots() {
    for (var i = 0; i < 3; i++) {
        var dot = {
            x : random(0, width),
            y : random(0, height)
        };
        dots.push(dot);
    }
}

function draw() {
    for (var i = 0; i < 3; i++) {
        fill(0);
        noStroke();
        var dot = dots[i];
        ellipse(dot.x, dot.y, 80, 80);
    }
}

永远循环

For looping forever

javascript

p5.js