[p5.js 2.0 Beta Bug Report]: Drawing images with alpha on FLOAT framebuffers produces NaN colors

[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
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.0 beta 1

Web browser and version

Firefox

Operating system

MacOS

Steps to reproduce this

When drawing an image that has alpha, NaN colors are introduced on FLOAT framebuffers. In this sketch:

let prev, next

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL)
  prev = createFramebuffer({ antialias: true, format: FLOAT })
  next = createFramebuffer({ antialias: true, format: FLOAT })
}

function draw() {
  [next, prev] = [prev, next];
  background('#E74AA5')
  imageMode(CENTER)
  
  next.draw(() => {
  	clear()
  	
  	push()
  	scale(0.999)
  	image(prev, 0, 0)
  	pop()
  	
  	stroke(0)
  	strokeWeight(2)
  	fill(255)
  	const d = min(width, height) * 0.1
  	circle(mouseX - width/2, mouseY - height/2, d)
  })
  
  image(next, 0, 0)
}

In 2.0, the NaNs cause some colors to turn black:

In 1.11.2, it correctly looks like this: