Porting from p5.js

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

Though q5 is largely backwards compatible with p5.js v1.11, we don't aim to fully replicate 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 supports both p5 v1's preload system and p5 v2's async setup loading with promises. p5 v2 doesn't support preload. See usePromiseLoading for more info.
• In p5 v2 P2D_HDR must be passed as the renderer param to createCanvas, but in q5 this is unnecessary since q5's default color space is display-p3 on devices that support HDR. This can be changed via createCanvas options.
• q5 automatically maps RGB, HSL, and HSB colors to the display-p3 gamut on devices that support HDR, p5 v2 lacks this capability.
• In q5, gamut can be specified in the colorMode function. In p5 v2, gamut can only specified for RGB formatted colors using the constant RGB_HDR.

Differences between q5 and p5 v1.11

• 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. See the "Default Sizing of Images" dev log for more info.
• 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 load* loading functions do support success callbacks, but their use is deprecated and undocumented, and they don't support a failure callbacks. Use then and catch with promise based loading instead.
• 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 which is loge in q5.

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