let restartButton,toggleButton;

let speedSlider;

let toggleGate = false;

let hue = 0;

let distor = 0;

let distorSlider;

let colorSlider;

​

function setup() {

  createCanvas(400, 400);

  particles.push(new Particle(width/2,height/2,width/2,height/2,random(0.1),random(0.1),random(100,125),random(100,125)));

  background(220);

  restartButton = createButton('New Pattern');

  restartButton.position(10, height+20);

  restartButton.mousePressed(restart);

  toggleButton = createButton('Toggle View');

  toggleButton.position(110, height+20);

  toggleButton.mousePressed(toggle);

  speedSlider = createSlider(1, 100, 1, 1);

  speedSlider.position(220, height+20);

  distorSlider = createSlider(0, 25, 0, 1);

  distorSlider.position(220, height+50);

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

  colorSlider.position(220, height+80);

}

​

function toggle(){

  toggleGate = !toggleGate;

  if(!toggleGate){

    background(220);

  }

}

​

function restart(){

  background(220);

  particles = [];

  particles.push(new Particle(width/2,height/2,width/2,height/2,random(0.1),random(0.1),random(100,125),random(100,125)));

}

​

function draw() {

  if(toggleGate){

    background(220);

  }

  stroke(0);

  fill(0,0,0,50);

  circle(width/2,height/2,400);

  for(let i = 0; i < speedSlider.value(); i++){

    for(let particle of particles){

      particle.update();

      particle.show();

    }

  }

}

​

class Particle{

  constructor(ori_x,ori_y,pos_x,pos_y,period_x,period_y,amp_x,amp_y){

    this.origin = createVector(ori_x,ori_y);

    this.pos = createVector(pos_x,pos_y);

    this.angle = createVector(0,0);

    this.period = createVector(period_x,period_y); 

    this.amp = createVector(amp_x,amp_y);

    this.r = 16; 

  }

  update(){

    let d = distorSlider.value();

    let y = map(sin(this.angle.y),-1,1,-this.amp.y,this.amp.y);

    let x = map(cos(this.angle.x),-1,1,-this.amp.x,this.amp.x);

    this.pos.y = y + this.origin.y + random(-d,d);

    this.pos.x = x + this.origin.x + random(-d,d);

    this.angle.add(this.period);

  }

  show(){

    // colorMode(HSB);

    // stroke(240);

    // fill(240);

    colorMode(HSL, 360);

    noStroke();

    fill(hue, 200, 200);

    if(hue > 360){

      hue = 0;

    }else{

      hue+=colorSlider.value();

    }

    if(toggleGate){

      line(this.origin.x,this.origin.y,this.pos.x,this.pos.y);

      circle(this.pos.x,this.pos.y,this.r);

    }else{

      circle(this.pos.x,this.pos.y,3);

    }

  }

}