P5js trail transparent Background？

p5.js Coding Questions
1

Hello guys! Recently, I have encountered some troubles with p5js. I want to make a raindrop with a track, but the ball moves without a track. Finally, they merge together, but I can’t get a raindrop with a track and a transparent background. Can anyone help me?

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

function draw() {
	clear();
  fill(255,255,0)
    ellipse(mouseX,mouseY,100,100);
//  pg.clear();
 // pg.background(0,0);
  pg.fill(0,10)
  pg.rect(0,0,width,height)
	for (var i = 0; i < 200; i++) {
		drop[i].show();
		drop[i].update();
	}
  image(pg,0,0);
}

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

	this.show = function() {
		pg.noStroke();
		pg.fill(112, 182, 234);
		pg.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

Hi @AbleYudada,

Maybe you want do this …

Cheers
— mnse

3

HI mnse！
I want to have a movable circle under the raindrops with trails, but it will be covered by more and more black background.don’t know if you can see what i mean？

4

Hi @AbleYudada,

With the change I’ve suggested above you get the circle with a trail which fades out a bit each iteration.
Would you like to have the trail completely persistent ?

Cheers
— mnse

5

HI mnse！
thanks for your reply, I think you didn’t understand my question, I want the circle under the track to still be visible, but now the background will slowly turn black and cover the circle

67e05ecab16e8a5502c070af6e4d91c
67e05ecab16e8a5502c070af6e4d91c992×595 34.9 KB

6

Hi @AbleYudada,

Understand … but when you change regarding my suggestion, it won’t. See below…

Cheers
— mnse

function draw() {
  clear();
  // changed here ...
  pg.fill(255, 255, 0);
  pg.ellipse(mouseX, mouseY, 100, 100);

PS: just as a note … also renamed drop array to drops as drop is a reserved keyword.

7

Hi @AbleYudada,

Does this solve your question?

Cheers
— mnse

8

Hi mnse！Thank you for your patient reply. What I need is that the circle has no motion track and the raindrop has a motion track！so I created a new layer of canvas to draw.

Cheers！