Code as Material
Ben Fry and Casey Reas
The code examples in the book create static images, but on a screen the code can respond to you. Press and move your finger [or click the mouse] and the circles will follow. This code was ported from an original Processing example from 2003 to work through a current web browser with p5.js, another platform created by the Processing Foundation.
editor.p5js.org/REAS/sketches/4vnFkM4g9
let eyes = [];
function setup() {
createCanvas(windowWidth, windowHeight);
noStroke();
let divs = 7;
let diameter = windowWidth / divs;
let ydivs = ceil(windowHeight / diameter);
let numeyes = (divs * ydivs);
print(numeyes);
let x = -diameter * floor(divs / 2);
let y = 0;
if (ydivs % 2 == 0) {
y = -diameter * floor(ydivs / 2) + diameter / 2;
} else {
y = -diameter * floor(ydivs / 2);
}
let xcount = 0;
let ycount = 0;
for (let i = 0; i < numeyes; i++) {
eyes.push(new Eye(x, y, diameter * 0.9));
x += diameter;
xcount++;
if (xcount == divs) {
xcount = 0;
x = -diameter * floor(divs / 2);
y += diameter;
}
}
}
function draw() {
updateEyes();
}
function updateEyes() {
background(102);
translate(width / 2, height / 2);
for (let i = 0; i < eyes.length; i++) {
eyes[i].update();
eyes[i].display();
}
}
class Eye {
constructor(tx, ty, ts) {
this.x = tx;
this.y = ty;
this.size = ts;
this.radius = ts / 4.0;
this.currentRadius = 0.0;
}
update() {
this.angle = atan2(mouseY - height / 2 - this.y, mouseX - width / 2 - this.x);
if (mouseIsPressed) {
this.currentRadius += (this.radius - this.currentRadius) * 0.1;
} else {
this.currentRadius += (-this.currentRadius) * 0.1;
}
}
display() {
push();
translate(this.x, this.y);
fill(255);
ellipse(0, 0, this.size, this.size);
rotate(this.angle);
fill(153, 204, 0);
ellipse(this.currentRadius, 0, this.size / 2, this.size / 2);
pop();
}
}
The content displayed in this page is part of the publication Being Material
Cambridge, MA : The MIT Press, 2019, hosted by MIT Libraries, MIT Libraries, Distinctive Collections department.