Paper.js demo

circles.paper.js

var stamps = [];
var trail = [];
var START_COLOR = getRandomColor();
var END_COLOR = getRandomColor();
var TRAIL_LENGTH = 300;
var CIRCLE_SIZE = 50;

// http://stackoverflow.com/a/5365036
function getRandomColor(){
    return '#'+(Math.random()*0xFFFFFF<<0).toString(16);
}

function hexToRGB(hexColor){
   var red = parseInt(hexColor.slice(1,3),16);
   var green = parseInt(hexColor.slice(3,5),16);
   var blue = parseInt(hexColor.slice(5,7),16);
   return [red, green, blue];
}

// fromColor and toColor are hexstrings, like #FFFFFF, #000000
function sampleColors(fromColor, toColor, numSamples){
    fromColor = hexToRGB(fromColor);
    toColor = hexToRGB(toColor);
    var colorGradient = []

    var redInterval   = (fromColor[0] - toColor[0]) * 1.0 / (numSamples-1);
    var greenInterval = (fromColor[1] - toColor[1]) * 1.0 / (numSamples-1);
    var blueInterval  = (fromColor[2] - toColor[2]) * 1.0 / (numSamples-1);

    // console.log("intervals", [redInterval, greenInterval, blueInterval]);
    for (var i=0; i<numSamples; i++){
        var currentRed = parseInt(fromColor[0] - i * redInterval) / 255.0;
        var currentGreen = parseInt(fromColor[1] - i * greenInterval) / 255.0;
        var currentBlue = parseInt(fromColor[2] - i * blueInterval) / 255.0;
        colorGradient.push([currentRed, currentGreen, currentBlue]);
    }
//    for (var i=0; i<colorGradient.length; i++){
//        console.log(colorGradient[i]);
//    }
    return colorGradient;
}

function onMouseMove(event) {
    project.clear();
    var circle = new Path.Circle(event.middlePoint, CIRCLE_SIZE);
    circle.fillColor = 'black';
    
    trail.push(new Point(event.point.x, event.point.y));
    if (trail.length >= TRAIL_LENGTH){
        trail.shift();
    }
    //drawAllPoints(trail, 'random');
    drawAllPoints(trail, sampleColors(START_COLOR, END_COLOR, trail.length));
    drawAllPoints(stamps, 'black');
}

function onMouseDown(event) {
    console.log(event.point);
    START_COLOR = getRandomColor();
    END_COLOR = getRandomColor();
    stamps.push(new Point(event.point.x, event.point.y));
}

function drawAllPoints(points,color) {
    for (i=0; i<points.length; i++) {
        var draw = new Path.Circle(points[i], CIRCLE_SIZE);
        if (color === 'random') {
            draw.fillColor = getRandomColor();
        }
        else if (Array.isArray(color)){
            draw.fillColor = color[i];
        }
        else {
            draw.fillColor = color;
        }
    }
}