let MAX_SPEED = 0.3; 

let REP_RATE = 0.02;

​

let particles = [];

​

let startSize = 10;

let drawSpeed = 1;

let hue = 0;

let viewGate = 0; 

​

let restartButton,toggleButton; 

let reduceSlider,speedSlider,repSlider,colorSlider;

​

function setup() {

  createCanvas(800, 800);

  background(220);

  particles.push(new Particle(0,0,startSize));

  //particles.push(new Particle(250,height,startSize));

  restartButton = createButton('New Pattern');

  restartButton.position(10, height+20);

  restartButton.mousePressed(restart);

  toggleButton = createButton('New Pattern');

  toggleButton.position(120, height+20);

  toggleButton.mousePressed(toggleView);

  speedSlider = createSlider(0.1, 1, 0.3, 0.1);

  speedSlider.position(10, height+60);

  reduceSlider = createSlider(0.1, 1, 0.2, 0.1);

  reduceSlider.position(10, height+100);

  repSlider = createSlider(0.01, 0.1, 0.02, 0.01);

  repSlider.position(10, height+140);

  colorSlider = createSlider(0, 1, 0, 0.01);

  colorSlider.position(10, height+180);

}

​

function toggleView(){

  if(viewGate <= 5){

    viewGate ++;

  }else{

    viewGate = 0;

  }

}

​

function restart(){

  background(220);

  particles = [];

  particles.push(new Particle(0,0,startSize));

}

​

function draw() {

  for(let j = 0; j < drawSpeed; j++){

    translate(width/2,height/2);

    for(let k = 0; k < 12; k++){

      rotate(PI/6);

      for(let i = particles.length - 1; i >= 0; i--){

        let particle = particles[i];

        particle.update();

        particle.show();

​

        if(!particle.alive){

          particles.splice(i,1)

        }

      }

    }  

  }

}

​

class Particle{

  constructor(x,y,s){

    this.angle = 0;

    this.position = createVector(x,y);

    this.size = s;

    this.xOff = random(-100000,100000);

    this.alive = true;

  }

  update(){

    //move

    this.position.y -= speedSlider.value();

    let noiseX = noise(this.xOff);

    let mappedNoiseX = map(noiseX,0,1,-1,1);

    this.position.x += mappedNoiseX;

    //let randomX = random(-3,3);

    //this.position.x += randomX; 

    this.xOff+= 0.02;

    //reproduce

    if(random(1) < repSlider.value()){

      particles.push(new Particle(this.position.x,this.position.y,this.size * random(1)));

    }

    //reduce size

    if(random(1) < reduceSlider.value()){

      this.size -= 0.05;

    }

    if(this.size <= 0){

      this.alive = false;

    }

  }

  show(){

    if(viewGate == 0){

      stroke(0,0,0,90);

      fill(255,0,0,50);      

    }else if(viewGate == 1){

      noStroke();

      fill(0,0,0);

    }else if(viewGate == 2){

      noStroke();

      fill(0,0,0,90);

    }else if(viewGate == 3){

      stroke(0,0,0,90);

      fill(255,0,0,50);

    }else if(viewGate == 4){

      colorMode(HSL, 360);

      noFill();

      stroke(hue, 200, 200,90);

      if(hue > 360){

        hue = 0;

      }else{

        hue+=colorSlider.value();

      }      

    }else{

      colorMode(HSL, 360);

      stroke(0,0,0,90);

      fill(hue, 200, 200,90);

​

      if(hue > 360){

        hue = 0;

      }else{

        hue+=colorSlider.value();

      }

    }

    circle(this.position.x,this.position.y,this.size);

  }

}