Performance somehow drops on local installation about deltae

[zschuessler]

Did you modify the script at all? If so post it and I'll take a look. If not, it may be how you encoded the video, I can take a look at the video itself as well. I used Premiere to compress the video as much as possible.

The red/black noise code can be seen in this block:

 if (dEScore < 70) {
            data32[y * canvasWidth + x] =
                (255 << 24) |
                (0 << 16) |
                (0 << 8) |
                Math.floor(Math.random() * (255 - 1 + 1) + 1);
            continue;
        }

This is a Uint8ClampedArray:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray

The bitwise OR (|) and shift registers (<<) creates a full byte of data (eg: 11111111111111111111111011000101 )

In this case, the data shifts between 0 and whatever RGB code for that red is, because the last line (with Math.floor) is acting as a switch.

This is probably mostly confusing because you're likely asking "Why do this just to oscillate between two colors, surely there are easier ways?" Before publishing that code I had the pixels do rainbow colors, deemed it obnoxious, and removed the bits that made rainbow colors.

We still need the clamped array for performance, though, so removing the code completely won't work. You still need to create a full byte there.

The best way to fully grasp it is to read the MDN article and play around with the numbers to see how the colors change.

[Davidoff80]

Thank you for your reply, very mutch appreciated!

The video's I've been using (for testing purposes) I've downloaded from iStock. This is one https://media.istockphoto.com/videos/retro-flying-saucer-video-id869298120

I tried edditting the script, but eventually after half a day I came to the conclusion it became slower and slower. I thought this had to do with my changes, so eventually reverted everything. The script now again is as you've posted it on your website. It starts fluently, but eventually becomes slower and slower and framerate starts dropping badly.

For now I changed all 255's to 0's which makes the video transparent e.g. data32[y * canvasWidth + x] = (0 << 24) I don't know if this is the best method though. The edges look pretty choppy, but that might be the video.

Thanks again!
example.zip

Update: I made a sample with your code and a random video. Forgive me for the example being lame. It's just to demonstrate the performance drop. I have this issue after a couple of seconds and performance starts decreasing from there. The framerate after an hour is dropped from +/-30 fps to 1fps . I have the issue in IE, FF and Chrome. Didn't test other browsers.

[Davidoff80]

Hi Zachary,

Did you perhaps already had the time to see if you experience the same issue? Thanks in advance!

Regards,

[zschuessler]

Hey David! SO sorry for the late reply, I've been launching a company and it has been quite the time sink.

I checked out your project. It runs fast on my local machine & I don't notice any performance drops. Chrome performance tab shows it taking 7mb-15mb of memory after profiling for a minute.

Could you leave the performance logger running and make note of any memory problems? That will narrow the possibilities down.

I'm running on a higher end laptop, is your system hardware modern?

[zschuessler]

Closing due to inactivity. Reopen if needed :-)