在p5.js中在畫布上繪制多個rect

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

這段代碼很簡單，我有一個rect，每次draw（）函數運行時，我都會減小y位置，為了正常工作，我需要有一個clear函數，以便刪除它繪制的矩形並繪制它y值為-1的矩形。

在設置函數中，我將數組中的所有矩形都具有隨機的x值和相同的Y值。

但是由於某種原因，同一矩形在新矩形的x，y位置上反復繪制。 我在這里想念什么嗎？

Answer 1

我將數組中的所有矩形都具有隨機的x值和相同的Y值

這不是真的。 您的generateRectangles（）函數根據i的遞增值給出rects.ya值。

用新矩形的x，y位置反復繪制相同的矩形。 我在這里想念什么嗎？

您的函數調用告訴它在以下位置繪制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 。
• 然后，將jth矩形的y位置減小1 。
• 然后繪制第jth矩形。
• 然后draw()再次觸發，您清除了剛才繪制的矩形，然后移至下一個矩形。

繪制矩形后，您再也不會返回它。 您有50000個矩形，對於每個矩形，將其上移1個像素，然后將其繪制，然后將其清除並繪制下一個。

擺脫對clear()的調用，以更好地了解發生了什么。