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.
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.
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.
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.
While learning basic functionality in p5.js, we will also go over some general JavaScript basics.
-
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.
-
-
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.
-
As we start to use motion in some of our sketches, we will dig further into loops, objects, arrays, among others.
-
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!
-
-
Meteor Shower
-
We will be creating a simple meteor shower effect, utilizing objects in JS
-
Your challenge create a "crash" effect!
-
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent