Workshop 5: Processing 1/Sketching
This week we have been introduced to Processing 3 to code and to create aesthetically pleasing visual works. First of all, we began to answer a few key questions on coding, such as;
- What is it for?
- who uses it?
- How to use it?
Part 2: Interpret drawings as pseudo code:
Exercise 1:
Using the code examples in this workshop sourced from the processing.org page, we placed ourselves in the shoes of Manfred Mohar. We copied and typed in the provided code into processing:
void setup() { size(640, 360); background(51); noStroke(); noLoop(); } void draw() { drawTarget(width*0.25, height*0.4, 200, 4); drawTarget(width*0.5, height*0.5, 300, 10); drawTarget(width*0.75, height*0.3, 120, 6); } void drawTarget(float xloc, float yloc, int size, int num) { float grayvalues = 255/num; float steps = size/num; for (int i = 0; i < num; i++) { fill(i*grayvalues); ellipse(xloc, yloc, size - i*steps, size - i*steps); } }
The above code creates the image below:
Exercise 2:
This exercise involved identifying aspects within the code, i.e.
- Objects
- Methods (or functions)
- Loops
- Loops within Loops
- Forks (or “if” conditions)the program entry point,
- and its exit point.
void setup() { size(640, 360); background(51);//background colour noStroke();//objects not outlined noLoop();//loop }
void draw() { drawTarget(width*0.25, height*0.4, 200, 4); drawTarget(width*0.5, height*0.5, 300, 10); drawTarget(width*0.75, height*0.3, 120, 6); }
void drawTarget(float xloc, float yloc, int size, int num) { float grayvalues = 255/num; float steps = size/num; for (int i = 0; i < num; i++) { fill(i*grayvalues); ellipse(xloc, yloc, size - i*steps, size - i*steps);//object } }
Making a Loop:
From the medadada page, we copied the provided code in processing to create and experimenting with loops within a code. Using the provided code on the medadada workshop notes, I have changed the number values and loop variables to create different randomized ellipse shapes. From this experimentation, I ended up with the imagery below:
void setup() { size(680, 420); background(255, 255, 255); //noLoop(); }
void draw() { fill(220, 200, 190, 10); for (int x = 50; x < 500; x = x + 20) { for (int y = 50; y < 200; y = y + 20) { int diameter = (int)random(600); ellipse( x,y,diameter,diameter); } } }