r2c/user/themes/r2c/js/script_paperjs.js

// The amount of segment points we want to create:
var amount = [1, 2, 3, 4, 5];

var height = 200;
var width = 100;

// Create a new path and style it:
var path = new Path({
	// 80% black:
	// strokeColor: 'black',
	// strokeWidth: 0,
	// strokeCap: 'square'
});

var raster = new Raster({
    // source: 'user/themes/r2c/images/trame.svg',
    position: view.center
});

// path.clipMask = true;
// path.selected = true;
path.closed = true;
path.fullySelected = false;
path.fillColor = 'grey';

// Add 5 segment points to the path spread out
// over the width of the view:
for (var i = 0; i <= amount.length; i++) {
  var maxPoint = new Point(300, 100);
	var point = maxPoint * Point.random(view.size);
  path.add(point);
}

// Select the path, so we can see how it is constructed:
function onFrame(event) {
	// Loop through the segments of the path:
	for (var i = 0; i <= amount.length; i++) {
		var segment = path.segments[i];
		var pulse = 0.7;
		var sinus = Math.sin(event.time * pulse + i);
		var cos = Math.cos(event.time *  pulse + i);
		segment.point.y = sinus * height + 300;
		segment.point.x = cos * width + 300;
	}

	path.rotate(30);
  path.smooth();
}

function onMouseDown(event) {
	path.fillColor = 'blue';
}