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 2)


To follow the logic of the program, it is likely best to simply follow the user control, which starts at the checkClickBox(event) function, which in turn is fired by onMouseDown(event).  Case 1 is for the first checkBox, and that's all I'll cover as the other cases are derivative (+/- to verticalColumn or speedControl)).


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

            case 1:
                verticalColumns = 5;  // assigns a value, simple enough
                speedControl = 5;
                animateControl = 1;  // this variable tells us we need to reset the objects
                break;

//... function continues with other cases

animateControl lets the program know that the objects need to be updated.  If objects are updated at the time of onMouseDown, we have no way of knowing where we are in the for/next loops and the odds of everything running smoothly are microscopically small.  By passing a value that we check at the beginning of every animation frame (i.e. at the start of the onFrame() method), we decide when to update the objects avoiding collisions and calls to non-existent parameters.


function onFrame(event){
   
    if (animateControl === 1){
        redrawAllRainbowLines();  // redraws the entire screen
        animateControl = 0; // zeroes out the control variable
    }
   
    cycleMultiLines(speedControl); // and whether the if is true or not, this is always called

}

I will leave it to you to decipher the following.  It's really just a list of all the user (me) defined functions that create the page.  Starting from scratch is sometimes the easiest way.  I also call this function onLoad (really just inline, but semantically, it's the same).

function redrawAllRainbowLines(){
    paper.project.activeLayer.removeChildren();  // paper is reset
    drawNewScreenLines();  // blank lines drawn
    drawRainbowMultiLines(); // rainbow hue enacted
    createFeedbackText(); 
    updateFeedbackPointText();
    createClickBox();
    writeClickBoxText();
    drawHeadText();  // the names say it all to me at this point -- i.e. a bunch of text
}


onFrame() also called the function below, which does nothing more than change the hue color as a function of j (the column number we are in) and the speed.

function cycleMultiLines(speed){
    for (i = 0; i <= numLines; i ++){
        for (j = 1; j <= verticalColumns; j++){
   
            screenLines[i][j].strokeColor.hue += j * speed;
   
        }
    }
}

Two Dimensional Array - Line Split

Oh, I almost forgot.  Probably the hardest part of this was getting the lines to split.  And that in turn required two parts:
  1. Setting up the 2-D Array
  2. Determining the Formula for the Line Segment Break Points

var screenLines = []; // declared outside the function so it persists

function drawNewScreenLines(){

    var lineSize = Math.floor(view.size.width / verticalColumns);
    var pointLeft = new Point(0,0);
    var pointRight = new Point(view.size.width, 0);   
   
    for (i = 0; i <= numLines; i ++){
   
        screenLines[i] = []; // 2nd dimension added to the array, 1 for each i
       
        pointLeft.y = i; // set the y coordinates to i
        pointRight.y = i;

        for (j = 1; j <= verticalColumns; j++){ // enter the j loop, 1 loop for each verticalColumn
           
            pointLeft.x = (j - 1) * lineSize;  // and here are the two formulas for the line endpoints
            pointRight.x = j * lineSize; // trivially easy... once conceptually figured out
             // the formulas fail for j = 0 &/or j > verticalColumns
             // but since program never hits either, that's fine
           
            screenLines[i][j] = new Path.Line(pointLeft, pointRight); // a separate line for each verticalColumn
                       
            screenLines[i][j].visible = false;
            screenLines[i][j].strokeWidth = 1;
            screenLines[i][j].strokeColor = 'black';
       
        }
    }
}


And that's it for the day.  Planning on adding some extra functionality from here.  But if I can control the relative height of each column (the rate at which the hue takes effect), I will have achieved the look I was trying to copy and provided more functionality too boot.  After all, the one I saw did not allow one to either vary the speed or the number of columns.  And so, in fact, was much simpler, as no object management technique needed to be implemented.





previous -- ScreenLineAnimations-001        paper.js tutorial index       next - ScreenLineAnimation-003



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