Trois mouvements simples d’un cercle

10/3/2020 ☼ animation ☼ mouvement ☼ horizontal ☼ vertical ☼ diagonale ☼ p5js

Niveau : ★★★☆☆

Voici l’exemple à étudier et à travailler dans l’éditeur en ligne de p5.js. Les commentaires dans le code permettent de suivre les différentes étapes.

Le mouvement horizontal :

Le code (dans sketch.js dans l’éditeur p5.js) :

var xpos = 100;
var speed = 1;

function setup() {
  createCanvas(300, 300); 
}

function draw() {
  background(255);

  strokeWeight(3);

  stroke(0);
  fill(255);
  rect(0, 0, 300, 300);

  xpos = xpos + speed;

  if ((xpos > width - 100) || (xpos < 100)) {
    speed = speed * -1;
  }

  fill(0);
  ellipse(xpos, height / 2, 100, 100);
}

---

Le mouvement vertical :

Le code (dans sketch.js dans l’éditeur p5.js) :

var xpos = 100;
var speed = 1;

function setup() {
  createCanvas(300, 300);
}

function draw() {
  background(255);

  strokeWeight(3);

  stroke(0);
  fill(255);
  rect(0, 0, 300, 300);

  ellipseMode(CENTER);

  xpos = xpos + speed;

  if ((xpos > width-100) || (xpos < 100)) {
    speed = speed * -1;
  }

  fill(0);
  ellipse(height/2, xpos, 100, 100);

---

Le mouvement en diagonale :

Le code (dans sketch.js dans l’éditeur p5.js) :

var xpos = 100;
var speed = 1;

function setup() {
  createCanvas(300, 300);
}

function draw() {
  background(255);
  strokeWeight(3);

  stroke(0);
  fill(255);
  rect(0, 0, 300, 300);

  ellipseMode(CENTER);

  xpos = xpos + speed;

  if ((xpos > width-100) || (xpos < 100)) {
    speed = speed * -1;
  }
  fill(0);
  ellipse(xpos, xpos, 100, 100);
}