Rainbow Hippo Sketch

Gallery
1

Meet the Rainbow Hippo.
Rainbow Hippo
Prior to August, 2021, the Street View imagery of Google Maps included a view of a Party Rental, Ltd. truck parked across the street from the Public Theater at 425 Lafayette Street in the Manhattan borough of New York City. Through several steps, the Rainbow Hippo image was derived from that view. Since then, that Street View imagery has been replaced, sans truck.

The following is a screen capture of a portion of the Street View image of the truck:

hippo_truck_nyc

After some cleaning of the truck image with the help of p5.js and ImageJ, a stencil image was created via the following p5.js code:

let img;
let c;
function preload() {
  // begin loading and wait until done
  /* Original image from Google Street View
  at Public Theater, NYC */
  right_hippo_img = loadImage('pix/bright_pink_small_right_hippo.png');
  left_hippo_img = loadImage('pix/bright_pink_small_left_hippo.png');
  
}

function setup() {
  // run when preload() is done
  createCanvas(256, 151);

  right_hippo_img.loadPixels();
  left_hippo_img.loadPixels();
  background(0, 0, 0, 0);
  noLoop(); // do not loop draw()
  noSmooth();
}

function draw_hippo_stencil() {
  strokeWeight(1);
  // hippo_color = color(157, 93, 115);
  nails_color = color(0, 0, 0, 127);
  transparent_hippo = color(0, 0, 0, 0);
  bright_pink_hippo_color = color(255, 129, 205);
  
  for (var x = 0; x < left_hippo_img.width; x++) {
    for (var y = 0; y < left_hippo_img.height; y++) {
      pix = left_hippo_img.get(x, y);
      if (color_distance(pix, bright_pink_hippo_color) <= 10) {
        // stroke(pix);
        stroke(transparent_hippo);
        point(x, y);
      } else if (color_distance(pix, nails_color) <= 10) {
        stroke(nails_color);
        point(x, y);
      } else {
        // stroke(255, 0, 0); // red
        // stroke(255, 255, 0); // yellow
        stroke("#6E3D34"); // copper
        point(x, y);
      }
    }
  }
}

function color_distance(c1, c2) {
  return Math.abs(red(c2) - red(c1)) + Math.abs(green(c2) - green(c1)) + Math.abs(blue(c2) - blue(c1));
}

function draw() {
  draw_hippo_stencil();
}

The following version of the stencil was used to create the Rainbow Hippo sketch:

large_right_hippo_stencil

Finally, this Processing Python Mode code was used to render the Rainbow Hippo sketch, using the stencil:

hippo_image = None
colors = [color(255, 0, 0), # red
          color(255, 127, 0), # orange
          color(255, 255, 0), # yellow
          color(0, 255, 0), # green
          color(0, 0, 255), # blue
          color(75, 0, 130), # indigo
          color(143, 0, 255), # violet
          ]
def setup():
    size(511, 302)
    global hippo_image
    hippo_image = loadImage("large_right_hippo_stencil.png")

def draw():
    global hippo_image
    strokeWeight(50)
    for i in range(len(colors)): 
        stroke(colors[i])
        line(0, i * 50, width, i * 50)
    image(hippo_image, 0, 0, 512, 302)
3 Likes
2

Thanks for sharing this!

I’m curious, what led to the approach of doing the first stage in p5.js and the second stage in processing python mode, rather than combining them in one or the other?

3 Likes
3

Thanks for asking about this.

Originally, the aim was to create a hippo stencil that could be used later on for multiple purposes. Among those purposes was one to create a personalized birthday card decorated with hippos of various sizes and colors. Another was a series of stacks of hippos in Andy Warhol soup can style.

I had happened upon a story about a show that was performed at the Public Theater, and visited that site in Street View, just to admire the architecture of the building. Upon noticing the truck parked across the street from the building, I thought it would be fun to clean up the grimy hippo as a visual “found object” for creating other art. I used p5.js to do this, for the convenience that it offered regarding introducing an alpha channel into the pixels, and simply clicking upon and saving the canvas, as with an image on a web page. The result was a series of stencils of various sizes, with the hippo facing left or right, and with the field surrounding the stencil in an assortment of colors.

It was months later, while I was playing with colors in Processing Python Mode, that I decided to create a hippo with rainbow colors. Reviewing my original post, I now realize that this statement creates the impression that the original goal was to create the Rainbow Hippo:

But in actuality, the process was part of a much longer story.

It would be interesting if, within the Gallery category of the Processing Forum, some of the creators would provide us with the motivations and stories behind their creations.

2 Likes