# Creating arrays of colors

**URL:** <https://discourse.processing.org/t/creating-arrays-of-colors/4180>\
**Category:** Coding Questions\
**Created:** [October 6, 2018, 5:31am UTC](https://discourse.processing.org/t/creating-arrays-of-colors/4180 "2018-10-06T05:31:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ducco](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ducco/32/1749_2.png) [@ducco](https://discourse.processing.org/u/ducco)\
**Post date:** [October 6, 2018, 5:31am UTC](https://discourse.processing.org/t/creating-arrays-of-colors/4180/1 "2018-10-06T05:31:37Z")

</div>

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

```auto
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

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 6, 2018, 5:38am UTC](https://discourse.processing.org/t/creating-arrays-of-colors/4180/2 "2018-10-06T05:38:54Z")

</div>

> [@ducco](#):
>
> colorMode(RGB,255);

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

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 6, 2018, 5:40am UTC](https://discourse.processing.org/t/creating-arrays-of-colors/4180/3 "2018-10-06T05:40:37Z")

</div>

> [@ducco](#):
>
> function init() {

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 6, 2018, 8:07am UTC](https://discourse.processing.org/t/creating-arrays-of-colors/4180/4 "2018-10-06T08:07:17Z")

</div>

Palette array example from: [Forum.Processing.org/two/discussion/17621/array-of-colors#Item\_1](http://Forum.Processing.org/two/discussion/17621/array-of-colors#Item_1)

Online sketch: [OpenProcessing.org/sketch/602737](http://OpenProcessing.org/sketch/602737)

```auto
/**
 * 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)
  }
}

```

---

<div class="post-metadata">

**Author:** ![ducco](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ducco/32/1749_2.png) [@ducco](https://discourse.processing.org/u/ducco)\
**Post date:** [October 6, 2018, 8:46am UTC](https://discourse.processing.org/t/creating-arrays-of-colors/4180/5 "2018-10-06T08:46:23Z")

</div>

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