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