Responsive Curve

In a similar fashion, a curve can become interactive by storing its control point coordinates and allowing the user to move them, affecting the shape of the curve. In the following code, we demonstrate this by using the code that gener-ates Bezier sampled points, as discussed earlier in this chapter.

1 float [] px = {10.,10.,40.,80.};

2 float [] py = {10.,40.,60.,20.};

3

4 void draw(){

5 background(255);

6 for(float t=0.; t<1.; t+=0.01){

7 float x = px[0]*pow((1 - t),3) + 3*px[1]*t*pow((1 - t),2) + 3*px[2]*pow(t,2)*(1 - t) + px[3]*pow(t,3);

8 float y = py[0]*pow((1 - t),3) + 3*py[1]*t*pow((1 - t),2) + 3*py[2]*pow(t,2)*(1 - t) + py[3]*pow(t,3);

9 point(x,y);

10 }

11 for(int i=0; i<4; i++) 12 rect(px[i],py[i],5,5);

13 } 14

15 void mouseDragged(){

16 for(int i=0; i<4; i++)

17 if(dist(mouseX,mouseY,px[i],py[i])<20){

18 px[i] += (mouseX-pmouseX);

19 py[i] += (mouseY-pmouseY);

20 } 21 }

The first two lines predefine the coordinates of the control points. In lines 6, 7, and 8, we extract the x and y coordinates from the third-degree polynomials that define the Bezier curve (as discussed earlier in this chapter). Lines 11 and 12 draw the four control points. In the mouseDragged() section, we go through all control points and determine the ones that are closest to the mouse and we move them by an offset away from the mouse’s position (it appears as if we are pushing the rectangles). This action results in a continuous redrawing of the screen that allows the user to modify the Bezier curve interactively, as shown in Figure 2-17.

Figure 2-17: A Bezier curve where control points can be moved

Summary

This chapter showed you how to draw simple shapes and text, get mouse feed-back, use color, create random numbers, and use arrays. You were also intro-duced to some simple principles of trigonometry. The next chapter shows you how to create hierarchical structures of points, segments, shapes, and groups.

This will allow a better understanding of the notions of classes, object-oriented programming, and inheritance.

Exercises

Note Answers to the exercises are provided in Appendix B.

1. Write the code that will create the following shape:

beginShape();

for(int i=0; i<20; i++){

float x = float y =

vertex(x+50,y+50);

}

endShape();

Hint: The coordinate points you need to create are:

0.0 0.0 10.0 0.0 10.0 10.0 -10.0 10.0 -10.0 -10.0 20.0 -10.0 20.0 20.0 -20.0 20.0

30.0 -20.0 30.0 30.0 -30.0 30.0 -30.0 -30.0 40.0 -30.0 40.0 40.0 -40.0 40.0

2. Write the code that will connect each point with all others already drawn.

A point should be created each time the user presses the mouse.

1 2 3 4 5

6 7 8 9 10

3. Write code that will draw a series of segments for every mouse click. If a key stroke is entered the polyline should end.

4. Write the code that will create the following brick pattern:

5. Write the code that will create the following stair pattern:

6. Modify the code to create the following staircase pattern:

7. Write the code that will produce the following spiral pattern:

8. Modify the code so that it creates the following double spiral pattern:

9. Order and Randomness Objective:

To demonstrate understanding of the use of loops, randomness,

geom-■ n

etries, and attributes.

To learn how to compose, run, and debug Processing.

■ n

Description:

Write the source code that will display a 2D pattern of shapes (size

■ n

of your choice). The pattern should signify the notions of order and disorder within the same pattern.

10. Mathematical Image Objective:

To demonstrate the use of mathematical functions.

■ n

To learn how to compile, run, and publish a java applet.

■ n

Description:

Write the source code (with comments) for an applet that will display

■ n

a 300 × 300 image created through ^rect(), as shown in the following code. Fill in the c1, c2, and c3 variables using mathematical functions to create interesting patterns. For example c1 may look like:

int c1 = int(255. * sin(radians(x)));

size(300,300);

Develop a program that will allow the user to create a composition.

Provide options for controlling and/or altering the composition. The proposed system should be intuitive enough to not need a user’s manual or any text description in the screen.

Objectives:

To demonstrate understanding of the use of graphic elements,

■

n draw(),

and key or mouse events.

To address notions of composition, interaction, and response.

■ n

Process:

Develop an idea of the tools and interactions.

■ n

Make a diagram/sketch that represents a possible solution.

■ n

Create a Processing script (with comments) that can implement

■ n

the idea.

Test the resulting code by reenacting a user.

■ n

Discuss the following questions:

Does a tool maker of design tools need also to be a good designer?

■ n

Is a tool maker responsible for the tool’s misuses?

■ n

Structure is the way in which parts are arranged or put together to form a whole;

it is the interrelation or arrangement of parts in a complex entity. Complex struc-tures often require hierarchical organizations in which groups of elements are successively ranked or graded, with each level subordinate to the one above.

In that sense, a system with hierarchical groups can be more efficient in per-forming a task, since only the parts particular to the task need to be activated.

At the same time, information can be divided into that which is related to the task itself (local) and that which concerns the control and accomplishment of the task as it relates to the whole (global).

Geometric structures are complex systems that can be arranged in hierarchi-cal levels. For example, by extrusion, points can form lines, lines can form sur-faces, and surfaces can form solids. In reverse, a complex geometric solid shape can be composed of surfaces that are composed of curves that are composed of control points. This chapter introduces a hierarchical geometric structure in which each hierarchical group maintains certain autonomy within its domain yet, at the same time, interrelates to the levels immediately above or below.