Array of Colors

mads2

Trying to set up a colored grid where each square alternates between 1 of 5 colors every second or two. Can't seem to figure out how to call on the "fill" for all of the modules within my code. The variable c1 is where my colors are. I feel like I'm close..? Also these squares will be changing size later based on frequencies from the song input, which is why I've set it up this way so far.

var song;


var c1r1 = {
  x:100,
  y:100
  }

var c2r1 = {
  x:260,
  y:100
  }

var c3r1 = {
  x:420,
  y:100
  }

var c4r1 = {
  x:570,
  y:100
}

var c5r1 = {
  x:720,
  y:100
}

var c1r2 = {
  x:100,
  y:260
  }

var c2r2 = {
  x:260,
  y:260
  }

var c3r2 = {
  x:420,
  y:260
  }

var c4r2 = {
  x:570,
  y:260
  }

var c5r2 = {
  x:720,
  y:260
}

var c1r3 = {
  x:100,
  y:420
}

var c2r3 = {
  x:260,
  y:420
}

var c3r3 = {
  x:420,
  y:420
}

var c4r3 = {
  x:570,
  y:420
}

var c5r3 = {
  x:720,
  y:420
}

var c1r4 = {
  x:100,
  y:580
}

var c2r4 = {
  x:260,
  y:580
}

var c3r4 = {
  x:420,
  y:580
}

var c4r4 = {
  x:570,
  y:580
}

var c5r4 = {
  x:720,
  y:580
}

var c1 = [
  fill(243, 158, 34),
  fill(57, 178, 136), 
  fill(239, 73, 36),
  fill(234, 130, 36),
  fill(66, 104, 177)
  ];


function preload() {
  song = loadSound('assets/findingnemoegg.mp3');
}


function setup () {
  createCanvas (windowWidth, windowHeight);
  song.loop();
  background (18,21,34);

    for (var i = 0; i < 4; i++) {
      c1[i] = [];
    }


}



function draw () {

  noStroke();
  for (var i = 0; i < 4; i++) {
    fill(c1[i]);
  }

  rect(c1r1.x, c1r1.y, 50, 50, 12);
  rect(c2r1.x, c2r1.y, 50, 50, 12);
  rect(c3r1.x, c3r1.y, 50, 50, 12);
  rect(c1r2.x, c1r2.y, 50, 50, 12);
  rect(c2r2.x, c2r2.y, 50, 50, 12);
  rect(c3r2.x, c3r2.y, 50, 50, 12);
  rect(c4r1.x, c4r1.y, 50, 50, 12);
  rect(c5r1.x, c5r1.y, 50, 50, 12);
  rect(c4r2.x, c4r2.y, 50, 50, 12);
  rect(c5r2.x, c5r2.y, 50, 50, 12);
  rect(c1r3.x, c1r3.y, 50, 50, 12);
  rect(c2r3.x, c2r3.y, 50, 50, 12);
  rect(c3r3.x, c3r3.y, 50, 50, 12);
  rect(c4r3.x, c4r3.y, 50, 50, 12);
  rect(c5r3.x, c5r3.y, 50, 50, 12);
  rect(c1r4.x, c1r4.y, 50, 50, 12);
  rect(c2r4.x, c2r4.y, 50, 50, 12);
  rect(c3r4.x, c3r4.y, 50, 50, 12);
  rect(c4r4.x, c4r4.y, 50, 50, 12);
  rect(c5r4.x, c5r4.y, 50, 50, 12);



}

GoToLoop

You're gonna need to learn some OOP in order to synthesize your code better.
Some random example: http://p5js.org/examples/examples/Objects_Array_of_Objects.php

You see, you're trying to define some grid of Square which got 3 properties: coord. pair: x, y and "ink".
That can be represented inside a class as: this.x, this.y and this.c for example.

You can learn about classes at the link below:
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

For now gonna leave you w/ a quick example I just did. You can also watch it online below:
https://OpenProcessing.org/sketch/602737
http://p5ide.HerokuApp.com/editor#?sketch=5872d8a0c44f4b04001cdf42

And here's the whole posted code: :-bd

index.html:

<script async src=http://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

sketch.js:

/**
 * Palette Squares (v1.1.3)
 * 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 = 125, OFFSET = 65, INKS = COLS,
      squares = Array(GRID).fill(), palette = Array(INKS).fill()

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, constructor: { DIAM, CORNER } } = this
    fill(c).square(x, y, DIAM, CORNER)
  }
}

GoToLoop

The variable c1 is where my colors are.

var c1 = [
  fill(243, 158, 34),
  fill(57, 178, 136), 
  fill(239, 73, 36),
  fill(234, 130, 36),
  fill(66, 104, 177)
];

Function fill() returns sketch's p5 object instance, not a p5.Color as you were expecting! L-)
http://p5js.org/reference/#/p5/fill
http://p5js.org/reference/#/p5.Color

In order to get a p5.Color object you're gonna need to call color() instead: ;)
http://p5js.org/reference/#/p5/color

An even more important warning: We don't have access to p5js' API until preload() or setup()! :-SS
Therefore neither fill() nor color() functions would work anyways at the place you've invoked them! #-o

mads2

This was helpful, but each of these squares is going to be dynamically changing independently, so not sure if this set up will work in the long run.

mads2

Also, my audio won't run in the sketch now.

GoToLoop

That was supposed to be an example, not some kinda final solution.
If you need to change the diameter of each Square, just add that atribute to that class:

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

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

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

  display() {
    fill(this.c)
    rect(this.x, this.y, this.d, this.d, Square.CORNER)
  }
}

GoToLoop

Also, my audio won't run in the sketch now.

I've removed anything unnecessary in order to make the example straight to the point.
However, I can't see why you wouldn't be able to add sound or anything else to it. :-\"

mads2

Ok, I'll look into it! Thanks for the starting point.