Behind the Pixels: Vol 1 | The (GIF(t)s) That Keep on Giving

Elder Millennial Raving about his favorite media

Before we embark on today’s adventure, let’s get one thing straight…

My foray into GIFs began as a means to an end. I was a Parsons Game Design student at the time and chose Processing as the focus for my Code 1 class. A few assignments into the class a challenge presented itself. As is the case with of my challenges, this too was self-impose. How could show my output [short looping animations, moving colors and mathematical shapes in this instance] without someone having to run the code? How best to show short clips of the sketches in motion so that my requests for advice and explanations of what the sketch was doing vs what I wanted it to do could be understood? As was my habit at the time, I asked no one and dove into a journey of discovery. One possibility I found was a site called Code Pen. It was a great way to display both ones syntax and the resulting animations…on Code Pen. Shareable outside of the site via copied link and (I think?) embed codes. Not good enough

Another option was the Processing web editor, though I’m not sure if its fidelity or flexibility was as robust as it is currently. Regardless, it was the same issue as with Code Pen. Also not good enough. Therefore the search had to continue. The aforementioned tools hit the mark in SOME aspects, but still left too much to desire:

• They allowed for embedding in specific places but that was a hassle in many cases

• They weren’t easily shareable by the non-initiated. (Critical to any one creating in the digital world)

• These platforms weren’t popular in the way I needed them to be.

As such, I filed those options away and got back to rummaging through the internet

Credit: Tidy Mice

After a bit more research the solution finally revealed itself. GIFs were the answer. The type of generative art I enjoyed making with Processing was tailor-made for them. Seamless looping sketches displayed in a lightweight looping video format. It was synchronicity at its finest. The next step after choosing the format was finding a place to host them; enter Giphy. One of the first things I uploaded was the following:

This piece was the final form of one of my first beloved Processing sketches. It developed from our learning about arranging instances of objects into grids and working with images. (code below)

float[][] posx = new float[20][20]; 
float[][] posy = new float[20][20];

void setup() {
  size(800, 800, P3D); 
  background(0); 
  strokeWeight(3); 
  stroke(255); 
  noCursor(); 
  for (int i = 0; i < posx.length; i++) {
    for (int j = 0; j <posx[0].length; j++) {
      posx[i][j] = 100 + j * 50;
      posy[i][j] = 100 + i * 50;
    }
  }
}

//println(posx); 
//println(posy); 


void draw() {
  background(0); 
  int x = 0; 
  int y = 0; 
  float r = (map(mouseX, 0, width, 0, 255)); 
  float g = (map(mouseY, 0, height, 0, 255)); 
  float b = 89; 
  float d = dist(mouseX, mouseY, x, y); 
  float siz = map(d, 0, width, 10, 30);
  
  for (int i = 0; i < posx.length; i++) {
    for (int j = 0; j <posx[0].length; j++) {
      pushMatrix();
      translate(posx[i][j], posy[i][j]);
      rotateY(map(100, 0, 600, 0, frameCount));
      rotateX(-0.4);
      box(siz); 
      popMatrix();
      fill(r, g, b);
      posx[i][j] += random(-1, 1);
      posy[i][j] += random(-1, 1);
    }
  }
}

After posting it I thought absolutely nothing of it. My assignment was complete, a funny looking thing was created and I was able to show my professor future works. Excelsior!

While the amount of time between my initiation and solidification as a maker of GIFs is nebulous, I can say with certainty the day I received the email was pivotal. The Email’s contents were simple. The lovely folks at Giphy were let me know that my little bouncing faces GIF (pictured above) had received five hundred thousand views (Seven years and millions more views later, I’m still unsure of what that means beyond being a vanity metric) and as such I’d met the requirements for my page to be changed from a normal (my words, not theirs) account to an artist account.

With that came access to metrics, some new tools and my pieces being searchable everywhere the Giphy API was connected. That new development sparked a change in the way I looked at what I was making. For one I started looking at the code-based doodles as my work as opposed to a study tool. This brought about a different level of attention, drive and most importantly…MORE ANIMATIONS.