Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

202
Views
p5.js — "Error: [object Arguments]is not a valid color representation" only when working with WEBGL

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:

https://editor.p5js.org/

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?

about 4 years ago · Santiago Gelvez
1 answers
Answer question

0

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)

about 4 years ago · Santiago Gelvez Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!