Make: Getting Started with p5.js Review

Make: Getting Started with p5.js

The subtitle is “Making Interactive Graphics in Javascript and Processing”

Published October 2015 (ISBN:978-1-4571-8677-6)

Authors are Lauren McCarthy, Casey Reas & Ben Fry

Contains illustrations by Taeyoon Choi on the inside pages

The physical book is half-sheet sized (5.5” by 8.5”) with around 220 pages of content across 13 chapters

p5.js is a JavaScript open source interpretation of Processing, native on desktop GNU/Linux, OS X, and Windows, brought over to the browser for HTML5 Canvas.

This has the same idea as Processing of sketching with code, instead, without the need of stopping for a compilation step.

This is different from using a vector graphics application as it is about learning to program through computer graphics using JavaScript on Html Canvas.

Learning programming through experiments and tools are needed to solve visual design problems, rather trying to learn a programmatic syntax first.

The approach taken in the book has short examples in each chapter including useful integration with fetching external data and towards the end, JavaScript language concepts like variables, functions, arrays and objects are introduced.

All the concise examples work like a unit test where the programmer overrides the pre-defined template methods, p5 is already bootstrapped.

function setup() {
  createCanvas(640, 480);
}

function draw() {
  ellipse(50, 50, 80, 80);
}

A quick way of starting an environment is to use something like codepen then add the p5 library.

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.22/p5.min.js

Introductions to p5 and further tutorials

hello.p5js

There is a great selection of p5js video tutorials by Daniel Shiffman

p5.js tutorial - Part 1

p5.js tutorial - Part 2