28: Interactivity - Projects

Project 1: DRAW

Media
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/

Description

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.

...


Project 3: PLAY

Required Media
Getting Started with p5.js: ...
Learning Processing Videos: ...

...


FINAL

...


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.