Creating arrays of colors

p5.js Coding Questions
1

hi im trying to make an array in p5js of colors and defining them individually in setup and i always get the error “undefined is an invalid colorMode.” and i cant figure out why or find any specific documentation on defining arrays one by one

var columns;
var rows;
var board;
var player;
var kolorp;
let kolorc;
var w;


function setup() {
  colorMode(RGB,255);
  columns = 10;
  rows    = 20;
  w = 30;

  createCanvas(columns*w,rows*w);
  kolorc = new Array(7);
  kolorc[0] = new color(100,100,255);
  kolorc[1] = new color(0  ,0  ,255);
  kolorc[2] = new color(255,100,20 );
  kolorc[3] = new color(100,100,20 );
  kolorc[4] = new color(0  ,255,0  );
  kolorc[5] = new color(255,0  ,255);
  kolorc[6] = new color(255,0  ,0  );


  board  = new Array(columns);
  for (var i = 0; i < columns; i++) {
    board[i] = new Array(rows);
  } 
  player = new Array(columns);
  for (var i = 0; i < columns; i++) {
    player[i] = new Array(rows);
  }
  kolorp = new Array(columns);
  for (var i = 0; i < columns; i++) {
    kolorp[i] = new Array(rows);
  }
  init();
}

function draw() {
    for ( var i = 0; i < columns;i++) {
    	for ( var j = 0; j < rows;j++) {
    		if ((board[i][j] == 1)) {
      			fill(0);
     		 	strokeWeight(0);
     			rect(i*w, j*w, w, w);
      		}
    	}
	}
    for ( var i = 0; i < columns;i++) {
    	for ( var j = 0; j < rows;j++) {
    		  if ((player[i][j] == 1)) {
      			fill(kolorc[kolorp[i][j]]);
     		 	strokeWeight(0);
     			rect(i*w, j*w, w, w);
      		}
    	}
  	}
}

function move() {
	for (var i = 0; i < columns; i++) {
    	for (var j = 0; j < rows; j++) {
			board[i][j]  = floor(random(2));
      		player[i][j] = floor(random(2));
    	}
  	}
}


function init() {
  for (var i = 0; i < columns; i++) {
    for (var j = 0; j < rows; j++) {
		board[i][j]  = floor(random(2));
      	player[i][j] = floor(random(2));
    }
  }
}

im pretty new to p5js btw

1 Like
2

Since this is the default color mode anyway (or close enough), can you try removing this line and see what you get?

3

Also, I would suggest renaming this function. Call it “my_init()” or literally anything but “init”.

4

Palette array example from: Forum.Processing.org/two/discussion/17621/array-of-colors#Item_1

Online sketch: OpenProcessing.org/sketch/602737

/**
 * Palette Squares (v1.1)
 * GoToLoop (2016-Jul-22)
 *
 * Discourse.Processing.org/t/creating-arrays-of-colors/4180/4
 * Forum.Processing.org/two/discussion/17621/array-of-colors#Item_1
 *
 * OpenProcessing.org/sketch/602737
*/

"use strict"

const ROWS = 4, COLS = 5, GRID = ROWS * COLS,
      DIST = 140, OFFSET = 60, INKS = COLS,
      squares = Array(GRID), palette = Array(INKS)

let bg

function setup() {
  createCanvas(COLS*DIST + OFFSET, ROWS*DIST + OFFSET)
  rectMode(CORNER).noStroke().noLoop()

  bg = color(18, 21, 34)

  createPalette()
  createSquares()
}

function draw() {
  background(bg)
  for (const sq of squares)  sq.display()
}

function createPalette() {
  palette[0] = color(243, 158, 34)
  palette[1] = color(57, 178, 136)
  palette[2] = color(239, 73, 36)
  palette[3] = color(234, 130, 36)
  palette[4] = color(66, 104, 177)
}

function createSquares() {
  for (let r = 0; r < ROWS; ++r)  for (let c = 0; c < COLS; ++c) {
    const x = c*DIST + OFFSET, y = r*DIST + OFFSET,
          idx = c + r*COLS, ink = palette[idx % INKS]

    squares[idx] = new Square(x, y, ink)
  }
}

class Square {
  static get DIAM()   { return 50 }
  static get CORNER() { return 12 }

  constructor(x, y, c) {
    this.x = x, this.y = y, this.c = c
  }

  display() {
    const { x, y, c } = this, { DIAM, CORNER } = Square
    fill(c).rect(x, y, DIAM, DIAM, CORNER)
  }
}
2 Likes
5

literally the same, i added that to see if it changed anything @TfGuy44