Code Club #3

On va faire un Systeme de Particule qui bouge selon un noise() sur l’axe X et selon un random sur l’axe Y.

On va commencer par creer un systeme de particule qui bouge selon un random.

A/ la classe Particle

1. Creer une classe Particule avec position (posx et posy)
2. La position de chaque particule doit etre initiée aleatoirement.
3. Creer une fonction update() dans la classe particule qui crée deux valeurs random de velocité (velx et vely) puis qui ajoute cette velocité a la position.
4. Creer une fonction display() qui affiche la particle avec un circle()

B/ la mise en place de tout ca

1. Creer un tableau de particule vide
2. Dans la fonction setup() : remplir le tableau de 500 particules avec une boucle for
3. Dans la fonction draw() : appeler la fonction update() puis display() pour chaque particule avec une boucle for

On devrait avoir la meme chose qu’au debut du dernier code club :)

Maintenant pour bouger nos particule selon un noise() sur l’axe X plutot qu’un random(). Donc on va modifier la fonction update() de la classe particule !

Pour que le noise() soit interessant on va lui feeder la position actuelle de nos particules. Ca va ressembler a quelque chose comme ca dans notre fonction update():

velx = noise(this.posX,this.posY);

vely = random(-0.5,0.5);

le noise varie trop rapidement du coup on va juste scale down tout ca en divisant par 100 le x et le y qu’on donne au noise.

Donc au final notre fonction update commencera comme ca :

velx = noise(this.posX,this.posY);

vely = random(-0.5,0.5);

Voila c’est fini !

///////// ameliorations

1/ Wrap

Pour rendre le code plus cool on pourrait aussi creer une fonction wrap() qui prend les particules qui vont trop loin et qui leur fait faire le tour du sketch (comme snake2 sur nokia 3310)

Un wrap sur l’axe X ressemblera a ca.

wrap()

{

if(this.posx< 0){ this.posx = width; }

if(this.posx>width

}

Vous pouvez y ajouter la meme chose pour l’axe Y (selon la hauteur cette fois)

Une fois crée, n’oubliez pas d’appeler la fonction wrap pour chaque particule dans la boucle for de votre fonction draw()

2/ Coloration des particules en fonction de l’intensité du noise.

Dans la fonction display() de la classe particule, on peux reprendre le meme noise que tout a l’heure et le mettre dans une variable:

let noiseColor = noise(this.posx/100, this.posy/100);

et feed cette valeur dans le fill a la place d’un noir.

fill(noiseColor);

voila c’est vraiment fini !

J’ai aussi mis une version 3D ou j’ai commenté seulement les differences entre les deux sketchs pour que vous voyez comment pas grand chose ne change au final pour faire un sketch en 3D !

// ##### Particle Class

class Particle {
  constructor() {
    this.posx = random(0, width); // set initial position X
    this.posy = random(0, height); // set initial position Y
  }

  update() { // # function to update position
    var velx = noise(this.posx/100,this.posy/100); // noise speed X
    var vely = random(-0.5,0.5) ;// random speed Y
    this.posx = this.posx + velx; // add speed X
    this.posy = this.posy + vely; // add speed Y
  }
  
  wrap(){ // function to make seamless snake2 nokia 3310 environment
    if(this.posx > width)  { this.posx = 0;}
    if(this.posx < 0 )     { this.posx = width;}
    if(this.posy > height) { this.posy = 0;}
    if(this.posy < 0)      { this.posy = height;}
  }

  display() { // # function to display particle
    noStroke(); // no borders
    let noiseColor = noise(this.posx/100,this.posy/100) * 255; // same color as the noise (* 255 to be grayscale)
    fill(noiseColor); // fill with noise color
    circle(this.posx, this.posy, 5); // draw circle
  }
}

// ##### Main Sketch

// General Sketch Variables
let p = []; // define array of moving particles

// # Setup Function - [ called once at start ]
function setup() {
  createCanvas(500, 500);
  frameRate(30);

  // # create 500 moving particles in the sketch
  for (var i = 0; i < 500; i++) {
    p[i] = new Particle();
  }
}

// # Draw Loop - [ called every frame ]
function draw() {
  background(255);// Draw Background

  // # Display all moving particles
  for (let i = 0; i < p.length; i++) {
    p[i].update(); // update particles positions
    p[i].wrap(); // snake2 particles
    p[i].display(); // display particles
  }
}