Comments (5)
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.
from deltae.
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.
from deltae.
Hi Zachary,
Did you perhaps already had the time to see if you experience the same issue? Thanks in advance!
Regards,
from deltae.
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?
from deltae.
Closing due to inactivity. Reopen if needed :-)
from deltae.
Related Issues (8)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from deltae.