paperJS (paper.js) JavaScript Library walk through by Brett Paufler -
10-24-13
JavaScript Tutorial & paper.js primer
Screen Line Animations (Cycling
Line Effects - Part 4 using a clipMask)
Notice the circle in the center? Of course you did. That's
the change from the previous page to this. The animation code is
trivially simple (- where the previous was +), so I'm not going to
cover that. Instead, the clipMasking is something not covered
before, so that's really all I'm going to explain.
The complete code to add the centerLines is:
var blankCircle; // for better mask
var centerCircle;
var centerGroup;
var centerLines = [];
var radius;
var top;
var bottom; // obviously I
like global variable and to declare them individually
var left;
// works better for me and in these small code pages
var right;
// there is no need to worry about conflicts
function drawCenterLines(){
blankCircle =
new Path.Circle(view.center, view.size.height/4);
blankCircle.fillColor = 'white'; // this circle whites out
the background
centerCircle =
new Path.Circle(view.center, view.size.height/4);
centerCircle.fillColor = 'white'; // this circle is used
as the clipMask
centerGroup =
new Group(centerCircle); //adds the centerCircle to a group
centerGroup.clipped = true; // and the first item is used
as the clipMask -- i.e. this circle
radius =
view.size.height/4;
top = CP.y -
radius;
bottom = CP.y +
radius;
left = CP.x -
radius;
right = CP.x +
radius;
var lineSize =
Math.floor(2 * radius / verticalColumns) + 2;
var pointLeft =
new Point(left,0);
var pointRight
= new Point(right, 0);
for (i =
bottom; i >= top; i --){
centerLines[i] = [];
pointLeft.y = i;
pointRight.y = i;
for (j = 1; j <= verticalColumns; j++){
pointLeft.x = right - j *
lineSize;
pointRight.x = right - (j - 1) *
lineSize;
centerLines[i][j] = new
Path.Line(pointLeft, pointRight); // a centerLine is made
centerLines[i][j].visible = true;
centerLines[i][j].strokeWidth = 1;
centerLines[i][j].strokeColor =
'red';
centerLines[i][j].strokeColor.hue
+= i / (j * bandWidth);
centerGroup.addChild(centerLines[i][j]); // the centerLine is
added to the centerGroup
// it will be clipped
}
}
}
Long story short, changing hues looks like movement. And rather
than doing all sorts of complicated calculations to get the centerLines
edge condition correct, we just clip the lot of it (a lot like using a
stencil). Tons of code, of course, but if one only concentrates
on the new, understanding clipping a Group just isn't that complicated
(make group, clipped = true, add elements).
previous -- ScreenLineAnimations-003 paper.js tutorial
index next - DrunkenCircles-001
Back to BrettCode Home
Brett Words
my writing site (Home to the writing of Celli the Happy Go Lucky
Celaphopod, Eddie Takosori, Fritz Heinmillerstein, Morgan Feldstone,
Kevin Stillwater, and of course, me, your host, Brett Paufler)
paper.js official site = http://www.paperJS.org
© Copyright 2013 Brett Paufler