After I knew about Processing.js , "WordPress header animation with Processing.js" is in my to do list.
I finally get it up today. I studied and modified the current header animation from Processing.js . I hope I can create more advance and impressive animation in future. Below is the modified code as reference.
<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>
References
Comments
Comments powered by Disqus