
Seriously.js - Aissen
http://seriouslyjs.org/
======
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?

~~~
brianchirls
Yup. You can see a live video demo with a sample of some of the effects:
<http://brianchirls.github.io/Seriously.js/>

Although, both Firefox and Chrome have been a bit buggy for me with
getUserMedia.

Try the Ascii Text effect.

~~~
gojomo
Cool, thanks!

Couldn't get it to work in FF (Mac/22.0) - it asked for camera permission,
camera activity light went on, but no images and constant re-prompts for
permission. But, worked quite well in Chrome (Mac/27.0.1453.93).

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

~~~
smackfu
OTOH, it's mainly possible because computers are faster so Javascript isn't a
slow language anymore, and the document model is just getting out of the way
and letting you manipulate pixels directly.

~~~
kmm
This isn't manipulating the pixels directly. Javascript is still way too slow
to do that, and I don't think that will ever change. The real work is done by
the graphics card. The Javascript only uploads a frame to the graphics card,
makes it run a shader and then displays the adapted frame.

------
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)

~~~
BHSPitMonkey
Whose idea was it to actually run all those shaders at once? I guess someone
just didn't want to store and host some thumbnails?

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

~~~
aantix
How are they changing out the backgrounds in the tech demo? I was expecting
the original to be a green screen background...

~~~
BHSPitMonkey
"Original" meaning the original finished released music video from 2009. The
band released the raw green-screen footage later for remixing.

~~~
lessnonymous
Respect for OK Go videos just went up a level. What an awesome idea!

------
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-...](https://github.com/brianchirls/Seriously.js/wiki/Frequently-
Asked-Questions#does-this-have-anything-to-do-with-nodejs)

~~~
oneye
I completely missed that. Thank you!

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

~~~
fierycatnet
Same here. Could it be because I am running Linux?

~~~
aceperry
Works for me on Ubuntu 13.04, Chrome 28(beta), Firefox 21, using Nvidia
drivers.

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

~~~
hexasquid
I'm going to think of it whenever I see something like "You can't do anything
serious with JavaScript"

~~~
kmm
To be honest, the real work is done on the graphics card.

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

~~~
Vecrios
Curious, why would you think so?

~~~
Timothee
The video is of the band OK Go.

~~~
Vecrios
You never know.

------
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...](http://web.archive.org/web/20111112185437/http://seriouslyjs.org/)

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-...](http://www.craftymind.com/2010/04/20/blowing-up-html5-video-
and-mapping-it-into-3d-space/)

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

~~~
Tomdarkness
Hm, that is strange. It does not even tax my CPU enough to kick it out of its
lowest speed state, let alone tax any of the cores.

~~~
joezydeco
That's interesting. What kind of CPU?

~~~
Tomdarkness
Intel 3930k:

<http://i.imgur.com/OF58RZl.png>

After the peaks when it is flat at around 3% is when it is playing.

------
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. :(

~~~
randall
That's what I'm coding right now! :) We're reworking our marketing site.

------
devongovett
Article about this on badass javascript from over a year ago
[http://badassjs.com/post/16583192105/seriously-js-a-
realtime...](http://badassjs.com/post/16583192105/seriously-js-a-realtime-
node-based-video-compositor)

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

~~~
beggi
Isn't the green screen kind of required?

~~~
epoxyhockey
Perhaps something like this could be done: <http://clippingmagic.com/>

(discussion: <https://news.ycombinator.com/item?id=5682831>)

~~~
brianchirls
Something similar to that is possible for video. For example:
<http://www.youtube.com/watch?v=rGMqXBvYxog>

I'm working on porting this over to Seriously.js so it should run in the GPU,
hopefully pretty fast. The first crack at it was not so good, and now I'm
experimenting with some new features that are only in Chrome nightly builds at
the moment (and buggy at that). So look for this in the next 3-6 months.

------
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/>

------
michaelmior
Seriously did nothing for me.

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

~~~
brianchirls
It sounds like you may have a browser addon that's creating an EMBED element
as a fallback because the browser can't play the video itself.

If that's not the case, do you mind writing a bug issue on github with your
browser details?

<https://github.com/brianchirls/Seriously.js/issues>

Thanks

~~~
michaelmior
Running the latest Chrome on Mac OS X. (btw, realized my initial comment
probably came off a little snarky. My apologies. From the sounds of the other
comments, it's something incredibly cool!)

~~~
brianchirls
That's pretty weird. Is it possible you have a browser extension that's
replacing the video tag with an EMBED?

~~~
michaelmior
Seems to work in Incognito. I'll let you know if I track down the extensions
that's messing with things. Really awesome!

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

~~~
brianchirls
Nope. That would be too slow. I tried that a couple years ago before writing
Seriously.js, and the big problem was copying around the memory. You have to
first draw the video to a canvas, then you have to extract the pixel array
from the canvas, loop through all the pixels and then draw the pixels back to
the canvas. Now, for a high-definition video at 4 bytes per pixel (RGBA),
you're looking at about 3.5MB of memory for each copy. And on top of that, it
has to allocate and garbage collect that 3.5M pixel array for every frame,
because it doesn't let you copy into an existing array. If you look at the
first video-processing canvas demos, they tend to be pretty small, and this is
why.

Instead, this uses WebGL/OpenGL. So the pixels are copied once from the video
directly into the GPU memory, and they are processed in parallel there before
going straight to your screen. Much, MUCH faster.

~~~
olalonde
Sorry for the dumb question but how does the GPU execute Javascript? Or is it
done in a declarative language specific to the GPU?

~~~
slackito
The GPU doesn't execute Javascript. It runs small programs called "shaders",
written in GLSL (the OpenGL shading language), which are compiled on the fly
by the graphics driver to something that can be actually executed on the GPU.

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

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

~~~
graywh
Picture? It's a video.

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

------
imsky
This is more than a year old. It was featured on Badass JS in January 2012.
[http://badassjs.com/post/16583192105/seriously-js-a-
realtime...](http://badassjs.com/post/16583192105/seriously-js-a-realtime-
node-based-video-compositor)

------
riffraff
FYI, I get nothing cool other than a blank area, and I see this in the console
logs:

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

Chrome on osx: <https://aboutmybrowser.com/T1fotBeR>

------
KerrickStaley
Please cite the song on the page.

------
dripton
Doesn't work at all for me in Firefox 21.0 on amd64 Linux. Works in Chromium
25 on the same box. This is particularly disappointing because there's a
Mozilla logo on the page.

~~~
shardling
It works fine in FF 24 on a mac.

~~~
dripton
That makes me happy; it means it'll probably work on my box too if I upgrade
Firefox. (I'm using Ubuntu 12.04's default apt repository.)

------
gopalv
You know it's Serious when "TV Glitch" is available as a feature.

~~~
brianchirls
"TV Glitch" is the Page Curl of the 2010's

------
fowkswe
What's the awesome song?

~~~
brianchirls
This is "WTF" by OK Go. Back in 2010 they posted the raw greenscreen footage
for people to remix.

<http://okgo.net/2010/01/20/wtf-video-remix-project/>

------
franze
i did something like this (ok, not as smooth but it goes in the same
direction) in 2010 with canvas/video/css
<http://www.barbafan.de/html5video?video=tron> (was covered by boingboing at
that time, lots of traffic, some partnership opportunities (mostly from p_rn
sites), some job offers, non any interesting))

cool that somebody now packs a similar idea into a lib, will definitely check
it out.

------
mmcclure
Is it just me, or is this the perfect use case for Insert Me Anywhere?

<http://insertmeanywhere.biz/#/home>

------
saejox
TypeError: video is null @ <http://seriouslyjs.org/js/script.js:226>

Firefox 21.0

~~~
graue
Yeah, I got the same. Do you have Flashblock? Try whitelisting seriouslyjs.org
and reloading. Fixed it for me on Fx 23.0a2.

(Note: This comment was originally complaining that the link didn't work in
Firefox; edited when I found the cause.)

~~~
corin_
Not for me, but given it has a Mozilla logo and credits them for "support" I
would assume it does for some.

------
sirn
This even works smoothly on my HTC One X (International) running Firefox
Aurora with only occasional frame drop. Amazing.

------
blindhippo
Doesn't work with Ghostery enabled. Don't see why it shouldn't work with
twitter/google analytics blocked...

~~~
brianchirls
Is there a console error?

~~~
blindhippo
"Uncaught Unknown source type seriously.js:2727"

Soon as I turn Ghostery off it works fine. This is in Chrome 27.0.1453.110

~~~
brianchirls
Works fine for me with Ghostery. For some reason, it looks like videojs is
falling back to EMBED tag for some people. Will investigate.

------
deepGem
First thing in the morning, I wake up to see this. Made my day :). Awesome
job.

------
Pherdnut
If only we had static types, we could do something like this with JavaScript.

------
beatak
Isn't this an old news? I feel like I saw this page in last year?

------
o0-0o
Anyone want to take a stab at overlaying youtube vids with this?

------
rilut
What is the name of this song? What a good song

------
Sami_Lehtinen
Crashes my browser in seconds. Nice exploit.

------
aaren
'by the sea' crashed my x server!

CentOS 5.9 / Firefox 17.0.6

------
nsxwolf
What am I missing? I saw a music video.

~~~
xauronx
What kind of person sees buttons and doesn't click them? You monster ;)

------
hidden-markov
Seriously? That's just wow.

------
pagekicker
What is the point of this?

------
hawkharris
This is incredible.

------
pacomerh
Nice song also.

------
gersonaya
Damn nice.

------
suyash
End of TV!

------
thebadplus
badass code. badass music.

------
brickmort
this is AWESOME!

------
sublimit
Whoa, this caused the second BSOD I've seen since Windows 98. When I started
messing with the options, the windows just flashed wildly for a while, some
popup about ATI Radeon driver errors was struggling to spring to existence,
and then everything froze.

------
notdrunkatall
Cool stuff. Good song too.

------
aristus
Did you know your library name is an adjective?

~~~
_pius
Seriously? It's an adverb.

