在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()的呼叫，以更好地了解发生了什么。