p5.j​​s 入門チュートリアル ボールアニメーションのサンプルコード

この記事では、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; 
}

さらに、2 つの変数を使用して 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ブログプロジェクト開発ノート

「==」と「=」の違いを詳しく解説== JavaScript で

以上がp5.j​​s 入門チュートリアル ボールアニメーションのサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。