set with undefined color freezes the browser when run in loop

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

0.9.0

Web browser and version

Google Chrome

Operating System

Fedora GNU/Linux

Steps to reproduce this

Steps:

1. Create code that in loop run set(x, y, undefined)

Snippet:

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

function g(x, y) {
    return;
    return cos(x / y ** 2);
    return sin((x * y) ** 2); // * PI ; * PI * 2 ; * PI * 4
}

function draw() {
    const scale_factor = 50;
    plot(g, scale_factor);
}

function plot(fn, scale_factor) {
    function map_color(x) {
        let green = map(x, -1, 1, 0, 256);
        return color(0, green, 0);
    }
    function map_color(x) {
        let c1 = color(124, 8, 8);
        let c2 = color(255, 255, 0);
        return lerpColor(c1, c2, map(x, -1, 1, 0, 1));
    }
    for (let x = -200; x <= 200; ++x) {
        for (let y = -200; y <= 200; ++y) {
            let z = fn(x / scale_factor, y / scale_factor);
            set(x + 200, y + 200, map_color(z));
        }
    }
    updatePixels();
}

I found this while working on my playground. It reruns the code in each keypress with a bit of debouncing. The browser freezes when I started to write another expression in function g, and the code re-runs when I have just return;. The library should throw a runtime error when the color is undefined. But instead, it tries to do some expensive computation that freezes the browser's main thread.

The editor on p5js site works fine because it has some kind of extra protection and it detects that the last argument is undefined. But if you run the code in your own script it freezes.

To fix this I needed to add:

if (z) {
   set(x + 200, y + 200, map_color(z));
}

I will add infinite loop protection soon, but this is something that the library can handle as well. Just don't execute the rest of the code if the color is falsy.

Start at the p5.js set() path exercised by the supplied sketch, then trace how an undefined color is handled before updatePixels(). Re-run the nested-loop example in Chrome and verify that an undefined color produces a runtime error without freezing the browser.