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

JavaScript Tutorial & paper.js primer

Screen Line Animations (Cycling Line Effects - Part 3)


I didn't change much today, just the implementation of the first checkBox, which now varies the bandWidth of the colored lines (or more accurately, the rate at which the hue initially varies when the lines are created).  Only change in code is as below.


var bandWidth = 1; // a basic variable assignment

And from there to the clickBoxes modulate the value.

function checkClickBox(event){
    for (i = 1; i <= 6; i++){
        if (clickBox[i].contains(event.point)){
            switch (i){
            case 1:
                bandWidth = bandWidth * 1.5; // resets bandwidth
                animateControl = 1;
                break;
... function continues for other cases  // case 2: bandwidth /= 1.5 instead of *

And finally, we have the code that draws the raw lines.
 i/(j *bandWidth), not overly complex.

function drawRainbowMultiLines(){
    for (i = 0; i <= numLines; i ++){
        for (j = 1; j <= verticalColumns; j++){
            screenLines[i][j].visible = true;
            screenLines[i][j].strokeWidth = 1;
            screenLines[i][j].strokeColor = 'red';
            screenLines[i][j].strokeColor.hue += i / (j * bandWidth);
        }
    }
}


I find the effect more soothing with:
But to each their own.


Of course, now that we've got a single layered effect running smoothly along, I think it's time to add a second layer and perhaps try to figure out that whole masking thing.  But maybe I'll sleep on that first.

Oh, and so you can see how I did, here's a link to the original graphic that inspired this bit of coding: never mind, image no longer available (which is one reason why I like to host my own stuff, among many).



previous -- ScreenLineAnimations-002        paper.js tutorial index       next - ScreenLineAnimation-004



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