In this Recitation I will be using Processing to animate an image, as well adding an interactive element from the user’s input.
Demo Video:
Stagnate images of the animation:
Unlike the previous Recitation, this time I wanted to explore the polar opposites of the colour spectrum: black and white balance. I should rather say- their relationship.
The dark and light values bleed into each other with such force and power, I felt my blood starting to pump also. I created a piece that would allow the user to alter the intensity of the values of the focal point with the mouseMoved() function. This element plays a role in my overall journey of The War of Colours, that I’m currently exploring. The overlapping randomised lines, as well as the stagnant line of dots are additional elements in my overall minimalistic style creation. The mousePressed() function gives a higher rate of satisfaction when utilised from the perspective of the users, due to its instantaneous trigger to change the value from white to black and vice versa. I am very happy I was able to overlap these two functions without distorting one another. Additionally since I am working on a mac, and my computer mouse is black with a white outline, I also found it very pleasing to see how this figure was interacting with my design.
I am beginning to feel out the Canvas much better, and be able to statically place the elements rather than depend of liking whatever the computer generates. I was able to explore the area of the Canvas, as well as user triggered input through this process and am excited to learn to incorporate hardware as a triggering input.
Code:
PFont font;
int value = 0;
void setup() {
size(600, 600);
background(255);
font = loadFont(“Trattatello-48.vlw”);
}
void draw() {
textFont(font, 24);
fill(0);
text(“…………………………………”, 160, 250);
for (int i = 0; i < 100; i++) {
float r = random(50);
stroke(r*5);
line(50, i, 50+r, i);
}
fill(value);
filter(INVERT);
rect(25, 25, 50, 50);
rect(50, 50, 100, 100);
rect(100, 100, 150, 150);
}
void mouseClicked() {
if (value == 0) {
value = 255;
} else {
value = 0;
}
}
void mouseMoved() {
value = value + 5;
if (value > 255) {
value = 0;
}
}
Additional Exercise:
I began by created a Processing Sketch for the initial stagnate ellipse in a 600×600 canvas.
int size = 100;
void setup() {
size(600, 600);
background(255, 255, 255);
}
void draw() {
ellipseMode(RADIUS);
stroke(0);
strokeWeight(15);
fill(255, 255, 255);
ellipse(width/2, height/2, size, size);
}
The Blog has attached my demo video in a separate directory, but I have imbedded the link bellow: