This is part two of my first programming experience. Check out the previous post to learn more about where I am at as a novice programmer.
As I break into my early adulthood, animations continue to glow on the screen in my house all day, everyday. Because of my deep fascination for the craft, I decided to seek out a way to make a Processing sketch using motion and an interactive display sequence in hopes to pay homage to one of the earliest animations introduced to me: The Looney Tunes.
INSTRUCTIONS:
Install processing, copy and paste the mark-down below.
Presented to you is a portal to two separate visuals.
Left-click for a programmed rendition of an artpiece by El Lissitzky.
Right-click and hold for an adaptation and remixing of the same artpiece.
View the code below:
int grow = +1; int d = 1; int x = 100; int y = 100;
void setup() { size(650, 650); smooth(); frameRate(200); }
void draw() {
//print x and y coordinates in a line
println(mouseX,mouseY);//make infinite concentric circles in background
//to draw inifnite concentric circles
background(240);
noFill();
d = (d + grow);
if (d >80){
d = 1;
}
for(int i = 0; i < 1000;){
stroke(240);
strokeWeight(30);
ellipse(325,325, d+i, d+i);
i = i+20;
stroke(30);
strokeWeight(25);
ellipse(325, 325, d+i, d+i);
i = i+20;
}
//use ‘for’ loop to make off-centered concentric circles
strokeWeight(2.5);
stroke(240);
noFill();
for(int i=0; i<18; data-preserve-html-node="true" i=i+1){
ellipse(width/1.7 +i1.6, height/2.3 -i3.1, i13.75, i13.75);
}
//make long yellow line
strokeWeight(4.5);
stroke(140,90);
noFill();
line(167,443,322,319);//make short yellow line
strokeWeight(4.5);
stroke(140,90);
noFill();
line(167,443,208,495);//make long gray line
strokeWeight(8);
stroke(#A09A91,90);
noFill();
line(262,456,339,339);
//make big quad
strokeWeight(6);
stroke(255);
fill(255);
quad(287,377,217,483,256,453,325,349);
//make shortest aqua line
strokeWeight(4.5);
stroke(70,90);
line(208,495,258,457);
//make short blue line
strokeWeight(6);
stroke(70,90);
line(258,457,200,378);
//make small gray line
strokeWeight(6.5);
stroke(#89817B,90);
line(201,374,256,308);
//make long blue line
strokeWeight(4.5);
stroke(70,90);
line(200,378,304,294);
//make small quad
stroke(255);
fill(255);
quad(202,340,166,395,194,374,243,315);
//use if mousepressed function to change display into green ellipse
//and infinite non-centered concentric circles
if(mousePressed==true){
if (mouseButton == RIGHT) {
smooth();
frameRate(20);
background(255);
fill(12,3,40);
noStroke();
ellipse(325,325,560,560);
//'for’ loop function to make infinite off-centered concentric circles
d = (d + grow);
if (d >18){
d = 1;
}
for(int i=0; i<90; data-preserve-html-node="true" ){
smooth();
noFill();
stroke(12,3,40);
strokeWeight(3.5);
ellipse(width/1.7 + i0.3, height/2.4-i0.6, d+i2.5, d+i2.5);
i = i+3;
noFill();
stroke(244,125,232);
strokeWeight(2.5);
ellipse(width/1.7 + i0.3, height/2.4-i0.6, d+i2.5, d+i2.5);
i = i+3;
}
//make yellow colored line
strokeWeight(4.5);
stroke(#F5FA6A);
noFill();
line(167,443,322,319);
//make short yellow colored line
strokeWeight(4.5);
stroke(#F5FA6A);
noFill();
line(167,443,208,495);
//make long gray line
strokeWeight(8);
stroke(#A09A91);
noFill();
line(262,456,339,339);
//make big quad
strokeWeight(6);
stroke(255);
fill(255);
quad(287,377,217,483,256,453,325,349);
//make shortest aqua line
strokeWeight(4.5);
stroke(#46FFEE);
line(208,495,258,457);
//make short blue line
strokeWeight(6);
stroke(#46FFEE);
line(258,457,200,378);
//make small gray line
strokeWeight(6.5);
stroke(#89817B);
line(201,374,256,308);
//make long blue line
strokeWeight(4.5);
stroke(#46FFEE);
line(200,378,304,294);
//make small quad
stroke(255);
fill(255);
quad(202,340,166,395,195,374,243,315);
}
} else if (mouseButton == LEFT) {
background(#D1BD9C);
//make largest ellipse with a beige fill
noStroke();
fill(#D8CEBC);
ellipse(325,325,560,560);
//use ‘for’ loop to make off-centered concentric circles
strokeWeight(2.5);
stroke(0);
noFill();
for(int i=0; i<18; data-preserve-html-node="true" i=i+1){
ellipse(width/1.7 +i1.6, height/2.3 -i3.1, i13.75, i13.75);
}
//make long orange line
strokeWeight(4.5);
stroke(#D37049);
line(167,443,322,319);
//make short orange line
strokeWeight(4.5);
stroke(#D37049);
line(167,443,208,495);
//make shortest blue line
strokeWeight(4.5);
stroke(#435379);
line(208,495,258,457);
//make long gray line
strokeWeight(7);
stroke(#A09A91);
line(262,456,334,344);
//make big quad
noStroke();
fill(0);
quad(287,377,210,491,258,456,331,343);
//make short blue line
strokeWeight(6);
stroke(#435379);
line(258,457,200,378);
//make long blue line
strokeWeight(4.5);
stroke(#435379);
line(200,378,304,294);
//make small gray line
strokeWeight(6);
stroke(#89817B);
line(197,374,239,313);
//make small quad
noStroke();
fill(0);
quad(207,329,166,395,194,374,237,311);
}
}