barryvan

Author: Barry van Oudtshoorn

  • Ceci n’est pas

    Ceci n'est pas une pi

  • Beynac chapel wallpaper

    Just to the side of Beynac Castle, on the top of a (very steep!) hill, there is a chapel. In this chapel’s wall, there is a door, with a keyhole. Through this keyhole is a beautiful stained-glass window through which sunlight streams.

    So here is a background image that shows this set of views. I’m probably going to print the actual photos and arrange them somewhat similarly on my wall. In the interim, I can at least see them on my computer monitors. The first of the two images is 1680×1050 (16:10 ratio), and the second is 1680×1260 (4:3 ratio).

  • Grand tour: photoset c (UK)

    Another installment of photos. These are taken in the UK.

  • Grand tour: photoset b (Como & Berlin)

    We’re back home now, so really I have no excuse to not put up more photos. Below are some of the photos we took in Italy (Lake Como) and Berlin.

    (Click the thumbnails for a larger image.)

  • Grand tour: photoset a (France)

    Well, my wife and I are just over half way through our “grand tour” of Europe and Great Britain. Not much time to actually elaborate on what we’ve been up to, but here are some photographs from France. All that I’ve done is scale them down for now; later on, I might upload ‘tweaked’ versions.

    (Click the thumbnails for a larger image.)

  • Theme update (again!)

    And so, for the third time this year, I’ve completely re-themed this site. Taking a very different tack from the last theme, I’ve tried to keep this one as simple as possible, with just a few subtle touches here and there to add interest. The palette is more subdued, which hopefully means that reading the text is a more pleasant experience. I’ve also done away with the multi-column body text in favour of a fixed-width design.

    At the same time, though, I have endeavoured to use some of the new features available in modern web browsers — gradients, shadows, transitions, generated content, and so on. I’m fairly happy with the result — I think it’s a clean, unobtrusive theme that’s not too in your face. Feedback and criticism welcome! 😀

  • Paired sort in JavaScript

    Sometimes, you’ll have two arrays of associated data, and you’ll need to sort them. You can’t just call sort() on both arrays, because that will potentially break the associations between them. What you need is a way to sort one of the arrays, and shuffle the elements of the second array to match. Here’s a simple MooTools function that does just that (using quicksort):

    [sourcecode language=”javascript”]Array.implement({
    pairedSort: function(other, reverse) {
    if (this.length === other.length) {
    for (var i = 0, len = this.length; i < len; i++) { var curr = this[i]; var currOth = other[i]; var j = i - 1; while ((j >= 0) && (this[j] > curr)) {
    this[j + 1] = this[j];
    other[j + 1] = other[j];
    j–;
    }
    this[j + 1] = curr;
    other[j + 1] = currOth;
    }
    }
    if (reverse) {
    this.reverse();
    other.reverse();
    }
    return this;
    }
    });[/sourcecode]

    Using this function is quite straightforward:

    [sourcecode language=”javascript”]var alpha = [3,2,1,6,5,4];
    var beta = [1,2,3,4,5,6];
    alpha.pairedSort(beta);
    // alpha == [1,2,3,4,5,6]
    // beta == [3,2,1,6,5,4][/sourcecode]

    When would this actually be useful? Let’s say you’ve got an object which maps numeric assessment scores to an alphabetic grade:
    [sourcecode language=”javascript”]var mapping = {
    ‘A’: 80,
    ‘B’: 60,
    ‘C’: 40,
    ‘D’: 20,
    ‘E’: 0
    }[/sourcecode]
    Unfortunately, objects in JavaScript have no intrinsic order on their keys — this is because they’re essentially just hashmaps. What we need to do to be able to make use of these data, then, is create an array of keys, and one of values, and then sort them. The pairedSort() function allows us to do this easily. (In fact, it’s for this exact application that I wrote the method!)

  • JS1K: Swarms

    In the spirit of the demoscene, the JS1K competition is designed to make people push their boundaries. The competition requires entrants to write an interesting, appealing demo in JavaScript, using no more than 1024 characters (hence the name).

    Of course, I had to have a shot at it. (See the result!) I decided to revisit one of my favourite toy projects: my swarms. What I came up with is this (linebreaks added for convenience):

    [sourcecode language=”javascript”]a=Math,b=a.random,c=[],j=document.getElementById(“c”),k=j.getContext(“2d”),m=window,n=(W=m.innerWidth)/2,q=(H=m.innerHeight)/2,r=M=1;function s(o,p,u,v){k.fillStyle=o;k.beginPath();k.arc(p,u,v,0,a.PI*2,0);k.closePath();k.fill()}function t(o,p){for(g=40;g–;)if(!c[g]){c[g]={x:o||n,y:p||q,d:o?b()*4-2:0,e:p?b()*4-2:0,b:1,a:0,c:b()>.5};return}}with(j.style){position=”fixed”;top=left=0}j.width=W;j.height=H;for(f=40;f–;)c[f]=0;for(f=9;f–;)t(); m.setInterval(function(){k.fillStyle=”rgba(9,9,9,.2)”;k.fillRect(0,0,W,H);for(f=40;f–;)if(d=c[f])if(d.a>1E3)c[f]=0;else{l=d.a/1E3;h=l*7;d.d+=b()*.1*(n-d.x>1?1:n-d.x<-1?-1:n-d.x);d.e+=b()*.1*(q-d.y>1?1:q-d.y<-1?-1:q-d.y);d.x+=d.d;d.y+=d.e;d.a++;i=d.c?"rgba(49,153,255,":"rgba(255,49,166,";h=1-l;s(i+h+")",d.x,d.y,1+l*12);s(i+h/2+")",d.x,d.y,1+l*16);d.b&&d.b--;if(d.b==0&&d.a>250&&d.a<750&&b()>.9)for(g=40;g–&&!d.b;)if((e=c[g])&&e!=d&&e.a>=d.a){i=a.sqrt(d.x-e.x,d.y-e.y);if(i>-5&&i<5&&d.c!=e.c){t(d.x, d.y);d.b=e.b=10}}}r=n>W||n<0?-r:r;M=q>H||q<0?-M:M;n+=r;q+=M},40);[/sourcecode]You can see the submission here: http://js1k.com/demo/270. To reduce the size, I first coded tightly, ran the uncompressed code through Google’s Closure Compiler, then hand-tweaked the result to save a few more bytes. I’m quite pleased with the result! For the curious, the full, uncompressed, commented source is below:

    [sourcecode language=”javascript”]/* SWARMS (v1.7)
    * by Barry van Oudtshoorn (www.barryvan.com.au)
    * A re-implementation of http://www.barryvan.com.au/demos/swarms/swarms.html,
    * which in turn is a reimplementation of a Processing script that I wrote.
    *
    * Male and female particles move around a central point, gradually aging.
    * When they reach maturity, they may interact with a particle of the opposite
    * sex to spawn a new particle. As they grow old, they become larger and slower
    * until they eventually die.
    *
    * Revisions (really, these version numbers are all but meaningless!)
    * 1.0 (1023B)
    * – Initial code.
    * 1.5 (1017B)
    * – Moved to Closure compiler to reduce size
    * – Some slight tweaks to particle movement
    * – Canvas now positioned to get rid of annoying border (try fullscreen!)
    * 1.7 (1011B)
    * – The swarm centre now moves around (simple bouncing). This allows the
    * particles to pick up a bit more speed, and move in more interesting ways;
    * where before they tended to just ‘bubble’ in the middle of the screen,
    * the swarm, as an entity, now appears more fluid and organic.
    * – Bugfix to spawning: particles now actually have to be near to each other
    * in BOTH axes to spawn, and both particles have to be of suitable age. This
    * prevents billions of particles from spawning from a single one.
    * – Reduced the total number of particles for aesthetic reasons
    * – Did some more “by-hand” optimisations after running it through the closure
    * compiler, like removing global variable declarations when I’m not
    * instantiating the variables there and then and removing the leading 0 on
    * decimal values to conserve precious bytes. With each revision, despite
    * adding functionality each time, the size is going down!
    *
    * Copyright 2010 Barry van Oudtshoorn.
    */

    var z = function(a, b, c) { // Normalise a to between b and c
    return (a / (c – b));
    },
    h = function(a, b, c) { // Limx a to between b and c
    return (a > b ? b : (a < c ? c : a)); }, // I strip out all of the uninitialised declarations after compilation; // they're globals anyway. I know it's not stylish, but it saves bytes! r,s, // Particles that we're currently interested in i,j, // Iterators u,d, // Working variables m = Math, // Alias v = m.random, // Alias p = [], // The particles e = document.getElementById('c'), // The canvas element t = e.getContext('2d'), // The context n, // The normalised age of a particle Q = window, // Alias X = (W = Q.innerWidth)/2, // The swarm's COG Y = (H = Q.innerHeight)/2, N = M = 1, // The components of the velocity of the swarm's COG q = function(a, b, c, f) { // Draw a blob t.fillStyle = a; t.beginPath(); t.arc(b, c, f, 0, m.PI*2, 0); t.closePath(); t.fill(); },x = function() { // Global iterator //t.globalCompositeOperation = 'source-over'; // This is prettier, but "globalCompositeOperation" takes too many bytes! t.fillStyle = 'rgba(9,9,9,.2)'; t.fillRect(0,0,W,H); //t.globalCompositeOperation = 'lighter'; for (i = 40; i--;) { // Loop over all of the particles if (r = p[i]) { if (r.a > 1E3) {
    p[i] = 0; // Kill off old particles; use 0 because it’s shorter than false, null, or using delete.
    } else {
    // Move the particle
    n = z(r.a, 0, 1E3);
    u = n * 7;
    r.X += v() * .1 * h(X – r.x, 1, -1); // Update the particle’s velocity.
    r.Y += v() * .1 * h(Y – r.y, 1, -1);
    r.x += r.X; // Update the particle’s coordinates based on its velocity.
    r.y += r.Y;
    r.a++; // Increment the particle’s age

    // Draw the particle

    d = r.s ? ‘rgba(49,153,255,’ : ‘rgba(255,49,166,’; // The colour of the particle
    u = 1 – n; // The opacity of the particle; n is the normalised age
    q(d + u + ‘)’, r.x, r.y, 1 + n * 12); // Draw the primary particle blob
    q(d + (u/2) + ‘)’, r.x, r.y, 1 + n * 16); // We draw a lighter, larger blob for a ‘glow’ effect

    r.f && r.f–; // If we’ve spawned, decrement the cooldown.

    if (r.f == 0 && r.a > 250 && r.a < 750 && v() > 0.9) { // If we’re the right age, check if we can spawn!
    for (j = 40; j– && !r.f;) { // We have to loop over the particles again, and see if we’re close enough to spawn.
    if ((s = p[j]) && s != r && s.a >= r.a) {
    d = m.sqrt(r.x – s.x, r.y – s.y); // Two if statements to avoid this calculation if possible
    if (d > -5 && d < 5 && r.s != s.s) { // Collision detection? What's that? y(r.x, r.y); // Spawn a new particle! r.f = s.f = 10; // Enforce the spawning cooldown } } } } } } } // Bounce the swarm's COG around the canvas N = (X > W || X < 0 ? -N : N); M = (Y > H || Y < 0 ? -M : M); X += N; Y += M; },// Spawn a new particle. If sx and sy are defined, they will be its initial // coordinates; otherwise, we just the COG. If sx and sy are defined, we also // give the particle a random velocity; this means that they're 'flung out' // from their parents; at startup, though, we want them all nicely bunched. y = function(sx,sy) { for (j = 40; j--;) { if (!p[j]) { p[j] = { x: sx || X, // The particle's coords y: sy || Y, X: sx ? v() * 4 - 2: 0, // The particles velocity Y: sy ? v() * 4 - 2 : 0, f: 1, // Cooldown after spawning a: 0, // The age of the particle s: v() > .5 // The sex of the particle
    }
    return;
    }
    }
    };

    // Make the canvas fill the entire screen
    with (e.style) {
    position = ‘fixed’;
    top = left = 0;
    }
    e.width = W; // Set the canvas width and height
    e.height = H;

    for (i = 40; i–;) p[i] = 0; // Populate initial particles
    for (i = 9; i–;) y(); // Spawn eight particles. A number < 10 saves a byte!Q.setInterval(x, 40); // Make it go. [/sourcecode]

  • How sweetly doth

    How sweetly doth the crocodile
    enrobe his cunning nose
    with cummerbunds of pearly white
    and ribands made of rose!

    He carefully adorns it
    at the breaking of each day;
    and bitterly doth mourn it
    when a riband goes astray.

    And O! the subtle reptile,
    whilst at rest and whilst at play,
    ensures his nose is toasty warm,
    and beautiful, and gay.

    And though tenderly ensuring
    that his cummerbund is fix’d
    with pins and twine and sealing wax,
    his reception, it is mixed:

    For though his nose is twisted ’round
    with cummerbunds and stuff,
    the fishes in the fishpond say
    “His teeth are sharp enough!”

  • iOS 4

    I’ve been living with Apple’s new OS for about a day now, and the conclusion I’ve come to is that Apple dropped the ball. There are so many minor frustrations, as well as a few big ones, that the whole experience is at best annoying, and at worst unbearable.

    The new iOS isn’t all bad. The animations feel snappier, Springboard is prettier, and it’s got the slick Apple feel which everyone so desperately wants to emulate. The big one, of course, is multitasking, and that I think they got right.

    But then there are the problems. Apps crash with neither rhyme nor reason: the iPod app won’t even startup properly for me anymore. Google Sync is kaput (although I think Google should take some of the blame for that). The new folders, whilst useful, are, to be charitable, ugly. It all feels as though it was released without going through proper testing, let alone going through the spit-and-polish phase.

    I was looking forward to this update. I thought that, like all the iOS versions before it, it would Just WorkTM. I hope that when they patch iOS 4, they don’t introduce any new features: there’s just too much that needs to be fixed.

  • Work

    I’m a software developer, working for SEQTA Software. We develop software for the education sector; basically, we aim to let teachers just get on with teaching, rather than having to faff around with a myriad different poorly-designed systems. I’m responsible for most of the front-end development of our two flagship products, Teachers’ Assistant and SEQTA Coneqt. Recently, I also redesigned the company website.

    Why am I bothering to tell you this? Because I enjoy what I do. I get to develop software that’s genuinely useful, that people actually appreciate, and that has concrete benefits. Oh, and I also get to play with all of the latest and most interesting new browser developments. One of the things I enjoy most about my job is getting out to sites and training people one-on-one. I love seeing people get caught up in what’s possible, and I particularly appreciate it when they come up with new ideas — ideas which can sometimes become central features.

    I know, I know, this sounds a lot like I’m just banging on about work to earn brownie points. But the really weird thing is, it’s the truth. Yes, I’m young and idealistic. But then, I think that I’m work in a young and pretty-nearly ideal job.

  • Generative Music

    Continuing my HTML5 and canvas experiments, I’ve put together a generative music system. Essentially, a series of particles move across a field, occasionally triggering sounds — the sound triggered depends on their location in the field.

    There is, of course, a little bit more to it than that. Under the hood, I’ve got a series of HTML5 Audio objects that are used to provide polyphonic audio using a simple round-robin algorithm (I encoded the audio in OGG, so you’ll need to use an OGG-friendly browser, like Firefox). The particles are much simpler than those in my previous canvas dalliance, in that they don’t swarm, and their motion is more linear.


    Generative Audio Screenshot
    View (and hear!) it live