The Processing programming language is used to get a first overview of fundamental programming techniques. Teaching time will be divided between lectures, tutored sessions and presentations of students' solutions. All lectures will be complemented by practical programming assignments, some of which will be small and clearly focussed (at the start of the semester), while others will be more open to artistic or playful interpretation (towards the end of it); all will be done individually except the last one which is done in teams. Participants are asked to manage their own time; the exercises are divided into groups, usually including a mix of approaches, requirements and techniques. Participants will go through cycles of learning something and using it for cool stuff; then learning some more, and using that; the cycles get bigger and more challenging during the semester. I recommended to get a (hard- or digital) copy of the well-known Processing book by Reas, Fry (2007). The course loosly follows it, and I find it well-written and reasonably easy to understand. There are several other Processing books available, e.g. by Greenberg (2007), Shiffman (2008), Noble (2009), and Bohnacker et al. (2012), which I find not as well-suited to our introductory course (but do what works for you). Every week there is a lecture; the exercises are introduced and explained. After the lecture everybody can work on the exercises in the lab. At the end of each day participants are asked to present something they have done on that day.
Exercises Week 2–3 1. Write three comments in Processing. All following programs must have meaningful (non-trivial) comments that explain the big picture of what is going on. 2. Write these same comments as a multi-line program header. All following programs must have a header. 3. Write a program which will produce a 640x480 pixel display window with a black background. 4. Use print() and println() to write some text to the console [Reas, Fry 2007:21]. Make the difference clear. 5. Create an original composition by carefully positioning one grey line and one white ellipse on a black background. 6. Modify the code to change the fill, stroke, and background values. 7. Create a visual knot using only Bézier curves [Reas, Fry 2007:35]. See Roy Lichtenstein's screenprint Brush Stroke (1965, Figure 1) for inspiration. Figure 1. Brush Strokes 8. Create a composition that scales proportionally with different window sizes. Put different values into size() to test [Reas, Fry 2007:41]. 9. Use one variable to set the position and size for three ellipses (if it is unclear what a 'variable' is, look it up in the book). 10. Use multiplication to create a series of lines with increasing space between each [Reas, Fry 2007:50], e.g. with a for loop. 11. Create a composition with a series of lines and ellipses. Use an if structure to select which lines of code to run and which to skip. Use if in a sensible way, e.g. inside a loop. 12. Add an else to the code to change which lines of code are run [Reas, Fry 2007:59]. Use if and else in a sensible way, e.g. inside a loop. 13. Draw a regular pattern with five lines (not lines of code, btw). Rewrite the code using a for structure [Reas, Fry 2007:68]. 14. Generate a basic grid using adjacent points (i.e. do not use the line command). 15. Experiment with altering spacing between the points which comprise the lines in the grid (also, do not use the line command). 16. Use the random() function to create some interesting grids (a grid is not any arbritrary pattern). 17. Draw a dense pattern by embedding two for structures. Exercises Week 4–5 18. Create a grid of squares (each colored randomly) using a for loop. (Hint: You will need two for loops!) Recode the same pattern using a while loop instead of for [Shiffman 2008:97]. 19. Write a function to draw a shape to the screen multiple times, each at a different position (if it is unclear what is meant by 'function,' take a look in the books). Call the function several times for this. Use one parameter to control the position. 20. Extend the function by creating more parameters to control additional aspects of its form (i.e. beyond its position). 21. Write a function to use with a for structure to create a pattern evoking a liquid shiny substance [Reas, Fry 2007:196]. 22. Make a shape move with numbers returned from sin() and cos() [Reas, Fry 2007:299]. 23. Move two shapes continuously, but constrain their positions to the display window (do not use any sine function; the forms should not just repeat the same simple motion over and over). • 24. Implement a four-letter word generator (similar to Norman White's machine (1974), Figure 2). If you need more than 6 lines of code (not counting {}) for a basic working program, something can be improved. 4 lines would be good for a minimal program with full points. If your program has more than 250 lines of code something is seriously wrong. (10 points) Figure 2. Four-Letter Word Generator 25. Snow-in a letter, load background picture of a letter at startup, snow flakes move downward and stop falling down when they land on something that is not e.g. black i.e. not the background (use classes and objects). (Bonus exercise 15 points) • 26. Make an old school text scroller. Usually, this involves a black 'space' background, one line of text in a cool font coming in from the right, possibly some stars and whatever you like flying in e.g. sine waves (use classes and objects). (15 points) Exercises Week 6–7 • 27. Interpret a well-known (graphical) artwork with computational methods. Lots of possibilities to try something interesting, e.g. interpret a static artwork to include animation or interaction; take an artwork as starting point and develop and automatically produce a class of pictures based on it. Do not use (e.g. load and display) an actual image of the artwork and e.g. filter it, but play with the parts, color, pattern or content of the artwork. Include a short info on the artist and artwork (and a picture of it) in the hand-in. (15 points) • 28. Implement a simple shooting gallery-style game in which different animal shapes come in from the side(s) onto the screen and can be shot using the mouse pointer. It should not be easy to hit all the animals. If hit, something should happen to indicate the hit. Use classes and objects. (20 points) Exercises Week 8–9 • 29. Make a rainbow. This exercise should involve different start and end colors for the rainbow, these colors are changed by the user during run-time (and there are several possibilities for that), and two different color transitions between the start and end colors (i.e. two different ways to incrementally and gradually change from one color to the other, e.g. with two for loops). Do not draw ellipses in random colors on the screen. (25 points) 30. Use translate() to reposition a shape. 31. Use multiple translations to reposition a series of shapes. 32. Use pushMatrix() and popMatrix() to rearrange the composition [Reas, Fry 2007:135]. Use in a sensible way. • 33. Animate the Solar system in 2D using matrix operations (translation, rotation, scale) to rotate planets around the sun. Use classes and objects. (20 points) • 34. Read and comment this piece of code. Write a short text: Describe what happens in the algorithm; what is the name of the algorithm? What are its advantages and disadvantages? Suggest a better algorithm. Describe how it works. Why is it better? (20 points) [code omitted due to technical issues] Exercise Week 10–11 • 35. Implement a version of Space Invaders (1978, Figure 3) for two (or more) simultanious players. This results in a playable, interesting and finished game (including e.g. starting the game, winning/losing, score, restart). Use a projectile gun (not a laser) as player weapon. Use classes and objects for players, invaders and shots. Work in two-person teams. (40 points) Figure 3. Space Invaders Coding Rules of Thumb Demonstrated understanding of programming concepts often shows in programs that ∙ have headers ∙ have non-trivial comments that describe the big picture and the key aspects of what is going on ∙ are formatted properly (indentions, blank lines, brackets) ∙ cite sources, name references ∙ use more than one file (e.g. when using classes) ∙ use variables instead of magic numbers ∙ name variables and functions to explain their use (iStuffThat, bGetState) ∙ do use only as many variables as needed ∙ use only a minimal number of global variables ∙ use functions ∙ use classes and objects ∙ never repeat their code ∙ use constructs in a clever way (loops etc.) ∙ choose from a large range of constructs (for, while, do, if, else if, if &&/||, case, arrays, etc.) ∙ use the appropriate tools (i.e. functions, structures) for the job ∙ do not do any slow stuff inside of loops, e.g. load images from disk in draw() ∙ are elegant and short ∙ are careful with boundaries (arrays, screen, etc.) ∙ function with different screen sizes ∙ can draw on the books but change the examples significantly ∙ fulfill the exercises to the letter and interpret them in a novel/original way ∙ are fast ∙ are not depending on the computer speed (framerate) but use the elapsed (real) time; this applies to all programs which use movement or animation ∙ are interactive ∙ are unusual, fun to use and produce nice output