Disable afterimages in p5.js: go to "Settings" > "Renderer" > "noAfterimage"

Programming
,
1

Issue: Grey Background on Shapes When Moved or Scaled

When I draw a shape, such as an ellipse, line, or rectangle, and move or scale it, the background turns grey. I attempted to change the stroke weight and fill arguments, but the issue persisted.

The following code can be used to reproduce the issue:

var bodys = [];

var zoom = 1.00;
var zMin = 0.05;
var zMax = 9.00;
var sensativity = 0.005;
let zoomMultiplier = 50000000;

function mouseWheel(event) {
  zoom += sensativity * -event.delta;
  zoom = constrain(zoom, zMin, zMax);
  return false;
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  //declaring objects[], replacing these with normal ellipses works 
  //if you're trying to reproduce it.
  background(0);
}

function draw() {
  background(0, 20);
  translate(width/2, height/2);
  scale(zoom / zoomMultiplier);

  strokeWeight(500000)
  line(bodys[0].pos.x, bodys[0].pos.y, bodys[1].pos.x, bodys[1].pos.y)

  //...

  for (let bodys of bodys) {
    bodys.show()
  }
}

The show function looks like this:

show() {
  stroke(255);
  strokeWeight(2);
  fill(255, 100);
  ellipse(this.pos.x, this.pos.y, this.r * 2);
}

Example of the issue.

2

The issue is caused by the background(0, 20); line in the draw() function. This line sets the background color to black with an alpha value of 20, creating a translucent effect. When you move or scale the shapes, the translucent background is redrawn on top of the previous frames, causing the grey background.

To fix this, you can remove or comment out the background(0, 20); line in the draw() function. This will prevent the translucent background from being redrawn and the issue should be resolved.

Here is the modified code:

function draw() {
  // background(0, 20); // Commented out the translucent background

  // Rest of the code...
}

If you still want to have a translucent background, you can try reducing the alpha value to a smaller value, such as background(0, 5);. This will make the translucent effect less noticeable.