# P5js trail transparent Background？

**URL:** <https://discourse.processing.org/t/p5js-trail-transparent-background/39864>\
**Category:** Coding Questions\
**Created:** [November 25, 2022, 8:41am UTC](https://discourse.processing.org/t/p5js-trail-transparent-background/39864 "2022-11-25T08:41:01Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [November 25, 2022, 8:41am UTC](https://discourse.processing.org/t/p5js-trail-transparent-background/39864/1 "2022-11-25T08:41:01Z")

</div>

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?

```auto
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);
		}
	}
}

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [November 26, 2022, 8:28am UTC](https://discourse.processing.org/t/p5js-trail-transparent-background/39864/2 "2022-11-26T08:28:18Z")

</div>

Hi @AbleYudada,

Maybe you want do this …

> [@AbleYudada](#):
>
> ```auto
> function draw() {
> clear();
> pg.fill(255,255,0)
> pg.ellipse(mouseX,mouseY,100,100);
> //...
> 
> ```

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [November 28, 2022, 4:20pm UTC](https://discourse.processing.org/t/p5js-trail-transparent-background/39864/3 "2022-11-28T16:20:19Z")

</div>

> [@AbleYudada](#):
>
> ```auto
> 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);
> }
> }
> }
> 
> ```

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？

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [November 28, 2022, 4:40pm UTC](https://discourse.processing.org/t/p5js-trail-transparent-background/39864/4 "2022-11-28T16:40:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [December 1, 2022, 3:02am UTC](https://discourse.processing.org/t/p5js-trail-transparent-background/39864/5 "2022-12-01T03:02:48Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/3/83e155d14b175112875a47549217656b6e1ec3a9.png)

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [December 1, 2022, 6:45am UTC](https://discourse.processing.org/t/p5js-trail-transparent-background/39864/6 "2022-12-01T06:45:01Z")

</div>

Hi @AbleYudada,

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

Cheers  
— mnse

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

```

https://editor.p5js.org/mnse_forum/full/mABN6kNQx

PS: just as a note … also renamed drop array to drops as [drop](https://p5js.org/reference/#/p5.Element/drop) is a reserved keyword.

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [December 2, 2022, 4:39pm UTC](https://discourse.processing.org/t/p5js-trail-transparent-background/39864/7 "2022-12-02T16:39:45Z")

</div>

Hi @AbleYudada,

Does this solve your question?

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![AbleYudada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ableyudada/32/14190_2.png) [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Post date:** [December 8, 2022, 2:22am UTC](https://discourse.processing.org/t/p5js-trail-transparent-background/39864/8 "2022-12-08T02:22:38Z")

</div>

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！