paperJS (paper.js) JavaScript Library walk through by Brett Paufler -
10-18-13
JavaScript Tutorial & paper.js primer
Gradient & onFrame Color
Animation
Once again all the code takes place in the checkClickBox()
function. If this page wasn't the terminal condition for this
code (if I was planning on reusing this code), it would likely make
sense to refactor it into a function. But it has no longterm
value that I can see at present, so that would be a waste of time.
checkClickBox(event){} function below in green.
Gradient portions highlighted in red.
function checkClickBox(event){
for (i = 1; i <= 6; i++){
if
(clickBox[i].contains(event.point)){
switch (i){
case 1: // first checkBox
testCircle.style = {
strokeColor : 'black', //
if not includes, outline disappears
fillColor : {
gradient : {
stops : ['yellow', 'red','blue']
},
origin : OP, // Origin Point
destination :
RB // Right Bottom
} // so Diagonally across entire screen
}; // end style
pulse = false;
updateFeedbackPointText(event);
break;
case 2:
testCircle.style = {
strokeColor : 'black',
fillColor : { // gradient is a property of fillColor
gradient : {
stops : ['yellow', 'red','blue']
},
origin : CP, // Center Point
destination :
RB // RightBottom
}
}; // end style
pulse = false;
updateFeedbackPointText(event);
break;
case 3:
testCircle.style = {
strokeColor : 'black',
fillColor : {
gradient : {
stops : ['yellow', 'red','blue']
},
origin : CP, // CenterPoint
destination :
BC // BottomCenter
// up to here, we have used predefined points
}
}; // end style
pulse = false;
updateFeedbackPointText(event);
break;
case 4:
testCircle.style = {
strokeColor : 'black',
fillColor : {
gradient : {
stops : ['yellow', 'red','blue'],
radial : true
},
origin :
testCircle.position, // this is an object defined point
destination :
testCircle.bounds.bottomCenter // same here
// computed for each object on the fly
// way better programming
structure
}
}; // end style
pulse = false; // note for all to this point, pulse has been set to false
updateFeedbackPointText(event);
break;
case 5:
testCircle.style = {
strokeColor : 'black',
fillColor : {
gradient : {
stops : ['yellow', 'red','blue'],
radial : true // we are dealing with a circle
},
origin :
testCircle.position,
destination :
testCircle.bounds.bottomCenter
}
}; // end style
pulse = true; // pulse to true means onFrame will be activated
updateFeedbackPointText(event);
break;
case 6:
testCircle.style = { // resets to start point
strokeColor : 'black', // black outline
fillColor : 'white' // white circle
}; // end style // nothing else
pulse = false; // not required as I didn't notice till now, but cleaner to
// reset pulse to false
// with nothing to pulse, it doesn't really matter
// but who knows what bugs, so why not
updateFeedbackPointText(event); // and all along we've been spitting out feedback information for your viewing pleasure
break;
} // end switch
} // end contains if
} // end for
} // end checkClickBox function
onFrame() Gradient Animation
The onFrame code is almost always the easiest, so I tend to do that first.
function onFrame(event){
if (pulse === true){ // if no pulse, no sense wasting our time
animateGradient(event); // calls a function, clean and simple
}
}
Of course, the called function has to be inserted in the code above the
function that calls it, but I always write it in reverse. Anyhow,
this code animates one of the gradient stops.
function animateGradient(event){
var myVariableColorControl =
testCircle.fillColor.gradient; // assigning the property to a variable
var mVCC = myVariableColorControl; // assigning the variable a shorter name
mVCC.stops[1].rampPoint =
Math.abs(Math.sin(event.time)); // this is the works
// the ramp point changes based on absolute value of the sine of event.time.
// So it loops from 0 to 1 (once every 180 clock ticks -- or ms if things are running smoothly)
// pointText updating omitted // I should have just called the standard pointTextUpdate
// but for whatever reason (I thought it would be easier), I just pulled the relevant lines
// which turning out to be half the pointTextUpdate code, wasn't any easier
}
Anyhow, that's the basic animation.
From there, I do believe we should try to make the animation a bit more
complex (there are two stops, after all -- and maybe we can add
more). And then, onMouseDown() seems like it is aching for some
functionality. So, let's see what we can do in the next one.
previous (Style) paper.js tutorial
index next - (GradientAnimation)
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