Appearance
Animer des éléments
javascript
var posX;
var diametre = 100;
function setup() {
createCanvas(800,300);
background(240);
noStroke();
posX = -(diametre/2);
//frameRate(2);
}
function draw() {
background(240);
fill(255,0,0);
ellipse(posX,mouseY,diametre,diametre);
posX+=7;
if(posX>width+(diametre/2)) {
posX = -(diametre/2);
}
}
Le même code, commenté:
javascript
var posX; //Je déclare une variable pour la position en X
var diametre = 100; //Je déclare une variable pour le diamètre
function setup() {
createCanvas(800,300);
background(240);
noStroke(); //Je supprime les contours
// J'assigne une valeur à posX (pour que mon cercle soit hors de mon format au départ...)
posX = -(diametre/2);
// Ci-dessous, je modifie éventuellement le nombre de frames par seconde (décommentez si nécessaire)
//frameRate(2);
}
function draw() {
background(240);
// je rempli de rouge
fill(255,0,0);
ellipse(posX,mouseY,diametre,diametre);
//J'incrémente posX de 7, par exemple
posX+=7;
// Quand mon cercle est sorti de mon format, à droite, je le fais revenir par la gauche...
if(posX>width+(diametre/2)) {
posX = -(diametre/2);
}
}