Processing.js : cpu 사용을 줄이기 위해 캔버스 부분 만 그리는 방법

Question

바로 지금 processing.js 스크립트의 자체 인스턴스로 20 개의 캔버스를 렌더링하는 html 페이지가 있습니다. CPU 사용량을 줄이기 위해 mouseover/out 이벤트를 loop()/noLoop() 그래프 위에 마우스를 가져 가면됩니다.

하지만이 문제를 더욱 해결해야합니다. 현재 캔버스는 300x300 공간에 300x300 공간이 있습니다. 동적으로 모든 시간을 그려야하지만 실제로는 프레임의 framerate()를 사용하여 다시 그릴 필요가없는 나머지 공간 인 범례가있는 사각형이 있습니다. 휴식.

픽셀을 다시 그릴 draw() 함수를 본질적으로 지정하는 방법을 아는 사람이 있습니까?

Answer 1

100x300 빈 영역이 계산에 크게 추가되지는 않을 것이라고 확신합니다. 하지만 당신은 물론 같은 것을 그릴 전달할 수 있습니다

if(frameCount==1) [draw legend code];

또는 연속하지만 덜 자주 렌더링 if(frameCount % 30 == 0)...를 사용하여.

---

편집 :

void setup(){ 
    size(400,400); 
    noStroke(); 
    background(255); 
} 

void draw(){ 
    fill(255,255,255,50); 
    rect(0, 150, width, height-150); 

    if(frameCount%50 == 1) { 
    fill(255); 
    rect(0, 0, width, 150); 
    fill(0); 
    text("frame " + frameCount, width/2, 75); 
    } 
    fill(255,0,0); 
    ellipse(random(0, width), random(150, height), 10, 10); 
}