Objects

let jb, jb2; 
let numBugs = 2;

let counter = 0;

function setup() {
  createCanvas(400, 400);
 // noLoop();
  jb = new JitterBug(20,300,20); //x,y,jitter
  jb2 = new JitterBug(250,100,10); // x,y hitter
 // console.log(jb,jb2);
}

function mousePressed(){
  if(counter == 0){
    jb.target();
  }
  else if (counter == 1){
    jb2.target()
  }
  
  counter++;
  if(counter==numBugs){
    counter = 0;
  }
}

function draw() {
  background(220);

  
 // circle(x + random(-jitter,jitter),y+ random(-jitter,jitter),w)
//circle(jb.x +jb.xOffset,jb.y + jb.yOffset,jb.w);
  // circle(jb2.x +jb2.xOffset,jb2.y + jb2.yOffset,jb2.w);
  jb.move();
  jb2.move();
  
  jb.show();
  jb2.show();
  
  // beginShape();
  //   for(let i=0;i<numVertices;i++){
  //     vertex(x + random(-jitter,jitter),y + random(-jitter,jitter))
  //   }
  // endShape();
  

}

class JitterBug {
  // the constructor runs once! when the object is made
  // properties 
  constructor(x,y,jitter){
    this.x = x;
    this.y = y; 
    this.targetX = x;
    this.targetY = y;
    this.w = 100; 
    this.jitter = jitter;
    this.xOffset = random(-this.jitter,this.jitter);
    this.yOffset = random(-this.jitter,this.jitter);

  }
  // methods -- are like functions FOR that object
  show(){
    // whatever goes in here is the code that is run! 
   
    circle(this.x + this.xOffset,this.y+ this.yOffset,this.w)
  }
  move(){
   this.x = lerp(this.x,this.targetX,0.05);
   this.y = lerp(this.y,this.targetY,0.05);
  }
  target(x,y){
    this.targetX = mouseX;
    this.targetY = mouseY;
  }
}

let x = [];
let y = [];
let b = [];
let bDir = []; // contain values that are -1 or 1 based on direction

let w = 20;

function setup() {
  createCanvas(400, 400);
  console.log(x.length);
  strokeWeight(5);
  
  for(let i = 0;i<200;i++){
    b[i] = random(255);
    x[i] = random(width);
    y[i] = random(height);
    if(random(100)>50){
      bDir[i] = 1;
    }
    else {
      bDir[i] = -1;
    }
  }
  
}

function draw() {
  background(10);

  for (let i = 0; i < x.length; i++) {
    stroke(b[i]);
    point(x[i], y[i]);

    b[i]+= bDir[i] * 2;

    if (b[i] > 255 || b[i] < 0) {
      bDir[i] *= -1;
    }
  }

}

let bugs = []; // an array that holds all my bug objects!
let numBugs = 30;

let counter = 0;

function setup() {
  createCanvas(400, 400);
  for(let i = 0; i < numBugs; i++){
    bugs[i] = new JitterBug(random(width),random(height),random(20,40));
    bugs[i].populate();
  }
}

function mousePressed() {
  
  bugs[counter].target();

  counter++;
  if (counter == numBugs) {
    counter = 0;
  }
  
}

function draw() {
  background(220);
 for(let i = 0; i < numBugs; i++){
    bugs[i].move();
    bugs[i].show();
  }
 
}

class JitterBug {
  // the constructor runs once! when the object is made
  // properties
  constructor(x, y, jitter) {
    this.x = x;
    this.y = y;
    this.targetX = x;
    this.targetY = y;
    this.w = random(30,100);
    this.speed = map(this.w,30,100,0.1,0.02);
    this.jitter = jitter;
    this.numVertices = random(5,30);
    this.xOffsets = [];
    this.xOffsetTargets = [];
    this.yOffsets = [];
    this.yOffsetTargets = [];
  }
  populate(){
    for(let i = 0; i < this.numVertices;i++){
      this.xOffsets[i] = random(-this.jitter, this.jitter);
      this.yOffsets[i] = random(-this.jitter, this.jitter);
      
      this.xOffsetTargets[i] = this.xOffsets[i];
      this.yOffsetTargets[i] = this.yOffsets[i];
    }
  }
  // methods -- are like functions FOR that object
  show() {
    // whatever goes in here is the code that is run!
  //  circle(this.x, this.y, this.w);

    beginShape();
    for (let i = 0; i < this.numVertices; i++) {
      vertex(
        this.x + this.xOffsets[i],
        this.y + this.yOffsets[i]
      );
    }
    endShape();
  }
  move() {
    // moves the x and y pos to target values;
    this.x = lerp(this.x, this.targetX, this.speed);
    this.y = lerp(this.y, this.targetY, this.speed);
    // moves the x and y pos of squiggle vertices to target values;
    for(let i = 0; i < this.numVertices; i++){
      this.xOffsets[i] = lerp(this.xOffsets[i], this.xOffsetTargets[i], this.speed);
      this.yOffsets[i] = lerp(this.yOffsets[i], this.yOffsetTargets[i], this.speed);
    }
    
  }
  target(x, y) {
    // this sets the destination for the entire shape
    this.targetX = mouseX;
    this.targetY = mouseY;
    //this sets teh destination for all the squiggle vertices
      for(let i = 0; i < this.numVertices;i++){
      this.xOffsetTargets[i] = random(-this.jitter, this.jitter);
      this.yOffsetTargets[i] = random(-this.jitter, this.jitter);
    }
    
    
  }
}