"Slave" artwork

This time, I decided to pay homage to an incredible artist: miss Grace Jones. While walking in my hometown on an unscheduled journey through the cold, I flicked trough my entire iPod library and stumbled across an old, but never forgotten, classic; “Slave to the rhythm”. The pure excellence of the track could not be matched, but I thought I could at least try to give the track a facelift remix to accompany it in the 21st century, by throwing it in with a set of synthesizers I had been working on a while. After fiddling with it for hours, I could not get it right. Until I dropped a drumcomputer into the rack : my ‘Jeff Porcaro Kit’. A set I had I recently constructed, inspired by Porcaro’s legendary drumming. Basically, the drum arrangement you hear is the very same set up as Jeff’s performance on Bozz Scaggs’ track ‘Lowdown’. I must have listened to that track a thousand times, trying to get the shuffle, the hats, snare, kick and – more importantly – the timing just right. It proved to be a good combination (in my opinion) and I very much like how it turned out. Frankly; I think this is my best (muical) work to date.

Have a listen using the player below, or go to soundcloud.com/c_kick/slave

Or, hosted at totalleh.com:

Freeride Film Festival Logo

Tevens was er de behoefte aan een preview teaser (video) en een minisite. In de teaser heb ik een poging gewaagd om het karakteristieke TNF logo te laten exploderen, vervolgens te transformeren naar abstracte bergen om uiteindelijk het FFF beeldmerk te vormen.

Hieronder de teaser-video, en de minisite is te bereiken op www.freeridefilmfestival.com

Million Miles Away

I added a lot of custom built synths to power-up the mix, and mastered the song from inside Reason. Also, I variated by adding my own chord section (at around 3:00 minutes).

Listen at soundcloud:
Million miles away by c_kick

Hosted at totalleh.com:

iScroll

Note: This is a semi-solution: it adds scrolling to all your ‘screens’ and keeps the toolbar at the top, but does not add a footer yet. I abandoned the use of iScroll because it wasn’t really adding anything to my app, but I was very keen on finding out if it would work with jQTouch, so feel free to adapt and build on the script.

The script basically looks for all your screen-divs, takes all content *but* the toolbar, and wraps it in two divs: ‘wrapper’ and ‘scroller’. It also destroys and re-creates the iScroll object eacht time you navigate your pages. This way it only requires 1 iScroll object.

As said, I stopped working with iScroll so I did not get around to including a footer. Feel free to build upon this script!

As said: add iScroll to the <script> tag in your header, and then add the following script somewhere:

$('body > * > *').each(function(){
        $(this).children().not('.toolbar').wrapAll('<div id="wrapper" /></div>'); //Adds the wrapper div
        $(this).children('#wrapper').wrapInner('<div id="scroller" /></div>'); // Adds the scroller div *inside* the wrapper div
    });
    var myScroll = new iScroll('wrapper', {checkDOMChanges: false} ); // Initialize the iScroll object
    $('body > * > *').bind('pageAnimationEnd', function(e, info){ // Destroy and re-create the iScroll object on every navigation
        if (info.direction =='in'){
            if (myScroll) {myScroll.destroy();}
        if ($('div#'+e.target.id+' #wrapper').get(0)) {
            setTimeout(function () { myScroll = new iScroll($('div#'+e.target.id+' #wrapper').get(0)); }, 0);}
        }
    });

Just make sure to include the above script on a pageload (after a ‘$(document).ready(function(){‘ for example). If you have any problems getting it to work (e.g. the ‘rubber band’ effect, where the scrolling just snaps up again after you let go), look at the iScroll documentation and the initialization line in my script.

Concept2

Concept3

jQTouch

Firstly, I ‘borrowed’ the section of Beedesk’s CSS that deals with the iPad layout. It basically provides a ‘splitscreen’ class and a ‘section=”aside”‘ parameter. I added one class for hiding the back buttons (and any other classes which would be of no use in the iPad layout) and saved it as an additional ‘ipad.css’:

1. ipad.css:

#jqt > [section="aside"] {
    -webkit-backface-visibility: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    right: 0;
    min-height: 100%;
}

@media only screen and (min-device-width: 768px) {
    #jqt.splitscreen {
        width: 768px;
        margin-left: auto;
        margin-right: auto;
        -jqt-splitscreen: 1;
    }

    #jqt.splitscreen > * {
        left: auto;
        right: 0;
        width: 448px;
        border-radius: 5px;
    }

    #jqt.splitscreen > .unfixed {
        overflow-y: scroll;
        height: 100%;
    }

    #jqt.splitscreen > [section="aside"] {
        position: absolute;
        left: 0;
        right: auto;
        width: 320px;
        border-radius: 5px;
    }

    #jqt.splitscreen > :not([section="aside"]) {
        border-left: 1px solid;
    }
}

@media only screen and (min-device-height: 768px) and (orientation:landscape),
only screen and (min-device-width: 1024px) {
    #jqt.splitscreen {
        width: 1024px;
    }

    #jqt.splitscreen > * {
        width: 704px;
    }

    #jqt.splitscreen > [section="aside"] {
    }
}

Then I added a detection script to the index file which sets a flag when my app is being accessed from an ipad:

2. addition to the head section:

<script language="javascript" type="text/javascript">
// For use within normal web clients
var isiPad = navigator.userAgent.match(/iPad/i) != null;
// For use within iPad developer UIWebView
// Thanks to Andrew Hedges!
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);
</script>

Using this flag, I can now set the .css file to be loaded or not:

3. load .css if ipad:

<script language="javascript" type="text/javascript">
if (isiPad){
document.write("<style type=\"text/css\" media=\"screen\">@import \"**path to your css files**\ipad.css\";</style>");
}
</script>

(ofcourse, both these script can be merged in to 1 script call)

Then I modified my html code:

4. html code:

<div id="jqt" class="splitscreen">

and

<div id="home" section="aside">

‘home’ is my initial (current) div when in single column (iPhone/iPod) layout, containing the menu. Note that the class ‘current’ is missing. Hold on, I’ll get to that

5. Now, the important bit

Based on the iPad flag, you should *dynamically* write the opening of the DIV you want to be visible in the right column so that it has *class ‘current’* when viewed on an iPad and *no class* when not viewed on an iPad. In my case ‘overzicht’ is the div I want to be displayed in the right column initially:

<script language="javascript" type="text/javascript">
if (isiPad){
    document.write("<div id=\"overzicht\" class=\"current\">");
} else {
    document.write("<div id=\"overzicht\">");
}
</script>

*Note: Don’t bother writing jQuery addClass scripts instead of this, it will not work.*

Note 2: Make sure this div is somewhere *after* your home-div in the HTML.

At this point, when you ‘test drive’ your webapp, you will notice that the ‘current’ div will show up, but the left column remains empty. To fix this, and to *prevent the left column from ever animating* you just need to add 1 line of code to the initialisation section in jqtouch.js:

6. jqtouch.js modification:

// Determine what the "current" (initial) panel should be
    if ($('#jqt > .current').length == 0) {
        currentPage = $('#jqt > *:first');
    } else {
        currentPage = $('#jqt > .current:first');
        $('#jqt > .current').removeClass('current');
    }

add this line right below that section: (line 909 at the time of writing, revision 166)

$('#home').addClass('current');

This will add the class ‘current’ to my home div (‘#home’) and place it ‘out of reach’ for the jqtouch animations: it will always stay in view.

Now refresh your webapp and it should run normally on iPhone/iPod and should switch to a 2-column layout on the iPad. Animations will still work!

I hope I retraced my steps correctly and that this will be of use for someone

EDIT: Yes, there were some closing brackets missing from the CSS (as I copied it from Beedesk’s fork, it seems the brackets are missing there, too). Fixed it now.

Time lapsed shot of traffic on an overpass

As this movie has influenced my perception of motion on sound (and vice versa) so much, and contains such breathtaking and amazing shots which influenced nearly all aspects of movie and advertising as we know it today, I decided to tribute the movie by trying to create seamless loops of some of the films’ famous scenes. It was a lot harder than I imagined!

Click on an image on the right to see the animated loop –>

VS Template screenshot

Het resultaat staat inmiddels online op VerseSneeuw

Doenwatjebelooft.nl

Op de actiesite roepen BOVAG en Autobelangen de politiek op om fiscale maatregelen ten aanzien van voertuigbelastingen voortaan tijdig aan te kondigen, met een vooraf te bepalen looptijd van minstens vier jaar. Onder het motto: ‘Beloofd is beloofd’.

Klik hier om de site te bezoeken.

Dyslexic Convention

Order it here!