Recitation 5 Documentation

After looking up my album, I finally decided to choose this image, which is taken during the anniversary activity:

I chose this image because it has an aesthetic quality and several geometric features since Processing is well-equipped to render those. It has distinct colors and regular geometric shapes including circles, arches, rectangles, and so on. 

Then I drew the sketch on the sketch paper. I simplified the image to make it easier to program on the Processing, as shown below:

I decided to mainly use circles and curves (realized by the function “curveVertex ( )”, as well as adding texts to fulfill my idea. Then I started to code. At first, I had difficulty in figuring out how to draw curves smoothly. I did lots of research about the function “curveVertex” and “bezierVertex”, and I didn’t figure out how to use “bezierVertex” smoothly. So my final product mainly uses the former code. 

And the code is like this:

PImage img;
float angle=-7;
int b=-800;
void setup() {
size(600, 900);
img=loadImage("image.jpg");
imageMode(CENTER);
}
void draw() {
// Your drawing code goes here
background(255);
stroke(255,0,0);
strokeWeight(4);
fill(255,0,0);
triangle(180,405,180,455,262,447);
stroke(#834C83);
strokeWeight(4);
println(mouseX, mouseY);
line(100, 550, 150, 750);
line(500, 550, 450, 750);
fill(#551154);
ellipse(420,420,120,120);
noFill();
beginShape();
curveVertex(150, 700);
curveVertex(150, 750);
curveVertex(240, 780);
curveVertex(300, 785);
curveVertex(360, 780);
curveVertex(450, 750);
curveVertex(450, 700);
endShape();
fill(#FABBF4);
beginShape();
vertex(100, 550);
vertex(100, 500);
bezierVertex(250, 400, 350, 400, 500, 500);
vertex(500, 550);
curveVertex(500, 550);
curveVertex(490, 525);
curveVertex(450, 500);
curveVertex(410, 525);
curveVertex(400, 530);
curveVertex(390, 525);
curveVertex(350, 500);
curveVertex(310, 525);
curveVertex(300, 530);
curveVertex(290,525);
curveVertex(250,500);
curveVertex(210,525);
curveVertex(200,530);
curveVertex(190,525);
curveVertex(150,500);
curveVertex(110,525);
curveVertex(100,550);
vertex(100,550);
endShape();
fill(#C221CB);
ellipse(140,540,40,40);
fill(#ED4F9E);
ellipse(200,640,80,80);
fill(#F2426B);
ellipse(280,660,40,40);
fill(#A0135A);
ellipse(320,560,40,40);
fill(#CE3ACC);
ellipse(380,680,80,80);
line(300,426,280,280);
fill(255,0,0);
strokeWeight(1);
arc(180,429,50,50,PI/2,3*PI/2,OPEN);
push();
translate(260,177);
rotate(radians(angle));
image(img,4,14,240,240);
pop();
noStroke();
fill(255);
rect(0,b,600,800);
}

void mouseClicked() {
if(b<0)
b=b+200;
}

And the product is like this:

I don’t think Processing is a good platform to draw pictures. I think it is complicated to calculate all the coordinates and the curves. Instead, drawing on real paper is more straightforward and easy, I think.