Final Project Proposal

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

let hover;

let xSpeed = []; // speeds of our particles
let ySpeed = []; // speeds of our particles

let x = []; // x pos of our particle
let y = []; // y pos of our particle

let numParticles = 200;

function setup() {
  createCanvas(1000, 1000);
  
  // populate the arrays 
  for(let i = 0; i< numParticles;i++){
    xSpeed[i] = random(-3,3);
    ySpeed[i] = random(-3,3);
    x[i] = 700;
    y[i]= 700;
  }
  
}

function draw() {
  background(220);
 
  
  let d = dist(mouseX,mouseY,700,700);
  
  if (d < 100){
    hover = true;
  }
  else {
    hover = false;
  }
  
    
    for(let i=0;i<numParticles;i++){
       circle(x[i],y[i],2);     
      // movement is either expanding outwards
      if(hover==true){
        x[i]+=xSpeed[i];
        y[i]+=ySpeed[i];
      }
      // contracting back towards the circle
       else {
        x[i] = lerp(x[i],700,0.01);
        y[i] = lerp(y[i],700,0.01);
      }
      // bounce code to constrian to the canvas
      if (x[i]>width){
        xSpeed[i] *= -1;
      }
      if(x[i]<0){
      xSpeed[i] *= -1;
      }
      
        if (y[i]>height){
        ySpeed[i] *= -1;
      }
      if(y[i]<0){
      ySpeed[i] *= -1;
      }
     
       circle(700,700,200);
      
    }
 
  
  
  
  
}

let xOffsets = []; // holds many xOffsets
let yOffsets = []; // hold many yOffsets values

let rows = 30; // how many shapes in each row
let spacing; // placeholder so that once we declare the canvas we can calculate the space between circles given the width of the canvas

let jitter = 30;

function setup() {
  createCanvas(1000, 1000);
  // populate the arrays!
  for (let i = 0; i < rows * rows; i++) {
    xOffsets[i] = random(-jitter, jitter);
    yOffsets[i] = random(-jitter, jitter);
  }
  console.log(xOffsets);
  // calculate spacing
  spacing = width / rows;
}

function draw() {
  background(220);

  // i is horizontal mover
  // j is our vertical mover
fill(255);
  let index = 0;
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < rows; j++) {
      let x = spacing / 2 + spacing * i;
      let y = spacing / 2 + spacing * j;
      
      
      let d = dist(mouseX,mouseY,x,y)
      let scaling = map(d,0,width/4,1,0);
       scaling = constrain(scaling,0,1);
      
      x += xOffsets[index] * scaling;
      y +=  yOffsets[index] * scaling;
      
      circle(x, y, spacing - 10);
      index++;
    }
  }
  
  noFill();
  circle(mouseX,mouseY,width/4 + jitter);
  
}

let x = [];
let y = [];
let numParticles = 500;

let w = [];
let jitter = [];
let lerpV = [];

// counter structure (LFO); low frequency! seconds
let counter = 0;
let counterThresh = 1000; // the length of our counter in frames! 60 = 1 second
let mode = []; // mode is either 1 or 0. 0 is jitterbug and 1 is homing


let pInc = numParticles/counterThresh;
let pCount = 0;

function setup() {
  createCanvas(600, 600);

  // particle factory
  for (let i = 0; i < numParticles; i++) {
    let r = i/numParticles*-1; // use this as a guide for w, jitter, and lerpV

    w[i] = map(r, 0, 1, 2, 10); // if r == 0, then w is small 2 pix, 1 is large 10 pixels
    jitter[i] = map(r, 0, 1, 10, 2); // if r == 0, then movementjump is larger 10 pixels
    lerpV[i] = map(r, 0, 1, 0.03, 0.01); // if r == 0, then speed of return is 0.03 which is faster

    x[i] = width / 2;
    y[i] = height / 2;

    mode[i] = 0;
  }
  console.log(260/numParticles);
}

function draw() {
  background(220);

  counter++;
  pCount += pInc;

  if (counter > counterThresh) {
    counter = 0;
    pCount = 0;
  }

  // particle movement and drawing for loop!!!
  for (let i = 0; i < numParticles; i++) {
    if (pCount == i*pInc) {
      if (mode[i] == 0) {
        mode[i] = 1;
      } else {
        mode[i] = 0;
      }
    }

    if (mode[i] == 1) {
      x[i] = lerp(x[i], width / 2, lerpV[i]);
      y[i] = lerp(y[i], width / 2, lerpV[i]);
    } else {
      x[i] += random(-jitter[i], jitter[i]);
      y[i] += random(-jitter[i], jitter[i]);
    }

    // draw the particles
    circle(x[i], y[i], w[i]);
  }
}

function mousePressed() {
  console.log(frameRate());
}