slowizzm / p5-workshop

Intro to Coding with p5.js Workshop | Anderson Ranch 2016

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/

Student Work

projects page

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. Try to keep the mechanic and interaction as simple as possible to start out. 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, or a storyboard that you can walk through with another person. 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. Tutorial: Logic Review Download logic examples.

• State variable as counter
• State variable as switch
• State variable as switch, with button
• State variable as toggle, with button
• State variable as level

1. Studio: Build games
2. Tutorial: Media Download media examples.

• Images
• Text
• Sound

3. Tutorial: Functions Download functions examples.

• Functions that calculate.
• Functions that draw.
• Functions with parameters.

4. Studio: Make a location-based artwork For this project we will be making a location-based artwork to be used around Anderson Ranch. Here is some geolocative art inspiration.

• On your mobile phone, go to this url: https://lmccart.github.io/p5-workshop/geo/. Be sure to allow location services.
• Walk around the ranch and surrounding areas with your notebook. Note interesting locations, and record the lat/lon at that location, and a short description. Start thinking about what you might like to see at each location, and a general concept for the piece.
• Flesh out your concept and sketch what you will see/hear/etc at each location on paper. How will people know to find each location? Will they wander and stumble, will your piece direct them, or will they carry an accompanying map?
• Begin to sketch the different location views in code. You can make a separate sketch for each.
• Test Sketch here
• Test GPS Sketch here

Thursday - Take it further

0. Studio: Location-based pieces

• Test Sketch here
• Test GPS Sketch here

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