In case you were wondering what the header animation is, it’s a quick 24-line (excluding blank lines and closing braces) Processing sketch. Here it is, in all its slapped-together-in-a-few-minutes glory:<\/p>\n\n\n\n
int barCount = 64;\nint barGap = 8;\n\nboolean output = true; \/\/When enabled, the sketch will output the animation as PNG images and exit\n\nint maxFrameCount = 240; \/\/How many frames it takes to perform the animation\n\nvoid setup(){\n size(1920, 360);\n frameRate(30);\n}\n\nvoid drawBars(){\n noStroke();\n fill(#17becf);\n for(int i = 0; i <= barCount; i++){\n float barTheta = \n ( TAU*((float)i\/barCount) ) + \/\/base angle based on position on graph (for the shape of the waveform)\n ( TAU*(float)(frameCount%maxFrameCount)\/maxFrameCount \/\/additional angle for animation\n );\n \n int barHeight = round((sin(barTheta)*(height\/4)) + (height \/ 2));\n int barSpacing = width\/barCount;\n int barWidth = barSpacing - barGap;\n rect(barSpacing*i, barHeight, barWidth, height);\n }\n}\n\nvoid draw(){\n background(0);\n \/\/drawTriGrid();\n drawBars();\n if(output){\n if(frameCount == maxFrameCount){exit();}\n saveFrame(\"frames\/\"+frameCount+\".png\");\n }\n}<\/code><\/pre>\n\n\n\nTo convert the output frames to an MP4 video for use on WordPress, I imported it as an image sequence in Blender’s NLE and exported in H.264.<\/p>\n\n\n\n
Feel free to use this sketch for all your sine wave animation needs.<\/p>\n","protected":false},"excerpt":{"rendered":"
In case you were wondering what the header animation is, it’s a quick 24-line (excluding blank lines and closing braces) Processing sketch. Here it is, in all its slapped-together-in-a-few-minutes glory: To convert the output frames to an MP4 video for use on WordPress, I imported it as an image sequence in Blender’s NLE and exported<\/p>\n