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

, 나는 그것이 제거하도록 내가 명확한 기능을 가질 필요가 제대로 작동하려면이 들어, y 위치에게 무승부() 함수가 실행될 때마다 감소하는 구형 영역을 매우 간단이되어이 코드 그 사각형을 그린 직사각형을 그릴 때 -1의 값을 가진 사각형을 그린다.

나는 임의의 x 값과 같은 Y 값을 가진 배열의 모든 사각형을 가지고 있습니다.

하지만 동일한 사각형이 새 사각형의 x, y 위치로 반복해서 그려집니다. 내가 여기서 뭔가를 놓치고 있니?

Answer 1

는 I 랜덤 X 값 및 Y 값 동일한 이것은 사실이 아니다

을 갖는 어레이의 모든 사각형을 갖는다. generateRectangles() 함수는 i의 증가하는 값을 기반으로 rects.y에 값을 제공합니다.

동일한 직사각형이 새로운 직사각형의 x, y 위치를 반복해서 그립니다. 내가 여기서 뭔가를 놓치고 있니? 당신이 기대했던 어떤 크기의

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

:

귀하의 함수 호출은 위치에 200x40 사각형을 그립니다 알려줍니다?

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()에 대한 전화를 제거하여 현재 상황을 더 자세히 확인하십시오.