week 5

The assignment for this week was to design a sketch in an object-oriented fashion. Follow these steps and see how far you get (even just doing the first couple steps is ok!)

1. Make one single object with just variables.
2. Put one or more functions in the object.
3. Try manually making two objects.
4. Duplicate the object using an array and make as many as you like!

I was loved the feeling I got when looking at Oliver Pilić  “GOD HAS NOT LEFT THE THRONE” artwork, and wanted to create an interactive version of it. You can try it Here or below

This weekend I attended Moon’s workshop and he gave examples of ‘following behavior’. I’m really into this kind of organic looking movement and wanted to play with color as this is basically my favourite thing in the world. I’ve been long inspired by the Gerhard Richter‘s use of color over time and wanted to play with layering color through p5, and see what happens when the color accumulates and what time will do to it.

This is the sketch I came up with, try to click on it, and drag the mouse.   Here is the code for GOD_HAS_NOT_LEFT_THE_THRONE

var colorCyan = {
r: 0,
g: 174,
b: 239
};
var colorMagenta = {
r: 236,
g: 0,
b: 140
};
var colorYellow = {
r: 255,
g: 252,
b: 0
}

var myCircles = [];
var clickCount = 0;

function setup() {
createCanvas(700, 700);
noStroke();
background(255);
blendMode(MULTIPLY);

for (var i = 0; i < 800; i++) {
}
for (var i = 0; i < myCircles.length; i++) {
myCircles[i].changeToCMY();
myCircles[i].changeDiameter();
myCircles[i].draw();
}
}

function draw() {

}

var circle = {
x: random(width),
y: random(height),
dia: random(10, 60),
r: random(255),
g: random(255),
b: random(255),

changeToCMY: function() {
var chance = floor(random(2.99999999));
if (chance == 0) {
this.r = colorCyan.r;
this.g = colorCyan.g;
this.b = colorCyan.b;
} else if (chance == 1) {
this.r = colorMagenta.r;
this.g = colorMagenta.g;
this.b = colorMagenta.b;
} else if (chance == 2) {
this.r = colorYellow.r;
this.g = colorYellow.g;
this.b = colorYellow.b;
}
},
changeDiameter: function() {
var distance = dist(width / 2, height / 2, this.x, this.y);
var maxDist = dist(width / 2, height / 2, 0, height / 2);
this.dia = (maxDist – distance) * 0.2;
},
renew: function() {
this.x = random(width);
this.y = random(height);
},
draw: function() {
fill(this.r, this.g, this.b);
ellipse(this.x, this.y, this.dia, this.dia);
}
};

myCircles.push(circle);
}

function mousePressed() {
if (clickCount < 7) {
for (var i = 0; i < myCircles.length; i++) {
myCircles[i].renew();
myCircles[i].changeToCMY();
myCircles[i].changeDiameter();
myCircles[i].draw();
}
} else {
clickCount = 0;
blendMode(SCREEN);
background(255);
blendMode(MULTIPLY);
}
clickCount++;
}