saveGif() sometimes leaves trails of antialiasing artifacts

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.5.0

Web browser and version

Firefox 107.0

Operating System

macOS 12.5.1

Steps to reproduce this

It seems like occasionally, when colors are similar, the gif encoder doesn't always write over pixels of the previous frame, leaving trails. This seems most noticeable when drawing similar colors on top of each other (e.g. in the example below, I don't see any artifacts if I make the moving circles black.)

function setup() {
  createCanvas(400, 400);
}

function draw() {
  const gradient = drawingContext.createLinearGradient(0, 0, 0, height)
  gradient.addColorStop(0, '#42f5e6')
  gradient.addColorStop(1, '#d62bb4')
  noStroke()
  push()
  drawingContext.fillStyle = gradient
  rect(0, 0, width, height)
  pop()
  
  for (let i = 0; i < 20; i++) {
    push()
    fill('#a836a8')
    circle(
      (noise(i * 100, 0) * 2 * width + (frameCount / 60) * width) % width,
      noise(i * 100, 1000) * height,
      20
    )
    pop()
  }
}

function mousePressed() {
  saveGif('test', 2)
}

Live: https://editor.p5js.org/davepagurek/sketches/aQPkuFJEM

Exported gif:

[davepagurek]

It looks like this is something with the applyPalette function in the gif encoding library we use. I made an issue for that upstream (mattdesl/gifenc#13) and wrote a workaround in p5 that doesn't rely on that function. I'll add it to a PR!