Module 03 : Variables

• Topics
• Resources
• In-Class Activities
• Sample Quiz Question

Topics

• Data types
• Declaration of variables
• Use of variables in robust program design

New processing syntax:

• Declaration of variables
• Assignment of values with the = operator
• Arithmetic expressions using operators +, -, *, /

Resources

• pp. 35-40 and 47-48 of Ch. 4 of the Reas/Fry book

• My own motivating notes and example

• Watch Daniel Shiffman Video 4.0, Variables (19 minutes)
  (available at learningprocessing.com and YouTube)

  Note: We are watching these slightly out of sequence, as we've bypassed his Chapter 3 videos (although we'll be getting back to those very soon). So don't be surprised that his examples rely on a few techniques that we have not yet seen.

• Watch Daniel Shiffman Video 4.1, Incrementing A Variable (11 minutes)
  (available at learningprocessing.com and YouTube)

In-Class Activities

As described in my notes, this is a somewhat unusual module in that the end result of your sketches will not be any different from things we've already been able to do. But my goal is to have you use variables to define the sketches in a way that makes them more adaptable. So for each of the following activities, I will show you examples of two different renderings of the sketch based upon a modification to one or two key definitions that should be at the beginning of your source code. They key to success if verifying that your sketches properly adapt to changes in those variables.

Simple Ellipse
As a first example, consider a sketch that simply draws an ellipse inscribed precisely within the sketch window. I would like the first line of your source code to set the size, such as

size(600,400);

size(600,400);	size(300,600);

Simple Rectangle
For this sketch, create a rectangle centered within the sketch window, and having width and height equal to 50% of that window. (spoiler: my code)

size(600,400);	size(300,500);

Ice Cream Cone
Your ice cream cone should be designed so that the scoop is a half circle with diameter equal to one third the width of the screen. It should be centered left-to-right, and placed vertically so that space above the scoop is exactly equal to the height of the half circle. The cone should have height equal to twice the width of the scoop. You may assume that the height of the screen is large enough to contain the cone. (spoiler: my code)

size(300,400);	size(600,600);

Prism
This is an extension of the "fake cube" sketch from an earlier module, in which we give the perspective of a 3D solid by combining a rectangle and two quadrilaterals. In this sketch, you are to design a rectangular prism scaled according to the size of the sketch window, such that there is precisely 100 pixels of padding around the visible solid on all sides, and so that the top and right faces are projected with an added dimension of 100-pixels, as shown in the following two examples. (spoiler: my code)

size(600,400);	size(500,700);

Prism2
Repeat the previous exercise, but this time, instead of using 100 as the padding around the prism and the apparent depth of the prism, allow that value to be based on a declared variable pad. (spoiler: my code)

size(600,400); float pad = 50;	size(500,700); float pad = 100;

Color Variables
In this example, we use variables of the color type, to make it easier to define colors that are going to be used repeatedly in our sketch. The following two sketches are created with the same source code, other than the given first two lines. (spoiler: my code)

color firstColor = color(255,0,0); color secondColor = color(255);	color firstColor = color(0,0,127); color secondColor = color(255,127,0);

Once using color variables, another fun thing is that you can retrieve the individual red, green, and blue values from the color, and you can build new color values based on those. For example, if you have a color identified with variable c, the expression red(c) equals the red component of the color (as an integer in the range from 0 to 255). Similarly, green(c) and blue(c) can be used, as well as alpha(c) to get the opaqueness value.

As a challenge below, we define a color variable that will be used to fill an ellipse. Yet we calculate a background color automatically that is the complement of the ellipse color, that is, setting each component to 255 minus the original. (spoiler: my code)

color c = color(139, 69, 19);

Piet Mondrian Art
We can look at designing abstract art in the style of Piet Mondrian, such as the following recreation of Composition with Red, Blue and Yellow (1930). While we could define the geometry with explicit coordinates, it is much easier to reuse the common x and y coordinates that arise. For the image below, we define variables x0, x1, ..., x7 to define the locations of the vertical lines, with x0 equal to zero and x7 equal to the width of the screen. Similarly, we define the significant heights y0 through y4. All of the rectangles and lines are then defined using those coordinates. (spoiler: my code)

Customizable Smiley Face
I'm offering this as a more robust example of source code that is highly customizable. This example is more tedious, and too much to do from scratch as an in-class activity. But I think it is worth you taking some time to load (spolier) my source code in Processing and experiment with how the sketch changes based on the original seven parameters:

float facePct = 0.7;     // face diameter 70% of canvas
float eyePct = 0.2;      // eye width is 20% of face width
float eyeGapPct = 0.5;   // gap between eyes equal 50% of single eye width

color faceColor = color(255,255,0);  // yellow
color irisColor = color(56,183,240); // light blue
color mouthColor = color(243,23,56);

String msg = "Have a nice day!";

The rest of the source code is written to do all other calculations based on these parameters. Effectively, the face width is specified as a percent of the window. The eye width is then specified as a percent of the face, and the gap between the eyes is specified as a percent of the eye width. The three colors can be changed, as well as the message below. Care is taken within the script to proportionally weight stroke weight for the mouth, and even the font size for the text message (so that it takes up width equal to the face's width). Here are two examples, and some of the initial parameter settings used to create them.

float facePct = 0.7; float eyePct = 0.2; float eyeGapPct = 0.5;	float facePct = 0.5; float eyePct = 0.4; float eyeGapPct = 0.6;

Sample Quiz Question

Considering the above exercises, I would suggest that a good difficulty for a quiz question might lie somewhere between the ice cream cone and the prism.