永远循环

Question

尝试制作一个简单的JS，设置随机背景颜色，然后在随机位置创建i点。然而，它在i的集合中产生无限的点。所以，如果我设置i＆lt; 10，一次制作10个点。

用崇高的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（）函数。因此，您将在每个帧中创建一组新的点。你应该为draw函数之外的点创建（x，y）位置，将它们存储在一个数组中，然后只在draw函数中渲染它们。

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);
    }
}