Learn to Leverage the p5.js Javascript Library for Art and Design

What originally drew me to Processing was that it wasn’t just a platform, it was a community. I was inspired seeing how Ben Fry, Casey Reas, and Daniel Shiffman had created and fostered this community over the years. I wondered if this community and the core values of Processing could actually bridge platforms; what would these ideas look like if they were combined with native web technologies — JavaScript, HTML, and CSS. My exploration of these questions began as small experiments. Over time, these grew and involved more people and eventually developed into p5.js.

Having never been involved in a project like this before, I was very intimidated at first. As a woman in a male dominated scene, a part of me questioned whether I could really fit in. As I worked on it more, I realized I wasn’t alone in feeling these things and I wished I could do something to lower these barriers for others. There is something so exciting about creative people making their own tools, I believe that anyone interested should be able to be involved in this process. Thinking about all this, I felt strongly that making the p5.js platform welcoming and accessible to diverse audiences needed to be a priority, not an afterthought. I wanted to know what a platform built upon a core value of inclusivity would be like.

We pursued this idea intensely at the first p5.js Contributors Conference last summer, where we crafted a community statement, a contributors code of conduct, and discussed different ways of teaching, learning, and communicating.

This energy carried through the summer when a number of people made significant additions to the project. Karen Peng and Kevin Siwoff implemented a WebGL renderer to add 3D capabilities.

Sam Lavigne, Jason Sigal, Guy De Bree, and Jerel Johnson made a lot of progress on both the desktop and forthcoming web versions of the p5 Editor, making it easier for beginners to get up and going quickly.

Jiashan Wu created a “mobile cookbook” of examples, Sarah Groff-Palermo connected p5.js to Arduino with her p5.bots library, and Zeno Zeng added SVG and PDF support. Seth Kranzler took the Web Audio integration even further with improvements to the p5.sound library, Marc Abi-Samra pushed the possibilities of p5.js and HTML with additions to the p5.dom library, and Maya Man made our community statement into a crowdsourced video.

One thing we’ve been thinking about a lot is how to make p5.js more available to audiences that might not normally have access. In collaboration with Casey Reas and Chandler McWilliams at UCLA, we recently launched an online course through Kadenze called Introduction to Programming for the Visual Arts with p5.js.

R. Luke DuBois created the p5.speech library to enable speech synthesis and speech recognition in p5.js sketches. Our hope is to bring these capabilities into the p5 Editor as well, so that seeing-impaired people can use it as well. Maya Man also built an internationalized version of the p5js.org site, and we are in the process of crowdsourcing the translation of the website and reference materials into many different languages.

Empowering people to express themselves creatively is the ultimate goal of p5.js, and we’ve been exploring a lot of new collaborations. We recently worked with Print All Over Me and artists Sosolimited and LIA to create a collection of customizable garments that are dynamically generated by algorithmic software systems.

A portion of each sale goes to the Processing Foundation to support the development of open source software, you can design your own and order here!

Getting Started with p5.js teaches you how to make your own interactive graphics for the web. The book begins with the basics of programming and user interaction. The following is adapted from Example 2-2, showing how to draw circles based on mouse input.

function setup() {
  createCanvas(620, 155);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

The book then moves on to more sophisticated techniques for dealing with animation and interactivity. This is adapted from Example 5-9, it utilizes a technique called “easing” to create smoother, more fluid motion.

var x = 0;
var y = 0;
var px = 0;
var py = 0;
var easing = 0.05;

function setup() {
  createCanvas(620, 155);
  background(43, 171, 226);
  stroke(255, 102);
}

function draw() {
  var targetX = mouseX;
  x += (targetX - x) * easing;
  var targetY = mouseY;
  y += (targetY - y) * easing;
  var weight = dist(x, y, px, py);
  strokeWeight(weight);
  line(x, y, px, py);
  py = y;
  px = x;
}

A later chapter deals with loading, visualizing, and saving data. This sketch, adapted from Example 12-7, dynamically checks the weather in New York City and moves a circle according to the current wind speed and direction.

var weatherData;
var position;
var radius = 50;

function preload() {
  var url = "http://api.openweathermap.org/data/2.5/weather?q=New%20York,NY&APPID=YOUR_APPID";
  weatherData = loadJSON(url);
}

function setup() {
  createCanvas(620, 155);
  position = createVector(width / 2, height / 2);
  wind = createVector(0, 0);
  background(253, 238, 35);
  setWeather(weatherData);
  noStroke();
}

function draw() {
  background(253, 238, 35, 20);

  position.add(wind);

  fill(0);
  ellipse(position.x, position.y, 2*radius, 2*radius);

  if (position.x > width + radius) position.x = -radius;
  if (position.x  height + radius) position.y = -radius;
  if (position.y < -radius) position.y = height + radius;
}

function setWeather(weather) {
  var angle = radians(weather.wind.deg);
  var windmag = weather.wind.speed;
  wind = p5.Vector.fromAngle(angle);
}

One of the exciting things about p5.js is that you are not limited to drawing graphics on a canvas, but you can incorporate other built-in functionality of the web browser. This sketch, adapted from Example 13-2, analyzes sound from a microphone and visualizes the volume.

var amp;
var scale = 1.0;

function setup() {
  createCanvas(620, 155);
  // Create an audio input and start it
  mic = new p5.AudioIn();
  mic.start();
  // Create a new amplitude analyzer and patch into input
  amp = new p5.Amplitude();
  amp.setInput(mic);
  noStroke();
}

function draw() {
  background(237, 34, 93, 10);
  // The analyze() method returns values between 0 and 1,
  // so map() is used to convert the values to larger numbers
  scale = map(amp.getLevel(), 0, 1.0, 10, width);
  // Draw the circle based on the volume
  fill(255);
  ellipse(width/2, height/2, scale, scale);
}

The book is completed by the fantastic drawings of Taeyoon Choi. For each chapter, he has drawn his interpretation of the ideas contained inside, reminding us that there are many different ways to learn and understand.

In addition to this book, Reas and Fry recently released an updated version of Getting Started with Processing and they are working with Allison Parrish who is porting this book to Python through the Processing.py project. Getting Started with Processing.py will be available in a few months.

Processing, p5.js, and Processing.py are all supported by the Processing Foundation. We started the Foundation in 2012 with the two-fold mission to promote software literacy within the visual arts, and visual literacy within technology-related fields. Our primary goal is to lower the barrier of entry to coding for non-developers, and promote the visual arts for people from all backgrounds.

We’re thrilled to share Getting Started with p5.js with you. The p5.js community continues to grow and evolve, and we hope you’ll become a part of it!