Why q5.js v3 is perfect for CS Educators

q5 is a beginner friendly graphics library for the web that’s optimized for interactive art.

q5.js v3.0 is a FREE platform that Computer Science educators can use to teach basic programming concepts to students in a visual way.

Beginner Friendly Documentation

Firstly, there’s the beginner friendly documentation, with bit-sized examples! 🍇

q5js.org/learn

You may be familiar with the Processing and p5.js graphics libraries for creative coding, which served as the inspiration for q5.js.

p5.js has a simple yet powerful API, but it’s not represented well by the lengthy and redundant p5js.org reference pages. While extracting key information from dense text is a valuable skill, it shouldn’t be a barrier to learning the fundamentals of computer programming.

q5’s documentation offers concise descriptions and mini examples. Instead of separate pages for every function with examples written as if they were standalone demos, related functionality is grouped into scrollable sections. The “show don’t tell” approach to presenting information in sequence enables more natural learning.

Increased Ease of Use

Aside from improved documentation, q5 provides exclusive features that make it easier to use.

q5’s top level global mode lets newcomers draw stuff on the canvas, without the need to define any functions.

createCanvas(100, 100);
circle(50, 50, 50);

You can also ditch the preload and setup functions when loading assets like images.

createCanvas(200);

let logo = loadImage('/q5js_logo.webp');

function draw() {
  background(logo);
}

Though top level global mode is the best way to use q5 (in my opinion), it’d be foolish to make it the only way to use q5.

Compatibility with p5

With built-in support for preload and the p5 v1 addon system, q5 remains largely compatible with the existing p5 ecosystem and its wealth of educational resources, such as videos from The Coding Train. Thus, many p5 addons, including ml5.js and p5play, which are not compatible with p5 v2, already work with q5 v3!

Headline features of p5 v2, like HDR support, were already implemented in q5 v2 last year. Async setup, the new addon system, Google font support, variable text weight, and other additions to p5 v2 have already been implemented in q5 v3 as well.

Why Performance Matters

Many CS Education platforms solely exist for use in class and coursework, they don’t provide enough flexibility or depth to reward learners that want to go beyond. As a kid, I loved learning Processing cause that wasn’t the case. It was inspiring to see adults using it to create art installations and do graphic design work.

Nowadays, while students might only learn the basics of p5.js in class, those interested in generative art are rewarded with WebGL mode and its advanced drawing capabilities.

When an artist's goal is to render a single image, p5’s slow performance is a non-issue. Watching the image take shape over the course of a few minutes might even be part of the art.

But performance really matters with interactive art, because it has to run in real time without visual stuttering or lagging to respond to user input. Ideally that necessitates rendering an image every ~16 milliseconds or less!

32,000 rectangles drawn by q5 WebGPU every 16ms on a 2020 MacBook Air.

Lightning Fast WebGPU Renderer

You can make a sketch using q5’s WebGPU renderer by simply running `Q5.WebGPU()` after variable declarations in a p5.js v1 style sketch that uses preload…

let logo;

Q5.WebGPU();

function preload() {
  createCanvas(200);

  logo = loadImage('/q5js_logo.webp');
}

function draw() {
  background(logo);
}

…or a p5 v2 style sketch that uses async setup.

let logo;

Q5.WebGPU();

async function setup() {
  createCanvas(200);

  logo = await load('/q5js_logo.webp');
}

function draw() {
  background(logo);
}

Better yet, use q5 in a JavaScript module to wait for q5’s WebGPU renderer to load.

let q = await Q5.WebGPU();

createCanvas(200);

let logo = loadImage('/q5js_logo.webp');

q.draw = function () {
  background(logo);
};

Check out the templates on q5js.org to start coding!