Image with a Rain and Wind Effect

Gallery
1

Below is an image of the Brooklyn Bridge created by adding a rain and wind effect to the original photograph:

brooklyn_bridge_rain_effect
brooklyn_bridge_rain_effect800×600 56.4 KB

The original Flickr photograph is from here (click for Flickr photo page):

Imgur
Photo by Sandy Richard on July 16, 2009

Following is the p5.js code that created the effect:

new p5((p) => { // instance mode with anonymous function
  let scale_div = 2; // divisor for setting scale of sketch
  let img;
  p.preload = () => {
    /*
    source of original image:
    https://www.flickr.com/photos/9428166@N03/6033059382/
    */
    img = p.loadImage("sgr_brooklyn_bridge.jpg");
  };
  
  p.setup = () => {
    p.createCanvas(
      img.width / scale_div,
      img.height / scale_div
    );
    // draw the original image only once
    p.image(img, 0, 0, p.width, p.height);
    p.print(p.width, p.height);
    // set the line thickness
    p.strokeWeight(8 / scale_div);
  };

  p.draw = () => {
    let x, y, c, d;
    // randomly choose a local point
    x = p.random(p.width);
    y = p.random(p.height);
    // get the local color
    c = p.get(x, y);
    // add some transparency
    p.stroke(p.red(c), p.green(c), p.blue(c), 128);
    // randomly choose length of line
    d = p.random(10 / scale_div);
    // rain descending toward the lower right
    p.line(x - d, y - d, x + d, y + d);
  };
});

Suggestions for enhancing the effect or adapting it for other images are welcome.

3 Likes