p5.js, tutoriel d'introduction, exemple de code d'animation de balle

Cet article présente principalement l'exemple de code d'animation de petite boule du didacticiel d'introduction de p5.js. Maintenant, je le partage avec vous et le donne comme référence.

1. Une balle en mouvement

Dans cette section, nous utiliserons p5.js pour créer une petite balle qui se déplace sur l'écran.

L'idée est d'utiliser des variables pour enregistrer la position de la balle, puis de la modifier dans la fonction draw() puisque la fonction draw() continuera à s'exécuter (la fréquence est FPS, par défaut 60 images/). deuxième), donc la balle bouge.

Le code est le suivant :

var x=0; 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 //width和height是关键词，分别是Canvas的宽和高 
 x+=2; 
 ellipse(x,height/2,20,20); 
}

2. La balle qui rebondit

Après un certain temps, la balle sortira de l'écran. Afin d'éviter que la balle ne sorte de l'écran, nous ajoutons une variable pour contrôler la vitesse et inverser la vitesse lorsque la balle quitte l'écran.

Le code est le suivant :

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; 
}

De plus, nous pouvons utiliser deux variables pour contrôler la vitesse dans les directions x et y réaliser le ballon dans la capacité de rebondir sur la toile.

Le code est le suivant :

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; 
 } 
}

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile. à l'avenir.

Articles associés :

Exemple de méthode simple de lecture et d'écriture de contenu Excel dans nodejs

projet de blog node.js notes de développement

Explication détaillée de la différence entre "==" et "===" en javaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!