Raining effect in transparent background

p5.js Coding Questions
1

Hi, I’m really new to p5js :tired_face: 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 )

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 ) , 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!

2

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)

3

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

4

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.

1 Like
5

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;
	}


}

}

6

Using clear() at the beginning of draw works …

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);
		}
	}
}
2 Likes
7

WOW it’s working!! thankyou so much :kissing_heart::kissing_heart::kissing_heart::kissing_heart:

8

glad I could help. :turtle: