WordPress Header Animation with Processing.js

82-theme.html

    <script type="application/processing">
    // Build float array to store circle properties
    float[] e = new float[5];

    // Set up canvas
    void setup(){
        // Frame rate
        frameRate(15);

        // Stroke/line/border thickness
        strokeWeight(1);

        // Initiate random values for circles
        e[0] = random(width); // X
        e[1] = random(height); // Y
        e[2] = random(20, 90); // Radius
        e[3] = random(-.5, .5); // X Speed
        e[4] = random(-.5, .5); // Y Speed
    }

    // Begin main draw loop (refresh 15 times per second)
    void draw(){
        // Fill background black
        background(0);

        // Cache diameter and radius of current circle
        float radius = e[2];
        float diameter = radius / 2;

        // Disable shape stroke/border
        noStroke();

        // Fill with green colour
        fill(#98c92a, 100);

        // Draw circle
        ellipse(e[0], e[1], radius, radius);

        // Move circle
        e[0] += e[3];
        e[1] += e[4];

        /* Wrap edges of canvas so circles leave the top
            and re-enter the bottom, etc. */
        if ( e[0] < -diameter         ) { e[0] = width + diameter;  }
        if ( e[0] > width + diameter  ) { e[0] = -diameter;         }
        if ( e[1] < 0 - diameter      ) { e[1] = height + diameter; }
        if ( e[1] > height + diameter ) { e[1] = -diameter;         }

        // Set fill color of center dot to white.
        fill( 255, 255, 255, 255 );

        // Turn off stroke/border
        noStroke();

        // Draw dot in center of circle
        rect(e[0]-1, e[1]-1, 2, 2);
    }
    </script>
        <canvas id="navCanvas" ></canvas>