28: Interactivity - Projects

Project 0

Read the first two chapters of the Form+Code book (What is Code?, Form and Computers), then create an engaging three minute presentation for Wednesday to share the following:

A. One set of instructions or an algorithm that you think is interesting
B. One piece of software that is essential to your life
C. One visual artwork that utilizes instructions, algorithms, and/or software that you think is fascinating

Have everything online so you can use the class presentation machine to quickly access the work.

Let me know if there are questions...

 

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 Monday. Type and run the programs as you read the text. Create an account and write the code at http://editor.p5js.org/. Note: The editor Dan is using from tutorial 2.1 forward is different from the online editor, but all of the code is the same.

Description

Create simple, minimal visual systems that transform through the movement of the cursor. Select your colors and compositions carefully as you would in a drawing class. I recommending sketching first and coding second. For each part of the project, make the canvas 600 x 600 pixels. Everything must be uploaded to the spreadsheet by 9am next Wednesday, October 10th.

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 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 added to the new spreadsheet by 9am next Wednesday, October 17th.

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 historical pottery, to weaving, to architecture, repetition and geometry are traditional and contemporary constructions. As technology has shifted, so has the ability to explore and express visual patterns &em; code is the latest method of discovery. Specifically, the 'while' and 'for' loops can be used to run one line of code hundreds or thousands of times to define and layer form. For Parts A and B, make the canvas 600 x 600 pixels. Load A and B to the spreadsheet by 9am on Wednesday, October 24. Part C is due as a physical object (see below.)

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)
For Part C, we're going to mix things up. You will make an eight-page "zine" from a single sheet of paper. The printed images will be made from PDFs you create so they are high resolution for printing. The zine will feature the patterns you make with code loops. Create a separate code sketch for each page, eight sketches will become eight patterns — one on each page. Put the eight patterns together into one page in either Photoshop or Illustrator to print. If you are using Photoshop, rasterize and print at 300dpi.

Explore a range of different visual ideas across the pages. The zine can be different sizes, most likely starting from an original letter- or ledger-sized page. Think about the paper and ink you are using. I suggest exploring the Riso printer and considering working with two layers with different colors. The DMA printers don't put ink down edge to edge, so if you want the images to bleed off the edges, you'll need to think about how to cut before folding.

For Part C only, we're using a new coding environment called Processing. Create your patterns in p5.js first, then later port them to Processing. The code will be almost identical to the code in p5.js, but there are a few changes. Replace the word "function" as in "function setup()" with the word "void." Replace the word "var" as in "var x = 10" with the word "float." (There are many other differences between p5.js and Processing, but they probably won't apply to this project. Let is know if things come up.) See the two PDF example below to get started. We will review the code and techniques for working with PDFs and code on Monday.

Here are a few links to help you out:

  1. Video: Make an eight-page zine from one piece of paper
  2. PDF Example 1
  3. PDF Example 2, Interactive


 

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 their decisions. These experience can feel like games or stories, 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 added to the new spreadsheet by 9am next Wednesday, October 31st.

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. Think about how the images relate to each other and how the composition changes.

PART B (2 points)
Create a composition with five rollover buttons. Use the overCircle() and/or overRect() functions to create the rollovers. Think about the position and colors.

PART C (6 points)
Create a small visual world for the viewer to explore. As a point of departure, think about Monument Valley or Zork. Use images you create, either illustrations, diagrams, photographs, or collages. The world is composed of three "rooms" or "screens." The viewer can choose to navigate between these areas 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 area. 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 areas) to keep the complexity of the project to the one-week deadline. I created a template to get you started. Draw and sketch to plan the project and create screen mockups in Photoshop/Illustrator before starting the code. Spend time modifying and examining the template before starting your own code.


 

Project 5 / Arrays and Animation

Media

Getting Started with p5.js:

  • Motion (Frames, Random, Timers)
  • Arrays
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

Looping animations have fascinated people since the nineteenth century. Devices like the phénakisticope, zoetrope, and praxinoscope were invented decades before the cinema and over a century and a half before animated GIFs. Beyond continuous loops, code 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 the spreadsheet by 9am next Wednesday, November 7th.

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 interactive animation. 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, Behaviors, Swarm

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 linked in the spreadsheet by 9am on Monday, November 19th. I strongly recommend having Parts A and B finished by class on November 14 and having a plan for Part C.

PART A (2 points)
Imagine and implement a compelling behavior for a simple, plain, 50-pixel-diameter white circle. (Visually, this project should only be a single white circle, nothing else. The interest will be in the "behavior.") 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? 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 circle. 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)
Now that you have experience creating an object-oriented program, start from scratch to imagine something new. Create a creature 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 develop one creature as one object created from your class, create at least three objects from your single constructor function and consider making many more by using an array.