在p5.js上在畫布上繪製多個矩形

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

此代碼是很簡單的，我有一個矩形中，我每個抽獎（）函數運行時間減少y位置，這才能正常工作，我需要有一個明確的功能，使得它消除了繪製矩形，並繪製該矩形的y值爲-1。

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

但由於某種原因，相同的矩形被反覆繪製，新的矩形的x，y位置。我在這裏錯過了什麼嗎？

Answer 1

我有具有隨機x值和相同的Y值

這是不正確一個數組中的所有矩形。您的generateRectangles（）函數爲rects.y提供了一個基於i的遞增值的值。

同一個矩形一次又一次地繪製出新的矩形的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); 
} 

• 首先你清除掉任何舊幀。
• 然後你增加j1。
• 然後您將jth矩形的y位置減少1。
• 然後你畫出jth矩形。
• 然後draw()再次啓動，並且清除剛繪製的矩形，然後轉到下一個。

一旦你繪製一個矩形，你永遠不會回到它。你有50000個矩形，每一個你將它向上移動1個像素，然後繪製它，然後清除它並繪製下一個。

擺脫clear()的呼叫，以更好地瞭解發生了什麼。