Posts tagged code

This audio-controlled Hockney Delayer sketch works much like the Directional Delayer I posted earlier: a buffer holds a number of video frames, as the screen is made out of a grid of cells, each selecting its bit from a frame in that buffer. How further back?, being mapped to the audio amplitude. (I also added a bit of ‘jitter’, moving and slightly enlarging the cells according to the same audio amplitude.)

My intention here was to translate something like David Hockney’s collages (earlier post) to video. I’m not sure it works. Here’s another example, splicing together different video files. Both share the same audio track, again hastly assembled from TB Arthur’s free sound library, by the way. You can check the code in my Processing 3.x Github repository.

I had a few Processing sketches that I’ve made and never took the trouble to document or record in some way lying around. So here we go: this is a short video with minimal editing that showcases what I called an Audio-controlled Directional Delayer. You can check the code in my Processing 3.x Github repository.

What it does is to render each frame as a set of rows or columns copied from a specific frame in a 150-frame buffer (or more, if you want). From how far back in that buffer will that row or column be retrieved is mapped to the audio input level. Sometimes a high amplitude will also trigger a mode change (horizontal/vertical).

Here’s another example, using a couple of videos I recorded at the local market. The audio track was hastly assembled from TB Arthur’s free sound library, by the way.

A friend of mine asked if I could put together a piece of software that would allow him to have a video playlist and live video in the same screen, for use in a performance art piece. I said sure and started to dust off whatever little knowledge I had of Processing.

As usual, once I got over the usual hurdles (ex. the GSVideo library won’t accept DV capture over Firewire, so I had to use the flaky video library bundled with Processing for that, but then GSVideo 1.0 — much, much better for the video playlist part — would crash when used together with it so I had to settle for a prerelease version of GSVideo… and etecetera) I finally proceeded to pimp the code and throw everything I could think of at it: a dialog to choose the folder where the videos are and a routine to check for valid video file extensions, the ability to swap the video/live feed sides, the ability to switch between multiple cameras (ex. webcam, firewire camera, screen capture driver, etc.), the ability to correct the cameras’ aspect ratio, a fullscreen mode, the ability to reposition the images on the screen, a cool ‘swooshy’ effect for the live feed, the ability to pause or advance the playlist at random.

I’ve been using GitHub for version control, finally getting the hang of it thanks to their friendly Windows client (sorry if this makes me uncool — I had previous struggles with Git which made me wait for this sort of desktop client). I think it’s incredibly cool there’s this record of the changes I made to my code as I went along. Here’s my repository of Processing sketches.

P.S.: If you’re looking at the code in picture and wondering, I know perfectly well Java/Processing variables don’t need to start with a dollar sign ($). I just use that as a notation for global variables.

Sync'ed some of my Processing sketches to GitHub (batteries/libraries not included) —…

Dusting off my meagre Java/Processing skills, I had the unconfortable feeling it is legacy technology.

Little details: the menu bar

One of the things I find most satisfying while designing/developing a website is implementing those small, almost imperceptible details that can mean Quality, the Web equivalent of sophisticated stitching in clothing, and which to me feels like a particularly nice click must feel to a master watchmaker. So today, as I made a few small tweaks to this website (meaning this one, Tumblr-folk) — including better-looking YouTube embeds, fixing lightbox weirdness in pages containing embedded videos, etc — I started thinking how proud I was of the site’s navigation bar. Granted, is not as if I invented the wheel or something, and you can see the same kind of navigation in lots of other places out there. But still, I’m really pleased with the result — and with the implementation, which I think is rather clever:

As you can see, scrolling down the page will summon a fixed navigation bar, and scrolling to the very top will make it disappear under the site’s heading (which also contains navigation links). The real trick here is that everything is done with CSS, no Javascript is required to render the fixed navigation bar once you scroll past some Y coordinate:

header { display: block; position: relative; background: url("header-bg.png") repeat-x; width: 980px; height: 150px; z-index: 100; } #header_fixed { display: block; position: fixed; background: url("header-fixed-bg.png") no-repeat; width: 100%; z-index: 50; top: 0; left: 0; }

I do cut some corners in the above code, but you’re free to figure it out on your own or View Source. The gist of it is that the fixed header element (#header_fixed) is sandwhiched between the main page div and its header (which I wrote using the HTML5 element of the same name): just look at their z-index! As you scroll past the header, the fixed element is revealed underneath. Some clever PNG transparencies and you get the ‘dissolve’ effect you can see here. I found that a clean transparency gradient made that transition a bit weird so I made use of some stripes.

Another detail I added to the fixed navigation bar is that it’ll scroll you back to the top of the page if you click on it, à lá Google+. For that, I did need some simple jQuery:

$('#header_fixed').click(function(ev) { $('html,body').animate({scrollTop: 0}, 800); }); $('#header_fixed a').click(function(ev) { ev.stopPropagation(); });

The only subtlety to it is that you don’t want any scrolling to happen when the visitor actually clicked a link in the navigation bar, and that’s where that stopPropagation() event method comes in: it’ll block the event from being activated further up in the DOM, effectively overriding that first function. A useful thing that’s good to know.

jQuery Enhanced Lightbox

Do you like the ‘lightbox’ I use to display big images on my website? Now you too can download and use it. It’s free! And it is marginally superior to other lightbox scripts, which is why I made the effort:

  • You can add titles and descriptions to images;
  • Images automatically resize to fit in the browser window (but you can set an attribute to disable this).

I’ve also started a new code scrapbook, in which I’ll post more useful scripts in the future.