Array of Colors

edited April 2017 in p5.js Library Questions

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);



}

Answers

  • edited December 2020

    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)
      }
    }
    
  • edited July 2016

    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

  • 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.

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

  • 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)
      }
    }
    
  • Answer ✓

    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. :-\"

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

Sign In or Register to comment.