I'm trying to draw a field of stars (among other things) using p5.js.
I get this error when I create my canvas using WEBGL, but the error goes away when I don't use it. However, I need the canvas to use WEBGL for other aspects of the project. Clearly I'm missing something here.
var CANVAS_SIZE = 600;
var starfield;
function setup() {
createCanvas(CANVAS_SIZE, CANVAS_SIZE, WEBGL);
noStroke();
buildStarfield();
// noprotect
}
function buildStarfield() {
starfield = createImage(CANVAS_SIZE,CANVAS_SIZE);
starfield.loadPixels();
var starThreshold = 205; //threshold to weed out "less bright" stars
for (var i = 0; i < CANVAS_SIZE; i++) {
for (var j = 0; j < CANVAS_SIZE; j++) {
// generate a noise map on which to base the starfield
var c = 255 * noise(0.1 * i, 0.1 * j, random(0,1));
// if c > starThreshold the draw a star else draw empty space
if (c>starThreshold) {
starfield.set(i, j, color(255,255,255,1));
} else {
starfield.set(i, j, color(0,0,0,10));
}
}
}
starfield.updatePixels();
}
function draw() {
background(starfield);
}
Here's where I'm testing, if it matters:
Any idea as to why would this createCanvas(CANVAS_SIZE, CANVAS_SIZE); work, but not createCanvas(CANVAS_SIZE, CANVAS_SIZE, WEBGL); this?
How can I make it work using WEBGL?
It might be a temporary bug with background() and WEBGL.
While that gets fixed you can use:
image(starfield,-starfield.width / 2, -starfield.height / 2);
instead of background(starfield) to get the same visual outcome using WEBGL (it will work as image(startfield, 0, 0); if you're not using WEBGL)