Recitation 5: Processing Basics

 

I began working with trying to find an image, I saw a poster in the hall and take a photo of it. Just simple picture. I wanted some geometrical details, but also some challenging part like the brain on photo. It is clear picture which enables me to use it as a sketch too. I had the idea of how to draw it in processing, so I thought that it will be interesting for me to make it. I made my canvas 800×800 size, because I love working on the big ones. It is more convincing for me. I am not very good at determining positions on the coordinate lines, so I am using the selection method. I knew that I will change much of the photo during the coding process, and I didn’t want to mess my graph paper, so I didn’t actually use it so much. It is more comfortable for me to just try different variations and I can imagine and determine necessary position in my head. Like if I want to put it in the center I need to use the coordinate near the 400 according to my size of canvas and etc… So, I started working directly with code and made the sketch a bit later. I had quite clear photo, so it wasn’t hard to work without sketch, because photo itself worked as a sketch. I made simple ellipses at first, colored everything. Then I added the lines and the circle. I made strokes for them and covered the boarder line with added rectangular (with the similar to background color). I also made a filled circle on the bottom and covered a part of it with another rectangular. At the beginning I wanted to use this function for drawing : But later I started sorting that this would not align to the point of this exercise, so I decided to use it just for clarifying the next move. I wanted to make something like the brain inside of it, but simply do one triangle and many circles was a bit boring, so I decided to use the concept of vertex. Moving vertexes are not very similar to the brain, but they can convey the idea. And also movement makes this image better. It actually was a challenge for me. I thought that I knew how to do it, but realized that my method isn’t working. I trying Ed different variations, but nothing helped. In the evening I was talking to my friend from creative coding lab and realized that I made the wrong order! It is so ridiculous. I know how important is the order of code lines in processing, but I misunderstood which line is working first. But I am relieved that I found out it now. Finally, I learned how great is coding when you are using //. I used not to use them much, because “I can read the code it’s fine” ahah, but I was using them during this work and realized how easier they are making the process of coding. I will definitely continue working with them. My final creation is similar enough to the drawing and the photo. I recreated the brain and decided not to rotate the ellipses. However, I tried to use similar colors and concept. I think that processing can be helpful in drawing designs, but I feel that you should not just use geometrical functions for it, but also work with brushes (like the code I wanted to work with at the beginning). You can combine this strategies and then you will be able to move some parts of your drawing or to be fast in choosing and mixing different colors and shapes.

photo motiv:

 

sketch:

final drawing:

final code:

void setup() {
  size(800,800);
background(0);}
void draw () {
fill(0);
noStroke();
rect(300, 515, 350,120);
fill(255);
ellipse(400, 530, 200, 300);//bottom
fill(0);
rect(300, 500, 200,150);
fill(255);
ellipse(400,550,200,30);
ellipse(400,580,200,30);
ellipse(400,610,200,30);//under ellipses
fill (#1925F5);
ellipse(400,100, 40, 100);
ellipse(350,100, 40, 100);

ellipse(450,100, 40, 100);//blue ellipses
fill(0);
stroke(255);
ellipse(400,300,300,300);// lamp circle
noStroke();
fill(0);
rect(300, 300, 200, 200);// inportant rect
stroke(255);
line(300, 550, 300, 410);//left line
stroke(255);
line(500, 550, 500, 410);//right line
if (keyPressed) {
  fill(255);
 noStroke();
  ellipse(mouseX, mouseY, 30, 30);
} {beginShape();
  for(int i = 3;i<=15;i++){
    fill(255);
    stroke(255);
    vertex(int(random(100))+400,int(random(210)+210));
 delay(15);
  }
  endShape(CLOSE);
  endShape();}

} 

Leave a Reply

Your email address will not be published. Required fields are marked *