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