How to Use Binary Tree in Geomerative Library?
Today we will use “Tutorial_07_HelloWorld_getPoints.pde,” in the folder,
geomerative -> examples -> Tutorial_07_HelloWorld_getPoints
1.
2.
3.
4.
Open “Tutorial_07_HelloWorld_getPoints.pde,” in Processing
Change the text, "Hello world!," to any text which you like.
Change the font style, “FreeSans.ttf” to “HelveticaNeueBd.ttf.”
You need to copy “HelveticaNeueBd.ttf,” and paste it into the folder, data.
Note: You have the folder, True_Type_Fonts, which was provided last week.
Exercise 1: Change the followings:
-
text size
ellipse() to rect() or line();
stroke(), and fill()
Exercise 2: We will get rid of all of the lines and just leave the circles in the code.
-
Make grp.draw(); inactive
Make vertex(points[i].x, points[i].y);inactive
Exercise 3: We will add Binary Tree Algorithm in the code.
Here is Binary Tree algorithm:
void Ysystem (float sx, float sy, float ex, float ey, float angle, float level)
{
float new_level = level-1;
line(sx, sy, ex, ey);
if (level>0)
{
float dist = sqrt( (sx-ex)*(sx-ex)+(sy-ey)*(sy-ey) );
float dx = (ex-sx)/dist;
float dy= (ey-sy)/dist;
float R = radians(angle);
float new_dist = 0.9*dist*cos(R);
float new_cx = ex+dx*new_dist;
float new_cy = ey+dy*new_dist;
float final_dist = 0.9*dist*sin(R);
float dx1 = -dy;
float dy1 = dx;
float dx2 = dy;
float dy2 = -dx;
float new_ex1 = new_cx+dx1*final_dist;
float new_ey1 = new_cy+dy1*final_dist;
float new_ex2 = new_cx+dx2*final_dist;
float new_ey2 = new_cy+dy2*final_dist;
Ysystem(ex, ey, new_ex1, new_ey1, angle, new_level);
Ysystem(ex, ey, new_ex2, new_ey2, angle, new_level);
}
return;
}
1. Copy the above code and paste it into Tutorial_07_HelloWorld_getPoints.pde
at the end of the code.
2. Put the following code in void draw():
Ysystem (float sx, float sy, float ex, float ey, float angle, float level); where you made
vertex(points[i].x, points[i].y); inactive.
3. Change the parameters of Ysystem like the following: Ysystem (points[i].x,
points[i].y,points[i].x+10, points[i].y+10,30,3);
4. Apply random() function in Ysystem();
Ysystem (points[i].x, points[i].y,points[i].x+random(10),
points[i].y+random(10),random(30),random(3));
Note: You can adjust the ranges of ex, ey, angel and level like the following:
5.
6.
7.
8.
Ysystem (points[i].x, points[i].y,points[i].x+random(30), points[i].yrandom(30),random(30),random(10));
Change the stroke color if you want.
Add noLoop(); in void setup() if you don’t want to make loop.
Add ellipse();after line(sx, sy, ex, ey); in void Ysystem() if you want to create leaves in
Binary Tree like the following code:
float a=random(5);
ellipse(ex+random(5),ey+random(5),a,a);
Keep working with your code to explore your own typography.