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