I'm working on an algorithm reactive diffusion which requires per pixel manipulation on canvas. Following the coding train instructional video:
Instead of following to the letter I am making a few changes such as either to reduce jank or to speed up time to render, after all this canvas will be surrounded by UI eventually.
- Not using P5.js (I want to learn)
- OffscreenCanvas worker
- Disabled transparency in 2D context
- Using Parallel.js for inline workers.
- Creating the image data directly with ImageData constructor
- Convert image data to Unit32Array as described https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/
As you can see this is an excersize in performance as well as a pretty animation.
I know that I would love the ability to render full size of the screen of up to 27 inches without much of a wait, sub 1 second would be outstanding. Even a little flash would be fine.
- No fancy ES6 array methods (perf reasons)
- use ye olde for loop
- keep optimizing
- Use workers to take strain off main thread
- post processing may be an option (CSS)
So I know I need a multidimensional array representing X and Y axis, each item in the Y axis will likely be an Object literal with contains information on how to transform the px that it represents,
450,255=redyou get the idea.
So I figured, might as well use a Map of Maps instead of arrays, that's probably going to result in understandable code. They are apparently faster than arrays too, so each map is a 0 indexed wrapper containing objects.
This is actually pretty slow to create (WxH)n Maps so I thought, let's get this into a worker and figure out what to do from here... > 10 seconds to run using Parallel.js 😱, it seems much faster in the main thread < 2s so I'm a bit stuck, what am I doing wrong, is newing up a map that expensive?!
Your comments will be really helpful!
I'm also going to look into using wasm for this bit as have had some fun before with emscripten.
Also, am I mad doing this in 2D context should I just go webgl, learn it and stop moaning?
Should I tile the canvas somehow or even use CSS box reflect and render just half the size?