Tutorial Processing: bezier, text, textFont, class with ...



Tutorial Processing: bezier, text, textFont, PFont, class with variables and methods, switch case, arrays: float[] and String[]

This sketch demonstrates drawing connected Bézier curves. After the first set of 4 points are specified, the second anchor becomes the first anchor point and 3 more points specify the next portion of the curve. My sketch provides the facility to re-start the curve and to clear the screen to start all over. The sketch also provides a way to change the color of the curve.

In terms of implementation, this sketch demonstrates displaying text, using classes to implement the buttons, the case statement and arrays.

The web site has 3 sketches. These notes focus on the 3rd sketch, with the buttons implemented using a programmer defined class (that is, the MButton class I wrote). You will benefit from looking at the code of the other two sketches.

Bezier curves

Bezier curves are a way of specifying curves invented by Pierre Bézier. The challenge is how to define a smooth curve that is not part of a circle, ellipse, and so on. Bézier's method makes use of what are called parametric curves. A parameter, often denoted by t which can be thought of as t for time is used with vectors to define the curve. The t value goes from 0 to 1. A circle is expressed as a parametric curve by defining the X and Y parts separately:

X(t) = cos(t)

Y(t) = sin(t)

A cubic Bézier curve is defined in terms of two anchor points (A1 and A2) and two control points (C1 and C2). [The points also can be viewed as vectors.] The curve starts at A1 and ends at A2. The curve moves from A1 towards C1 and then towards C2 before heading towards and ending up at A2. The parametric curve is defined as a weighted sum of the 4 points:

P(t) = (1-t)3 * A1 + 3*t*(1-t)2*C1+3*t2*(1-t)*C2+t3*A2

Processing provides a function that draws the Bézier curve defined by the points specified by the 8 parameters representing 4 x, y positions:

bezier(a1[0],a1[1],c1[0],c1[1],c2[0],c2[1],a2[0],a2[1]);

The color of the curve is the current stroke color. In this sketch, I use variables strcol, stgcol and stbcol to hold the red, green and blue components indicating the color to be used and noFill(); If there is a fill value, the bezier function draws a shape with the curve completed with a line from anchor 1 to anchor 2.

Actually, the objective of this sketch is to practice drawing Bézier curves. Work with the application to gain understanding of how sets of anchor points and control points produce curves.

Text

Displaying text using Processing requires several distinct statements. The code must declare and define at least one variable for the text font, set the font for text and then use the text statement.

A variable of datatype PFont must be declared, for example:

PFont myfont;

Next, you must write code to assign a value to each PFont variable.

myfont = createFont("Ariel",18);

This code assumes that the font Ariel is available on the computer running the sketch, which typically is true. The size is 18.

The textFont statement sets the text font for subsequent use:

textFont(myfont);

Lastly, the text statement writes text, using the current font, at the specified location:

text (btext,xpos+2, ypos+18);

This is a statement that appears in the drawit method to be described later. It causes the string contained in the variable btext to be drawn at x = xpos+1, and y = ypos+18.

To determine which fonts are available on the computer, use

String[] fontList = PFont.list();

println(fontList);

This displays all the available fonts in the print area below the edit area in the Processing Environment. This code would not be part of the Bézier sketch!

The loadFont function provides a way to make the font part of the sketch itself, which would make an exported sketch larger as an applet or application, but also more robust. You need to look up how to use this in Help/Reference.

Class variables and methods

In this application, I use rectangles displayed on the screen, some with text and some without, to be buttons. The player/user clicks the mouse on the button. In my first attempt at this, I created the buttons individually. [Check out the second of the three sketchs.] A better approach is to define a class. A class consists of variables and functions, also called attributes or properties and methods. To write code to be used by all the buttons, I need to think about what defines a button: what attributes a button needs to have, and what actions—what code—is required. What I came up with is that buttons are defined by a position on the screen, width and length, color, and text. The declarations are:

MButton cr = new MButton(740,100,50,50,255,0,0,"");

MButton cg = new MButton(740,200,50,50,0,255,0,"");

MButton cb = new MButton(740,300,50,50,0,0,255,"");

MButton resetb = new MButton(650,50,75,30,200,0,100,"Re-start");

MButton clearb = new MButton(740,50,50,30,200,0,100,"Clear");

NOTE: these declarations are at the top of the sketch code. I wrote them after I wrote the code the defines the MButton class and the Processing system refers to the class definition when executing the declaration.

The first method in the class definition is termed the constructor. It is the one named MButton. In this situation, the constructor simply sets the internal variables (the properties) to the values passed in as parameters.

The actions for a button are: drawing the button and checking if the mouse is on top of the button. I made the checking method, named onbutton, be more general, since I made it take an x and y as parameters instead of using mouseX and mousey directly. Here is my code for the class MButton.

class MButton {

int xpos, ypos, xlen, ylen;

int rcol, gcol, bcol;

String btext;

MButton (int x, int y, int w, int h, int r, int g, int b, String t) {

xpos = x;

ypos = y;

xlen = w;

ylen = h;

rcol = r;

gcol = g;

bcol = b;

btext = t;

}

void drawit() {

fill(rcol,gcol,bcol);

rect(xpos,ypos,xlen,ylen);

fill(0,0,0);

textFont(myfont);

text(btext,xpos+2,ypos+18);

}

boolean onbutton(int x, int y) {

if ((x>=xpos)&&(x=ypos)&&(y ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download