SplatterPlot 1.1 Adding Images into the Mix

So I was asked a few times if the splatter plot could support images, and I’d explain how you could extend the node class to do that, but my guess is people would find it useful if it did that out of the box. SVG’s Image rendering uses really poor pixel resampling algorithms, so scaled imaged don’t look as good. In fact I found SVG scaling seems to break down as the draw buffer becomes much larger than your view pane, so it’s a hugely terrible idea to just zoom/scale to infinity in a complex SVG without hand occluding elements offscreen. So now that I’ve fully chastised you for your vector sins, onto the example:

so let’s create 10 instances of 1 of 4 (random) pngs we have laying around.

window.addEvent('domready', function(){
    
    var plot = new SplatterPlot(
        'panel_one', 
        Window.getSize().x-30, 
        Window.getSize().y-40, 
        200
    );
    plot.nodeX = 70;
    plot.nodeY = 70;
    plot.seed = 120;
    plot.buffer = 0;
    plot.nonSequentialDistributionMode = false;
    plot.expansionFactor = 0.7;
    
    
    for(var lcv=0; lcv < 10; lcv++){
        plot.addNode(buildNode($random(1,4)));
    }
});

Now lets write the function to set up each node:

function buildNode(id, title){
    var node = new SplatterImageNode('images/masked/'+id+'.png');
    var root  = new Element('div', {'id': id});
    root.inject(document.body);
    node.click = function(){
        
    }
    node.mouseover= function(){
        this.shape.toFront();
        this.shape.animate({
            scale: 1.5
        }, 300, '<>');
    }
    node.mouseout= function(){
        this.shape.animate({
            scale: 0.60
        }, 300, '<>');
    }
    return node;
}

And now we glare at our results…

And now you can grab it for your own enjoyment.

enjoy.