Intro to Coding with p5.js Workshop

A one-week workshop taught at Anderson Ranch, August 2016

Explore the creative potential of networked, shareable art in this introduction to coding with p5.js—a platform for making interactive, visual experiences online. Students experiment with creating simple visuals, as well as integrating video, sound, sensors and mobile devices. Tutorials and code samples are balanced with individual reviews and time to work in the studio. This is an excellent initiation into the artistic possibilities of code. https://www.andersonranch.org/workshop/intro-to-coding-with-p5-js-p1130-2016/

##Schedule

###Monday - Hello world

1. Intro Meet and greet, workshop overview, objectives.
2. Drawing Instructions An exercise inspired by the Conditional Design group. Read their manifesto and check out the archive of instructions and drawings. Check out knots, hatching, and convex city plan.

• Break into partners. As a team, devise a set of instructions to create a drawing. Write out the instructions on paper provided.
• Switch instructions with another pair. You create a drawing based on their instructions, and they create a drawing based on yours.

3. Discussion: context

• A few references: Sol LeWitt, Yoko Ono and other instruction artists, Casey Reas Eyeo2012 talk on Chance Operations.
• What is programming?
• What is Processsing and p5.js?
• What is happening with the browser?
• What can you make? Some incomplete ispiration.

4. Playing around

• Download the p5.js editor.
• Try adding some of the lines of code from this list into the places where it says setup() and draw(). Press the play button to run your code.
• Can you figure out what each of the lines does? What is the difference between setup() and draw()?

5. Tutorial: Basic drawing Download examples here. More walk through examples here.

6. Tutorial: Variables Download examples here.

7. Studio: Found object

• Go for a walk around the ranch and surrounding area and find an object that intrigues or inspires you.
• Replicate it with code. It can be as realistic or abstract as you like.
• Include one element that is different each time you load the sketch.
• Include one element that changes as you move the mouse.

###Tuesday - Play it

0. Review: Found objects
1. Download examples here.
2. Tutorial: Logic I - if With a partner, make inverse programs.
3. Tutorial: Logic II - animation Add an element of timing to your found object piece.
4. Tutorial: Logic III - interactivity Make a sketch with two inputs (ex: a rollover button and a clickable button, or a keypress and a mouse click)
5. Studio: Brainstorm games

• Concept: Using what you've learned so far, come up with a simple single player game. Here is some inspiration.
• Mechanics:
  • What is the goal? What does the user do?
  • How do you win or finish? (OR DO YOU)
• Details:
  • How do you detect if the player is achieving the goal?
  • How do you communicate to the player how they are doing?
  • What are the different “states”? Are there levels? Just a playing mode vs gameover mode?
  • Is there timing involved?
  • What are the different mini problems you will need to tackle to put this together?

5. Studio: Paper prototype games Find a way to create some kind of paper prototype that you can test with others. Try to represent the different elements that come into play at different event times.
6. Tutorial: Logic III - state
7. Studio: Build games
8. Discussion: FTP

###Wednesday - Where are you?

0. Review: Games
1. Tutorial: Media
2. Tutorial: Geolocation
3. Studio: Make a location-based artwork

###Thursday - Take it further

0. Review: Location-based pieces
1. Tutorial: Functions
2. Studio: Final projects Work on final projects, individual crits and tutorial.

###Friday - Wrap it up

0. Studio: Final projects Work on final projects, individual crits and tutorial.
1. Discussion: p5 community
2. Final review, wrap-up, next steps.

##Resources

• p5js.org - p5.js website, includes library, reference, examples, and tutorials
• p5.js forum - good place for p5.js programming question
• Daniel Shiffman's Coding Rainbow - p5.js tutorials
• Getting Started with p5.js - by Lauren McCarthy, Casey Reas, and Ben Fry, O'Reilly 2016
• Intro to programming for the visual arts with p5.js - online class from kadenze, free with sign up
• Additional resources page

Web Hosting Options

• Dreamhost - promo $50/off year