Exercises

Introduction: Exercise A (Due Wed. Apr. 1st) (Due Wed. Apr. 1st)

Required Reading:
What is Code?

This assignment is about getting familiar with the background of computers and interactivity in the arts. 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.

Form+Repetition: Exercises B and C (Due Wed. Apr. 8th) (Due Wed. Apr. 8th)

Required Readings:
Processing: Using Processing, Structure 1, Shape 1, Data 1, Math 1, Control 1, Control 2, Shape 2, Color 1

This assignment is about learning how to draw with processing and work with looping structures. 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. Have you code finished and ready at the beginning of class on the 8th. In class you will learn how to upload your assignments to the class website. Both exercises must be completed and posted to the site by the end of class on the 8th.

  1. Select and draw an area from Amy Sillman, Cliff1 or Dieter Roth, Shedheads at Oelper. Download the image and explore various cropping options before beginning to code. Both Photoshop andIllustrator are useful tools for selecting colors and determining angles and coordinates.
  2. Using only grayscale values, develop an abstract pattern reflecting 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.

Drawing + Text: Exercises D and E (Due Mon. Apr. 20th)

Required Readings:
Image 1, Data 2, Data 3, Typography 1, Development 1, Structure 2, Input 1, Drawing 1, Input 2, Input 3

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. Monday, Apr. 14th, bring three sketches for exercise D and three for exercise E. The programs must be uploaded to the server at the beginning of class on the 20th.

Exercise D. 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 E. 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 F (Due Wed. Apr. 22nd)

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 F. 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 Wed. Hand in your response (typed or printed) on an 8.5 x 11 inch sheet of paper.

Parameter + Event: Exercises G, H, and I (Due Mon. Apr. 27th)

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 27th.

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.

Project 1: Exploration + Interaction Design (Due Wed. May. 6th)

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 Wed. April 29,  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 Wed. April 29. On that day, be prepared to explain your concept, show your sketches, and talk about your ideas for writing the code.

Behavior+Intention: Exercise J (Due Mon. May. 11th)

Write a 250 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 intention. 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?

Objects + Behavior: Exercise K (Due Wed. May. 20th)

Required Readings:
Processing: Math 2, Math 3, Math 4, Transform 1, Transform 2, Motion 1, Motion 2, Data 4 , Structure 4, Structure 5

Write one Processing program each 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 26th.

Exercise K. This exercise uses objects to explore how to parameterize behavior. Write a class that represents some type of monster. Your class should accept parameters in the constructor that change both the look as well as the behavior of the monster. Create a composition featuring an instance of the class showing its behaviors. Following the rules of Processing Monsters, your monster should react to the mouse.  For example, it might get aggressive as the mouse gets close, or run away, or be curious or aloof. Think of the vehicles discussed in the Braitenberg text and how very simple motion and behavior can be interpreted as emotion.

Project 2: Play (Due Wed. Jun. 3rd)

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. Also look at the games linked here and find other games around you, cell phones, online etc.
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 Wed., May 27th. On that day, be prepared to show all of your sketches,  explain your concept, and talk about your ideas for writing the code. We will look critique and play your games as a class on Wed., June 3rd.