5 초 동안 기능 실행

Question

YouTube 로딩 바처럼 맨 위에 막대가있는 p5.js에서 로딩 막대를 만들려고합니다. 그래서

var x = 0; 
function setup() { 
    createCanvas(400, 400); 
    x = width; 
} 
function draw() { 
    background(220); 
    stroke(255,0,0); 
    strokeWeight(10); 
    line(0,0,x,0); 
} 

같은

은 내가 라인의 폭을 줄일 수 map() 기능을 사용하고 싶습니다.

map(x, width , 0 , second(),second()+5); 

Working Example

참고 : 모든 x의

Answer 1

첫째는 width에 동일하게해서는 안 p5.js 라이브러리를 사용하여. 0부터 시작하여 시간 만 기준으로 업데이트해야합니다.

두 번째로 second()은 현재 시간의 실제 초를 반환하므로이 경우에는 좋지 않습니다. 프로젝트가 시작된 후 밀리 초를 반환하는 millis()을 사용하는 것이 좋습니다.

마지막으로 당신은 잘못 map 매개 변수 (또는 적어도 내가 당신이 그들에게를 전달하는 순서로 뭘 하려는지 이해가 안 돼요)

x = map(millis(), 0, 5000, 0 , width); 

위의 밀리 초 범위 매핑됩니다를 사용하는 캔버스의 0 - width에 0 - 5000 (0-5 초)입니다.

---

언제든지 표시 줄을 초기화하려면 값 범위의 시작/끝 값에 변수를 사용하십시오.

var x, 
    startAt; 

function setup() { 
    createCanvas(400, 400); 
    startAt = millis(); 
} 

function draw() { 
    background(220); 
    stroke(255, 0, 0); 
    strokeWeight(10); 

    x = map(millis(), startAt, startAt + 5000, 0, width); 
    line(0, 0, x, 0); 
} 

function mouseClicked() { 
    startAt = millis(); 
} 

이 예제에서는 클릭 할 때마다 막대가 다시 시작됩니다. http://alpha.editor.p5js.org/gpetrioli/sketches/SyibBz_ff