paperjs examples from SFPC workshop

gistfile1.txt

//---------------------------------------------------------------------- paper script -> javascript

// Define a point to start with
var point1 = new Point(10, 20);
debugger;

// Create a second point that is 4 times the first one.
// This is the same as creating a new point with x and y
// of point1 multiplied by 4:
var point2 = point1 * 4;
console.log(point2); // { x: 40, y: 80 }

// Now we calculate the difference between the two.
var point3 = point2 - point1;
console.log(point3); // { x: 30, y: 60 }

// Create yet another point, with a numeric value added to point3:
var point4 = point3 + 30;
console.log(point4); // { x: 60, y: 90 }

// How about a third of that?
var point5 = point4 / 3;
console.log(point5); // { x: 20, y: 30 }

// Multiplying two points with each other multiplies each 
// coordinate seperately
var point6 = point5 * new Point(3, 2);
console.log(point6); // { x: 60, y: 60 }


//---------------------------------------------------------------------- objects are kinda smart :) 

var circle = new Path.Circle([200,200], 100);
circle.fillColor = 'magenta';
 console.log(circle.fillColor);
 circle.fillColor.hue -= 10;
console.log(circle.fillColor);
circle.fillColor.red -= 0.1;
console.log(circle.fillColor);


//-------------------------------------------------------------------------- layers / children 

// Create a circle shaped path, which is automatically
// placed within the active layer of the project:
var path = new Path.Circle({
	center: [150, 100],
	radius: 55,
	fillColor: 'pink'
});

// Create a new layer and activate it:
var secondLayer = new Layer();

// The second path is added as a child of the second layer:
var secondPath = new Path.Circle({
	center: [120, 50],
	radius: 45,
	fillColor: '#9900FF'
});

var thirdPath = new Path.Circle({
	center: [200, 50],
	radius: 30,
	fillColor: '#9900FF'
});

//console.log(secondLayer);
//secondLayer.sendToBack();
//secondLayer.onFrame= function(event){
//   this.rotate(3);
//};
//secondLayer.onMouseDrag = function(event) {
//    this.position += event.delta;
//}
//secondLayer.children[0].fillColor = 'green';
//secondLayer.children.biggerCirc.fillColor = 'yellow';
//secondLayer.children.biggerCirc.fillColor = 'yellow';
//secondLayer.children['biggerCirc'].fillColor = 'yellow';


//-------------------------------------------------------------------------- access children

// Create 20 circle shaped paths spread in horizontal direction:
for (var i = 0; i < 20; i++) {
	var center = new Point(70 + i * 20, 50);
	var path = new Path.Circle(center, 20);
	path.fillColor = 'red';
	path.strokeColor = 'black';
}

// Save a reference to the children array in a variable,
// so we don't end up with very long lines of code:
var children = project.activeLayer.children;

// Iterate through the items contained within the array:
for (var i = 0; i < children.length; i++) {
	var child = children[i];

	// Change the fill color of the child to a random
	// value between 0 and 360:
	child.fillColor.hue = Math.random() * 360;
}

// add onFrame... hue, etc

//----------------------------------------------------------------------------  everything is a path

// Create a circle shaped path, which is automatically
// placed within the active layer of the project:
var path = new Path.Circle({
	center: [150, 100],
	radius: 55,
	fillColor: 'pink'
	//strokeColor: 'green', 
	//strokeWidth: 3
});

path.segments[0].selected = true;

path.onMouseDrag = function(event) {
    path.segments[0].handleIn += event.delta;
}

//----------------------------------------------------------------------------  drop shadow

var path = new Path.Circle(new Point(120, 120), 100);
path.fillColor =  'white';
path.shadowColor = new Color(0.8, 0, 0);
path.shadowBlur = 142;
path.shadowOffset = new Point(80, 50);

var path2 = new Path.Circle(new Point(180, 120), 100);
path2.fillColor =  'white';
path2.shadowColor = new Color(0.8, 0, 0);
path2.shadowBlur = 142;
path2.shadowOffset = new Point(80, 50);

var path3 = new Path.Circle(new Point(180, 180), 100);
path3.fillColor =  'white';
path3.shadowColor = new Color(0.8, 0, 0);
path3.shadowBlur = 142;
path3.shadowOffset = new Point(50, 50);



this is COOL same color as line.  gives a GLOW
http://codepen.io/zadvorsky/pen/FAmuL

//----------------------------------------------------------------------------  drop shadow + gradient


var path = new Path.Circle(new Point(200, 200), 150);
path.fillColor =  'white';
path.shadowColor = new Color(0.8, 0, 0);
path.shadowBlur = 142;
path.shadowOffset = new Point(80, 50);

var p = path.position.clone();
p.y -= 200;
path.fillColor = {
    gradient: {
        stops: [['white', 0.05], ['white', 0.2], ['pink', 1]],
        radial: true
    },
    origin: p,
    destination: path.bounds.rightCenter
};


var path2 = new Path.Circle(new Point(300, 180), 80);
path2.fillColor =  'white';
path2.shadowColor = new Color(0.8, 0, 0);
path2.shadowBlur = 142;
path2.shadowOffset = new Point(80, 50);

var p = path2.position.clone();
p.y -= 100;
path2.fillColor = {
    gradient: {
        stops: [['white', 0.05], ['white', 0.2], ['pink', 1]],
        radial: true
    },
    origin: p,
    destination: path.bounds.rightCenter
};


//----------------------------------------------------------------------------  gradient  + opactiy


http://intotime.com/
http://www.innerdoubts.com/


var Bg = new Path.Circle(view.center - [0,100], 310);
Bg.fillColor = 'lightBlue';

var path = new Path.Circle(view.center, 300);
path.fillColor = {
        gradient: {
            stops: ['white', 'purple'],
            radial: true
        },
        origin: path.bounds.topLeft,
        destination: path.bounds.bottomLeft
    }
    
//console.log(path.fillColor.gradient.stops[0].color);
path.fillColor.gradient.stops[0].color.alpha = 0.0;
    
path.onMouseDrag = function(event){
    this.position += event.delta;
}




//----------------------------------------------------------------------------  blend mode cool 


var path1 = new Path.Circle({
	center: [-150, 200],
	radius: 100,
	fillColor: 'white', 
	shadowColor: 'magenta',
	shadowBlur: 200, 
	shadowOffset: [850, 100]
});

var path2 = new Path.Circle({
	center: [-150, 200],
	radius: 100,
	fillColor: 'white', 
	shadowColor: 'cyan',
	shadowBlur: 200, 
	shadowOffset: [850, 100]
});

var path3 = new Path.Circle({
	center: [-150, 200],
	radius: 100,
	fillColor: 'white', 
	shadowColor: 'yellow',
	shadowBlur: 200, 
	shadowOffset: [850, 100]
});

path2.blendMode = 'darken';
path3.blendMode = 'darken';

function onFrame(event){
    //console.log("hi");
    path3.position.x = -200 + 30*Math.cos(event.time + 0);
    path3.position.y = 200 + 30*Math.sin(event.time + 0);
    
    path2.position.x = -200 + 30*Math.cos(event.time*0.9 + 1.8);
    path2.position.y = 200 + 30*Math.sin(event.time*1.3 + 1.8);
    
    path1.position.x = -200 + 30*Math.cos(event.time*1.2 + 3.0);
    path1.position.y = 200 + 30*Math.sin(event.time*1.8 + 3.0);
}


// another variation: 
http://sketch.paperjs.org/#S/vZRPa8IwGMa/Ssil6mrsHx2ussuE3WSDHa2HmKY2GBNpo07E7743FWc62KFs2ENo8uT9vU+ehp6wohuOE/yx5oYV2MdMZ3a+pyXaUlOE6BkpfkDv8E6momSSd06pSg3jyvAyQfN+OAp8FAXBwrfrJc3ErkpQHAT1PBdSTrXUsNU7FMJwz0d2vSpopg9XZUNXwKOef5Ne5A6UIWCc/W95XnEDXcOR7QpNFqk6dyewQ10tR/exzI5U/Yvf+D5+j1xKffiT4zpdspRcZTO4JuDby2i55sqbXMT4NzFV+U4xI7RCWr2WcOc6fA/H68JBETyDAdOq0pITqVedFBcixban1S5jfRnJzTjwbSLooR57aGbTq4S6cIkRG96dOLVRu1rQAvLYIMStCSGJvgkuZ6srYbMgn8DpD2tOHPRqCNOVA+kNrZFrEj+qj1AdjdzipoNmsRtFGwPkqT7J2DURtTFB4ibA/Z6tjERWJI00wlZGxjfAGX51y5LT9VYLZSqczBfnLw==


//----------------------------------------------------------------------------  groups and blend mode


var background = new Path.Rectangle(view.bounds);
background.fillColor = 'orange';

var circle = new Path.Circle({
    center: [180, 250],
    radius: 105,
    fillColor: 'black',
    strokeColor: 'white', 
    strokeWidth: 10
});

var circle2 = new Path.Circle({
    center: [240, 250],
    radius: 105,
    fillColor: 'black',
    strokeColor: 'white', 
    strokeWidth: 10
});

var circle3 = new Path.Circle({
    center: [180, 250],
    radius: 80,
    fillColor: 'black',
    strokeColor: 'white', 
    strokeWidth: 10
});

var group = new Group(circle, circle2, circle3);
// Set the blend mode of circle2:
group.opacity = 1.0;
group.blendMode = 'add';

//----------------------------------------------------------------------------   simplify paths: 

var star = new Path.Star(
    {
    center: [250,250],
    points: 5 + Math.floor(Math.random() * 5),
    radius1: 150 + Math.random() * 100, 
    radius2: 50 + Math.random() * 30, 
    fillColor: 'lightGreen'
    }
);

var star2 = star.clone();
star2.fillColor = 'grey';
star2.fillColor.alpha = 0.5;
star2.position += [200,0];
star2.simplify();


//----------------------------------------------------------------------------  spiral smoothed out.  


var path = new Path( {
    strokeColor: 'red',
    strokeWidth: 7, 
    strokeCap: 'round'
    
});

for (var i = 0; i < 40; i++){
    path.add(view.center + new Point(Math.cos(i)*12-i*5, -Math.sin(i)*i*4));
    
}

path.smooth();


//----------------------------------------------------------------------------  dashed line muck with offsets


var path = new Path( {
    strokeColor: 'red',
    strokeWidth: 8, 
    strokeCap: 'round'
    
});

for (var i = 0; i < 40; i++){
    path.add(view.center + new Point(Math.cos(i)*12-i*5, -Math.sin(i)*i*4));
    
}


path.dashArray = [100, 400];
path.smooth();

function onFrame(event){
    path.dashOffset = event.count*3;
}



//----------------------------------------------------------------------------  clone


// original 
var circlePath = new Path.Circle(new Point(280, 100), 25);
circlePath.strokeColor = 'black';
circlePath.fillColor = 'white';

var clones = 30;
var angle = 360 / clones;

for(var i = 0; i < clones; i++) {
	var clonedPath = circlePath.clone();
	clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
};

// modified
var circlePath = new Path.Circle(new Point(380, 400), 10);
circlePath.strokeColor = 'black';
circlePath.fillColor = 'white';

var clones = 1000;
var angle = 1000 / clones;

for(var i = 0; i < clones; i++) {
	var clonedPath = circlePath.clone();
	clonedPath.rotate(angle * i, circlePath.bounds.topLeft - [Math.cos(i/10) * 100,Math.sin(i/20) * 100]);
};


//---------------------------------------------------------------------------- symbols: 

var path = new Path.Line({
    from: [0, 0],
    to: [10, 0],
    strokeColor: 'black',
    strokeWidth: 1.5
});

var symbol = new Symbol(path);

for (var x = 0; x < 40; x++) {
    for (var y = 0; y < 40; y++) {
        var position = new Point(x, y) / 40 * view.size;
        var placed = symbol.place(position);
    }
}

var items = project.activeLayer.children;

function onMouseMove(event) {
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        var angle = (item.position - event.point).angle;
        item.rotation = angle;
    }
}