CODEWITHSUNDEEP
imageprocessingp5.js
TIMEX
TIMEX

Reputation: 271704

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

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>

Upvotes: 1

Views: 804

Answers (1)

Paul Wheeler
Paul Wheeler

Reputation: 20140

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>

Upvotes: 1

Related Questions