This project, the 4th unit in a year-long high school introductory programming course, teaches students how to write programs that draw text objects in an individually designed word cloud. It uses the programming language, Processing (www.processing.org), which is a simplified form of Java.
In the 1st section of the project, students learn these new text methods, and are introduced to the for-each loop. They learn how to isolate transformation operations [ translate() / rotate() ] - that are used to render each word - from having side-effects on subsequently drawn words by book-ending drawing commands between pushMatrix() and popMatrix() calls. In the 2nd section, students derive and implement the mathematics involved in animating the word cloud.
The Word Cloud program intertwines these new concepts with the major programming concepts revisited from the first 3 units: variables, conditional statements, Boolean expressions, arrays, classes, iteration and movement.
Summary of the objectives of this assignment:
- Students study and use methods to output and position text objects, learning options for font, size, color, angular orientation, and alignment.
- Students study and use methods that manipulate the transformation matrix, specifically translation, rotation, and pushing and popping matrices (to isolate side effects).
- Students learn to use the random() method to position each word randomly on each of the window's 4 edges.
- Students (a) observe side-effects that occur when one alters the order of conditional statements; and (b) learn to program defensively to avoid such side-effects.
- Students learn to use advanced mathematics methods, in this case map(),to perform the calculations for a word's movement over time.
- Students learn the use of boolean state variables to stop and start movement.
1. The use of counter-examples, a fundamental strategy in mathematics instruction, is particularly well-suited to programs where graphics output is immediate. For example, the effects of translate() - which moves the origin from the top-left corner - and rotate() - which rotates the matrix about the origin, wherever it is - are fairly straightforward to demonstrate when rendering a single word object. However, when two word objects are drawn in succession, the 2nd word object is rendered relative to whatever position and/or angle the 1st word object has moved and rotated the origin, i.e. there is a side-effect. Such an exercise demonstrates the need for book-ending all transformation operations between pushMatrix() and popMatrix(), which together restore the origin to the top-left corner and the plane rotation to 0° (horizontal), and allow word objects to be drawn independently of one another and in no particular order.
2. To simplify the derivation of the algebraic expressions for the dynamic (x,y) coordinates of words as they move from an edge to their final positions, we examine one-dimensional movement, i.e. the horizontal movement in isolation from the vertical. I also utilize another mathematics strategy: concrete first, abstract second. That is, I give the class specific numbers for an object's starting and final positions and the time to travel the distance between the two, and ask where the word will be at, say, 2 or 3 seconds. All students are able to do the correct calculation, but unable to immediately formulate the correct algebraic expression until I press them to analyze exactly what their reasoning was step-by-step. For example, if starting and final positions are 100 and 500 respectively, and the time of 10 seconds to travel between the two, students are eventually able to construct the expression: 100 + (500-100)*(secs/10). They can then easily substitute in the abstract variables to get an expression for the intermediate position, which seemingly magically produces the predicted results when translated into the program.
When later transitioning to using the map() method, making a drawing of the source range above/below the target range and connecting the ends of each allows students to visualize how they can use proportions to predict an intermediate target point given an intermediate source point.
3. I have found that students are more satisfied (motivated) if they create a Word Cloud that "works" aesthetically. Taking time to critique word clouds as they are being constructed, and pushing students to consider spacing, sizing, placement and other artistic issues, is well worth it in terms of student buy-in, as well as student self-confidence.
TEACHING APPROACH
Based upon teaching methods I've been developing over the last several years that recognize the importance of - and incorporate - implicit language instruction into the introductory programming course (described in my M.S. Thesis, linked below), students reengage each unit's central program multiple times from varying angles and in varying step order in order to deepen and formalize conceptual understanding.
Thus, the student-facing instructions for Part 2, Building the DYNAMIC Word Cloud Program Step-by-Step (linked below) has students reconstruct the program in a somewhat different order. Although the requirements for each mini-program are given in the instructions, students can reference how the dynamic output (animation) will look/behave on a web page (Visuals for Part 2, linked below).
Processing, a simplified form of Java, has a graphics layer that allows students in the first few minutes of the course to write programs that generate graphics output. In this assignment, each student is able to creates a static Word Cloud--a type of graphic that most students will be familiar with--of her own design. Once finalized, the student modifies the Word class to animate each of the composition's text elements (kept in a list of Word objects), directing each to migrate from a random position on one of the window's 4 edges to its final position, cycling between moving and resting states every 5 seconds.
Student Choice is incorporated after students learn to program the Word class. They can then position Word objects (letters, words or phrases) using specific coordinates, rotational angles, sizes and colors, and whatever fonts are on their device. Students are shown several examples of Word Clouds, but most opt to use thematic words related to books, movies, songs, or other literary texts. The instructor should engage with the students designs as they work, encouraging them to consider various factors that might strengthen their composition.
The course consists of cross-curricular units, contextualized within disciplines across the academic spectrum, including biology, astronomy, political science and geography to engage students and help them see interdisciplinary connections. This lesson, like all of the units & lessons in the entire first semester, are contextualized within the field of Graphic Art, specifically Dynamic Art / animation. A UCOP-approved course outline can be found in Part 2 of M.S. Thesis (link below).