// let rectWidth = 1;

​

// function setup() {

//     createCanvas(500, 400);

//     background(0);

// }

​

// function draw() {

//     noise1D();

// }

​

// function noise1D() {

//     while (x < width/rectWidth) {

//         // Add randomness to x and freq for shaky movement

//         let xOffset = random(-1, 2);

//         let freqOffset = random(0.1, 0.09);

​

//         let n = noise((x + xOffset) * (0.001 + freqOffset));

//         n = map(n*4, 0, random(10), width/3, 0);

//         stroke(random(150,220),random(150,220),random(150,220));

//         rect((x - xOffset) * rectWidth, height = n, rectWidth/6,n);

//         x++;

//     }

// }

​

​

​

// for the while loop in the class. When I added it within the class the program froze. I tried using this.i it also did not work. Then I realized that it should be declared outside. 

let i=0; 

​

class Movingparticles {

  constructor(numParticle) {

//     delcare var for the code and create array for paricles 

    this.particles = [];

//     number of particles I want to create 

    this.num = numParticle;

//     adjusting the noise 

    this.offset = 0.02 /2;

//     a loop to create parrticles at random position on the canvas width and height. the create vector function then store the position of each particle and it will go on until i is no longer less then the number of particles created. 

//      the way I wrote the particles is inspired from the vedio in concept 

    while ( i < this.num) {

      this.particles.push(createVector(random(width), random(height)));

      i++;

    }

// how the particle will look like and its color 

    stroke(200);

    strokeWeight(2);  

  }

​

​

  drawParticle() {

//   here I drew the particles and update the position. So it draws the particles at the current position/ each position and then i added the offset for a better flow. 

    for (let i = 0; i < this.num; i++) {

      let prtcl = this.particles[i];

//       the x in prtcl and the y in prtcl 

      point(prtcl.x, prtcl.y);

      let n = noise(prtcl.x * this.offset, prtcl.y * this.offset,this.offset * this.offset);

// changes how the particles motion is 

      let a =n*19; 

      prtcl.x -=cos(a);

      prtcl.y -= sin(a);         

    }

  }   

}

​

// colors function for background

function colorsBckGrnd(R,G,B){

//  for random colors

  R = random(112,150);

  G = random(128,150);

  B = random(144,150);

 background(R + 4, G + 4, B+4);

}

​

function setup() {

createCanvas(400,500);

​

  // For text instructions to user

textSize(20);

  fill(255,20,147);

  text('Click Your Mouse', 10,30);

Movingparticles = new Movingparticles(random(400));

}

​

function draw() {

     if (mouseIsPressed){ 

colorsBckGrnd();

};

  Movingparticles.drawParticle();

}

​

​

​

​