let o;

function setup() {

  createCanvas(400, 400);

  w = new Wave()

  o = new Observer(width/2,height/2)

}

​

function draw() {

  background(220);

  o.display();

  w.display();

  w.move();

}

​

class Wave{

  constructor(){

    this.particles = [];

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

      this.particles.push(new Particle(0,height/2))

    }

    this.pos = createVector(0,height/2);

    this.vel = createVector(1,0);

    // this.waveLength = 60;

  }

  move(){

    for(let p of this.particles){

      p.move();

    }

    this.pos.add(this.vel);

  }

  display(){

    stroke(0)

    strokeWeight(1)

    line(0,height/2,width,height/2)

    for(let p of this.particles){

      p.display();

    }

    // get the closest particle to home

    let closest = this.particles[0];

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

      if(this.particles[i].pos.x < closest.pos.x){

        closest = this.particles[i];

      }

    }

    // get the furthest particle to direction

    let furthest = this.particles[0];

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

      if(this.particles[i].pos.x > furthest.pos.x){

        furthest = this.particles[i];

      }

    }    

    // draw a rectangle between them

    rectMode(CORNERS);

    rect(closest.pos.x, height/2 + 20, // LEFT TOP CORNER

         furthest.pos.x, height/2 - 20 // RIGHT BOT CORNER

        )

  }

}

​

class Particle{

  constructor(x,y){

    this.pos = createVector(x,y);

    this.vel = createVector(random(0.8,1),0);

  }

  move(){

    this.pos.add(this.vel);

  }

  display(){

    // Display Particle

    noStroke();

    fill(0,150,200,100);

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

  }

}

​

class Observer{

  constructor(x,y){

    this.pos = createVector(x,y);

    this.range = 40;

  }

  display(){

    noFill();

    stroke(255,50,80,100);

    rectMode(CENTER)

    rect(this.pos.x, this.pos.y,this.range,20);

  }

  detect(){

  }

}