xxxxxxxxxx
197
var followersRightEye;
var followersLeftEye;
var num = 20;
var position;
var velocity;
var gravity;
var hasBeenClicked = false;
function setup() {
createCanvas(640, 360);
frameRate(10);
followersRightEye = [];
followersLeftEye = [];
positionRight = createVector(400, 100);
positionLeft = createVector(200, 100);
velocityRight = createVector(4, -4);
velocityLeft = createVector(-4, -4);
gravity = createVector(0, 0.5);
for (var i = 0; i < num; i++) {
followersRightEye.push(new Follower(positionRight.x, positionRight.y));
}
followersLeftEye = [];
for (var i = 0; i < num; i++) {
followersLeftEye.push(new Follower(positionLeft.x, positionLeft.y));
}
}
function mousePressed() {
hasBeenClicked = true;
}
function draw() {
background(77, 20, 21);
let bgColor = 0;
let circleColor = 0;
let squareColor = 0;
bgColor = random(255);
circleColor = random(255);
squareColor = random(255);
if (mouseIsPressed) {
bgColor = color(random (255), random(255), random(255));
circleColor = color(random (255), random(255), random(255));
squareColor = color(random (255), random(255), random(255));
}
//wbus windows
fill (squareColor)
stroke (75, 71, 146)
strokeWeight (5)
rect (-10, 10, 200, 200, 30)
rect (220, 10, 200, 200, 30)
rect (450, 10, 200, 200, 30)
//bus stripes
fill ('white')
noStroke ();
rect (0, 250, 800, 10)
rect (0, 300, 800, 10)
//reflections
fill (251, 100)
triangle(0, 210, 0, 20, 100, 20);
quad(120, 10, 150, 10, 50, 210, 15, 210);
triangle (550, 210, 630, 210, 500, 10)
quad(500, 10, 500, 10, 500, 210, 15, 210);
//frog
fill ('green')
noStroke ();
ellipse (300, 500, 450, 400)
fill('green')
noStroke();
ellipse(300, 150, 250, 250)
fill (118, 171, 132)
noStroke ();
ellipse (300, 140, 250, 170)
fill(244, 101, 40)
noStroke();
ellipse(300, 130, 250, 170)
fill(7, 219, 107)
noStroke();
ellipse(200, 100, 100, 100)
ellipse(400, 100, 100, 100)
fill ('black')
ellipse (200, 100, 80, 80)
ellipse (400, 100, 80, 80)
fill(81, 11, 157);
arc(200, 100, 100, 100, PI, TWO_PI);
arc(400, 100, 100, 100, PI, TWO_PI);
fill ('white')
ellipse (280, 170, 10, 5)
ellipse (320, 170, 10, 5)
fill ('orange')
noStroke ();
rect (560, 240, 100, 100, 360)
fill (253, 204, 47)
rect (565, 245, 90, 90, 360)
//train letter
fill (0)
textSize(80);
text('R', 580, 315);
if (hasBeenClicked) {
drawEyes();
}
}
function drawEyes() {
//update physics
velocityRight.add(gravity);
velocityLeft.add(gravity);
positionRight.add(velocityRight);
positionLeft.add(velocityLeft);
followersRightEye[0].setValue(positionRight.x, positionRight.y);
followersLeftEye[0].setValue(positionLeft.x, positionLeft.y);
for (var i = 1; i < num; i++) {
followersRightEye[i].update(followersRightEye[i - 1].x, followersRightEye[i - 1].y);
}
for (var i = 1; i < num; i++) {
followersLeftEye[i].update(followersLeftEye[i - 1].x, followersLeftEye[i - 1].y);
}
//DRAW THE BETTER EYE
let leftEye = followersLeftEye[0];
let rightEye = followersRightEye[0];
stroke("black");
fill("white");
strokeWeight(2);
ellipse(leftEye.x, leftEye.y, 40, 40);
ellipse(rightEye.x, rightEye.y, 40, 40);
fill ('black')
noStroke ();
ellipse(leftEye.x, leftEye.y, 20, 20);
ellipse(rightEye.x, rightEye.y, 20, 20);
}
class Follower {
constructor(x, y) {
this.x = x;
this.y = y;
this.velX = 0;
this.velY = 0;
}
update(fx, fy) {
let dx = fx - this.x;
let dy = fy - this.y;
if (dx * dx + dy * dy > 50) {
this.velX = 0.20 * (this.velX + fx - this.x);
this.velY = 0.20 * (this.velY + fy - this.y);
this.x += this.velX;
this.y += this.velY;
}
stroke("black");
strokeWeight(2);
noFill();
ellipse(this.x, this.y, 30, 30);
}
setValue(fx, fy) {
this.x = fx;
this.y = fy;
}
}