week 4

The assignment for this week was to choose to aim to keep setup ( ) and draw () as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself. Possibilities (choose one or more):

  • Re-organize “groups of variables” into objects.
  • Break code out of setup () and draw () into functions.
  • Use a function to draw a complex design multiple times with different arguments.

This weekend I went to Black Rock Forest Consortium with Green World (an exploration of unprecedented environmental issues and the cultural, economic, and political reactions to a rapidly changing biosphere course) and spent most of the time outside hiking and watching the lakes. Inspired by the movement of water I wanted to reflect it’s delicateness with p5. While developing the sketch and trying different movement directions I thought about Yin and Yang, opposing and completing each other. Eventually I wanted to make it clear that the sketch needs to be clicked to be started and was inspired by Yoko Ono’s instructions, so I made one of my own.

Here is the sketch

Here is the code

var fontTypewriter;

function preload() {
fontTypewriter = loadFont(“assets/Kingthings Trypewriter 2.ttf”)
}

function Circle(_x, _y, _dia) {
this.x = _x;
this.y = _y;
this.d = _dia;
this.sW = 1;
this.alpha = 120;
this.numOfRippes = random(5, 10);

this.drawFromInside = function() {
this.d = this.d + 1; // dia speed
this.alpha = this.alpha – 1; // fade speed
if (this.alpha < 0) {
this.alpha = 0;
}
noFill();
stroke(0, this.alpha);

for (var i = 1; i <= this.numOfRippes; i++) {
strokeWeight(this.sW * (this.numOfRippes – i) * 0.5);
ellipse(this.x, this.y, this.d + i * 20, this.d + i * 20);
// play with i*30 this
}
}
this.drawFromOutside = function() {
this.d = this.d – 1; // dia speed
this.alpha = this.alpha – 0.5; // fade speed
if (this.alpha < 0) {
this.alpha = 0;
}
noFill();
stroke(255, this.alpha);

for (var i = 1; i <= this.numOfRippes; i++) {
strokeWeight(this.sW * (this.numOfRippes – i) * 0.3);
ellipse(this.x, this.y, this.d + i * 20, this.d + i * 20);
// play with i*30 this
}
}
}

var ripples = [];

function setup() {
createCanvas(windowWidth, windowHeight);
}

function draw() {
backgroundStyle(width / 2, height);
textTypewriter(width / 16, width / 2);

for (var i = 0; i < ripples.length; i++) {
if (ripples[i].x < width / 2 + 0.375 * width && ripples[i].y < height / 2) {
ripples[i].drawFromInside();
} else {
ripples[i].drawFromOutside();
}
}

}

function backgroundStyle(_w, _h) {
background(10);
noStroke();
fill(255);
rect(0, 0, _w, _h);
fill(0);
rect(_w, 0, _w, _h);
fill(255);
ellipse(_w, 0, 0.75 * 2 * _w, _h);
fill(0);
ellipse(_w, _h, 0.75 * 2 * _w, _h);
}

function textTypewriter(px1, px2) {
textFont(fontTypewriter);
text(“DROP PIECE”, px1, height / 14, px2, height / 12);
text(“Click and watch the ripples until you drop all.”, px1, height / 10.5, px2, height / 6.5);
text(“e.d.p. 2015 Autom”, px1, height / 8, px2, height / 5);
fill(255, 90);
text(“inspired by y.o and Black Rock Forest lake”, width – width / 2, height – height / 12, width – width / 10, height);
}

function mousePressed() {
ripples.push(new Circle(mouseX, mouseY, random(1, 6)));
}