Porting from p5.js

If you're already familiar with p5.js, you'll find yourself right at home with q5.js!

Yet, q5 does not aim to be fully backwards compatible with the p5 or Java Processing APIs. The creation of q5 was an opportunity to add new features, cut outdated cruft, fix misnaming, and modernize aspects of the API. Overall, the Processing API has a timeless design and only a few breaking changes were necessary.

Differences between q5 and p5

• createCanvas used on the file level, creates a new instance of Q5 and a canvas. If you create an instance of Q5 with new Q5() or await Q5.webgpu(), then createCanvas should be called before any loading or rendering functions are used. If a canvas is not created by the user and noCanvas isn't run before the draw loop starts, then q5 will create a 200x200 canvas automatically.
• fill, stroke, and background can accept any CSS color string in c2d mode.
• color function only parses numeric input, hex, and common named colors. In c2d mode, it will accept, but doesn't parse strings like color('hsl(160, 100%, 50%)') into Color objects with color components.
• colorMode supports 'rgb', 'srgb', and 'oklch'. Other color modes, like hsv, are outdated and have been superseded by oklch.
• red, green, and blue functions are deprecated. These functions were needed in Processing Java because a color was stored a single int and bitwise operations were necessary to extract color components. In q5, colors are JS objects and their components can be accessed as properties like myColor.red, which is more idiomatic to JS.
• color.setRed, color.setGreen, and color.setRed are deprecated. Set color components directly, for example myColor.red = 200.
• noise function's default noise algorithm is perlin noise. p5's default noise is called "blocky" noise in q5 and using it requires loading the src/q5-noisier.js module.
• tint doesn't change the opacity of an image, instead the tint's alpha value specifies how strong the tint should be, which is more intuitive. To dynamically change the opacity of anything drawn to the canvas, use opacity(globalAlpha).
• image function displays images at their actual size when pixel density is 2 by default, when width and height are not specified as input parameters. This ensures that images look crisp on modern displays. Run defaultImageScale(1) to match the behavior of p5.js.
• image.trim() is a new q5 function that removes transparent pixels from the edges of an image. In p5 trim(str) removes whitespace from strings, use JavaScript's string.trim() for that in q5.
• image.copy() creates a copy of an image, same as calling image.get() with no parameters.
• inset/image.inset is equivalent to the misnamed copy/image.copy in p5. It can be used to create detail insets, displaying a subsection of an image at a larger scale.
• createImage, loadImage, and createGraphics: as a last parameter to these functions, opt (options) object, users can specify canvas context attributes for an image or graphic. opt.alpha is set to true by default.
• loadImage and other loading functions don't support a failure callback. If an asset fails to load, q5 will simply throw an error and your sketch probably shouldn't run if it can't load its assets. Alternatively, you can check for if the intended asset loaded or not in setup and lazy load a backup asset.
• image.pixelDensity is not a function, q5 images can have a pixelDensity but it must be set in the options object when the image is created or loaded.
• sound.setVolume, sound.setPan, and more are deprecated.
• log in q5 is a shortcut for console.log, not Math.log.

Not implemented in q5

• focused boolean is not implemented correctly in p5 as of v1.11 (it doesn't get updated after the sketch starts), use document.hasFocus() instead.
• image.blend, instead use a graphics object: set blendMode and draw an image on top of another image
• saveFrames in p5 is terribly slow, by their own admission it can crash browsers if not severely limited. In q5, use saveCanvas each draw call to save frames as image files instead.
• saveGif() see issue 84