이 글에서는 p5.js 입문 튜토리얼의 공 애니메이션 샘플 코드를 주로 소개하고 참고용으로 올려드립니다.
1. 움직이는 공
이 섹션에서는 p5.js를 사용하여 화면에서 움직이는 작은 공을 만들어 보겠습니다.
변수를 사용하여 공의 위치를 기록한 다음 draw() 함수에서 이를 변경하는 것입니다. draw() 함수는 계속 실행되므로(주파수는 FPS, 기본값은 60프레임/초) 볼의 무브먼트를 제작하였습니다.
코드는 다음과 같습니다:
var x=0; function setup() { createCanvas(400, 400); } function draw() { background(220); //width和height是关键词,分别是Canvas的宽和高 x+=2; ellipse(x,height/2,20,20); }
2. 튀는 공
일정 시간이 지나면 공이 화면 밖으로 이동합니다. 공이 화면 밖으로 나가는 것을 방지하기 위해 공이 화면을 떠날 때 속도를 제어하고 속도를 반전시키는 변수를 추가합니다.
코드는 다음과 같습니다:
var x=0; var speed=2; function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(x,height/2,20,20); //width和height是关键词,分别是Canvas的宽和高 x+=speed; if(x>width||x<0){ speed*=-1; }
또한 두 개의 변수를 사용하여 x 및 y 방향의 속도를 제어하여 캔버스에서 공이 배출되는 기능을 구현할 수 있습니다.
코드는 다음과 같습니다.
var x=200; var y=200; var Vx=2; var Vy=3; function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(x,y,20,20);//width和height是关键词,分别是Canvas的宽和高 x+=Vx; y+=Vy; if(x>width||x<0){ Vx*=-1; } if(y>height||y<0){ Vy*=-1; } }
위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.
관련 기사:
nodejs에서 간단하게 Excel 콘텐츠를 읽고 쓰는 방법의 예
"=="와 "=의 차이점에 대한 자세한 설명 ==" 자바스크립트
위 내용은 p5.js 입문 튜토리얼 공 애니메이션 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!