-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0|435|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Art and Sound -> Background Video Generator in Javascript

Posted : Tuesday, 29 December 2020, 13:44

Background Video Generator in Javascript

So.. Here's something I didn't think would work in Javascript..
Render to a canvas, capture to a video, save to a file.
All, 100%, in the browser.

Uninteresting image!

.. and .. It almost does. Except when I tried to upload the result to YouTube, YouTube had a bit of a fit, and the video didn't play.

But up to that point, it does indeed work, and I can import the video into my video editor, where it works happily.


This morning I was wondering how to make ALChoon Videos more interesting than a static image with a wibbly-wobbly waveform attached, and thought to myself "I wonder if I can record the output of a canvas."
A little searching eventually led me to this StackOverflow post (not EVERYTHING on there is outdated and useless!)

Right now, the code is functional, so I popped it into a little script alongside a generator and ..

You can set it to record between 10 seconds and 2 minutes.. After that, it kinda struggles because the output is being posted to a data url thing, and.. .. well, it doesn't like that!!
If you'd like to test it, you can have a try here.

The output is absolutely 100% dependent on..
A) The browser you're using, and what codecs it's capable of working with, along with how well it runs.
B) Your system, and how fast it can generate the video, as well as how quickly it can encode the output.

Really, it's not going to do well, unless you've a half decent setup. It sure as hell isn't anything I'd've tried if I wasn't running on this MacBook!

But.. if you're bored, maybe give it a go, and let me know how it does.

.. Maybe start out with a 10 second video, for test purposes!



For future developer purposes, I'll be leaving the original, untouched v0.01 intact on the server, here. Rightclick + View source for... source!!
If you ever want to attempt a similar kind of web-tool, it should (*should!) hopefully be a decent starting point.

''Load, Next List!''
Posted : Wednesday, 30 December 2020, 09:26

Bah, humbug. The result still isn't uploading to YouTube!!

Today I added a basic 3D Starfield, and rejigged the overall look of the site a fair bit.
This is feeling a lot like the Testcard generator, in the whole "daily additions" methodology.

Anyway, the new version is here (v0.02).
There's a complexity slider, as well as two selectable styles (yesterday's mystify-alike, and today's starfield)
There's also a mini-view of the canvas. Hold down in the mini-view to hide it and the menu overlay.

Other than that, basically the same sort of doohickey.

Tomorrow, I need to add in a few options to reduce the quality/overhead!!

''Load, Next List!''
Posted : Wednesday, 30 December 2020, 14:12
OOOOOOOooooooooh well done!

I tried getting rendering a JavaScript Canvas to video for work a few months ago

Drove me absolutely nuts. Gave up in the end and made an animated GIF frame by frame in GIMP instead

blog | work | code | more code
Posted : Thursday, 31 December 2020, 09:21
Lots of GUI based tweaks, today. The interface should (hopefully) be a little more intuitive.
The generator also defaults to a lower resolution, with the little slider going all the way up to 1920x1080.
Couldn't figure out how to do realtime-slider-display things, though.. Hmmm.. My Javascript-fu is lacking!


''Load, Next List!''