Porting from p5.js - q5js/q5.js GitHub Wiki

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.

p5.js was created in 2015, when the Java programming language was at its peak in popularity. Notably p5.dom and p5.sound are packed with Java-style abstractions over vanilla JavaScript that mostly exist to make web development easier for Java developers.

Now that JavaScript is the most popular programming language, we took a Web Technologies first approach with q5. Our assumption is that beginners using q5 either want to learn about programming in general or specifically want to learn about JS+CSS+HTML. Therefore, Java-style abstractions have been deprecated or removed in favor of native API usage or abstractions that are idiomatic to modern JavaScript.

Differences between q5 (q2d) and p5 (P2D)

  • createCanvas should be called right after a new Q5() instance is created, before any 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.
  • color function only parses numeric input, hex, and common named colors. It doesn't parse strings like color('hsl(160, 100%, 50%)').
  • 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 exist 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 the color object's properties, 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 no width and height specified as input parameters. This ensures that images look crisp on displays with high pixel density. Run defaultImageScale(1) to match 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. 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. Use JavaScript's Audio API instead.
  • log in q5 is a shortcut for console.log, not Math.log.

Not implemented in q5

  • isKeyPressed alias for keyIsPressed, in p5's source code there's a comment next to it that just says "khan". I'm not sure why it exists, perhaps it was misnamed in the initial versions of p5 and was kept for backwards compatibility.
  • 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 p5's implementation of this function is terribly slow, by their own admission it can crash browsers if not severely limited. Use saveCanvas each draw call to save frames as image files instead.
  • saveGif() see issue 84
  • p5.dom is not implemented in q5 because it's mostly a Java-style abstraction over vanilla JS, though a more idiomatic version of it will be added