function init() {
        
        //These lines get the canvas DOM element and canvas context, respectively.
        canvas = document.getElementById("c");
        ctx = canvas.getContext("2d");

        //These two set the width and height of the canvas to the defined values.
        canvas.width = canvas_width;
        canvas.height = canvas_height;

        /*
        This loop begins at zero and counts up to the defined number of particles,
        less one, because array elements are numbered beginning at zero.
        */
        for (i = 0; i < speck_count; i++) {
            /*
            This calls the function particle() with random X and Y values. It then
            takes the returned object and pushes it into the particles array at the
            end.
            */
            particles.push(new particle(Math.random() * canvas_width, Math.random() * canvas_height));
        }

        //This loops through the count of columns.
        for (col = 0; col < num_cols; col++) { 
            
            //This defines the array element as another array.
            vec_cells[col] = [];

            //This loops through the count of rows.
            for (row = 0; row < num_rows; row++) { 
                
                /*
                This line calls the cell() function, which creates an individual grid cell
                and returns it as an object. The X and Y values are multiplied by the
                resolution so that when the loops are referring to "column 2, row 2", the
                width and height of "column 1, row 1" are counted in so that the top-left
                corner of the new grid cell is at the bottom right of the other cell.
                */
                var cell_data = new cell(col * resolution, row * resolution, resolution)

                //This pushes the cell object into the grid array.
                vec_cells[col][row] = cell_data;

                /*
                These two lines set the object's column and row values so the object knows
                where in the grid it is positioned.                
                */
                vec_cells[col][row].col = col;
                vec_cells[col][row].row = row;

            }
        }
        

        /*
        These loops move through the rows and columns of the grid array again and set variables 
        in each cell object that will hold the directional references to neighboring cells. 
        For example, let's say the loop is currently on this cell:

        OOOOO
        OOOXO
        OOOOO
        
        These variables will hold the references to neighboring cells so you only need to
        use "up" to refer to the cell above the one you're currently on.
        */
        for (col = 0; col < num_cols; col++) { 
            
            for (row = 0; row < num_rows; row++) { 

                /*
                This variable holds the reference to the current cell in the grid. When you
                refer to an element in an array, it doesn't copy that value into the new
                variable; the variable stores a "link" or reference to that spot in the array.
                If the value in the array is changed, the value of this variable would change
                also, and vice-versa.
                */
                var cell_data = vec_cells[col][row];

                /*
                Each of these lines has a ternary expression. A ternary expression is similar 
                to an if/then clause and is represented as an expression (e.g. row - 1 >= 0) 
                which is evaluated to either true or false. If it's true, the first value after
                the question mark is used, and if it's false, the second value is used instead.

                If you're on the first row and you move to the row above, this wraps the row 
                around to the last row. This is done so that momentum that is pushed to the edge 
                of the canvas is "wrapped" to the opposite side.
                */
                var row_up = (row - 1 >= 0) ? row - 1 : num_rows - 1;
                var col_left = (col - 1 >= 0) ? col - 1 : num_cols - 1;
                var col_right = (col + 1 < num_cols) ? col + 1 : 0;

                //Get the reference to the cell on the row above.
                var up = vec_cells[col][row_up];
                var left = vec_cells[col_left][row];
                var up_left = vec_cells[col_left][row_up];
                var up_right = vec_cells[col_right][row_up];
                
                /*
                Set the current cell's "up", "left", "up_left" and "up_right" attributes to the 
                respective neighboring cells.
                */
                cell_data.up = up;
                cell_data.left = left;
                cell_data.up_left = up_left;
                cell_data.up_right = up_right;

                /*
                Set the neighboring cell's opposite attributes to point to the current cell.
                */
                up.down = vec_cells[col][row];
                left.right = vec_cells[col][row];
                up_left.down_right = vec_cells[col][row];
                up_right.down_left = vec_cells[col][row];

            }
        }

      
        /*
        These lines create triggers that fire when certain events happen. For
        instance, when you move your mouse, the mouse_move_handler() function 
        will run and will be passed the event object reference into it's "e" 
        variable. Something to note, the mousemove event doesn't necessarily 
        fire for *every* mouse coordinate position; the mouse movement is 
        sampled at a certain rate, meaning that it's checked periodically, and 
        if the mouse has moved, the event is fired and the current coordinates 
        are sent. That's why you'll see large jumps from one pair of coordinates
        to the next if you move your mouse very fast across the screen. That's
        also how I measure the mouse's velocity.
        */
        w.addEventListener("mousedown", mouse_down_handler);
        w.addEventListener("touchstart", mouse_down_handler);

        w.addEventListener("mouseup", mouse_up_handler);
        w.addEventListener("touchend", touch_end_handler);

        canvas.addEventListener("mousemove", mouse_move_handler);
        canvas.addEventListener("touchmove", touch_move_handler);

        //When the page is finished loading, run the draw() function.
        w.onload = draw;

    }
/*
    This is the main function. It is triggered to start the process of constructing the
    the grid and creating the particles, attaching event handlers, and starting the
    animation loop.
    */
This is the main function. It is triggered to start the process of constructing the
the grid and creating the particles, attaching event handlers, and starting the
animation loop.
This is the main function . It is triggered to start the process of constructing the the grid and creating the particles attaching event handlers and starting the animation loop .
function init() {
        canvas = document.getElementById("c");
        ctx = canvas.getContext("2d");
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        for (i = 0; i < speck_count; i++) {
            particles.push(new particle(Math.random() * canvas_width, Math.random() * canvas_height));
        }
        for (col = 0; col < num_cols; col++) { 
            vec_cells[col] = [];
            for (row = 0; row < num_rows; row++) { 
                var cell_data = new cell(col * resolution, row * resolution, resolution)
                vec_cells[col][row] = cell_data;
                vec_cells[col][row].col = col;
                vec_cells[col][row].row = row;
            }
        }
        for (col = 0; col < num_cols; col++) { 
            for (row = 0; row < num_rows; row++) { 
                var cell_data = vec_cells[col][row];
                var row_up = (row - 1 >= 0) ? row - 1 : num_rows - 1;
                var col_left = (col - 1 >= 0) ? col - 1 : num_cols - 1;
                var col_right = (col + 1 < num_cols) ? col + 1 : 0;
                var up = vec_cells[col][row_up];
                var left = vec_cells[col_left][row];
                var up_left = vec_cells[col_left][row_up];
                var up_right = vec_cells[col_right][row_up];
                cell_data.up = up;
                cell_data.left = left;
                cell_data.up_left = up_left;
                cell_data.up_right = up_right;
                up.down = vec_cells[col][row];
                left.right = vec_cells[col][row];
                up_left.down_right = vec_cells[col][row];
                up_right.down_left = vec_cells[col][row];
            }
        }
        w.addEventListener("mousedown", mouse_down_handler);
        w.addEventListener("touchstart", mouse_down_handler);
        w.addEventListener("mouseup", mouse_up_handler);
        w.addEventListener("touchend", touch_end_handler);
        canvas.addEventListener("mousemove", mouse_move_handler);
        canvas.addEventListener("touchmove", touch_move_handler);
        w.onload = draw;
    }
function init ( ) { canvas = document . getElementById ( "c" ) ; ctx = canvas . getContext ( "2d" ) ; canvas . width = canvas_width ; canvas . height = canvas_height ; for ( i = 0 ; i < speck_count ; i ++ ) { particles . push ( new particle ( Math . random ( ) * canvas_width , Math . random ( ) * canvas_height ) ) ; } for ( col = 0 ; col < num_cols ; col ++ ) { vec_cells [ col ] = [ ] ; for ( row = 0 ; row < num_rows ; row ++ ) { var cell_data = new cell ( col * resolution , row * resolution , resolution ) vec_cells [ col ] [ row ] = cell_data ; vec_cells [ col ] [ row ] . col = col ; vec_cells [ col ] [ row ] . row = row ; } } for ( col = 0 ; col < num_cols ; col ++ ) { for ( row = 0 ; row < num_rows ; row ++ ) { var cell_data = vec_cells [ col ] [ row ] ; var row_up = ( row - 1 >= 0 ) ? row - 1 : num_rows - 1 ; var col_left = ( col - 1 >= 0 ) ? col - 1 : num_cols - 1 ; var col_right = ( col + 1 < num_cols ) ? col + 1 : 0 ; var up = vec_cells [ col ] [ row_up ] ; var left = vec_cells [ col_left ] [ row ] ; var up_left = vec_cells [ col_left ] [ row_up ] ; var up_right = vec_cells [ col_right ] [ row_up ] ; cell_data . up = up ; cell_data . left = left ; cell_data . up_left = up_left ; cell_data . up_right = up_right ; up . down = vec_cells [ col ] [ row ] ; left . right = vec_cells [ col ] [ row ] ; up_left . down_right = vec_cells [ col ] [ row ] ; up_right . down_left = vec_cells [ col ] [ row ] ; } } w . addEventListener ( "mousedown" , mouse_down_handler ) ; w . addEventListener ( "touchstart" , mouse_down_handler ) ; w . addEventListener ( "mouseup" , mouse_up_handler ) ; w . addEventListener ( "touchend" , touch_end_handler ) ; canvas . addEventListener ( "mousemove" , mouse_move_handler ) ; canvas . addEventListener ( "touchmove" , touch_move_handler ) ; w . onload = draw ; }
This is the main function.
This is the main function .
//These lines get the canvas DOM element and canvas context, respectively. //These two set the width and height of the canvas to the defined values. /*
        This loop begins at zero and counts up to the defined number of particles,
        less one, because array elements are numbered beginning at zero.
        */ /*
            This calls the function particle() with random X and Y values. It then
            takes the returned object and pushes it into the particles array at the
            end.
            */ //This loops through the count of columns. //This defines the array element as another array. //This loops through the count of rows. /*
                This line calls the cell() function, which creates an individual grid cell
                and returns it as an object. The X and Y values are multiplied by the
                resolution so that when the loops are referring to "column 2, row 2", the
                width and height of "column 1, row 1" are counted in so that the top-left
                corner of the new grid cell is at the bottom right of the other cell.
                */ //This pushes the cell object into the grid array. /*
                These two lines set the object's column and row values so the object knows
                where in the grid it is positioned.                
                */ /*
        These loops move through the rows and columns of the grid array again and set variables 
        in each cell object that will hold the directional references to neighboring cells. 
        For example, let's say the loop is currently on this cell:

        OOOOO
        OOOXO
        OOOOO
        
        These variables will hold the references to neighboring cells so you only need to
        use "up" to refer to the cell above the one you're currently on.
        */ /*
                This variable holds the reference to the current cell in the grid. When you
                refer to an element in an array, it doesn't copy that value into the new
                variable; the variable stores a "link" or reference to that spot in the array.
                If the value in the array is changed, the value of this variable would change
                also, and vice-versa.
                */ /*
                Each of these lines has a ternary expression. A ternary expression is similar 
                to an if/then clause and is represented as an expression (e.g. row - 1 >= 0) 
                which is evaluated to either true or false. If it's true, the first value after
                the question mark is used, and if it's false, the second value is used instead.

                If you're on the first row and you move to the row above, this wraps the row 
                around to the last row. This is done so that momentum that is pushed to the edge 
                of the canvas is "wrapped" to the opposite side.
                */ //Get the reference to the cell on the row above. /*
                Set the current cell's "up", "left", "up_left" and "up_right" attributes to the 
                respective neighboring cells.
                */ /*
                Set the neighboring cell's opposite attributes to point to the current cell.
                */ /*
        These lines create triggers that fire when certain events happen. For
        instance, when you move your mouse, the mouse_move_handler() function 
        will run and will be passed the event object reference into it's "e" 
        variable. Something to note, the mousemove event doesn't necessarily 
        fire for *every* mouse coordinate position; the mouse movement is 
        sampled at a certain rate, meaning that it's checked periodically, and 
        if the mouse has moved, the event is fired and the current coordinates 
        are sent. That's why you'll see large jumps from one pair of coordinates
        to the next if you move your mouse very fast across the screen. That's
        also how I measure the mouse's velocity.
        */ //When the page is finished loading, run the draw() function.