Posts Tagged ‘popcorn’

HTML5 Video for the rest of us

“Until now, video on the web has been stuck inside a little black box”

– – Brett Gaylor.

Together with the fine folks at Beyond Reality we’ve have upgraded our interactive video platform Marduq to a new HTML5, cross browser and cross device platform, with responsive design, web 2.0, ajax, jQuery, graceful fallback for old web browsers and all the other buzz words you usually find announcing such a product.

It even supports Wordpress embedding out of the box; Check out this clip from when we were VJs. With overlays, Comments Twitter and whatnot:

See that. SEE THAT! Ha. Ha HA haha ha. Pwnd!

So beside being an awesome HTML5-first video player, it is also an iPhone-, iPad- and Android-app that allows taking pictures and hooking them up with videoclips.

Wait, wut?

Okay, say you are reading an excellent magazine like Landbouwmechanisatie (with cool stories about farmingmachines) and you are reading an article about the New Holland t7,170 ( a Tractor ) and then you want to know more. Pull out your phone or tablet, download the app, and make a picture of the picture in the magazine (yo dog).
The picture will work like a QR-Code linking you up with a video review of that New Holland t7,170. Which you can than view at your leisure.

Not only will it show video, but as you can see you can add stuff, like titling, pictures and so on to the video, spicing it up with whatever you like, and these overlays will be triggered by the time-code of the video. So if Smith is interviewed and enters the video, you can add a little caption with his Linkedin information, background info and current GPS information. Whatever you can find on the interwubz about mr Smith.

Moar popcorn please!

Popcorn!

Now we’ve been working with time-based content in Flash for over 5 years, but in the wonderful world of HTML5 we are no longer lone missionaries preaching the gospel of interactive video, there is a whole scene at Mozilla who are working along the same thoughts as we have.

The good people overseas even launching something called Popcorn Maker. And popcorn maker is nice, and for everybody and it’s free to use, and it’s open source, and the world is more beautiful now it has arrived :)

With popcorn.js developer-people like myself can bake little gadgets and toys and playthings like this one.

Seriously

And there is more. Now shit gets serious, as I packed the Seriously.js web shader library in there. Shaders are like Photoshop-effects for anything visual in a program, but on an interesting mixture of speed an acid. And all in real time, accelerated right there on your Graphical Processing Unit (GPU). The code of those shaders looks like it’s on acid too:

//constant variables.\n' +
'const vec4 one = vec4(1.0);\n' +
'const vec4 two = vec4(2.0);\n' +
'const vec4 lumcoeff = vec4(0.2125,0.7154,0.0721,0.0);\n' +
'\n' +
'vec4 overlay(vec4 myInput, vec4 previousmix, vec4 amount) {\n' +
'	float luminance = dot(previousmix,lumcoeff);\n' +
'	float mixamount = clamp((luminance - 0.45) * 10.0, 0.0, 1.0);\n' +
'\n' +
'	vec4 branch1 = two * previousmix * myInput;\n' +
'	vec4 branch2 = one - (two * (one - previousmix) * (one - myInput));\n' +
'\n' +
'	vec4 result = mix(branch1, branch2, vec4(mixamount) );\n' +
'\n' +

But that is mostly because I suck at OpenGL. Which this isn’t. Not exactly. This is what they call WebGL, which is almost the same thing, only totally different, but at which I also suck. There is hope however, programming languages can be learned. Even these weird derivative languages that feed directly into your GPU. Sadly enough only Chrome and Safari support it. And the iPad is said to support it only in iAd, not in the ‘normal’ browser. Bastards.

In plain English: Shaders are a large part of what Instagram does, but I’m using it for real-time effects on my video playback. And yeah, it is pretty awesome like that.

Also in 3D!

But Wait!  There is more!
But this is still so extremely experimental that you might blow your computer. So please, use caution while clicking on this link. Here is another implementation of 3D on the web displayed.

You are now looking at threejs.org with a special implementation of a CSSRenderer that I cooked up over christmas.

This is extremely cool, because it allows me to render HTML boxes as text and pictures and well, as HTML in the CSS renderer and I can render cool and nifty special three dimensional effects like models, shaders and lights through threejs in WebGL. Sadly enough, video routed through canvas is pretty slow, so I need to route that through the CSS renderer, which allows only modest special effects.

But chin up, this is going to be the new interfaces for all your holoscreen setups of the future!

spiders_screen

Spider Jeruzalem already has a holoscreen, the bastard

Also, I want Google Glass. Now. No really, as in right f*cking now.

That is al very nice and dandy, but what the f**k does that toy of yours do?

Hm. Ah! yes, it’s a little mouse recorder — it syncs your mousemovements to the time marker in the video, effectively replaying your mousemovents as you play back the video.  Needs some polishing up, but I thought it was neat, and build with popcorn. And GML. Works great on an iPad.

#update 25/2/2013: NOTE from my lawyer; I made this! All copyright is held by ME! Or rather, by Sense-studios.com, for licencing fees and inquireies, please refer to marduq.tv or sense-studios.com, (or info@sense-studios.com)

Write ALL the code in Javascript

“Hi. You’re going to call off your rigorous investigation. You’re going to publicly state that there is no underground group. Or we are going to take your balls. Look, the people you are after are the people you depend on. We cook your meals, we connect your calls, we guard you while you sleep. Do not fuck with us.”

Tyler Durden, Fight Club


http://www.quickmeme.com/meme/3pcw1x/

http://www.quickmeme.com/meme/3pcw1x/

It is everywhere now. Javascript.

I’ve been bumping my nose into more and more javascript these days. It seems that slowly but surely everybody is writing javascript now. I was to blame Steve Jobs and the whole HTML5-frenzy some three years back, but truth be told, it all started earlier.

Maybe been as early as that whole AJAX bandwagon that rolled out in 2005. But truth be told, javascript was around when I was typing away tables in HTML back in 1999. Then it was this nasty, ugly and bulky language. It was only good for knitting long strings of functions together in an inedible garble that had to be rewritten for every single browser. And Macromedia’s Dreamweaver made the ugliest javascript of all.

So I went on, learned Flash, learned a couple of more programming language and then starting to find more and more javascripts doing these little things… Connecting a mousewheel to Flash apps… Hooking up urls-anchors to Flash pages… providing google with analytics information, providing a nice hover for my menus and so forth. All the while all that javascript simply lay there. As dust piling up in the corner of the web. This massive amount of Javascript.

Everywhere.

Of course it didn’t take long before somebody came along and actually wrote a good metalanguage upon javascript to make it more browser – and more coder - friendly. First there were things like javeline, ajax.org and mootools; but soon JQuery became something of a winner. Finally javascript was able to do those nice manipulations of the dom swiftly and elegantly; The little things on webpages; making menu’s hover and images flip, animate and flurp.

JQuery made my day. I actually wanted to write a post: “‘JQuery’, or why I stopped worrying about Flash and started to love Javascript”, but I never did, because I hadn’t anything to add to the discussions that wasn’t already said on some other blog. The title remains very nice though, glad I finally could use it in a sentence.

Later I found out that they are recreating everything I did the past 5 years with Marduq in Javascript under the umbrella of Mozilla in Popcorn. – Very nice to find some like minded people and they do it it very fine indeed – so you’ll find some crazy popcorn experiments here, soon.

Then I heared they have brought javascript to the server. You can write Javascript in a V8 engine residing on your server and connect, or call to it, through the clients app (be it mobile, desktop or whatever … ) in node.js. No need to sidestep with Ruby, PHP, Java or ASP … !

Finally, I was looking this weekend into some weird interface devices for veejaying and came across a program called “Control“. So I was looking at the website over at http://charlie-roberts.com/Control/ and started to read. Now Control is is basically a scripted interface for mobile devices to create Midi controllers (long story, very cool  ) and found that the scripting language of the whole thing is ………….  friggin javascript. JavascriptJAVASCRIPT…. JAVASCRIPT EVERYWHERE!

Posted: May 20th, 2012
Categories: general, nerd, technology, vj, web, work
Tags: , , , , , , ,
Comments: 1 Comment.