How can I make the background transparent in P5.js, but still keep the same effect? - image

Question

I have a P5.js art, but when I remove the background, the effect changes. I'd like to remove the background but keep the effect the same. The reason for this is because I plan to overlay this on top of another canvas.
The line I'd like to remove is this: background(30); However, when I remove it, the effect becomes different.
The full code can be found here: https://editor.p5js.org/timexer/sketches/Rbbo72xVi
class Particle {
constructor(){
this.pos = createVector(width/2,height/2)
this.vel = createVector(0,0)
this.acc = p5.Vector.random2D().normalize()
this.r = map(this.pos.x, 0, width, 255, 0)
this.g = map(this.pos.y, 0, height, 0, 255)
this.b = map(dist(width / 2, height / 2, this.pos.x, this.pos.y), 0, width/2, 0, 255)
this.alpha = 255
}
update(){
var m = map(sin(frameCount), -1, 1, 0.3, 0.6)
this.acc.mult(m)
this.vel.add(this.acc)
this.pos.add(this.vel)
this.r = map(this.pos.x, 0, width, 255, 0)
this.g = map(this.pos.y, 0, height, 0, 255)
this.b = map(dist(width / 2, height / 2, this.pos.x, this.pos.y), 0, width, 0, 255)
if ( dist(width / 2, height / 2, this.pos.x, this.pos.y) > 80){
this.alpha -= 5
}
}
show(){
noStroke()
fill(this.r, this.g, this.b, this.alpha)
ellipse(this.pos.x, this.pos.y, 2)
}
}
var particles = []
function setup() {
createCanvas(800, 800);
angleMode(DEGREES)
}
function draw() {
background(30);
for(var i = 0; i <10; i++){
p = new Particle()
particles.push(p)
}
for(var i = 0; i < particles.length ; i++){
if(particles[i].alpha > 0){
particles[i].update()
particles[i].show()
}else{
particles.splice(i,1)
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Answer 1

Instead of calling background(30) call clear()
var particles = []
function setup() {
createCanvas(windowWidth, windowHeight);
angleMode(DEGREES)
}
function draw() {
clear();
for (var i = 0; i < 10; i++) {
const p = new Particle()
particles.push(p)
}
for (var i = 0; i < particles.length; i++) {
if (particles[i].alpha > 0) {
particles[i].update()
particles[i].show()
} else {
particles.splice(i, 1)
}
}
}
class Particle {
constructor() {
this.pos = createVector(width / 2, height / 2)
this.vel = createVector(0, 0)
this.acc = p5.Vector.random2D().normalize()
this.r = map(this.pos.x, 0, width, 255, 0)
this.g = map(this.pos.y, 0, height, 0, 255)
this.b = map(dist(width / 2, height / 2, this.pos.x, this.pos.y), 0, width / 2, 0, 255)
this.alpha = 255
}
update() {
var m = map(sin(frameCount), -1, 1, 0.3, 0.6)
this.acc.mult(m)
this.vel.add(this.acc)
this.pos.add(this.vel)
this.r = map(this.pos.x, 0, width, 255, 0)
this.g = map(this.pos.y, 0, height, 0, 255)
this.b = map(dist(width / 2, height / 2, this.pos.x, this.pos.y), 0, width, 0, 255)
if (dist(width / 2, height / 2, this.pos.x, this.pos.y) > 80) {
this.alpha -= 5
}
}
show() {
noStroke()
fill(this.r, this.g, this.b, this.alpha)
ellipse(this.pos.x, this.pos.y, 2)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>