Announcements

1. Record session
2. Student lead discussions (after break): Yoki and Andy
3. Please keep your video on, unless there are issues of privacy. I need the feedback from your faces so that I know if I’m making sense or not.

Today’s lecture: P5.js!

1. Visit openprocessing.org
2. Save sketch (creates your account)
3. Click on “Create a Sketch”
4. e.g. mine

What is the difference between Processing and P5.js?

1. Runs in browser so visitors don’t need to install anything
2. It’s actually a different language. Processing is Java, while P5.js is Javascript (very little relation to Java)
3. Openprocessing.org includes Javascript and the necessary libraries to run your P5.js program. You can download and install these on your laptop if you wish
   1. But it won’t be available to anyone else on the internet
4. Guide to transitioning from Processing

Learning P5.js

1. Reference page
2. Tutorials and examples,
3. Daniel Shiffman has a series of video tutorials on P5.js
   1. These start from the beginner stage, so you can skip the first few and jump around e.g.
   2. Objects
   3. Arrays
   4. Perlin noise
4. Much of the documentation on p5js.org assumes you’re downloading and running from your laptop. Since we’re running on openprocessing.org, you can ignore this part.

Note from class

Working with openprocessing.org

1. How to create a new sketch in openprocessing.org
   1. Log in, if you’re not
   2. Hover over the circle thing in the top left corner 
   3. Click on the ‘+’ sign next to the word “Sketches”
2. It is possible to run your Processing sketches to openprocessing.org if you switch the “engine”:
   1. Create a new sketch as above
   2. Copy your Processing sketch from your laptop and paste it into the sketch on openprocessing.org
   3. Press the 3 dots (also called a “hamburger”) to open the settings panel
   4. Select the “Sketch” tab
   5. Select the “Processingjs” engine (first line)
3. How to add libraries to your sketch
   1. Press the 3 dots (also called a “hamburger”) to open the settings panel
   2. Select the “Sketch” tab
   3. Select the “Processingjs” engine (first line)
   4. Under “Libraries” you will see “p5.dom” and “p5.sound”. Turn on the sound library if that’s what you need.
      1. (My sound example worked fine once I did this)
   5. If you need other libraries, press the “Show All” button and scroll down until you find the library or libraries you need

Game of Life

The Game of Life example I showed you is here. You can also run it on openprocessing.org here. This is an example of a Processing sketch running with no changes on openprocessing.org by using the Processingjs engine.

Homework due Tuesday May 12

Get started on your final project.

• I expect to see substantial progress.
• Break a large project into smaller pieces 
• Focus on the critical components first, not the optional features, in case you run out of time.