2st Week:
This week, we will learn how to use beizerVertex(); to make ths following beautiful flowers:
by Yeohyun Ahn.
Now Let's start understanding beizerVertex();
Here is the code. You can copy it and paste into your Processing.
I got this code from http://www.processing.org/reference/bezierVertex_.html and some functions are added.
void setup(){
size(1000,1000);
background(255,255,255);
}
void draw(){
beginShape();
vertex(300, 200);
fill(0,0,0);
smooth();
noStroke();
bezierVertex(800, 0, 800, 750, 300, 750);
bezierVertex(500, 800, 600, 250, 300, 200);
endShape();
}
Here is the output:
Let's start understanding this code:
Inside void setup()
size(1000,1000);
background(255,255,255);
We created a screen size with 1000 pixel (width) by 1000 pixel(height) and defined a background color as white, background(255,255,255);.
Inside void draw()
beginShape();
vertex(300, 200);
fill(0,0,0);
smooth();
noStroke();
bezierVertex(800, 0, 800, 750, 300, 750);
bezierVertex(500, 800, 600, 250, 300, 200);
endShape();
What is bezierVertex();?
bezierVertex(); defines the position of two control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time bezierVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. This function must be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape().
Reference: : http://www.processing.org/reference/bezierVertex_.html
Syntax:
bezierVertex(cx1, cy1, cx2, cy2, x, y)
Parameters:
cx1: x-coordinate of 1st control point
cy1 : y-coordinate of 1st control point
cx2 : x-coordinate of 2nd control point
cy2 : y-coordinate of 2nd control point
x : x-coordinate of anchor point
y : y-coordinate of anchor point
What is vertex()?
vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons and is used exclusively within the beginShape() and endShape() function.
Reference: : http://www.processing.org/reference/vertex_.html
syntax:
x x-coordinate of the vertex
y y-coordinate of the vertex
What is fill();?
fill(); is used to fill the color of shape. For instance, fill(0,0,0); means "black," so the above shape has a black color. If you would want to change the color from black to red, just change from fill(0,0,0) to fill(255, 0,0);. or you can select your favorite color from Adobe Photoshop. How to do that?
1.Open your photoshop.
2.Open your color picker.
3.Select your favorite color.
4.Write down the RGB color value like 34, 190, 188.
5.Back to Processing.
6.Change three parameters in fill(); like fill(34, 190, 188);
7.Hit the run.
8.You will get the following visual result.
For more information:http://www.processing.org/reference/fill_.html
What is smooth();?
It is used to make the outline of shape smooth.
Reference: : http://www.processing.org/reference/smooth_.html
What is noStroke();?
It is used to make the color of outline has no color.
Reference: :http://www.processing.org/reference/noStroke_.html
Now Let's start playing with this code. I added translate();, for(); and rotate();
//Sample code1 by Yeohyun Ahn
void setup(){
size(1000,1000);
background(255,255,255);
}
void draw(){
translate(500,500);
fill(120,120,120);
for(int i=0;i<360;i=i+10){
beginShape();
vertex(300, 200);
smooth();
noStroke();
bezierVertex(0, 0, 0, 7, 3, 7);
bezierVertex(50, 80, 60, 25, 300, 200);
endShape();
rotate(360/PI*i);
}
}
Here is the visual result:
What is translate();
It is commonly used to move shape on X,Y,Z coordinates. In here, it is used to the center of rotation
as X coordinate and Y coordinate (500,500) with the screen size: 1000 pixel by 1000 pixel.
Reference: http://www.processing.org/reference/translate_.html
What is rotate();
It is used to roate your shape in Radians, values from 0 to TWO_PI).
For instance,
rotate(PI/6.0); means 30 degree out of 360 degree.
rotate(PI/3.0); means 60 degree out of 360 degree.
rotate(PI/2.0); means 90 degree out of 360 degree.
Reference:http://www.processing.org/reference/rotate_.html
With the sample code 1, I added transparency by using fill(0,0,0,90); manuplated parameters in bezierVertex(); and apply random(); inside rotate(); after then I included saveFrame();.
//Sample2 by Yeohyun Ahn
void setup(){
size(1000,1000);
background(255,255,255);
}
void draw(){
translate(500,500);
fill(0,0,0,90);
for(int i=0;i<360;i=i+10){
beginShape();
vertex(300, 200);
smooth();
noStroke();
bezierVertex(90, 0, 90, 7, 3, 7);
bezierVertex(50, 80, 60, 25, 300, 200);
endShape();
rotate(360/PI*random(i));
}
saveFrame("flower-###.jpg");
}
Here is the ouput:
by Yeohyun Ahn.
saveFrame(); is used to save your screen shot frame by frame. If you use a file name like ," flower-###.jpg", which is automatically save from flower-001.jpg, flower-000=2.jpg, folower-003.jpg, etc.
Let's keep going exploring with the code like the following:
void setup(){
size(1000,1000);
background(255,255,255);
}
void draw(){
translate(500,500);
for(int i=0;i<360;i=i+10){
fill(30,30,30,70);
beginShape();
vertex(300, 200);
noStroke();
smooth();
bezierVertex(0, 0, 0, 7, 3, 7);
bezierVertex(50, 80, 60, 25,300, 200);
endShape();
rotate(360/PI*i);
}
for(int i=0;i<400;i=i+20){
fill(20,20,20,90);
beginShape();
vertex(300, 200);
noStroke();
smooth();
bezierVertex(90, 0, 90, 7, 3, 7);
bezierVertex(50, 80, 60, 20, 350, 230);
endShape();
rotate(360/PI*random(i));
}
saveFrame("f-###.jpg");
}
Here is the output:
Next time, we will keep going to create this experimental flowers with color variation, save as PDF. After then working with Adobe Illustrator.
Please send me your output to yeoahn@gmail.com