ICM, Week 2: Nyan Cat Demonstrates Animation

For Week 2′s homework in my NYU-ITP intro to computational media course, we were supposed to rotate, animate, and translate an image.

We had been rotating circles in class, which made it deceptive for the homework, since a rotating quadrilateral or other non-circular shape will show a spinning object-type rotation instead of an orbit.  For example, here is my orbital circle code from messing around in class (JavaScript, Java).  We were supposed to draw a Sol DeWitt piece of progressively bigger circles radiating out from the midpoints of the four sides of the drawing area.

For my homework, I mostly wanted to play with animation via translation, not rotation, and I wanted to mess with the mouse pointer’s coordinates, having seen functions and variables for them in the Processing cheat sheet.

I was also looking for 8-bit sprites while in class and found that many libs existed.  One of my questions: how feasible is it to draw a 50×50 sprite into Processing like, say, a sprite of Mario?

Anyway, somehow I happened upon Nyan Cat, an internet meme featuring a flying Pop Tart-bodied cat, accompanied by a fast-paced cute cat song.  ”Nyan” being the Japanese equivalent of “meow”.  In keeping with my goal of doing happy projects at ITP, Nyan Cat seemed perfect!

Click here to view the embedded video.

The result is this (static screenshot):

Demo, code, Java all below the jump:

Here is the Java version.

And the raw code:

/*

 Ben Turner
 NYU-ITP, Intro to Computational Media

 Week #2 homework: rotate/transform/animate

 Nyan Cat colors and images via Elie Kahwagi on
 openprocessing.org.  Thanks!

http://www.openprocessing.org/visuals/?visualID=33045

 */

int quadrant=1; // quadrant is 1-4 on x/y axis, 1 being +x, +y
int x=0; // x-boundary for nyan cat's orbit
int y=-100; // y-boundary for nyan cat's orbit, starts above nyan cat
PImage nyan;
PImage rainbow;

void setup() {
  size(800, 400);
  background(0, 68, 120); // sets nyan cat blue bg!
  noFill();
  stroke(0);
  smooth();
  frameRate(20); // too fast and it flies in a browser, too slow is choppy
  nyan = loadImage("Nyan.png");
  rainbow = loadImage("Rainbow.png");
} // end setup()

void draw() {
  background(0, 68, 120);
  stroke(255);
  fill(255);
  for (int z=0;z<30;z++) { // draws random stars of random sizes
    float zx=random(800);
    float zy=random(800);
    float diameter=random(10);
    int(zx); // have to convert floats to ints for grid coords
    int(zy);
    int(diameter);
    ellipse(zx, zy, diameter, diameter);
  }
  PFont fontPortrait; // I don't like that it adds a lot to total dl size
  fontPortrait = loadFont("Helvetica-48.vlw");
  textFont(fontPortrait, 30);
  fill(255);
  text("KEEP MOUSE BUTTON PRESSED", 170, 50);
  text("TO GUIDE LIL' NYAN CAT", 237, 100);
  textFont(fontPortrait, 30);
  // lets you guide nyan cat, and also admire him while stopped!
  if (mousePressed == true) {
    translate(mouseX-50, mouseY-50);
    image(rainbow, 30, 5, -1000, 48.644); // offset for rainbow, made wider
    image(nyan, 0, 0);
  }
  else { // if mouse button not pressed

    switch (quadrant) {
    case 1:
      if (x<=100) {
        x+=5;
        y+=5;
      }
      else {
        quadrant = 2;
      }
      break;
    case 2:
      if (x>0) {
        x-=10;
        y+=10;
      }
      else {
        quadrant = 3;
      }
      break;
    case 3:
      if (x>-100) {
        x-=10;
        y-=10;
      }
      else {
        quadrant = 4;
      }
      break;
    case 4:
      if (x<=0) {
        x+=10;
        y-=10;
      }
      else {
        quadrant = 1;
      }
      break;
    }
    translate(mouseX-50+x, mouseY-50+y); // offset from mouse pos
    image(rainbow, 30, 5, -1000, 48.644); // rainbow offset, wider
    image(nyan, 0, 0);
  } // end if else mouse button not pressed
} // end draw()

I had to end up using translate for having Nyan Cat orbit the mouse.  I basically set up a diamond-like x-axis and y-axis stepping switch() function for positioning Nyan Cat and slowly orbiting him around the mouse.  I probably, if I had more time, could have figured out how to do a proper elliptical orbit and also use scale() to make Nyan Cat appear further away or closer (for hugging) during the orbit.

I added stars by randomly selecting points in the drawing area and then making x randomly sized ellipses at those coordinates.  I couldn’t make them burst like in the original animation, because I’m not sure you can do much actually animation for more than one layer, since the background is erased through each draw() pass, via background().

Also found that I couldn’t make Nyan Cat destructive (only one on screen) while making the trailing rainbow non-destructive (leaving a trail).  Again, background() has to be called to clear the background for each draw() pass.  Right?

I played with the mousePressed variable to see how an event can run separately when mouse input is detected.

Nyan Cat and his rainbow were imported graphics via a sketch uploaded to OpenProcessing.org by Elie Kahwagi.  Full credit toward that dude’s sketch, located at http://www.openprocessing.org/visuals/?visualID=33045 .

Last note: the animation when output into JavaScript did not seem to work much at all in Firefox, whereas Chrome ran the animation fine.

The best part about Nyan Cat?  There are now international Nyan Cats!

Spanish Nyan Cat:

Click here to view the embedded video.

Jap-Nyan-ese Cat:

Click here to view the embedded video.

Califor-Nyan Cat:

Click here to view the embedded video.