let restartButton,toggleButton;

let speedSlider;

let toggleGate = true;

let limit = 20;

​

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,200),random(100,200)));

  let period = 0.1;//random(0.1);

  let amp = 50;//random(100,200);

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

    for(let i = 0; i <= limit; i++){

      let pos_x = floor(width/limit)*i;

      let pos_y = floor(height/limit)*j;

      //let period = 0.01 + i/100;

      //let amp = random(100,200);

      let ang = map(i,0,limit,0,TWO_PI);

      particles.push(new Particle(pos_x,pos_y,pos_x,pos_y,period,period,ang,0,amp,amp));

    }

  }

  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);

}

​

function toggle(){

  toggleGate = !toggleGate;

  // if(!toggleGate){

  //   background(220);

  // }

}

​

function restart(){

  background(220);

  particles = [];let period = random(0.1);

  let amp = random(100,200);

  for(let i = 0; i <= limit; i++){

    let pos_x = floor(windowWidth/limit)*i;

    let pos_y = height/2;

    //let period = 0.01 + i/100;

    //let amp = random(100,200);

    let ang = map(i,0,limit,0,TWO_PI);

    particles.push(new Particle(pos_x,pos_y,pos_x,pos_y,period,period,0,ang,amp,amp));

  }

}

​

function draw() {

  //if(toggleGate){

    background(220);

  //}

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

    noFill();

    beginShape();

    for(let particle of particles){

      particle.update();

      if(toggleGate){

        particle.show();

      }else{

        vertex(particle.pos.x,particle.pos.y);

      }

    }

    endShape();

  }

}

​

class Particle{

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

    this.origin = createVector(ori_x,ori_y);

    this.pos = createVector(pos_x,pos_y);

    this.angle = createVector(ang_x,ang_y);

    this.period = createVector(period_x,period_y); 

    this.amp = createVector(amp_x,amp_y);

    this.r = 10; 

  }

  update(){

    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;

    this.pos.x = x + this.origin.x;

    this.angle.add(this.period);

  }

  show(){

    stroke(0);

    fill(100);

    //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,2);

    //}

  }

}