123
-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0|42|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Art and Sound -> Background Video Generator in Javascript
Tue, 29 Dec 2020, 13:44
Jayenkai

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.
Bum..

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 ..
Bingo!

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.
and
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!

-=-=-

v0.01


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!''
Wed, 30 Dec 2020, 09:26
Jayenkai

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.
Hmmm..

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!''
Wed, 30 Dec 2020, 14:12
HoboBen
 		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
Thu, 31 Dec 2020, 09:21
Jayenkai
 		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!

Linkage

-=-=-
''Load, Next List!''
Thu, 04 Mar 2021, 08:41
Jayenkai
View on YouTube

Crikey, this took some doing, and it's not even finished yet.

The basics are in there, but now I need to figure out if I can allow the user to select an mp3 on their hard drive and then play it without needing to upload the thing to the server, first.
.. Oh, and a whole GUI for doing that sort of thing, too..

-=-=-
''Load, Next List!''
Wed, 17 Mar 2021, 11:49
Jayenkai
View on YouTube

Getting nowhere with the script doohickey, so decided to have another go at Beatmatching.
The VidGen tool now lets you select a music track, which does not upload, and as long as your browser can understand it, should be able to add beats to the video.
Beats currently only interact with Particle Fountain or Snow generators, because I haven't coded the function in the others yet, but...
Should work!!

It also doesn't currently output the audio to the capture, so.. for now at least, you'll have to do what I did, and resend it in a video editor. But hopefully I can fix that, too..?!

-=-=-
''Load, Next List!''
Sat, 20 Aug 2022, 06:00
Jayenkai

Is this project still going?
Kinda.. Bit slow, though.
Today I added the nice effect from Orret Cha with the visualiser making the "land", in preparation for next week's ALChoon.

In addition, I added a couple of keypresses.
F hides the menu until approximately when you click in the bottom right of the screen. This is great if, for example, you prefer to capture the footage with a screen recorder, instead of relying on the slightly dodgy browser-based capture.

P will play the currently chosen MP3/Wav file. Again, handy for once you've jumped to fullscreen mode, and can't click on the Play button!!

(as with all Jay-Tools, no MP3s are uploaded, and everything happens on your own system.)

You can Play with the VidGen here

-=-=-
''Load, Next List!''