snackpally/p5_lessons

A series of lessons to take you from basic shapes to data visualization

P5 Lessons

The following collection of p5 sketches and documents is meant to lead a new programmer through the basics, from sketching basic shapes, to adding motion, to creating data visualizations using API connections.

About p5.js

p5.js is a JavaScript library used for graphics, animation, and sound. It is based on Processing, a language that has gained popularity in the creative coding and audiovisual art community.

Setting up

The only thing that you will need to get these examples working is the p5 library. Download from the p5.js website.

You will want to place the entire p5 directory at the root of this repository.

Running the sketches

I won't make it difficult or force you to set-up much. Just drag the index.html in each lesson to the browser. The code you need to edit is in the corresponding js folder.

For each section, I've also included an example sketch that uses some of the methods you've learned (and then some). They will be more challenging to mimic yourself, but you can use it as an opportunity to jump ahead and experiment.

1. Drawing

While learning basic functionality in p5.js, we will also go over some general JavaScript basics.

1. Drawing basic shapes

   • First we need to know how to draw basic shapes in p5.

   • Your challenge is to create your own Hello World sketch using rectangles, ellipses, and triangles.

2. Draw shapes with loops

   • Don't do things manually that you could do in a loop.

   • Your challenge will be to make a tunnel of geometric shapes, using loops, and the primitives from 1.1.

2. Motion

As we start to use motion in some of our sketches, we will dig further into loops, objects, arrays, among others.

1. The Draw Loop

   • To achieve motion in P5, you will need to call a method many times each second. Luckily that is where Draw() comes in!

   • Your challenge is to make a rainstorm!

2. Meteor Shower

   • We will be creating a simple meteor shower effect, utilizing objects in JS

   • Your challenge create a "crash" effect!

3. Math

** Unfinished **

If you want to learn programming, you are going to have to build at least a friendly attitude towards math. We will create a series of rules, and figure out how to implement them.

1. Following rules
2. Create a radiant sun

4. Interaction

** Unfinished **

Start thinking about the person using what you're making.

1. Make a typing sketch
2. Positive and negative feedback

5. Data Visualization

** Unfinished **

And now combine it all.

1. Working with data