28: Interactivity - Projects

Project 1 / Statements, Variables, and Systems

Media

Getting Started with p5.js:

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

Description

Create simple, minimal visual systems that transform through the movement of the cursor. For each part of the project, make the canvas 600 x 600 pixels. Everything must be uploaded to OpenProcessing by 9am next Wednesday, January 18th.

Carefully read these two online posts by Rune Madsen. Be sure to follow the links within the text to get the full information.

PART A (2 points)
Draw a circle in the center of the canvas. Use two variables to change the circle (color, size, etc.) as the cursor moves around the screen.

PART B (2 points)
Draw three vertical lines, each with a different relation to the cursor. Use map() to convert the numbers from mouseX and mouseY to new numbers to control the positions of the lines.

PART C (6 points)
Design a simple composition in Illustrator with a small set of shapes. Code the composition with p5.js and use mouseX to transform it as the mouse moves around the screen. Remember the examples we discussed in class, the Sagmeister examples for the "idea" of the project and the simpler Gerstner and Munari examples for level of expected detail. The focus of the project is not only how it "looks," but how it "changes."


 

Project 2 / Conditionals and Drawing

Media

Getting Started with p5.js:

  • Response (read again)
Videos: Read and watch all of the media in time for class on Monday. Type and run the programs as you read the text.

Description

There's a long history of writing software to allow people to draw on computers. From the light pen, to the mouse, to touch screens, some of these programs are basic and some are bursting with features; some are serious and others are whimsical; some are general and others are as unique as the individual who wrote them. For each part of the project, make the canvas 600 x 600 pixels. Everything must be uploaded to OpenProcessing by 9am next Wednesday, January 25th.

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 (2 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 (6 points)
Write a drawing program in the tradition of Kid Pix. Include, at the minimum, at least two different tools for making marks and two other features. Create an interface to select which tool to draw with, by creating buttons and/or by using the keyboard. Have a clear point of view about drawing that is expressed through the design of your program. How is your drawing program unique and what is it for? Write a detailed comment at the top of the code that explains the core idea of the software.


 

Project 3 / Loops and Patterns

Media

Getting Started with p5.js:

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

Description

Visual patterns are an integral part of culture. From ancient pottery, to weaving, to architecture, repetition and geometry are traditional and contemporary human constructions. As technology has shifted, so has the ability to explore and express visual patterns and code is the latest method of discovery. Specifically, the 'while' and 'for' loop can be used to run one line of code hundreds or thousands of times to define and layer form. For each part of the project, make the canvas 600 x 600 pixels. Everything must be uploaded to OpenProcessing by 9am next Wednesday, February 1st.

PART A (2 points)
Use three loops and the text() function to draw the following to the screen: the numbers 0 to 40, counting up by 2; the numbers 100 to 1000, counting up by 100; the numbers 90 to 5, counting down by 5. Pay attention to the layout and typography, not only the numbers.

PART B (2 points)
Embed one 'for' loop inside another to create a matrix of dots and/or lines of your own original design.

PART C (6 points)
There are a few ways to approach Part C. The essence is to choreograph a set of visual patterns made with 'for' loops to a 30 second clip of music. First select the music and edit it down to 30 seconds if needed. Audacity is a good FOSS program to use to do this. Next, sketch and then later code the visual patterns. Then, start to draw them to the screen in relation to what is happening in the music. A minimal way to complete Part C is to create five or so static, visual patterns and at different times within the 30 seconds of audio, hide and draw different patterns with 'if' stuctures. A more ambitious way is to create a visual pattern that is animated, either based on the passage of time in the song, or based on the volume (amplitude) of the audio siginal. I created a template to get you started and the p5js.org website has a clean example that shows how to use the amplitude of the audio as a variable if you want to pursue that route.


 

Project 4 / Functions and Nonlinearity

Media

Getting Started with p5.js:

  • Media
  • Functions
Web: Videos: Read and watch all of the media in time for class on Monday. Type and run the programs as you read the text.

Description

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, February 8th.

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.

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

PART C (6 points)
Create a small visual world for the 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 "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. 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 "rooms") to keep the complexity of the project to the one-week deadline. I created a template to get you started. Note, the template doesn't include the overRect() or overCircle() functions, figuring out how to integrate them is a part of the project.


 

Project 5 / Arrays and Animation

Media

Getting Started with p5.js:

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

Description

Looping animations have fascinated people since the nineteenth century. Devices like the phénakisticope, zoetrope, and praxinoscope predate the cinema by decades and animated GIFs by over a century and a half. Beyond continuous loops, with code we can play a sequence of images in a nonlinear way; we can control more than the direction and speed at which the images appear. For each part of the project, make the canvas 600 x 600 pixels. Everything must be uploaded to OpenProcessing by 9am next Wednesday, February 15th.

PART A (2 points)
Research the history of phénakisticopes, zoetropes, and praxinoscopes and select a vintage sequence of images to animate with code. First prepare the images in a program like Gimp or Photoshop, then write a program to display these images in a continuous loop.

PART B (2 points)
Modify the code from Part A so your animation loop can be "performed" with the mouse. How does moving the mouse, clicking the mouse, and/or clicking the mouse at precise locations control how the frames are displayed; can the animation be triggered, paused, reversed, slowed down, etc.?

PART C (6 points)
Create your own, unique twelve- to twenty-four frame animation. Draw, photograph, or render the frames. Like Part B, invent a way to "perform" these images with the mouse and/or keyboard. Do you want the viewer to navigate through the images with the motion of the mouse, with a GUI interface, or some combination of the two? The primary goal for this project is to create a meaningful way of performing the animation, something beyond merely playing through the loop like a GIF. We're exploring what interactivity can offer beyond linear playback. If your idea requires loading more than one set of looping frames, go for it, but remember it's a one-week project.


 

Project 6 / Objects and Behavior

Media

Getting Started with p5.js:

  • Objects
  • Motion (Speed and Direction, Tweening, Circular)
Videos: Read and watch all of the media in time for class on Monday. Type and run the programs as you read the text.

Description

We will do two things with Project 6. First, we will learn about a new way to organize our code. We will organize variables and functions into groups called objects. Second, we will learn more about how to animate with code and how to program behaviors. During the class so far, we have animated and activated things on screen directly with the mouse and keyboard. For instance, the position of an image was defined by the mouseX and mouseY variables. Our new and complementary approach animates things more directly so an image will have its own variables that change its position without mouse or keyboard input. We will combine object-oriented programming ideas with code for creating behaviors to code Project 6, Parts A, B, and C. For each part of the project, make the canvas 600 x 600 pixels. Everything must be uploaded to OpenProcessing by 9am the following Monday, February 27th. I strongly recommend having Part A finished by class on ?? and having a start on Part B.

PART A (2 points)
Imagine and implement a compelling behavior for a simple, plain, 50-pixel-diameter white circle. What does it do? What does it like? Does it like to be touched? Does it enjoy spending time at the edges of the canvas? What does it hate? Is it afraid of the cursor? How can you utilize the visual language of motion to create the sense of life and behavior within a little white dot. Don't use object-oriented code for Part A, that is for Part B.

PART B (2 points)
Convert your code from Part A into an object-oriented program. Use the "constructor function" technique as defined in the Getting Started book and in the Shiffman video. All variables or functions related to the circle should not be global, they should all be encapsulated within the object.

PART C (6 points)
Use what you learned in Part B as a starting point to create a new character with more complex behavior and more specific visual features. Will you make an animal, an insect, a monster, a robot, or something less specific? Will it be drawn by hand, painting with pixels, or textured with photographs? After you further develop your creature, create at least two objects from your single constructor function and consider making many more by using an array.


 

Final Project / Iterate and Refine

Use Project 1, 2, 3, 4, 5, or 6 as a prototype for your final project. Continue the work and ideas that you created for one of these projects. Expand the idea beyond the original one-week project into a project that can be completed for the final review on March 15th (3/15).

For Wednesday, March 1st (3/1), have a definitive answer to the question, "Which project will I continue for the final?" Also on that day, be prepared to share a professional project with the class. This project will be a piece of software (game, app, website, etc.) that is related to your final project. What is exciting about this project, what ideas are similar to what you want to explore? On Wednesday we will share projects, then we will work in groups to discuss final project ideas.

For Monday, March 6th (3/6), arrive in class with a one-page document that includes a one-paragraph description of your project and a calendar that shows your deadlines/goals to have completed by the following days in class: 3/6, 3/8, 3/13, 3/15. Tell us clearly what work you hope to complete for each remaining day in class.

Considerations:

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