p5.js 입문 튜토리얼 공 애니메이션 샘플 코드

이 글에서는 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 콘텐츠를 읽고 쓰는 방법의 예

node.js 블로그 프로젝트 개발 노트

"=="와 "=의 차이점에 대한 자세한 설명 ==" 자바스크립트

위 내용은 p5.js 입문 튜토리얼 공 애니메이션 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!