Skip to content

Instantly share code, notes, and snippets.

@tpatel
Created January 22, 2022 22:03
Show Gist options
  • Save tpatel/866e2865432cc25ed38051c82ac58618 to your computer and use it in GitHub Desktop.
Save tpatel/866e2865432cc25ed38051c82ac58618 to your computer and use it in GitHub Desktop.
p5.js implementation of googly eyes looking around (https://twitter.com/thibpat/status/1484628474002300928). Paste into https://editor.p5js.org/ to try it out!
let colors;
const colorOptions = ['green', 'darkblue', '#954535', 'black'];
function setup() {
createCanvas(400, 400);
colors = Array(10).fill(0).map(x => colorOptions[floor(random(0, colorOptions.length))]);
}
function eye(x, y, targetX, targetY, color) {
noFill();
stroke(0);
ellipse(x, y, 20, 40);
const angle = atan2(targetY-y, targetX-x);
x += cos(angle)*5;
y += sin(angle)*13;
noStroke();
fill(color);
circle(x, y, 12);
fill(0);
circle(x, y, 8);
}
function eyes(x, y, targetX, targetY, color) {
eye(x-12, y, targetX, targetY, color)
eye(x+12, y, targetX, targetY, color)
}
function draw() {
background(255);
const t = Date.now();
for(let i=0; i<10; i++) {
const x = map(noise(i, t/5000, 0), 0, 1, 0, width);
const y = map(noise(i, t/5000, 1), 0, 1, 0, height);
eyes(x, y, 350, 200, colors[i]);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment