# Raining effect in transparent background

**URL:** <https://discourse.processing.org/t/raining-effect-in-transparent-background/4565>\
**Category:** Coding Questions\
**Created:** [October 17, 2018, 3:51pm UTC](https://discourse.processing.org/t/raining-effect-in-transparent-background/4565 "2018-10-17T15:51:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![juju11](https://avatars.discourse-cdn.com/v4/letter/j/6bbea6/32.png) [@juju11](https://discourse.processing.org/u/juju11)\
**Post date:** [October 17, 2018, 3:51pm UTC](https://discourse.processing.org/t/raining-effect-in-transparent-background/4565/1 "2018-10-17T15:51:02Z")

</div>

Hi, I’m really new to p5js 😫 and right now I’m making a rain effect in p5. It went well with a background color in my canvas. ( [https://cl.ly/d49185682356](https://cl.ly/d49185682356) )

However, What I want to do is making the background transparent so I can combine it with my HTML image. But, the raindrop leaves traces in my draw loop without the background color. ( [https://cl.ly/1501612cdf8d](https://cl.ly/1501612cdf8d) ) , I tried to play with the transparency but it does not work either…

So, maybe anyone can help ? How to clear the rain traces in my transparent background?

thanks!

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [October 17, 2018, 5:58pm UTC](https://discourse.processing.org/t/raining-effect-in-transparent-background/4565/2 "2018-10-17T17:58:45Z")

</div>

Hm.

In effect, you want to “erase the board” every draw()

An idea that comes to mind is to draw a transparent rectangle over everything, in conjunction with blendMode(REPLACE). Instead of drawing over, it will replace all pixels.

Tell me how it goes (ive not tested this idea)

---

<div class="post-metadata">

**Author:** ![juju11](https://avatars.discourse-cdn.com/v4/letter/j/6bbea6/32.png) [@juju11](https://discourse.processing.org/u/juju11)\
**Post date:** [October 18, 2018, 12:23am UTC](https://discourse.processing.org/t/raining-effect-in-transparent-background/4565/3 "2018-10-18T00:23:54Z")

</div>

Thanks for the idea ! but I’m little bit confused with the blendmode , because it still leave a transparent trace 😂😂, where should i put the blendMode(Replace) attribute though.

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [October 18, 2018, 7:10am UTC](https://discourse.processing.org/t/raining-effect-in-transparent-background/4565/4 "2018-10-18T07:10:49Z")

</div>

You’ll need to call `blendMode(REPLACE)` first. You can call it just once in `setup()`.

After that, I believe you can call the rest in typical fashion:

1. Transparent fill
2. Raindrop update

If it still doesn’t work after this, post your code.

---

<div class="post-metadata">

**Author:** ![juju11](https://avatars.discourse-cdn.com/v4/letter/j/6bbea6/32.png) [@juju11](https://discourse.processing.org/u/juju11)\
**Post date:** [November 4, 2018, 10:01pm UTC](https://discourse.processing.org/t/raining-effect-in-transparent-background/4565/5 "2018-11-04T22:01:07Z")

</div>

Hi just come back from autumn holiday, I guess I’m not quite good at this , so maybe I’ll post the code. Thanks for your feedback though it really helps !

var drop = [];

// function WindowResize() {

// resizeCanvas(windowWidth,windowHeight);  
// }

function setup() {  
blendMode(REPLACE);  
createCanvas(windowWidth,windowHeight);  
for (var i = 0; i \< 200; i++) {

```
drop[i] = new Drop();
}

```

}

function draw() {

fill(225,225,255,10)  
rect(0,0,windowWidth,windowHeight)

for(var i =0; i\< 200; i++){  
// clear();  
drop[i].show();  
drop[i].update();

}

}

function Drop(){  
this.x = random(0, width);  
this.y = random(0,-height);

```
this.show = function(){
	noStroke();
	fill(112,182,234);
	ellipse(this.x,this.y, 2,10);
}

this.update=function() {
	this.speed = random(5,15);
	this.gravity= 0.85;
	this.y =this.y + this.speed*this.gravity;

	if(this.y>height) {
		this.y = random(0,-height);
		//this.gravity=0;
	}

}

```

}

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [November 5, 2018, 12:56am UTC](https://discourse.processing.org/t/raining-effect-in-transparent-background/4565/6 "2018-11-05T00:56:29Z")

</div>

> [@juju11](#):
>
> for(var i =0; i\< 200; i++){  
> // clear();  
> drop[i].show();  
> drop[i].update();
> 
> }

Using clear() at the beginning of draw works …

```auto
var drop = [];

function setup() {
	createCanvas(windowWidth, windowHeight);
	for (var i = 0; i < 200; i++) {
		drop[i] = new Drop();
	}
}

function draw() {
	clear();

	for (var i = 0; i < 200; i++) {
		drop[i].show();
		drop[i].update();
	}
}

function Drop() {
	this.x = random(0, width);
	this.y = random(0, -height);

	this.show = function() {
		noStroke();
		fill(112, 182, 234);
		ellipse(this.x, this.y, 2, 10);
	}

	this.update = function() {
		this.speed = random(5, 15);
		this.gravity = 0.85;
		this.y = this.y + this.speed * this.gravity;

		if (this.y > height) {
			this.y = random(0, -height);
		}
	}
}

```

---

<div class="post-metadata">

**Author:** ![juju11](https://avatars.discourse-cdn.com/v4/letter/j/6bbea6/32.png) [@juju11](https://discourse.processing.org/u/juju11)\
**Post date:** [November 5, 2018, 10:55am UTC](https://discourse.processing.org/t/raining-effect-in-transparent-background/4565/7 "2018-11-05T10:55:33Z")

</div>

WOW it’s working!! thankyou so much 😘😘😘😘

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [November 5, 2018, 2:57pm UTC](https://discourse.processing.org/t/raining-effect-in-transparent-background/4565/8 "2018-11-05T14:57:45Z")

</div>

glad I could help. 🐢