Writing the Header Animation in Under 30 Lines of Code

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:

int barCount = 64;
int barGap = 8;

boolean output = true; //When enabled, the sketch will output the animation as PNG images and exit

int maxFrameCount = 240; //How many frames it takes to perform the animation

void setup(){
  size(1920, 360);

void drawBars(){
  for(int i = 0; i <= barCount; i++){
    float barTheta = 
      ( TAU*((float)i/barCount) ) + //base angle based on position on graph (for the shape of the waveform)
      ( TAU*(float)(frameCount%maxFrameCount)/maxFrameCount //additional angle for animation
    int barHeight = round((sin(barTheta)*(height/4)) + (height / 2));
    int barSpacing = width/barCount;
    int barWidth = barSpacing - barGap;
    rect(barSpacing*i, barHeight, barWidth, height);

void draw(){
    if(frameCount == maxFrameCount){exit();}

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 in H.264.

Feel free to use this sketch for all your sine wave animation needs.