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