Hi. I am travis and I live and work in a place long ago abandoned by the gods: New York City. By day, I am a web developer at Blue Apron. By night, i am a normal person.

This Cat is Your God

It all started with a cat and a hartebeest, best friends despite the fact that one of them was dead. My cat, Bucky, is a badass on a scale that most humans can't even comprehend, let alone achieve. He pushed the envelope one balmy, spring day when he sunbathed in unfathomable alignment with his friend's skull. His lovely mother and I captured the profound moment in a photograph #nofilter

Fast-forward to today, when I made the mistake of tinkering with Processing once again and thinking it would be enjoyable. It turns out the Processing isn't all that great at processing, or perhaps I just don't really know how to use this thing. As painful as the process (heh) was, I made a thing and now I will show it to you.

Your browser does not support the canvas tag.

As you move your mouse through the image, pixels will freak out and take off running. The effect is somewhere between ripples in water and a fleeing swarm of insects, though perhaps not as awe-inspiring. You can press spacebar to reset the image (click the image first).

Once again, I had to keep the canvas size relatively tiny, or the whole thing just shits the bed when converted from Java to JS. Also, pro-tip: not all Java code will just work when run with processing.js. It took me hours to discover that an anonymous class constructor will never play nice in JS world:

final ArrayList<String> directions = new ArrayList<String>() {{
  add("n"); add("s"); add("e"); add("w");
}};

Another really good thing to know about processing.js is that it's written in Javascript (believe it or not). A blaring side-effect of this is that many things want to happen asynchronously, such as requesting resources like images. "Nah, that won't do" is naturally how one feels coming from Java, but luckily you can fake this behavior with some clever JS shenanigans; one comment at the top of your sketch will eagerly load all required images:

/* @pjs preload="bucky-small.png"; */

I took a more OOP approach to this sketch by creating a single class that does basically everything in the program. If you're thinking "that's not very OOP," you can go read some other jerk's blog post about good coding standards and leave the important stuff, like cats, to professionals like me.

class Pixel { 
  private String direction;
  private int posx, posy;
  private int velocity;
  
  Pixel (int px, int py) {  
    posx = px;
    posy = py;
    velocity = 300;
    changeDirection();
  }

  void update() {
    for(int i = 0; i < int(velocity/100); i++) {
      move();
    }
    
    if (shouldMoveAgain()) {
      move();
    }

    velocity--;
  } 
  
  boolean dead() {
    return velocity == 0;
  }
}

This class encapsulates all the information about a moving pixel in the image, including its current position and velocity. Each frame, the program calls update() on each moving pixel, which ultimately just swaps the pixel with one of its neighbors and slows it down. Once the pixel is "dead," the object is destroyed.

Decelerating the pixels gradually and smoothly proved to be a challenge, because the fastest these little mofos move is 4 pixels per frame, whereas they eventually move less than a pixel per frame. To simulate slowing down, shouldMoveAgain() probabilistically budges the pixel a bit further each frame based on the current velocity of the pixel (faster -> more likely to move again).

private boolean shouldMoveAgain() {
  int remainder = velocity % 100;
  
  if (remainder > 0) {
    return int(random(0, 100-remainder)) < 10;
  }
  
  return false;
}

Fat chunks of pixels are animated whenever the mouse moves by implementing the mouseMoved() function, like so:

void mouseMoved()
{
  movingPixels.add(new Pixel(mouseX, mouseY));
  
  for (int x = mouseX - 5; x <= mouseX + 5; x++) {
    for (int y = mouseY - 5; y <= mouseY + 5; y++) {
      if (!outOfBounds(x, y)) {
        movingPixels.add(new Pixel(x, y));
      }
    }
  }
}

boolean outOfBounds(int px, int py) {
  if (px < 0 || px >= width)
    return true;
  if (py < 0 || py >= height)
    return true;
  return false;
}

Because I invested time writing this Pixel class, you can be sure that more pointless Processing sketches are coming that will be equally tiny, if not tinier. Nothing can stop my desire to make pointless things, not even if there ends up being a point. The most important takeaway of this post is that my cat is epic, and you have not seen the last of him.

Rails Jail

Counting is Hard