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