paper.JS Tutorial - Gradient Animation

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

JavaScript Tutorial & paper.js primer

Gradient Animation (continued)

We start with the code that is activated when the second clickBox is selected. This happens to be the same code we derived in the last tutorial, so we're starting up where we left off.

function checkClickBox(event){
    for (i = 1; i <= 6; i++){
        if (clickBox[i].contains(event.point)){
            switch (i){

           // omitted case 1

            case 2:

                testCircle.style = {
                    strokeColor : 'black',
                    fillColor : {
                        gradient : {
                            stops : ['yellow', 'red','blue'],
                            radial : true
                        },
                        origin : testCircle.position, // origin = center of circle
                        destination : testCircle.bounds.bottomCenter // destination = bottom edge
                    }
                }; // end style

                pulse = 2;
                updateFeedbackPointText(event);
                break;

// remaining cases omitted

The onFrame(event) function calls forth this animation dynamic:
testCircle.fillColor.gradient.stops[1].rampPoint = Math.abs(Math.sin(event.time));

The ONLY difference between the 2nd & 3rd or 4th clickBoxes is the stop that is activated during the onFrame(event)

For clickBox 3 it's stop[0]:
testCircle.fillColor.gradient.stops[0].rampPoint = Math.abs(Math.sin(event.time));

And for clickBox 4 it's stop [2]:
testCircle.fillColor.gradient.stops[2].rampPoint = Math.abs(Math.sin(event.time));

The graphical output for either of these (stop 0 or 2) is not particularly compelling to me. But it does show some of the potential to be had with setting multiple stops.

clickBox 5 changes the destination to the event.point onMouseDown, which in turn effects the outside radial distance of the stop. Once again, not overly compelling graphically, but it's easy enough to understand what is happening. The outside radial point of the gradient is being set somewhere other than the outside perimeter of the circle.

                testCircle.style = {
                    strokeColor : 'black',
                    fillColor : {
                        gradient : {
                            stops : ['yellow', 'red','blue'],
                            radial : true
                        },
                        origin : testCircle.position,
                        destination : event.point
                    }
                }; // end style

And then we have the clickBox 6, which actually does something interesting and changes the origin to the event.point on any onMouseMove (which means the origin dynamically changes from moment to moment with every movement of the mouse). The relevant code for this is:

        testCircle.style = {
            strokeColor : 'black',
            fillColor : {
                gradient : {
                    stops : ['yellow', 'red','blue'],
                    radial : true
                },
            origin : event.point, // sort of a reverse of the case from the 5th clickBox
            destination : testCircle.bounds.bottomCenter
            }
        }; // end style

There are numerous other areas of the paper.js library that I haven't gotten to, but in some way, I feel that I am wasting my time on this low level stuff (just looking at individual functions and properties). So, I'm going to take a break from the basic functions for a few tutorials (at least) and try to copy a few graphical effects that I've run across whilst surfing the Internet and see how that goes.

previous - Gradient        paper.js tutorial index       next - Screen Line Animation - 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