joel app

by Nick Hulea

HTML

<div></div>
<canvas id="myCanvas" resize></canvas>
<script src="http://aa8f47fcc01b758779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/paperjs-v0.9.20/dist/paper-full.js"></script>

CSS

canvas {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow: hidden;
}

JavaScript

var imgurcache = [];
var dude, output;

//base64('http://i.imgur.com/7HJttvi.jpg');

function base64(url) {
    var dataURL;
    var img = new Image(),
        canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d"),
        src = url; // insert image url here

    img.crossOrigin = "Anonymous";

    img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL('image/png');
        canvas = null;
        pass(dataURL);
    };
    img.src = url;
}

function pass(dataURL) {
    imgurcache.push(dataURL);
    console.log(imgurcache);
}


paper.install(window);

window.onload = function () {

    paper.setup('myCanvas');

    // Please note: dragging and dropping images only works for
    // certain browsers when serving this script online:
    var path, position, max;
    var count = 0;
    var grow = false;
    var raster = null;

    // As the web is asynchronous, we need to wait for the raster to
    // load before we can perform any operation on its pixels.
    new Raster('mona').on('load', function () {
        raster = this;
        this.remove();
        resetSpiral();
    });

    var text = new PointText({
        justification: 'right',
        fontSize: 12,
        content: window.FileReader
    });

    function growSpiral() {
        count++;
        var vector = new Point({
            angle: count * 5,
            length: count / 100
        });
        var rot = vector.rotate(90);
        var color = raster.getAverageColor(position + vector / 2);
        var value = color ? (1 - color.gray) * 3.7 : 0;
        rot.length = Math.max(value, 0.2);
        path.add(position + vector - rot);
        path.insert(0, position + vector + rot);
        position += vector;
    }

    function resetSpiral() {
        grow = true;

        // Transform the raster, so it fills the view:
        raster.fitBounds(view.bounds);

       ...