Y 축 끝 값을 추적하고 일부 논리를 적용합니다.

Question

나는 칸 아카데미에서 js 처리 중이었습니다. 조건을 사용하여 바닥에 도달 한 후 맨 위가 다시 시작하도록 내 논리를 적용하는 요점을 짚어 봤습니다. 방금 Y axis 종단점을 추적하고 내비게이션 기능을 적용하려면 setXYPositions()으로 전화하면됩니다.

var xPositions = []; 
var yPositions = []; 

var setXYPositions = function(){ 

    for(var i = 0 ; i <= 400 ; i+=10){ 
    xPositions.push(i); 
    yPositions.push(random(1,100)); 
    } 
}; 

//call rain 
setXYPositions(); 

draw = function() { 

    background(204, 247, 255); 

    for (var i = 0; i < xPositions.length; i++) { 
     noStroke(); 
     fill(random(2,255), random(2,255), random(2,255)); 
     ellipse(xPositions[i], yPositions[i], 10, 10); 
     yPositions[i] += 5; 

    } 
}; 

Answer 1

yPosition 색인이 스케치 영역의 맨 아래에 도달했을 때 어떻게 알 수 있습니까? 그런 일이 발생할 때 어떤 가치가 있습니까?

알아 내려면 40 개 대신 yPosition 하나만 사용해보세요. yPosition을 인쇄하고 화면 맨 아래에서 벗어난 것이 무엇인지 알아냅니다.

다른 방식으로 생각하면 기본 크기 인 100x100을 사용하는 것처럼 보입니다. 즉, 창의 높이가 100 픽셀이라는 의미입니다. 창의 상단에있는 yPosition이 0 인 경우 창의 하단에있는 yPosition은 무엇입니까?

창문 하단 yPosition이 100 인 것으로 알고 도움이 되었기를 바랍니다. 이제 서클에 도달 할 때 무엇을하고 싶습니까? 창 상단으로 재설정하고 싶습니까? 음, 창문 상단에있는 yPosition은 무엇입니까? 우리는 이미 그것이 0이라고 말했습니다!

모두 함께 퍼팅, 그것은 다음과 같습니다

당신이 ( setup()에서 size() 함수를 호출하여) 창의 크기를 변경하면 어떻게됩니까

yPositions[i] += 5; 
if(yPositions[i] > 100){ 
    yPositions[i] = 0; 
} 

? 그 if 성명에서 100을 변경해야합니다. 그러나 Processing은 실제로 우리가 대신 사용할 수있는 height 변수를 제공함으로써 우리의 삶을 편하게 만듭니다!

yPositions[i] += 5; 
if(yPositions[i] > height){ 
    yPositions[i] = 0; 
} 

이제 우리의 코드는 창 크기에 관계없이 작동합니다.

뻔뻔한 자기 홍보 : 애니메이션 및 리셋 위치를 다루는 자습서를 작성했습니다. here.