## HOMEWORK DAY 3 -CODE

Animation of the geometric drawing

first frame:

intermediate frames:

int xPos;
int yPos;

int speedX;
int speedY;

int x;
int y;

void setup(){
size (900, 900);
background (244,239,193);
xPos=0;
yPos=0;
speedX= 8;
speedY= 3;
x=0;
y=0;

}

void draw(){

// first group of circles

stroke(0,0,0);
strokeWeight(7);
fill(255,255,255);
ellipse(187, 530, 270, 270);
stroke(0,0,0);
strokeWeight(7);
fill(0,0,0);
ellipse(330, 330, 580, 580);
stroke(255,255,255);
strokeWeight(14);
fill(0,0,0);
noStroke();
ellipse(330, 330, 20, 20);
stroke(61,74,88);
strokeWeight(30+x);
ellipse(330, 330, 280,280);
stroke(74,130,119);
strokeWeight(18+x);
ellipse(330, 330, 164,164);
x+=speedX;
y+=speedY;

//main lines group
strokeWeight(3);
stroke(0,0,0);
line (650, 500, 650, 200);
strokeWeight(5);
stroke(0,0,0);
line (620, 350, 750, 350);
strokeWeight(14);
stroke(0,0,0);
line (620, 370, 750, 370);
strokeWeight(5);
stroke(0,0,0);
line (620, 290, 750, 250);

// second grup of circles
noStroke();
fill(0,0,0);
ellipse(680, 650, 170+x, 170+x);
stroke(210,138,98);
strokeWeight(8+x);
fill(255,255,255);
ellipse(680, 650, 150+x, 150+x);

noStroke();
fill(0,0,0);
ellipse(846, 590, 170+y, 170+y);
stroke(210,138,98);
strokeWeight(8+x);
fill(255,255,255);
ellipse(846, 590, 150+y, 150+y);

//semicircles
stroke(0);
strokeWeight(8);
fill(0,0,0);
stroke(210,138,98);
strokeWeight(8);
fill(255,255,255);
stroke(0,0,0);
line (420+x, 660+x, 900+x, 480);

//arcs
//stroke(0);
//noFill();
//strokeWeight(4);

//Ask how I can rotate from one point not (0,0)
//strokeWeight(8);
//stroke(175,92,79);
//fill(255,255,255);

//triangle lower part
stroke (0,0,0);
noFill();
strokeWeight(16);

// I can’t animate de points of the triangle properly

//if (xPos < 800 || yPos < 790){
//xPos+= speedX;
//yPos+= speedY;
//}

//else {}
//triangle(xPos,yPos,770,780,810,740);

strokeWeight(16+x);
triangle(800,790,770,780,810,740);

//3 dots
noStroke();
fill(214,202,156);
ellipse(270+x, 730, 10, 10);
fill(214,202,156);
ellipse(300+(x*2), 720, 10, 10);
fill(214,202,156);
ellipse(330+(x*3), 710, 10, 10);
}

## HOMEWORK DAY 2 – CODE

Geometric drawing in processing

void setup(){
size (900, 900);
background (244,239,193);

}

void draw(){

// first group of circles

stroke(0,0,0);
strokeWeight(7);
fill(255,255,255);
ellipse(187, 530, 270, 270);
stroke(0,0,0);
strokeWeight(7);
fill(0,0,0);
ellipse(330, 330, 580, 580);
stroke(255,255,255);
strokeWeight(14);
fill(0,0,0);
noStroke();
ellipse(330, 330, 20, 20);
stroke(61,74,88);
strokeWeight(30);
ellipse(330, 330, 280,280);
stroke(74,130,119);
strokeWeight(18);
ellipse(330, 330, 164,164);

//main lines group
strokeWeight(3);
stroke(0,0,0);
line (650, 500, 650, 200);
strokeWeight(5);
stroke(0,0,0);
line (620, 350, 750, 350);
strokeWeight(14);
stroke(0,0,0);
line (620, 370, 750, 370);
strokeWeight(5);
stroke(0,0,0);
line (620, 290, 750, 250);

// second grup of circles
noStroke();
fill(0,0,0);
ellipse(680, 650, 170, 170);
stroke(210,138,98);
strokeWeight(8);
fill(255,255,255);
ellipse(680, 650, 150, 150);

noStroke();
fill(0,0,0);
ellipse(846, 590, 170, 170);
stroke(210,138,98);
strokeWeight(8);
fill(255,255,255);
ellipse(846, 590, 150, 150);

//semicircles
stroke(0);
strokeWeight(8);
fill(0,0,0);
stroke(210,138,98);
strokeWeight(8);
fill(255,255,255);
stroke(0,0,0);
line (420, 660, 900, 480);

//arcs
//stroke(0);
//noFill();
//strokeWeight(4);

//Ask how I can rotate from one point not (0,0)
//strokeWeight(8);
//stroke(175,92,79);
//fill(255,255,255);

//triangle lower part
stroke (0,0,0);
noFill();
strokeWeight(16);
triangle(800,790,770,780,810,740);

//3 dots
noStroke();
fill(214,202,156);
ellipse(270, 730, 10, 10);
fill(214,202,156);
ellipse(300, 720, 10, 10);
fill(214,202,156);
ellipse(330, 710, 10, 10);
}

## Code Homework 1 – Animated Processing Art

The inspiration behind the Processing Art I created below is the course of life or time. This is represented by the circles moving at the top from left to right,  an infinite movement.

The rectangles stacked below represents the random happenings of life.

The target board (dart board) represent the different goals we are pushing to hit daily in life.

The color scheme of black and white represents the diversity of life.

Finally, the flickering of the art represents the uncertainties of life.

## Code Homework Day 2

For homework of the second day of code, we had to replicate a section of this artwork:

This is my homework:

## Fabric Styling App Code First Draft

https://github.com/NJPaganelli/BootcampCodeProjects

Current Issues:

• Text meant to only appear after a keyPressed selection is all appearing at the jump
• Would like to be able to expand or contract canvas size based on keyPressed selection as well

## coding day3 homework add interaction

//2017.7.31 homework sketching
//written by joyce

String printThis = “The first homework:” ;
int r =239;
int g =232;
int b =164;
int opacity =255;

void setup(){
size(600,250);
println(printThis);

println(600+ “x” + 250+”pixcels”);
background(r,g,b);
println(“bgcolour”+”=”+r+”,”+g+”,”+b+”,”);

}
void draw(){
background(r,g,b);
noStroke();
fill(255);
ellipse(80,80,100,100);

stroke(0);
strokeWeight(1);
fill(255);
ellipse(50,125,30,30);

stroke(0);
strokeWeight(3);
noFill();
ellipse(80,80,100,100);

noStroke();
fill(0);
ellipse(80,80,90,90);

stroke(24,45,55);
strokeWeight(4);
noFill();
ellipse(80,80,50,50);

stroke(43,88,93);
strokeWeight(3);
noFill();
ellipse(80,80,25,25);//circle

stroke(0);
strokeWeight(0.1);
line(200,40,250,190);

stroke(0);
strokeWeight(0.1);
line(100,160,300,100);

stroke(0);
strokeWeight(0.1);
line(300,180,500,180);

fill(74,65,107);
triangle(280,80,295,60,300,78);

fill(74,65,107);
triangle(300,78,320,180,350,90);

fill(255);
triangle(360,180,400,30,420,180);

}