We built upon week 1 to keep our rhythm going for the next five weeks together (the archive from class is here). Please download the week one archive again in anticipation of swapping Processing code into the HTML files for this week's examples. We will use the Integers and Floats example to look at data types. We will use the Variables example to look at Processing variables. We will use the Character Strings example to look at text drawing. We will look at the Continuous Lines example to consider continuous visuals. We will use the Double Random example to look at Random. Notes associated with the final archive for the week are below.

Processing — JavaScript data types

JavaScript, and as such Processing.js, has no "char" datatype

JavaScript only knows about numbers, and strings, unlike Java, which also knows about "char" data types. The char is a 16 bit unsigned integer value, that can also pretend to be a letter (from the ISO8859-1 codepage for the first 256 numbers, and basically magic after that). Unfortunately, as JavaScript has no equivalent, relying on char comparisons to be either numbers or letters is quite likely to cause problems. If you have Processing code where you're comparing chars, you will either have to perform int casting, or string casting, using the int() and str() functions, so that you know you're explicitly comparing datatypes that JavaScript can deal with. This is just one of many interesting tidbits in regards to Processing.js from the Processing.js Quick Start. Some of the tidbits are rather advanced so I will try and inject them as we go forward where warranted.

Processing — Examples for Week 2

Take a look at the six examples in the Week 2 archive. Here are some notes on each of them:

Regarding datatypes.html, we learned that Processing has two built-in functions we can use to insert our visual commands (statements) so they run when we want them to. The setup() function runs once as soon as the environment has settled (in the JavaScript context, that's when the browser has faithfully downloaded and prepared the page for viewing). Then the draw() function runs once per frame, continuously as long as the environment is active (in the JavaScript context, that's while the page is loaded in the browser). We noted that the draw() function is dependent on the frameRate() function — if we set the frameRate parameter to 30, the draw() function attempts to run 30 times per second (300 would mean 300 times a second). The rest of this example looks at logic for controlling the dynamic presentation of shapes.

Regarding variables.html, we learned that variables are created by declaring a label that then becomes a reference to a location in computer memory. Because we didn't use the setup() or draw() functions in this example, the Processing code just runs once as soon as the environment settles. We studied how helpful three variables are (start_x, start_y, and linewidth) to help code up the visual effect without having to constantly update multiple numbers to change the effect of any of those variables. Good script writing skills include the skillful use of variables and appropriate naming conventions. We found that variable names cannot have any spaces within the label. It is conventional to use an underscore or hyphen (dash) character in place of a space where desired.

Regarding varquad.html, we saw an example of integrating lessons learned through the study of Processing. We studied the quad() statement last week and Hyung was able to integrate the quad() into the datatypes example to get an interesting (some would say mesmerizing) effect. As I had introduced the concept of a state variable (direction) in our discussion, Hyung was able to create a second such variable and associate it with a different variable. Just by adding a second state variable (bdirection), the potential for visual effects increased significantly. In fact, each variable adds an exponential combination of possible variable states. The lesson being that complex visual effects can be created by manipulating a short list of variables in dynamic ways.

Regarding charstrings.html, we learned about another very useful built-in function: keyPressed(). The keyPressed function reports a built-in key variable that holds the ASCII value for the character pressed on the keyboard. More information on ASCII is here. We saw that we can cast the key variable to a string type through the str(key) command. In that case, we can see the key that was pressed on the keyboard symbolically instead of numerically. We learned that the text() can be used to draw text to the canvas, and that there are many different ways to define what that drawing experience should look like. We learned that the + operator performs concatenation instead of addition acting upon strings instead of numbers. We learned that we can write variable values to the Web console instead of the Web page by using the built-in print() or println() functions. This can be very useful for debugging code that isn't working as intended.

Regarding continuous.html, we saw the effect of using a built-in dynamic variable in the draw() function. Four built-in Processing variables provide information on the state of the mouse: the mouseX variable contains the current position of the mouse cursor left from the left canvas margin; the mouseY variable contains the current position of the mouse cursor down from the top canvas margin; the pmouseX variable contains the previous position of the mouse cursor left from the left canvas margin from when the draw() function last ran; the pmouseY variable contains the previous position of the mouse cursor down from the top canvas margin from when the draw() function last ran. As the mouse is a natural peripheral device to use with visual content, these variables are very useful for creating continuous effects while the user is exploring your content.

Regarding random.html, I asked that you explore that example and try to understand as much of it as you can on your own. Feel free to send me your attempt via e-mail and I can review it and comment on your thoughts. Otherwise, continue creating new examples of Processing use of interest to you or your classmates. Whenever you find or make something interesting, consider using the class distribution list to share with us all.