let restartButton,toggleButton;

let speedSlider;

let toggleGate = true;

​

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

  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 = [];

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

}

​

function draw() {

  if(toggleGate){

    background(220);

  }

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

    }

  }

}