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.

Exclusive Features

• Top-level Global Mode
• Instance Mode
• Modular Use
• WebGPU Renderer

Differences between q5 and p5 v2

• q5 retains p5 v1's preload system and offers a function called load for awaitable loading. Use disablePreloadSystem to match p5 v2. See the article "p5.js preload system REMOVED from v2?!" for more info.
• q5's default color space is display-p3 on devices that support HDR. It can be changed via createCanvas options.
• q5 automatically maps RGB, HSL, and HSB colors to the display-p3 gamut on devices that support HDR. Gamut can be specified in the colorMode function.

Differences between q5 and p5 v1

• q5's default renderer is called "c2d", it uses CanvasRenderingContext2D (aka Canvas2D), just like P2D mode in p5.
• 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. In p5 the default canvas size is 100x100.
• 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.
• red, green, and blue functions are deprecated. These functions were needed in Processing Java because colors were stored inside 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, sound.setVolume, and similar Java style getter/setter functions on objects are deprecated. Set object properties directly, for example myColor.red = 200 and mySound.volume = 0.5.
• noise function's default noise algorithm is perlin noise. p5's default noise is not real perlin noise, it's called blocky noise in q5 and using it requires loading the q5-noisier module.
• tint function's second parameter doesn't change the opacity of an image, instead the tint's alpha specifies how strong the tint should be. To dynamically change the opacity of an image, use opacity(globalAlpha).
• image function displays images at their actual size when pixel density is 2 and dimensions are not specified as input parameters. This ensures that images look crisp on modern displays. Run defaultImageScale(1) to match the behavior of p5.
• 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.
• 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 function, instead use a graphics object, set blendMode, and draw an image
• saveFrames function 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 function see issue 84