Code Club 3 [3d]
// ##### Particle Class

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

  update() { 
    var velx = noise(this.posx/100,this.posy/100); 
    var vely = random(-0.5,0.5) ;
    var velz = random(-0.5,0.5) ; // random speed Z
    this.posx = this.posx + velx;
    this.posy = this.posy + vely; 
    this.posz = this.posz + velz; // add speed Z
  }
  
  wrap(){ 
    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;}
    if(this.posz > height) { this.posz = 0;} // position Z wrap
    if(this.posz < 0)      { this.posz = height;} // position Z wrap
  }

  display() {
    noStroke();
    let noiseColor = noise(this.posx/100,this.posy/100) * 255;
    fill(noiseColor);
    
    // defining positions in 3D is a little different.
    // we use push() and pop() to define 
    // the beginning and end of a position/transformation.
    
    push(); // initiate a temporary transformation
    // translate entire sketch to particle position
    translate(this.posx,this.posy,this.posz); 
    sphere(5); // draw sphere at new sketch origin (0,0,0);
    pop(); // reinitialize the transformation
  }
}

// ##### Main Sketch

let p = []; 

function setup() {
  createCanvas(500, 500, WEBGL); // in 3D we need to add WEBGL
  frameRate(30);

  for (var i = 0; i < 500; i++) { p[i] = new Particle(); }
}

function draw() {
  // orbitControl() is a function that gives us click and drag control with mouse
  orbitControl(); 
  
  // in 3D the origin (0,0,0) is at the center so we have to translate the sketch
  translate(-width/2,-height/2, -height/2); // translate entire sketch definitely
  
  background(255);
  for (let i = 0; i < p.length; i++) {
    p[i].update(); 
    p[i].wrap();
    p[i].display();
  }
}