28: Interactivity - Projects
Project 1: DRAW
Getting Started with p5.js:
Starting to Code(skip)
- 1.1: Introduction (Note: We're using a different editor than mentioned in the video)
- 1.2: Basics of Drawing
- 1.3: Color
- 2.1: Variables in p5.js (mouseX, mouseY)
- 2.2: Variables in p5.js (Make your own)
- 3.1: Introduction to Conditional Statements
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: EXPLOREGetting Started with p5.js:
- Variables (read again)
- Translate, Rotate, Scale
- 3.3: Else and Else if, AND and OR
- 3.4: Boolean Variables
- 5.1: Function Basics
- 5.2: Function Parameters and Arguments
- 5.3: Functions and Return
Project 3: PLAY
Getting Started with p5.js: ...
Learning Processing Videos: ...
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.