# Image with a Rain and Wind Effect

**URL:** <https://discourse.processing.org/t/image-with-a-rain-and-wind-effect/34437>\
**Category:** Gallery\
**Created:** [January 2, 2022, 10:42pm UTC](https://discourse.processing.org/t/image-with-a-rain-and-wind-effect/34437 "2022-01-02T22:42:40Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [January 2, 2022, 10:42pm UTC](https://discourse.processing.org/t/image-with-a-rain-and-wind-effect/34437/1 "2022-01-02T22:42:40Z")

</div>

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

 ![brooklyn_bridge_rain_effect](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0c7808c8c0909d4057c535a3e602e8eee2a1189d.jpeg)

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

[![Imgur](https://live.staticflickr.com/6086/6033059382_f512c8b7cb_b.jpg "Brooklyn Bridge") ](https://www.flickr.com/photos/9428166@N03/6033059382/)  
Photo by Sandy Richard on July 16, 2009

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

```auto
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.