Base PaperScript

by peterbenoit

HTML

<script src="https://raw.github.com/paperjs/paper.js/master/dist/paper.js"></script>
<canvas id="some-unique-id" resize keepalive="true" style='height: 200; width: 200;'></canvas>
<script>(function(){var s="script",n='\n',d=document,b=d.getElementsByTagName(s)[2].innerHTML.split(n);d.write('<'+s+' type="text/paperscript" canvas="' + document.getElementsByTagName('canvas')[0].id + '">'+b.slice(2,b.length-2).join(n)+'</'+s+'>')})()</script>

JavaScript

// this is the Base, please fork!

//http://doc.jsfiddle.net/use/hacks.html

var path = new Path();
path.style = {
    strokeColor: '#E4141B',
    strokeWidth: 20,
    strokeCap: 'round'
};
var size = 25;
var segments = path.segments;
var start = view.center / [10, 1];
for (var i = 0; i < size; i++)
    path.add(start + new Point(i * 100, 0));

function onMouseMove(event) {
    segments[0].point = event.point;
    for (var i = 0; i < size - 1; i++) {
        var nextSegment = segments[i + 1];
        var position = path.segments[i].point;
        var angle = (position - nextSegment.point).angle;
        var vector = new Point({ angle: angle, length: 35 });
        nextSegment.point = position - vector;
    }
    path.smooth();
}

function onMouseDown(event) {
    path.fullySelected = true;
    path.strokeColor = '#e08285';
}

function onMouseUp(event) {
    path.selected = false;
    path.strokeColor = '#e4141b';
}