Problem with pulling values from array of colours, strings

p5.js Beginners
1

Hello,

I’ve extracted my problem from a larger sketch, but the main problem is here.

When I run this, the colours and letters appear alright, but I get this error:
Uncaught Error: [object Arguments]is not a valid colour representation. (sketch: line 17)

If I remove the fill() command, then I get this error:
text() was expecting String|Object|Array|Number|Boolean for parameter #0 (zero-based index), received an empty variable instead. If not intentional, this is often a problem with scope:

I’m relatively new to coding, but can’t figure out why I can’t just pull these values from the arrays. I’m sure it’s something simple but I don’t know what I’m missing.

In the bigger sketch where I am using this, everything past this point in the draw function won’t work, so I’ve got to try and figure it out. Any help would be appreciated!

var colours = ['#CE2144', '#EC952F', '#FFFF00', '#90d40c', '#009287', '#554A8A', '#BC3984', '#CE2144'];
var letters = ["C", 'D', 'E', 'F', 'G', 'A', 'B', "C'"]
var start = 20

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

function draw() {
  background(220);
  textSize(50)
  
  for (i = 0; i <= letters.length; i++) {
    fill(colours[i])
    text(letters[i], start, height/2);
    start = start+40;
  }
  
}

https://editor.p5js.org/LeoBrooks/sketches/eE2JrW3e

2 Likes
2

Your definition creates an array of strings. Usually anything in quotation marks is a string. And fill would like to have a number. Those color values are hexadecimals and in javascript they are preceded by 0x so the first value in your array would be 0xCE2144

1 Like
3

I tried replacing the array with numbers as 0xCE2144, 0xEC952F, etc but it didn’t work at all that way.

The error said:
p5.js says: color() was expecting at least 1 arguments, but received only 0.

Anything I’m missing?

Leo

1 Like
4

I don’t get it. That web environment shows things right, but complains. Processing application with p5 mode just does things without errors.

https://processing.org/reference/fill_.html says that RGB values with six digits must precede with # and RGBA values with eight digits must precede with 0x. So I gave you wrong guidance after all

2 Likes
5

I feel so humbled. I was looking at the wrong place. Clearly I’m not used to error messages from javascript

for (i = 0; i <= letters.length; i++) {

loop causes overflow in indexing array and the error. It should be

for (i = 0; i < letters.length; i++) {

then for loop works. Try reducing what you add to start inside the loop and you’ll see some movement too

3 Likes
6

gotta repeat start = 20 imho




var colours = ['#CE2144', '#EC952F', '#FFFF00', '#90d40c', '#009287', '#554A8A', '#BC3984', '#CE2144'];
// var colours = [0xCE2144, 0xEC952F, 0xFFFF00, 0x90d40c, 0x009287, 0x554A8A, 0xBC3984, 0xCE2144];

var letters = ["C", 'D', 'E', 'F', 'G', 'A', 'B', "C"]

var start = 20

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

function draw() {
  background(220);
  textSize(50)
  
  start = 20
  for (i = 0; i < letters.length; i++) {
    fill(color(colours[i]));
    text(letters[i], start, height/2);
    start = start+40;
  }
  
}
3 Likes
7

Thanks so much to SomeOne and Chrisir for your help to fix this. But I don’t understand why “<=” caused the loop to overflow? Wouldn’t “<” stop the loop after 7 times instead of 8? Clearly this fixed the problem, but I feel like a moron for not understanding why.

Is it because the for loop starts at 0 so and Letters.length is 8 that it would actually run 9 times?

2 Likes
8

That’s it! As another experiment, hit F12 to open browser’s console and paste this JS code below there:

var ELEMENTS = 10, arr = Uint8Array.from({ length: ELEMENTS }, (v, k) => k);
console.table(arr);

for (var i = 0; i < ELEMENTS; console.info(i, arr[i++]));
console.log('\n');

for (var i = 0; i <= ELEMENTS; console.log(i, arr[i++]));

Notice the 2nd loop using <= logs the index 10 as undefined.

3 Likes
9

Very cool - Thanks!

Just goes to show that I still have so much to learn about coding.

1 Like
10

We all do. I started programming 39 years ago and there’s always something new to learn. Some things get easier though.

2 Likes