Exercises
Perform: Project 3 (Due Wed, Dec 3)
Required Readings
Chapter 5 of Myron Krueger’s Artificial Reality II entitled “Artificial Reality: A New Aesthetic Medium”
Extension 3 in the Processing book
Write one 1024 x 768 pixel Processing standalone application to complete Project 3. This project will not be uploaded to the class server; it will be demonstrated during a final critique on 3 December. This project allows for a great deal of freedom, but also has constraints. The interface and display are the constraints and you must collaborate with one other student.
Use the example “LED_Follow_05” as the basis for your program. To better understand how this program works, read Extension 3 in the Processing book and study the examples GettingStartedCapture and BrightnessTracking found in the Libraries examples.
Over the last nine weeks, we’ve been working with the constraint of using the mouse and keyboard as input devices and the screen as the output. For this project, instead of using the mouse or keyboard for the interface, you will use a computer vision system that allows two people to control the software at the same time. Each person has their own “cursor” that responds to a light. Each person’s control is constrained to one half of the screen (left or right). The software will be projected onto the wall and the users will stand in front of the projection to control it. The content for the project is open within the context of Krueger’s text. He introduces different ways to think about interactive software. For example, it can encourage dialog, amplify human gestures, create a space to explore, serve as an instrument, create a space for narrative, visualize the unseen, and can encourage play. Select one of these areas as a starting point, but you have complete freedom over the content beyond that. Think closely about the interaction between the two people, as well as between each person and the software.
Follow these steps to create the program:
1. Make paper sketches for at least five different ideas
2. Make refined drawings from sketches (on paper or in software)
3. Create rough media elements (drawings, photographs, generative graphics, etc.)
4. Realize the sequence in code, isolate each program element and add one by one
5. Complete a prototype program
6. Refine the media elements and code
Complete steps 1-2 by Wednesday, November 26. On that day, be prepared to explain your concept, show your sketches, and talk about your ideas for writing the code. We will discuss the ideas and select a direction in class. Complete steps 3-5 by Monday, 1 December.
Arrays + Multiples: Exercises L, M (Due Mon, Nov 24)
Required Readings
Processing: Data 4, Image 2, Structure 4 (Arrays of Objects)
Write one Processing program for exercise L and M. Each program must be 600 x 400 pixels in dimension. Explore ideas and compositions on paper and/or software tools such as Photoshop and Illustrator before beginning to code. The programs must be uploaded to the server at the beginning of class on the 24th.
Exercise L. Write one class to create one monster object. Follow the rules for Processing monsters, “Strictly black and white and mouse reactive.”
Exercise M. Use one array of objects and for structures to control the motion of between nine and ninety-nine monsters. Give each monster slightly different parameters to make each a little different. You may want to modify your monster class to make them smaller and/or to have them to respond to each other.
Play: Project 2 (Due Mon, Nov 17)
Project 1 focused on selected different screens (modes) by making choices. Project 2 is about a continuous, fluid interaction. Write one 600 x 400 pixel Processing program to complete Project 2. Use one of more classes to structure your code. Remember, think and sketch before you code.
Develop a simple one button game, meaning the interface is a single button. Focus your ideas on expressing a theme while making an interesting experience. Do not be overly concerned with how the game behaves technically, great games can be made very simply. Instead consider how common video and board games operate and what features of these artifacts you can reinterpret in interesting ways. The game need not involve scores or levels; it can be a playful experience. Remember that conceptual and visual development is as important as technical achievement. You are not constrained to Haeckel images (like in Project 1), but you may only use visual elements that you have created (drawings, photographs, geometry, collages, etc.) Using the language in the above “one button game” link, your game must have at least one playfield, toy, player toy, action, and activity.
Follow these design process steps to create the program:
(Conceptual Design)
1. Further familiarize yourself with the two articles linked above and think about your process and different ways to approach this project.
2. Make paper sketches for at least 10 different ideas (on paper or in software)
(Design Development)
3. Make refined drawings from your one or two best ideas (on paper or in software)
4. Develop a plan for writing the code to implement your best idea.
5. Create your media elements (drawings, photographs, generative graphics, etc.)
(Implementation)
6. Create a prototype by realizing the idea in code, isolate each element and add one by one
(Refinement)
7. Refine the media elements and code
Complete steps 1-5 by Monday, November 10th. On that day, be prepared to show all of your sketches, explain your concept, and talk about your ideas for writing the code. Complete steps 6 by Wednesday, November 12th.
Objects + Behavior: Exercise K (Due Wed, Nov 5)
Required Readings:
Processing: Math 2, Math 3, Math 4, Transform 1, Transform 2, Motion 1, Motion 2, Structure 4
Write one Processing program to complete exercise K. The program must be 400 x 400 pixels in dimension. Explore ideas and compositions on paper and/or software tools such as Photoshop and Illustrator before beginning to code. The programs must be uploaded to the server at the beginning of class on the 5th.
Exercise K. This exercise uses objects to explore how to parameterize behavior. Write a class that represents some type of creature. Your class should accept parameters in the constructor that change both the look as well as the behavior of the creature. Create a composition featuring two instances of the class, each of which behave differently in response to each other. For example, on might get aggressive as the two get close, while the other might run away, one might be curious while the other is aloof. Think of the vehicles discussed in the Braitenberg text and how very simple motion and behavior can be interpreted as emotion.
Behavior + Intent: Exercise J (Due Mon, Nov 3)
Exercise J: Write a 250 to 350 word response to the reading from Valentino Braitenberg’s book “Vehicles.” Although much of the text deals with sensors and response, also consider how Braitenberg connects behavior with intent. In other words, by describing the way each vehicle behaves in terms of motion, he makes assumptions about what those movements mean in emotional terms. What can you learn about how behavior and motion can be used to represent emotional states? Can you think of other emotions that can be represented by movement? How do you feel about Braitenberg reducing emotions like love and hate to simple input and response?
Exploration + Interaction Design: Project 1 (Due Wed, Oct 29)
Required Viewing
Watch the videos from the Designing Interactions book by Bill Moggridge: Doug Engelbart, Terry Winograd, Bill Atkinson, Bill Verplank, Gillian Crampton Smith
Write one 600 x 400 pixel Processing program to complete Project 1.
Write a program that creates a story in response to user choices or actions. The program should show some introductory material to create a background for the story, and require the user to type, click, or somehow interact to control how the story unfolds. Your story should have at least three points asking for, and responding to, user input. You may write your own story, or create an interpretation of a pre-existing one. The style of your program can be more straightforward as in a Choose Your Own Adventure book, or more playful and interpretive. You may use images and/or text to tell each part of the story. You are constrained to using images found in Art Forms in Nature by Ernst Haeckel, (1898). No other images may be used, but you are free to modify and adapt these images.
Follow these steps to create the program:
1. Make diagrams and sketches for at least 10 different ways to tell your story. You should have 10 different story diagrams and a series of image explorations. Refer to the Chimney Rock Outline when creating your story (yours should probably not be this complex).
2. Make refined sketches of your story (on paper or in software.)
3. Make a usable paper prototype of your story on 4 x 6 inch cards. Each card should correspond to one screen in your software. Bring this to class on Monday for other students to explore, they should be able to follow your story by reading the text and moving from card to card. The cards should be printed from digital files; each card should be a refined sketch for the final software.
4. Realize the sequence in code, isolate each element and add one by one
5. Refine the media elements and code
Complete steps 1-3 by Monday. On that day, be prepared to explain your concept, show your sketches, and talk about your ideas for writing the code.
Parameter + Event: Exercises G, H, and I (Due Wed, Oct 22)
Required Readings
Processing: Input 3, Input 4, Input 5, Structure 3, Shape 3, Development 2
Write one Processing program to complete each exercise G, H and I. Each program must be 400 x 400 pixels in dimension. For each exercise, explore ideas and compositions on paper and/or software tools such as Photoshop and Illustrator before beginning to code. The programs must be uploaded to the server at the beginning of class on the 23rd.
Exercise G. Use code 26-08 as a base to write a program that asks a question, receives a response from the keyboard, and then responds. Use only grayscale text — no images or illustrations.
Exercise H. Use the code introduced in Input 2, 3, and 4 to create a relationship between the mouse and a gray square on a black screen. Treat the square as a creature who is on the screen, but with a personality that is revealed as the mouse is moved in different ways (fast, slow, up, down, clicking rapidly, etc.) Incorporate the mousePressed(), mouseReleased(), mouseMoved(), and mouseDragged() functions. Do not visually embellish the square; convey its personality through its motion and response.
Exercise I. Create a function that draws a simple building. Use two (only two!) parameters to change the shape and features of the building and two additional parameters to set its position. Using your function, draw nine versions in the display window in a regular 3 x 3 matrix. Use different parameters for each building drawn to give each a unique shape and features.
Drawing + Text: Exercises E and F (Due Wed, 15 Oct)
Required Reading
Processing: Image 1, Data 2, Data 3, Typography 1, Development 1, Structure 2, Input 1, Drawing 1, Input 2, Input 3
Write one Processing program to complete exercises E and F. Each program must be 400 x 400 pixels in dimension. For each exercise, explore ideas and compositions on paper and/or software tools such as Photoshop and Illustrator before beginning to code. The programs must be uploaded to the server at the beginning of class on the 15th.
Exercise E. Make a custom drawing tool that creates a different quality of marks when the mouse is pressed and not pressed. What is your drawing tool designed for? How does the types of drawings it encourages reflect its intent? Make at least 3 drawings and bring them with you (printed on one page) to class.
Exercise F. Create an alphabet book from A to E, with each “page” triggered by the keyboard. Use typography and images to illustrate each letter. How can you make the images unique to your personality and point of view. Consider using the mouse to animate each letter’s vignette.
Interactivity: Exercise D (Due Mon, 13 Oct)
Required Reading
Noah Wardrip-Fruin. Expressive Processing. Read the following two posts: 1, 2.
Dag Svanæs. Understanding Interactivity: Steps to a Phenomenology of Human-Computer Interaction. Read pages 1 - 5 (13-17 of the PDF).
Chris Crawford. Chris Crawford on Game Design. Read pages 71 to 81.
This assignment introduces some basic points of view around the theme of interactivity.
Exercise D. Write a 250-350 word response to some aspect of the reading assignment. Think about the following questions while writing your response:
+ What does is mean to author a process?
+ What is unique about computational media?
+ What does the term feel refer to in look and feel?
+ What is more interactivity and is it better?
Don’t use generalizations exclusively, provide one or more specific examples. We’ll discuss your answer at the beginning of class on Monday. Hand in your response (typed or printed) on an 8.5 x 11 inch sheet of paper.
Form + Repetition: Exercises B and C (Due Wed, 8 Oct)
Required Reading
Processing: Using Processing, Structure 1, Shape 1, Data 1, Math 1, Control 1, Control 2, Shape 2, Color 1
Write one Processing program to complete exercises B and C. Each program must be 400 x 400 pixels in dimension. For each exercise, explore ideas and compositions on paper and/or software tools such as Photoshop and Illustrator before beginning to code. The programs must be uploaded to the server at the beginning of class on the 15th.
Exercise B. Select and draw an area from Stuart Davis’ New York Waterfront. Download the image and explore various cropping options before beginning to code. Both Photoshop and Illustrator are useful tools for selecting colors and determining angles and coordinates. Include comments in your program to explain what you are drawing with each group of code.
Exercise C. Using only grayscale values, develop an abstract pattern that reflects the structure of one of your favorite songs. Use three or more “for” structures. Include comments in your program explaining which song you selected and how you interpreted its sonic structures into visual patterns.
Introduction: Exercise A (Due Wed, 1 Oct)
Required Reading
Handouts: What is Code?
This assignment is about getting familiar with the background of computers and
interactivity in the arts.
Exercise A. Write a 250-350 word response to “What is Code?” Think about the following questions while writing your response:
+ How do you usually create visual media and how is the approach of programming visual media different?
+ How have computers impacted the arts and design?
+ Do you think “Procedural Literacy” is a skill in the computer age?
+ How are technologies that enable interactions between people and machines changing our culture?
Don’t use generalizations exclusively, provide one or more specific examples. We’ll discuss your answer at the beginning of class on Wednesday. Hand in your response (typed or printed) on an 8.5 x 11 inch sheet of paper.