Strange Opacity

Hi

I have the code:

this.draw = function() {
        stroke(0);
        fill(0);
        ellipse(this.position.x, this.position.y, 6, 6);

        stroke(0);
        strokeWeight(1);
        noFill();
        ellipse(width/2, height/2, 400, 400);
}

being called via a function in my draw() function. When i apply an opacity setting to the first stroke in this block it works as expected, however, when i apply an opacity to the second stroke in this block it doesn't work as expected. It appears to multiply the opacity or add it to itself on each call to the draw function.

Any ideas how to fix this?

Thanks

Rob

Tagged:

Answers

  • edited August 2016

    FAQ! You need to clear the background on each frame; otherwise you're overlaying multiple transparent elements...

    Edit: just to be clearer...

    Call background() or clear() at the beginning of draw().

  • I call both in the main draw function. Here is the code:

    function draw() {
        var now = Date.now();
        delta = (now - lastTime) / 1000;
    
        background(0, 0, 0, 0);
        clear();
    
        for (var i = particles.length - 1; i >= 0; i--) {
            particles[i].update();
            particles[i].draw();
        }
    
        lastTime = now;
    }
    

    The above code is in the Particle class function aas called from the main draw function.

    Thanks

Sign In or Register to comment.