0

Here's the fiddle for it: https://jsfiddle.net/rujbra6y/3/

I'm already logging the speed so make any changes and just re-run it a couple times to see if the performance increased at all.

Been working on it for a couple hours and I can't think of anything else I can change to make it faster. I'd like it to be as fast as possible because currently there is a small delay when the user uses floodfill and for proper user experience, I'd like that delay to be as short as possible.

Are there any more optimizations or hacks I can use to increase the speed?

Chron Bag
  • 587
  • 4
  • 17
  • That would be great if you could describe what this algorithm is supposed to do. Could you tell us a little about your implementation and illustrate with the most significant code samples? –  May 21 '16 at 05:05
  • Yes, it's possible but it is probably a better match for the sister site http://codereview.stackexchange.com/ –  May 21 '16 at 05:08
  • @procrastinator: It's just a standard flood fill. https://en.wikipedia.org/wiki/Flood_fill – Chron Bag May 21 '16 at 05:12
  • 1
    @procrastinator: I don't understand. What more information do you want? I spent a while making that fiddle so people can very easily tell what I'm doing and test any optimizations they have instantly. This question took a while to prepare... – Chron Bag May 21 '16 at 05:24
  • If interested, you can look at this fiddle : https://jsfiddle.net/gamealchemist/gTa4r/ You'll find William Malone's flood fill implementation, and mine. Rq : My implementation makes use of a `Uint32Array` to speed things up. – GameAlchemist May 22 '16 at 16:41

1 Answers1

1

There are a couple of things you could do at a brief glance:

  • Replaced Uint8ClampedArray with Uint32Array. This will save you from unnecessary shifting and ANDing ops
  • Replace push/pop with a stack pointer, this way you just update instances
  • You could define a typed array (Int16Array) for the stack using a fixed size (be sure to make it large enough)

The only thing you need to be aware of for Uint32Array is the byte-order is little-endian, which mean you need to provide the target color in 0xAABBGGRR format (or do an initial bit-shift giving r,g,b as separate values).

With these changes (except the last) the code went down from about 69-75ms to 58-61ms on my computer (i5 at the moment).

Updated fiddle

I'll leave the typed array for stack as an exercise. :-)

  • Nice thanks! I'll try to get it working on my end. I'm not really sure what you mean by the typed array though. – Chron Bag May 21 '16 at 05:36
  • @ChronBag https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray –  May 21 '16 at 05:36