Skip to content

Instantly share code, notes, and snippets.

@ofZach
Created March 5, 2016 19:04
Show Gist options
  • Save ofZach/26f7e65fcc8018db1f4c to your computer and use it in GitHub Desktop.
Save ofZach/26f7e65fcc8018db1f4c to your computer and use it in GitHub Desktop.
paperjs examples from SFPC workshop
//---------------------------------------------------------------------- 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment