28: Interactivity - Projects

Project 1: DRAW

Getting Started with p5.js:

  • Hello
  • Starting to Code (skip)
  • Draw
  • Variables
  • Response
Learning Processing Videos: Read and watch all of the media in time for class on Monday. Type and run the programs as you read the text. Create an account and write the code at http://alpha.editor.p5js.org/


For Project 1C, you will write code to create software specifically for drawing portraits. Your software should be minimal, but it should be capable of creating unique drawings. How is drawing with software the same or different from drawing with traditional tools? How might drawing tools be reimagined with current software and emerging media? Projects 1A and 1B are warm ups.

For each part of the project, make the canvas 600 x 600 pixels. Everything must be uploaded to OpenProcessing by 9am next Wednesday, April 25th. We'll discuss uploading to OpenProcessing in class.

PART A (2 points)
Use the mouseX, mouseY, and mouseIsPresssed variables in a program to make the simplest drawing program you can imagine, but with a slight twist.

PART B (3 points)
Start with your code from Part A and add the keyPressed() event function to clear the screen with a different color when each of the keys 1-5 is pressed. Select your colors thoughtfully and carefully.

PART C (10 points)
For the next class on Wednesday, April 18th, prepare a storyboard as a PDF to communicate three ideas for Project 1C. The PDF must be 1920 x 1080 pixels in dimension and it must be three pages, one page for each idea. We will review it in class one on one. Remember to keep the idea minimal so that it can be realized within a week. Plan more than one kind of drawing tool for your software, but not too many. Avoid visual interfaces like buttons; we will cover switching between tools with the keyboard in Workshop 6.

Your projects are due as p5.js "sketches" on OpenProcessing and for 5C, as five individual PNG files of drawings you created with your software. Upload your PNG files uploaded to the "_Project_1" folder in the "drop" folder on the class server before 9am. We'll review the work then.

Project 2: EXPLORE

Getting Started with p5.js:

  • Variables (read again)
  • Translate, Rotate, Scale
  • Media
  • Functions
Web: Learning Processing Videos: Read and watch all of the media in time for class on Monday. Type and run the programs as you read the text.


As demonstrated by the examples discussed in class, software makes it possible to compose nonlinear experiences that are unique to the medium. The viewer navigates through a space of choices to define a media experience according to her decisions. These experience can feel like games, but they need not have a "goal" or "score." For each part of the project, make the canvas 600 x 600 pixels. Everything must be uploaded to OpenProcessing by 9am next Wednesday, May 9th.

PART A (2 points)
Load three images, at least one a PNG with transparency, and create a collage that changes its composition with mouseX and mouseY. Use at least one of the transformation functions: translate(), rotate(), or scale().

PART B (3 points)
Create a composition with five rollover buttons. Use the overCircle() and overRect() functions to create the rollovers.

PART C (10 points)
Create a small visual world for a viewer to explore. As a point of departure, think about Zork or Howling Dogs, but with images in place of text. (Use your own images, either illustrations, diagrams, photographs, or collages.) The world is composed of three to six "rooms." The viewer can choose to navigate between these rooms with buttons that you create. The viewer can also explore and activate events in each room through rollovers and clicking on elements.

Start the project by creating a storyboard and a diagram of how the screens relate to each other. For example, "room 1" can lead to "room 2" or "room 5" if different buttons are clicked. Create the file as a PDF that is 1920 x 1080 pixels. The point of this document is to communicate the idea of your project to other people and to clarify the project for yourself. This document is due on Wednesday May 2nd at 9am. We will discuss it in class.

Use custom functions to make your code modular. As a hint, create one function for each "room." Use the overCircle() and overRect() functions for creating the rollover interactions. Compose the world with images loaded into the program with loadImage() and drawn with image(). The content, audio, and visual style of the world is entirely your decision, but adhere to the project constraints (i.e. three to six "rooms") to fit the complexity of the project to the short timeline.

Project 3: PLAY

Getting Started with p5.js:

  • Variables (read again, focus on 'for' loops)
  • Motion (focus on Frames, Random, Timers)
  • Arrays
Learning Processing Videos: Read and watch all of the media in time for class on Monday. Type and run the programs as you read the text.


For the third project, you will create an arcade-style video game. Unlike Project 2, which focused on slowly moving through a series of screens and options, Project 3 is performed with elements that are moving and interaction with the elements that are more direct. We have a shared set of constraints to limit the complexity of this ten-day project. First, the game must be 2D. Second, the graphics can only be simple geometric shapes drawn directly in code like a circle, line, and rectangle. Third, the game can only use a maximum of six elements on screen at a time. These constraints encouage a focus on the aesthetics of motion and interaction. All of these constraints will be lifted later if Project 3 is continued as the final project. You are free to use color and audio.

Everyone in the class will share the same minimal game mechanics (gameplay) so you can place more focus on the experience of playing the game and the details of the motion and game interactions. For each game, "things" will enter onto the screen and the keyboard or mouse will control a shape that needs to avoid and/or catch the "things." For example, check out the games High and Frogger.

To start, develop a one-page storyboard for three unique game ideas. (3 games ideas + 1 storyboard for each = 3 pages.) Use this template for the storyboard. Either hand draw or use software to create the game diagrams and descriptions. This PDF has a few examples of how to make a storyboard for a game. The important things to communicate in the storyboards are the details of the gameplay. Use a mix of illustrations, notations, and text to communicate clearly.

After you select your game idea in class on Wednesday, figure out two short mini programs to break your game into smaller pieces. We discussed an example in class with the Pong game. Write each of these programs separately to work through the tricky parts of your game and then put them together into a working game prototype. This should all be done prior to Monday.

DUE 5/16
Storyboards for three unique game ideas due. We'll need to balance the time in class discussing these storyboards with the workshop.

Due 5/21
Be prepared to show code for the two mini programs, 3B and 3C, and how they fit together into one program, the first prototype of 3C.

Due 5/23
Full class review of completed game

PART A (2 points)
The storyboards

PARTS B,C (3 points)
Projects 3B and 3D are the two small technical programs to work out needed details for the games.

PART D (10 points)
The finished game. The game needs to have three "screens." Begin the game with an opening screen that allows the player to start playing the game. An end (game over) screen needs to have the option to restart the game. Think carefully about how the player learns how to operate and perform the game. For instance, is there a way to do this without needing to read a long list of instructions? If you are using the keyboard to move things for a one-player game, use W (up), A (left), S (down) and D (right) as the main keys. If it's a two-player game, use the arrow keys for the second player. Define the size of the composition as 600 x 600 pixels with createCanvas(600, 600).

Project 3A is due on the class server in the "drop" folder. Parts 3B and 3C are due on Monday 5/21 at 9am through links in a Google Sheet. Part 3D is due at 9am on 5/23 as a link in the same spreadsheet. The link to the spreadsheet will be sent through a class email.


Getting Started with p5.js:

  • Arrays
  • Objects
Learning Processing Videos: Read and watch all of the media in time for class on Wednesday (Monday is a holiday.) Type and run the programs as you read the text.


We have three weeks left to turn Project 1, 2, or 3 into a final project. Continue the work and ideas that you created for one of these projects and expand the idea beyond the original two weeks into a project that will be completed for the final review on June 13th.

For Wednesday, May 30th, have a definitive answer to the question, "Which project will I continue for the final?" and have new work completed on the project. Arrive in class with a one-page paper document that includes a description of your project and a calendar that shows your deadlines/goals to have completed during the following days in class, including that day: 5/30, 6/4, 6/6. Tell us clearly what work you hope to complete for each remaining day in class. Alice will collect this document in class and it will be used as a guide for the remaining studio sessions.

You might want to utilize code objects, arrays, or arrays of objects for your final project, but it's not a requirement. After you read and watch the media, ask a question if you're not sure what is right for your project.

Interaction Considerations:
Primary platform (phone, computer, installation, TV)
Interface (touch, keyboard, mouse/trackpad, other)
Resolution (1920 x 1080, 1280 x 720, other)

On June 13, you will have an individual meeting with Casey and Alice to review the final project.

Exercise 1: Hypertext

Use Twine to create a nonlinear narrative. Select an existing work of fiction (short story, tall tale, fairy tale, myth, tv show, film, etc.) and adapt it to a 12-24 screen hypertext story. This exercise is due at 9am on April 4th. Export your Twine project by selecting "Publish to File," then upload the "yourname.html" file to the class server in your "Exercise 1" folder. If you're using the web version of Twine (not the downloaded version) your project is stored as a "cookie," read this information to make sure your story isn't deleted.

Exercise 2: Multimedia Authoring

Use Scratch to create a media experience that uses interactivity, motion, and sound. The idea of "remixing" is a part of Scratch culture. Start with one of the projects on the Starter Projects page and remix it according to your own ideas and aesthetic sensibilities. After you create your account, select a project, then select "See inside," then "Remix" to get started. Balance ambition and simplicity; the goal isn't to become an expert in the details of Scratch, it's to gain experience creating interactive media. However, make sure you change the instructions and not just the images. Exercise 2 is due at 9am on April 9th. To turn in your work, "Share" your exercise through the Scratch system. We'll add your URL to a shared spreadsheet at the start of class on the 9th.

Exercise 3: Draw and Explore

Use FlickGame to draw a multi-screen environment to explore. The content and visuals for the exercise are entirely open ended, but have at least 12 screens and nonlinear pathways to explore. Exercise 3 is due at 9am on April 11th. To turn in your work, "export" your exercise through the FlickGame system, then upload the "yourproject.html" file to the class server in your "Exercise 3" folder.