search

caseif / js.nation

Real-time music visualizer written in JavaScript.
GNU Lesser General Public License v2.1
89 stars 28 forks source link

Rendering visualizer to video ability #16

Closed iGerman00 closed 5 years ago

AlexVestin commented 5 years ago

I can help with this if there's interest

iGerman00 commented 5 years ago

There is, there still is.

сб, 19 янв. 2019 г. в 18:01, AlexVestin notifications@github.com:

I can help with this if there's interest

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/caseif/js.nation/issues/16#issuecomment-455778503, or mute the thread https://github.com/notifications/unsubscribe-auth/Ai-lEJOnCSfmJrpmvJB5MH1p01dk7nadks5vExc3gaJpZM4WMgxZ .

AlexVestin commented 5 years ago

@iGerman00 Cool. :) Well we probably need input from one of the maintainers if they want this in their repo, or if we should make a fork

iGerman00 commented 5 years ago

That would be so awesome, an actual alternative to rendering a visualizer in after effects, which takes ages, while this will take like, I don’t know, duration of the song +- a minute. And you can freely customize it to your liking too, for example I got rid of particles and changed the logo to another one, and customized the way the waveform looks like a bit (even though I don’t code, I still managed to)

сб, 19 янв. 2019 г. в 20:36, AlexVestin notifications@github.com:

@iGerman00 https://github.com/iGerman00 Cool. :) Well we probably need input from one of the maintainers if they want this in their repo, or if we should make a fork

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/caseif/js.nation/issues/16#issuecomment-455790293, or mute the thread https://github.com/notifications/unsubscribe-auth/Ai-lEMahqx4_r4h7Gw_n7AJKCWspQDg9ks5vEzuLgaJpZM4WMgxZ .

caseif commented 5 years ago

I'm not too keen to the idea of merging such a feature into master, as it somewhat undermines the emphasis on realtime rendering. Of course, you're still welcome to fork the project under the terms of the GPL3 (all modifications must remain open-source), and I'd be very interested to see such an implementation in action.

Closing this for the time being.

caseif commented 5 years ago

@itsIncept, I'd also be interested in your take on this - I realize I may be closing this a bit preemptively.

itsIncept commented 5 years ago

I'd have to agree with @caseif and as an After Effects guy myself, It really isn't a substitute for the accuracy and customizability of an NLE. However if any progress is made in making the base code better we'd definitely look into that. Even with our best efforts it is a little spaghetti in places aha.

AlexVestin commented 5 years ago

It really isn't a substitute for the accuracy and customizability of an NLE

Yeah, I agree. But, I think smaller template-like animations like these work great on the web.

I hacked together a demo using the MediaRecorder API, which didn't seem to be able to keep up with the encoding. Here is an example of an export at 720p, and the quality is pretty bad.

It could be done with an ffmpeg wasm port (like mine), but then there would need to be changes to the structure of the project, since it's too slow for real-time exporting, so would you guys mind me having a stab at porting some of the code to a template music exporting project?

caseif commented 5 years ago

@AlexVestin As long as it's released under a free license, go for it!

AlexVestin commented 5 years ago

@caseif @itsIncept I have an early version of the project here if you want to check it out :). I added this project and the vis.js project to it, however there are few things left to fix on them. Let me know if you want me to change any of the attribution for them!

itsIncept commented 5 years ago

That's pretty cool, can see there's quite a lot of visual things to work out but video downloading worked fine for me.

caseif commented 5 years ago

Looks really cool, I like that the visualizer is configurable!

As a note, @itsIncept contributed to vis.js a great deal, so he should be included in the attribution notice as well.

Regarding attribution: technically speaking, output of a GPL-licensed program isn't considered derivative work. This gets a little hairy since the js.nation emblem is copied to the output in this case, which may make it eligible for attribution requirement. Further complicating things are the background images grabbed from Reddit which may or may not free, and the Monstercat emblem in vis.js which is most certainly not free. I'll have to look into this a bit more and get back to you on what exactly is required.

AlexVestin commented 5 years ago

I'll add the attrib when I get back! The background images are pulled from pexel, so they're free, also the monstercat logo isn't used.

I can make it so that users load their own logo for the emblem at jsnation. I have a dialogue in place to ensure attribution to the creators from users when exporting items containing licenses that require it, but I will work to add more legally correct instructions before a live push.

itsIncept commented 5 years ago

noticed the emblem ratio looks a little odd on my end

You should probably look into using Montserrat for the MC vis font too, its what they use atm. I'm sure you know the proportions are a bit messed up too, I spent heaps of time on it, also have to take into consideration long titles, double bracketing etc, from what I remember of my personal branch it became a bit of a mess to impliment lol.

AlexVestin commented 5 years ago

Yeah I broke the aspect ratios earlier today, should be fixed again, I also imported the Montserrat font for the MC vis. Yeah, the text and logo for the MC vis don't look very good yet. They were done (pretty hastely) today. I plan on adding the boxshadow to the logo-image, and sizing the text better. There's some difficulty porting this since it has to be drawn to a canvas, which leaves out the css implementations. But I also think since the text configs will be able to be edited by users (like placement and size) there might be some wiggle-room on the autoplacement.

AlexVestin commented 5 years ago

@itsIncept @caseif
(edit, updated with some more info) I've updated the the default positions and made controls to be more precise to enable better placement of the text in Monstercat viusalizer :)

I changed the default emblem in js.nation because of the resemblance to the Nation brand, so I'm using the default output of "mv" favicon.io instead lol. But I feel it should point to this project or something similar instead, so let me know if you have a pointer to what I can change it to.

Both of these are really awesome projects, and I really want to properly credit (and not misrepresent) your work, so let me know if you want me to take down or change anything. (it would also be awesome if you wanted to join the project :) )