Semi-transparent background in draw() - why don't trails disappear completely?

kristianp89

0: Why won't these ellipses disappear completely?

Shouldn't the continuous adding of a semi-transparent background eventually hide them completely? I can still see them. http://p5js.sketchpad.cc/mk5JJ0a7kM

function setup() {
    colorMode(HSB);
    createCanvas(400, 200);
}

function draw() {
    background(220, 80, 90, 0.1);
    ellipse(mouseX, mouseY, 100, 100);
}

I came up with two approaches. #1 is ugly, and #2 is pretty much what I want.

1: Fixed size array that fades away (ugly-ish snake)

http://p5js.sketchpad.cc/dfR9NE1B1t

const numberOfCircles = 25;
const a = Array(numberOfCircles).fill().map((n, i) => i / numberOfCircles);
const circleArray = [];

function setup() {
    colorMode(HSB);
    createCanvas(400, 200);
}

function draw() {
    background(220, 80, 90);
    insertRemove(createVector(mouseX, mouseY));
    circleArray.forEach((c, i) => {
        fill(0, 0, 100, a[i]);
        stroke(0, 0, 0, a[i]);
        ellipse(c.x, c.y, 100, 100);
    });
}

function insertRemove(coords) {
    circleArray.push(coords);
    if (circleArray.length > numberOfCircles) {
        circleArray.shift();
    }
}

2: Dynamic size array, with circles fading, and deleting themselves (this is the result I was expecting from example #0):

http://p5js.sketchpad.cc/ltcDULJ91O

const ballArray = [];

function setup() {
    colorMode(HSB);
    createCanvas(400, 200);
}

function draw() {
    background(220, 80, 90);
    ballArray.forEach((ball, i) => {
        ball.update();
        ball.display();
        if(ball.notVisible()) {
            ballArray.splice(i, 1);
        }
    })
    fill(0, 0, 100)
    ellipse(mouseX, mouseY, 100, 100)
}

function mouseMoved() {
    ballArray.push(new BallTrail(mouseX, mouseY));
}

function BallTrail(x, y) {
    this.x = x;
    this.y = y;
    this.a = 1;
    this.update = () => this.a -= 0.01;
    this.display = () => {
        fill(0, 0, 100, this.a);
        stroke(0, 0, 0, this.a);
        ellipse(this.x, this.y, 100, 100);
    };
    this.notVisible = () => this.a < 0;
}

jeremydouglass

Shouldn't the continuous adding of a semi-transparent background eventually hide them completely?

No. In brief, if you go 1/10th of the way to 255 repeatedly, you converge below the floating point error rate at not-255. For details, see:

• Repeatedly painting 'transparent white' does not result in full white #4743 https://github.com/processing/processing/issues/4743