Archive for the 'web' Category

Stereovision

Friday, December 12th, 2014

Some time in the nineteen fifties a serious attempt was made to bring stereoscopic photography to the masses. Stereoscopic photography faces similar adoption challenges to 3D movies and Virtual Reality because up to this point there is no easy way to experience any of them without attaching a contraption to your face. An interesting note is that while 3D movies and Virtual Reality are fairly recent, stereoscopic photography has been around since the eighteen fifties, and even commercial viewers were mass produced back then.

In my quest to learn how to make my own Virtual Reality work, I got interested in the display of stereoscopic photography in VR. Inspired by the idea that properly placed in VR space, a stereoscopic photo can feel a lot like a VR sculpture of VR hologram, a moment frozen in time with a large potential to make the viewer feel “there with it” as opposed to just looking at a flat projection of it in a two dimensional picture.

While I was looking for cheap and easy stereoscopic camera systems I came across the historical mid twentieth century consumer cameras, and it was easier for me —or at least more reliable/fun/interesting— to get my hands on a couple of film cameras and start taking pictures than to find a digital solution. Eventually I came across a smartphone solution in Kickstarter that worked fairly well, but not before I was already shooting stereoscopic 35mm film all over the place. Here is an inventory of my stereoscopic gadgetry:

  • Revere Stereo 33 35mm Camera Released around 1953. In perfect condition. Works great.
  • Stereo Realist by the David White Company, available from 1947 to 1971. In perfect condition. Works great.
  • Poppy 3D for iPhone via Kickstarter. This works great too. Except it’s a little painful to manage the files. Overall easier than shooting film, developing it, scanning it and putting it together for digital viewing, but it could be easier on the viewing/playback aspect of the product.

Once I had my pictures, the next step was to build a program that could let me look at them through a VR headset. Since I have no time or interest to learn how to use a game engine, I was left with only one option: the web browser and WebGl/ThreeJS. I already knew there are experimental builds of Firefox and Chrome that are compatible with the Oculus Rift DK2 headset, and I also wanted something that could run on a mobile browser for Google Cardboard viewing. I knew where to get sample boilerplates from the VR Chrome team and Mozilla, so all I had left to do was to find a way to feed two textures onto the same piece of geometry while rendering for each eye. Luckily I found a code example that did just that, and it didn’t take me long to adjust it to my needs. You can find the code here (Stereovision).

Stereograph_as_an_educator
A stereo card of a woman using a stereoscope circa 1901. Via Wikipedia

Z-3
My Stereo Realist after a photo session

stereovision
Stereovision for Cardboard on my iPhone. Featured photo taken with the Stereo Revere

stereovision-3
Stereovision screenshot. Left and right images are rendered for the corresponding eye

PaperJS vs TwoJS

Thursday, August 14th, 2014

Inspired by a morning discussion with Tom White aka dribnet about javascript and 2D vector graphics, I came home tonight determined to find out how far could I get in ten minutes using PaperJS on the one hand, and TwoJS on the other hand, with the sole constraint that somewhere along the way I had to make use of SVG.

For those who don’t know, PaperJS is the web-based heir of Scriptographer, a Javascript plugin for Adobe Illustrator that lived up until CS5. As far as I know, PaperJS is far more powerful than it’s predecesor, and has been designed keeping in mind the interactive, object-oriented nature of the contemporary web browser.

Similarly, TwoJS is a relatively new web-based 2D drawing library inspired by the WebGL javascript library Threejs.

After ten minutes of PaperJS I produced a simple particle raster script that uses an image to draw a collection of SVG shapes over a grid, and I added some color manipulation and particle scattering functionality to produce images like the ones featured below, using pixel data from grayscale photographs of Brigitte Bardot and William Burroughs.

TwoJS took me in a completely different direction. All I did was write a script that pulled SVG code from the loaded page source, and created animations from it. Here are two examples: I<3VR and rolling W.

bardot-2

burroughs-2

Wemolab GIF commissions

Tuesday, August 12th, 2014

I have been using tumblr and twitter connect with gif artists in the web and commission them with making small animated loops inspired by the Wemolab logo. Here are some of my favorite results. Beautiful.

By zolloc:

tumblr_nch2u08hsW1tze2b3o1_500

By Dave Whyte:

512

p4_512---a

By Maxwell Ingham:

Max_Ingram_Wemolabs-Logo-512px-Black

IML400 Spring 2014

Monday, May 12th, 2014

I just finished teaching IML400 in USC for the third time. Over the winter break I had a chance to review my Syllabus and improve it, based on a few new insights I developed at the time. The course title itself is “Creative Coding for the Web”. When I was invited to teach it I was given freedom to propose my own curriculum, so I started by deconstructing its name. The result couldn’t hit closer to home. To me, creativity, programming, and the web are three of the most important things a human of our time should care about, comic books and ice-cream being the other two. They connect rational thinking with human imagination and communication in ways that have changed our world beyond our wildest dreams. My core goals have remained the same (to encourage a design-first culture supported by programming as a new kind of literacy, and the web as the mother of all media), but my approach to introduce them as a source of inspiration to students has become more focused. Here is some of what I’ve learned:

  • Design is a lens with variable focal length. Learn design first, and you will learn to see.
  • When it comes to programming, sink or swim is the way to go.
  • When it comes to sink or swim, don’t forget to make it fun.
  • Fun is good short-term, but it burns-out fast. Long term requires a deeper kind of value.
  • Let yourself sink if you want to go deep.
  • Too much freedom is confusing. Too much direction is frustrating.
  • To be creative you need to create something. Ideas are nothing without a good execution.
  • The web is your key to the world. Own it. It will never stop changing, so you should never stop learning.
  • Has this happened to you?

    Wednesday, August 21st, 2013

    I recently rediscovered a video recording iPhone app called 8mm. Evidently, it makes your mobile video look like an old movie filmed with an eight millimeter camera.

    Every time I go for a walk I take my phone out to record locations, landscapes, moments, or anything else that calls my attention. Last Wednesday I was walking back to the office when I saw these two guys asking the mailman to take a picture of them using a picturesque Venice wall as a background. I walked right in the middle of their interaction and recorded them as I walked by. The mailman took off in my direction and the other two guys just walked away into Rose Ave.

    Then yesterday while browsing through my Tumblr dashboard I stumble upon the picture taken by the mailman in some Hip Hop blog I follow. The original post is here. The blog I follow and the original item were separated by a long list of intermediaries (more than 20).

    This is the first time I find myself experiencing a moment where the following three conditions are satisfied:

    1. This moment is of absolute no consequence.
    2. This moment is recorded by me and by at least one stranger.
    3. The stranger’s recording of this moment finds it’s way to me through an online social network.

    This might already happen to a lot of people, and I am expecting it to happen a lot more frequently in the future. For now, I am just going to upload my movie somewhere and somehow connect it to that picture.

    hiphop

    Learning AngularJS

    Thursday, June 20th, 2013

    We just got a contract job at WemoLab to develop a mobile web app for a sports betting startup called Joust, and after a week or so of deliberations we decided to build the whole thing using an AngularJSNodeJSMongoDB combo, pure javascript from end to end.

    I have to say AngularJS hasn’t been exactly easy, but there have been several times where I have been surprised finding extremely simple ways to set up certain things, especially when binding event triggered method chains across completely separate scopes. It’s kind of great, even though all those directives are driving me crazy and the learning curve has been steep as hell.

    Programming languages are used to create functional worlds. In these worlds, new languages are created to create new worlds within the older ones. They are like stories within stories within stories, except in the case of software all these stories have a life of their own. It is natural to fantasize about a esperanto of programming, or a universal language that could be used to program anything. Today, this language is a dream, but at least in the web, javascript is as close as it gets to being the language of god, and AngularJS, together with NodeJS and a document/json based database solution like MongoDB, are a good reason why.

    theBlu.com

    Friday, May 31st, 2013

    I can’t remember the last time I officially hand crafted a website. To be precise, this is not even a website, it’s just a webpage; I plan to update the rest of the website over the next few weeks, but for now, I feel this is a great first step.

    Obviously, my first design goal here is to get visitors to download theBlu, but also to learn about it, to want it, and most importantly, to believe in it as a viable platform to communicate knowledge about biological systems. I think about this branch of digital media as the the simulation of life. And there is also the geographical aspect: mapping the environment where this life occurs. If they manage to simulate life well, computer networks will be the Petri Dish of the future.

    And it is also interesting to think about the Darwins of the future, combined perhaps with the Pasteurs of the future and others (of the future too, LoL). Because scale is a controllable variable, in the digital realm, looking into the microscopic drama that unfolds inside a Petri Dish can become a similar experience to sailing across the world’s oceans from Galapagos to Galapagos or whatever. Furthermore, the digital explorer is not limited to just observing and collecting samples, but he or she can control time or even manipulate or create life in a way that in the future will probably be possible in the physical world too, but the big difference is that in the physical world we learn to control nature, when in the digital world (or playground) we figure out how to create something like nature.

    I don’t want to be all over the place but who cares: so CSS and HTML and Javascript. To me, this combination is as relevant to us as Gutenberg’s printing press. Am I right?

    And on that note, looking back in history to the precursors of other media –Étienne Jules Marey and his relation to animation, for example– do you think stuff like theBlu will be faced by the same lens a few hundred years from now? Does it even make sense to think like this today?

    theblu