1st Week:
Let's start learning Graphic design with Processing. Do you have Processing? If not, please go to the website: http://www.processing.org, and then go click the menu, download. Here is the direct link: http://www.processing.org/download/index.html
If you would have any challenging to install Processing, please go to the following link to ask: http://dev.processing.org/bugs/
Before we start, I would like to talk about the code structure in Processing. Here are many ways that you can organize your future codes. For me, I will use the followings in Processing:
void setup()
{
}
void draw()
{
}
Here is your questions:
What is setup()?
What is draw()?
setup() is used to define your initial enviroment such as screen size and background color. You should have only one setup() in your code. Here is the detail information: http://www.processing.org/reference/setup_.html
draw() is used to after setup(). You can include any drawing function such as line();, rect();, ellipse();, curve();,bezier();, etc. Here is the detail information: http://www.processing.org/reference/draw_.html
Let's start with basic syntax,bezier(); with Processing.
What is bezier()?
Here is the details: http://www.processing.org/reference/bezier_.html
It enables to draw a bezier curve on the screen. It is defined by a series of anchor and control point. If you know Adobe Illustrator's Pen Tool, you could definitely understand it.
Here is some samples by using beizer() and for() statement.
by Yeohyun Ahn.
1. Open your Processing.
2. Copy the following code into your Processing
//by Yeohyun Ahn: Beizer tutorial sample1
void setup()
{
size(1000,1000);
smooth();
strokeWeight(3);
background(255);
}
void draw(){
stroke(0,0,0);
bezier(850,200,100,100,900,900,150,800);
}
We can see the result like the following:
What we did in setup() with Processing is:
1.We created a screen size as 1000 pixel(width) by 1000 pixel(height).
2.We applied the stroke weight as the value of 3.
3.We applied to the background color, 255, which means, it is white.
What we did in draw() with Processing is:
1.We applied the stroke color, 0,0,0, which is black. It is the same value of RGB color mode in Adobe Photoshop.
2.We drew a bezier curve with bezier(850,200,100,100,900,900,150,800);
Now we don't understand what the meaning of each number in bezier(); is.
Here is a diagram for your reference:
bezier(x1,y1,x2,y3,x3,y3,x4,y4);
if you still don't understand or if you would want to learn more details, please go to this link:http://www.processing.org/reference/bezier_.html
Next is we will include for() statement in this current code:
What is for() statement?
Here is the detail information: http://www.processing.org/reference/for.html
I added a for() statement with the current code like the following:
//by Yeohyun Ahn: Beizer tutorial sample2
void setup()
{
size(1000,1000);
smooth();
strokeWeight(3);
background(255);
}
void draw(){
for(int i=0; i<900; i=i+100)
{
bezier(850, 200, 100, 100, i, 900, 150, 800);
}
}
Copy the above code into your processing and hit the button, run.
You will see the following result:
Here is the detail explaination regarding the above for() statement.
What is the meaning of for(int i=0; i<900; i=i+100) is that the value of i i increased from 0,100,200,300,400,500,600,700,800, by for() statement. I defined for() statement with three Parameters: int i=0; i<900; i=i+100, which means, increated the value of i from 0 and add 100, from 100 and add 100, from 200 and add 100,etc. If the value of i is increased step by step, in bezier(850, 200, 100, 100, i, 900, 150, 800); is replaced from 0,100, 200, to 800. That created the above image.
You can adjust the current code like the followings:
////by Yeohyun Ahn: Beizer tutorial sample3
void setup()
{
size(1000,1000);
smooth();
strokeWeight(3);
background(255);
}
void draw(){
for(int i=0; i<900; i=i+100)
{
bezier(850, i, 100, 100, i, 900, 150, 800);
}
}
The result:
If the increment of i in for() statement and the values in beizer(); in Processing, are changed,
////by Yeohyun Ahn: Beizer tutorial sample4
void setup()
{
size(1000,1000);
smooth();
strokeWeight(3);
background(255);
}
void draw(){
for(int i=0;i<900;i=i+40)
{
bezier(i, 200, 100, 100, 900, i, 150,800);
}
}
The result:
//by Yeohyun Ahn: Beizer tutorial sample5
void setup()
{
size(1000,1000);
smooth();
strokeWeight(3);
background(255);
}
void draw(){
for(int i=0;i<900;i=i+40){
bezier(i, 200, i, 100, 900, 900, 150,800);
}
}
The result:
//by Yeohyun Ahn: Beizer tutorial sample6
void setup()
{
size(1000,1000);
smooth();
strokeWeight(3);
background(255);
}
void draw(){
for(int i=0; i<900; i=i+50)
{
bezier(900, 200, 100, 100, 900, 900, i, 800);
}
}
The result:
//by Yeohyun Ahn: Beizer tutorial sample7
void setup()
{
size(1000,1000);
smooth();
strokeWeight(3);
background(255);
}
void draw()
{
for(int i=0; i<900; i=i+50)
{
bezier(900, 200, 100, 100, 900, i, 50, 800);
}
}
We as graphic designers or graphic design majors, we need to get it as PDF, vector based. How to save as PDF?
Here is the code, where you need to include the PDF import library.
//by Yeohyun Ahn: Beizer tutorial sample7
import processing.pdf.*;
void setup()
{
size(1000,1000);
beginRecord(PDF, "beizer.pdf");
smooth();
strokeWeight(3);
background(255);
}
void draw()
{
for(int i=0; i<900; i=i+50)
{
bezier(900, 200, 100, 100, 900, i, 50, 800);
}
endRecord();
}
Downlaod beizer.pdf
Here is the detail information:http://www.processing.org/reference/libraries/pdf/index.html
Let's make a storm by using beizer(), for() and random().
Random() is to generate random numbers in a specific range. For instance, random(100) generates the random numbers between 0 and 99.
More details:http://www.processing.org/reference/random_.html
//by Yeohyun Ahn: Beizer tutorial sample8
void setup()
{
size(1000,1000);
smooth();
strokeWeight(3);
background(255);
}
void draw()
{
for(int i=0; i<900; i=i+50)
{
bezier(300, 200, 800, 50, random(i), 750, 300, random(i));
}
}
This result:
Assignment1:
Explore your own drawings by using beizer();, for();, and random(); and save as PDF. Send your files to yeoahn@gmail.com. They will be posted through this website with your credit.
Go to Home