Performance Benchmarks - q5js/q5.js GitHub Wiki

See the Developer Log for performance testing of the q5 WebGPU renderer.

The following benchmarks are generated with Google Chrome 131, on a MacBook Air M1 2020. q5.js v2.10 vs p5.js v1.11.

Less time (milliseconds) is better.

Task	p5.js	q5.js
Draw 1000 tinted images using the same tint	7000ms	12ms
Generate 10,000 random colors with color(r,g,b)	33ms	3ms

This section was written by @LingDong-

q5.js has a significant speed advantage in imaging operations because it uses hardware accelerated Canvas APIs whenever possible, instead of going pixel by pixel. Most other functionalities have very marginal speed improvements (or none at all when parameter validation overhead is negligible). The operations with important performance differences are listed below.

The following benchmarks are generated with Google Chrome 84, on an old-ish MacBook Pro 2015 (with lots of apps and tabs running); Performance varies depending on software and hardware. p5.js version used is v1.1.9.

Higher FPS (frames per second) is better.

Operation on 1024x1024 image	p5.js	q5.js
tinting	20FPS	35FPS
blurring(11px)	0FPS	40FPS *
thresholding	10FPS	40FPS *
grayscaling	10FPS	50FPS *
inverting	10FPS	50FPS *
opaque	20FPS	60FPS
erode/dilate	5FPS	9FPS

Task	p5.js	q5.js
Generating 10,000 randomGaussian() sample	10FPS	20FPS
Calling noiseSeed() 1,000 times	10FPS	60FPS
Generate 10,000 (random) colors with color(r,g,b)	5FPS	60FPS
Rotate a Vector 1,000,000 times	13FPS	60FPS

_{* Only for browsers that support CanvasRenderingContext2D.filter (75% of all as of Aug 2020, including Chrome, Firefox and Edge). For those that don't, performance is similar to p5.js, as identical implementations are usually used as fallbacks.}