Seriously.js

[brianchirls]

Hi, I'm the person responsible for/guilty of this. Thanks for the comments, everyone. My sympathies for the BSOD.

Please keep the bug reports and questions coming. I'll try to fix/answer what I can.

[gojomo]

Does it now or might it soon work with live video from the local camera?

[aceperry]

You... you're the one! :-)

Nice work. I'm curious about where you got the video, was that something you recorded, or got from somewhere? I don't really work with video, but I'm sure I can find something useful for it in the future.

[johncoogan]

This is awesome! I can't wait to see the mashups that spring forth from this (and hopefully make one or two myself). There will definitely be something really creative soon. Thanks for doing so much legwork on this.

[rexreed]

This doesn't work for me at all on FireFox 22.0 on Windows XP. See here: http://imm.io/18sd9

[mshron]

Finally a demo that doesn't make me think "Wow, the web has really caught up to the 1995 desktop!"

Maybe if you're already an after-effects wiz this doesn't seem as magical, but it certainly felt like magic to me.

[tyleregeto]

I've clocked many hours into After Effects, but seeing this in a browser and _interactive_ is amazing. Never would I have thought that JS and browsers would progress so much in such a short period of time.

[garysweaver]

The best part to me was that it was actually a pretty good music video, and the interactivity adds to it.

[wahsd]

Am I easily impressed or is the instant play when you navigate back and forward impressive? Feels like switching TV channels.

[justncase80]

Really? Isn't this just a video with green screen plus shader? I don't understand whats impressive.

[lucb1e]

You sir are thinking exactly the same thing as I am.

[tqs]

The technology used here to do the image processing is GLSL, in particular fragment shaders (aka pixel shaders). GLSL is a very small C-like language that's become a standard for GPUs. GLSL code gets sent (as a string) to the GPU by javascript via the WebGL API.

Seriously is a JS library for handling the boilerplate of WebGL, composing and compositing multiple shaders in a pipeline/graph, and adjusting their parameters. In addition it comes with a bunch of pre-written shaders.

Shaders themselves are a lot of fun to write, IMO. A pixel shader is just a function that computes a color given an input pixel location. (A shader can also take in additional input such as "textures" to sample from, e.g. a video frame.)

The shader is run with massive parallelization in the GPU. In theory every pixel can be processed simultaneously. This is how these effects can run in real time.

Here are some more examples of what you can do with pixel shaders (including sampling from the webcam in the browser -- should work in Chrome and FF), http://pixelshaders.com/examples/

I'm in the process of writing an interactive book about pixel shaders, http://pixelshaders.com/

[spyder]

https://www.shadertoy.com/browse (WARNING: it can freeze your browser)

[beggi]

IN JS? This is so cool. Also: fun to compare the raw video to the original: http://www.youtube.com/watch?v=12zJw9varYE :)

[Mindless2112]

Ah, their movements and actions in the video make a lot more sense after seeing the original.

[moskie]

Would also be interesting to see if they could recreate the effect of the original video in JS also.

[oneye]

> A real-time, node-based video effects compositor for the web built with HTML5, Javascript and WebGL

I for one am really impressed. While I'm not up to date with node.js, WebGL (or even HTML5 tbh), the boundaries that people keep pushing with web technologies is pretty wild.

EDIT: Reading more, I'm not sure if I am proud or embarrassed about my narrow focus over the last few years. I'm proud that I'm making a good living due to it, but disappointed that I haven't been able play with these things. Reading about WebGL [1], I feel like there is a new world to explore (for web programming).

[1] http://en.wikipedia.org/wiki/Webgl

[Cyranix]

Also note that "node-based" does not refer to node.js as per the FAQ: https://github.com/brianchirls/Seriously.js/wiki/Frequently-...

[danielweber]

"Sadly, we are unable to get Seriously.js to work on your computer. Sometimes WebGL gets a bit weird with certain graphics hardware and drivers. Please have a look here for more information."

[kmm]

Impressive! It's really amazing to see how OpenGL can enrich the web if it's used right. A few years ago I'd never have guessed shaders could be used in a browser.

I have little experience with Javascript projects, so can I ask why the name Seriously? Wouldn't a more descriptive name cover the contents? Also, why is the main source file 4K lines long? That's a little off-putting.

[brianchirls]

Good questions.

It's called Seriously for two reasons: 1) At some point, I had this idea that I would make all my Javascript libraries references to Homestar Runner. http://www.hrwiki.org/wiki/Seriously

2) "You can do that in a browser? Seriously?!"

As for the file size, yeah you're right it's too big. I'm working on a grunt.js build script, and when that's done, I'll break the main file into smaller pieces so you can pick and choose which utilities and things you need to load. Right now, it has the color lookup table and noise shaders, among other things, which are not necessary for everybody.

[wwweston]

OK, but I think they should have written it in Go.

[vanderZwan]

For a second I thought you were being snarky about Go. Then the penny dropped.

[Vecrios]

Curious, why would you think so?

[benihana]

I see what you did there.

[Groxx]

Note that this has been around since 2011, though with changes (still seriously cool, of course): http://web.archive.org/web/20111112185437/http://seriouslyjs...

Seriously. JS has been this amazing for a while. See also this demo from 2010: http://www.craftymind.com/2010/04/20/blowing-up-html5-video-...

[joezydeco]

Wow, I've never seen all 4 cores in my machine simultaneously spin up to 90% before. Nice trick.

[randall]

This is the sort of thing we're working on at Vidpresso. If this impresses you, and you want to build stuff like this... we should be friends. Contact info is in my profile.

[aantix]

We should be friends. Love the concept of Vidpresso; I woud have liked to try a demo but it required me filling out a form. :(

[kingkool68]

We're already friends. Hi Randall!

[devongovett]

Article about this on badass javascript from over a year ago http://badassjs.com/post/16583192105/seriously-js-a-realtime...

[whadar]

Now that's cool! Closest thing I've ever seen to fulfill the "instagram for video" prophecy

[ErikAugust]

:::Takes week off to spin up an Instavideo demo:::

[beggi]

Isn't the green screen kind of required?

[crabasa]

This is pretty awesome, but it seems like OK Go has cornered the market on "cool web tech" demo music videos. Doesn't anybody remember their collaboration with Google?

http://allisnotlo.st

I fully expect them to do something with Microsoft for IE11 to complete the cycle.

[abstractbill]

OK Go has cornered the market on "cool web tech" demo music videos.

Actually there have been some other very nice ones recently:

http://donottouch.org/

http://lights.elliegoulding.com/

[alanh]

Don’t forget the Arcade Fire! http://www.chromeexperiments.com/arcadefire/

[krrrh]

Don't forget about Yung Jake! http://e.m-bed.de/ (seems to work best in Safari for me ymmv)

[michaelmior]

Seriously did nothing for me.

    Uncaught Not a valid HTML element: EMBED (must be img, video or canvas)

[cnlwsu]

Didn't really know what was I was looking at. Clicked a button. wtf-in-js-mind-blown

Great job!

[olalonde]

I know next to nothing about graphics programming but how does this work? I don't suppose there is a Javascript loop that goes through all the pixels on each frame...

[Tomdarkness]

I'm confused, is the green screen suppose to be intentionally bad? It not only removes the background but most of the people as well.

Edit: Here is what it looks like for me: http://i.imgur.com/8wflg8Q.jpg in both Firefox 21 and Chrome 29+27

[brianchirls]

No, it is definitely not supposed to look like that. Here's what it looks like for me: https://s3.amazonaws.com/uploads.hipchat.com/23744/150541/nk...

Do you mind sharing your video card info and operating system? It will be hard to debug remotely, but I'll see what I can dig up. Please post it here or on github: https://github.com/brianchirls/Seriously.js/issues

Thanks

[lnanek2]

Working fine on 27.0.1453.93 on OSX here. Although the pictures seem to have been changed. There's only one person's face on the left on mine.

[lewisflude]

Is that OK GO?

[underwater]

It's the raw video from http://www.youtube.com/watch?v=12zJw9varYE. The real film clip features a really neat Windows 98-like green screen effect.