Interactivity / DESMA 28 / UCLA Design Media Arts

Exercise 0: Art and Algorithms — DUE THURSDAY, JUNE 29

Let’s get to know everyone’s interests. Read the first two chapters of the Form+Code book (What is Code?, Form and Computers), then make a three-minute presentation containing one example of each of the following:

A. One set of instructions or an algorithm that you think is interesting
B. One piece of software that is important to you in your life
C. One visual artwork that uses instructions, algorithms, or software that you think is exciting

Have everything online so that it is easy to present from a shared computer in class.

If you have any questions, please ask!

Exercise 1: Drawing Warm-up — DUE THURSDAY, JULY 6

Read and Watch

Read the text and watch the videos to reinforce the workshop materials from class and to prepare for project 1. As you read, type in the code examples in the book to run them and see how they work.

Create / Code

Sign up for an account with the p5.js online editor.

For each part, use the constraints given and handle the visual design with care. Think about how to effectively work with the limits of each assignment; be creative with the constraints! If it helps, draw and plan your work on paper or in a computer drawing program like Illustrator.

PART A (2 points)
Make the canvas 100x100 pixels. Draw a leaf using only the basic drawing commands (line, triangle, quad, ellipse, rectangle, arc, and vertex; you don’t have to use each one). Use only two colors in your sketch.

PART B (3 points)
Make the canvas 600x600 pixels. Draw a face using at least 12 but no more than 24 basic shapes. Who is the character, what are they feeling, and what emotion(s) are they displaying?

Submit your work here (online) by 9am on Thursday. See submitted links.

Project 1: Drawing and Systems — DUE TUESDAY, JULY 11

Read and Watch

Read the text and watch the videos to reinforce the workshop materials from class. As you read, type in the code examples in the book to run them and see how they work.

Create / Code

Create a drawing program in the tradition of KidPix, where the user can draw by clicking and dragging the computer mouse. Your program should be used to create a specific type of drawing. For example, maybe it is a tool for drawing clouds or cityscapes. Work with your program and understand its limits; make lots of sample drawings! Be prepared to do a brief (1-minute) demonstration of your program in class on Tuesday.

Make the canvas 600x600 pixels. Stick to drawing basic shapes (do not import images or other media). Be thoughtful and deliberate in your use of color, shape, and form.

Include a one paragraph description of your drawing tool as a comment at the beginning of your code. What does the program do, what kind of drawings can you make with it? What are your inspirations for the drawing tool? Are there any instructions that you need to give the user?

Submit your work here (online) by 9am on Tuesday. See submitted links.

Exercise 2: Easing and Keyboard Input — DUE THURSDAY, JULY 13

This exercise will help you practice some of the animation and input techniques we’ve covered in class to prepare for project 2. Please read the text and watch the videos to prepare for Thursday’s in-class workshop.

Create / Code

PART A (2 points) Make the canvas 400x400 pixels. Draw a single rectangle somewhere on the canvas. Change the color of the rectangle when the mouse is inside of the rectangle. Use easing to animate the color change smoothly. Change the color of the rectangle back to the original color (smoothly) when the mouse exits the rectangle.

PART B (3 points) Make the canvas 600x600 pixels. Design a 5-color palette and draw a 100x100 pixel square on the canvas for each color. Do not overlap the squares. Turn off the stroke color with noStroke and do not use alpha/transparency. Change the background color of the canvas every time the user presses the 1, 2, 3, 4, or 5 key on the keyboard (have one key correspond to each of the five colors you have chosen). Pick the colors carefully; write a sentence or two as a comment at the top of your sketch to describe the palette.

Submit your work here (online) by 9am on Thursday. See submitted links.

Project 2: Pattern and Sound — DUE TUESDAY, JULY 18

Drawing inspiration from visual patterns in textiles, architecture, and other tactile media, this week we will look at the computer as a means for creating complex visual forms with repetition of geometric elements. 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. Patterns generated with the computer can also respond to user (human) interaction in real time.

Make the canvas 600x600 pixels. Choreograph a set of visual patterns made with ‘for’ loops to a 30 second clip of music. Continue to draw using only shapes and lines; do not import image files or models. To get started, select the music first and edit it down to 30 seconds if needed (Audacity is a good free program to use to do this). Next, sketch on paper and then later code the visual patterns. Then, start to draw the patterns to the screen in relation to what is happening with the music.

A minimal way to do this project is to create five or so visual patterns and to show or hide them at different times during the audio using ‘if/else’ statements. A more ambitous way to complete this project 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 signal. You can also create animation with user input (via keyboard or mouse).

Here is a template to get you started and the p5js.org website has an example that shows how to use the amplitude of the audio as a variable if you want to pursue that route.

Submit your work here (online) by 9am on Tuesday. See submitted links.

Exercise 3: Text and Images - DUE THURSDAY, JULY 20

Please read the text and watch the videos to prepare for Thursday’s in-class workshop. Note: You do not need to use functions in the solutions for your exercises; reading these chapters will help you understand the material in class on Thursday and prepare you for project 3.

PART A (2 points) Make the canvas 400x400 pixels. Use the text() function to write your name on the canvas. Select the background color, text color, font, and placement of the text to describe your personality or mood—and don’t add any other shapes or visual elements.

PART B (3 points) Make the canvas 600x600 pixels. Load three images, at least one a PNG with transparency, and create a collage that changes its composition with mouseX and mouseY).

Submit your work here (online) by 9am on Thursday. See submitted links.

Project 3: Nonlinearity — DUE TUESDAY, JULY 25

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.”

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.

Make the canvas 600x600 pixels. 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. Here is 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.

Submit your work here (online) by 9am on Tuesday. See submitted links.

Final Project — DUE THURSDAY, AUGUST 3

Required Reading and Watching

For Thursday, July 27th, please read and watch the materials about arrays. Please note that although we will cover arrays and objects in class this week, you do not need to use either of them in the final project.

Optional Reading and Watching

If you’d like, please read and watch these chapters to reinforce our discussion of motion and Objects from class on Tuesday.

Project Description

Use Project 1, 2, or 3 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 interactive work that can be completed for the final review on August 3rd. You can change the project description in any way that you like; you do not need to adhere to the constraints of the original assignment.

For Thursday, July 27th, please write a 1-page document describing 1) the project, its visual design, and how it will be installed, and 2) a list of questions that you have or things you’d like to learn to incorporate into your project (for example, if you’d like to learn how to use multi-touch on a mobile device). I will use this to assemble some examples to help you.

Considerations:

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

Class on Tuesday, August 1st will be a studio day. Please bring anything that you need to work on your final project.

We will review the projects in class on Thursday, August 3.

Office Hours

Thursday, July 27, 1:30-2:30pm
Monday, July 31, 10-11am
Wednesday, August 2, TBD