paper.JS Tutorial - Screen Line Animations

paperJS (paper.js) JavaScript Library walk through by Brett Paufler - 10-24-13

JavaScript Tutorial & paper.js primer

Screen Line Animations (Cycling Line Effects)

Motion on the computer screen if virtual, which sounds stupid or self evident, but it's the trick (the proper way of looking at it) to get certain sorts of animations to run quickly and smoothly with little effort. Press the six checkBoxes to see what they do. And then realize, all that's happening is that the colors for the various lines are changing, but nothing else. It's really nothing more than a blinking light display.

This is the raw code needed to fill the screen with lines:

var numLines = view.size.height + 1; // I've been figuring the viewable screen height the hard way
                               // paper.js has a property for this, quick and easy

function drawNewScreenLines(){
    for (i = 0; i <= numLines; i ++){ // from 0 to view.size.height
        screenLines[i] = new Path.Line(new Point(0, i), new Point(view.size.width, i)); // draw a line
        screenLines[i].visible = false;                                  // from 0 to width
        screenLines[i].strokeWidth = 1;
        screenLines[i].strokeColor = 'black'; // and the rest of this should be review
    }
}
drawNewScreenLines(); // calling the function once, so no errors on the pointTextFeedback

The checkBoxes incrementally add effects until, we get to the last one. But even the last one is sort of simplistic, so that's the only one I'm going to cover. The rest should be easy to derive.

NOTE: this function is called from the onMouseDown function if the checkBox in question contains() the event.
This function is called on checkBox 4, 5, & 6 (all the rainbow ones).

function drawRainbowLines(){
    for (i = 0; i <= numLines; i ++){ // cycles through all the lines
        screenLines[i].visible = true; // they are all visible (not the case with first checkBox)
        screenLines[i].strokeWidth = 1;
        screenLines[i].strokeColor = 'red'; // this sets the color
        screenLines[i].strokeColor.hue += i; // and then, this is the hue incremental effect, simple
    }
}

checkBox 5 & 6 have animation, so we need code to cover that. And here is it:

function cycleLines(speed){
    for (i = 0; i <= numLines; i ++){ // a for function to cycle through the lines
        screenLines[i].strokeColor.hue += speed; // and incrementer based upon speed
    }
} // speed is set at 1 for checkBox 5 & 10 for checkBox 6

view.size.width & view.size.height

All in all, once I figured out the correct format for the code, the rest was painfully easy. In fact, it took me about as long to write the commentary as apply the code (even more so for the pointTextFeedback texts). Speaking of which, it might behoove one (as always) to give those feedBack pointTexts a gander. I think this is the first time I've called out the view properties even though I've used view.center on almost every previous page. But from here on out, I expect to use these other two view.size properties as well, probably indispensable for fullScreen code effects.

view.size.width
view.size.height

previous -- GradientAnimation paper.js tutorial index next - ScreenLineAnimation-002

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