Question

我想要实现的是p5.js中从下到上的多个矩形

这是我的代码。

var j = 0;
var allRectangles = [];
//initaial value of the rectanlge!
var rects = {
    x:window.innerWidth/2,
    y:innerHeight-200    
};
allRectangles.push(rects);
function setup(){
    createCanvas(window.innerWidth,window.innerHeight);
    generateRectangles();
}
function draw(){
    clear();
    j++;
    allRectangles[j].y--;
    //check();
    rect(allRectangles[j].x,allRectangles[j].y-j,200,40);
}
/*function check(){
    if(allRectangles[j].y < 0){
        allRectangles[j].y = innerHeight-200;;
    }
}*/
//
function generateRectangles(){
    for(var i = 0 ; i<= 50000 ; i++){
        rects = {
            x:random(0,width),
            y:innerHeight-200-(i+1*2)    
        };
        allRectangles.push(rects);
    }
}

这段代码非常简单，我有一个矩形，每次draw（）函数运行时我都会减少y位置，为了正常工作我需要有一个清晰的函数，以便它删除它绘制的矩形并使用-1值y绘制该矩形。

在设置函数中，我将数组中的所有矩形都具有随机x值和相同的Y值。

但由于某种原因，同一个矩形会一遍又一遍地用新矩形的x，y位置绘制。我在这里错过了什么吗？

Answer 1

我的数组中的所有矩形都具有随机x值和相同的Y值

事实并非如此。您的generateRectangles（）函数根据i的增加值给出rects.y值。

相同的矩形用新矩形的x，y位置反复绘制[sic]。我在这里错过了什么吗？

您的函数调用告诉它在该位置绘制一个200x40的矩形：

rect(allRectangles[j].x,allRectangles[j].y-j,200,40)

你期待什么尺寸？

Answer 2

请仔细考虑您的draw()功能正在做什么。

function draw(){
    clear();
    j++;
    allRectangles[j].y--;
    //check();
    rect(allRectangles[j].x,allRectangles[j].y-j,200,40);
}

首先清除任何旧框架。
然后按j增加1。
然后按y缩小jth矩形的1位置。
然后绘制jth矩形。
然后draw()再次开火，你清除了刚刚绘制的矩形，然后继续前进到下一个矩形。

绘制矩形后，永远不会返回它。你有50000个矩形，每一个你将它向上移动1个像素，然后绘制它，然后清除它并绘制下一个。

取消对clear()的调用，以便更好地了解正在发生的事情。

在p5.js中在画布上绘制多个rect

2 个答案: