Processing squares-grid

2015-08-05 Processing patterns with grid

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.13/processing.min.js"></script>
<canvas></canvas>

CSS

</style> <script type="text/javascript"> window.addEventListener('load', function() {
    var scripts=document.body.getElementsByTagName('script');
    var canvases=document.body.getElementsByTagName('canvas');
    new Processing(canvases[0], scripts[0].text);
}
, false);
 // Here prevent javascript in body from throwing error </script> <style>

JavaScript

/* 
 title: Autogrid size - futurelearn w2_01
 pastel palette - random color
 date: 2015-08-05
 */
color[] pastel = {
  #0d60ae, #238acc, #fad31c, #fdb717, #faaa21, #f1753f, #ed5724, #f04639, #ea2830, #bc2326, #8c0c03, #e5185d, #f384ae, #fac6d2, #b296c7, #7b67ae, #5f3577, #c3def1, #55beed, #31a8e0, #ffe617, #143b86, #001b4a, #7dcdc2, #00a8a8, #12959f, #c1d18a, #799155, #80bc42, #4aa03f, #16884a, #003f2e, #381e11, #c05c20, #bf9b6b, #e9d4a7, #e7e6e1, #cfd0d2, #8a8b8f, #778590, #474d4d, #98a2ab, #9f8759, #8c6641, #f7f7f7, #e39b7d, #bcbfa3, #89b399, #6e6460
};

void setup() {
  size(800, 600);
  smooth();
  noLoop(); // execute draw() once
//  rectMode(CORNER); //
  noStroke();
}

void draw() {
  fill(240, 10);
  rect(0, 0, width, height);
  int margin = 10; // margin between the edges of screen and items-grid
  int num = 5;
  int gap = 5; // gap between items
  // calculate the cellsize for given num of squares and gap between them
  float cellSize = (width - (margin) - gap * (num - 1)) / num;
  float cellH = (height - (margin *2) - gap * (num - 1)) /num;
  float cellW = (width - (margin *2) - gap * (num - 1)) /num;
  for (int i = 0; i < num; i++) { //col
    for (int j = 0; j < num; j++) { //row
      int bg = (int)random(4, pastel.length);
      fill(pastel[bg]);
      // draw rectangle
     // rect(gap * (i+1) + cellSize * i, gap * (j+1) + cellSize * j, cellSize, cellSize);
      rect(gap * (i+1) + cellW * i, gap * (j+1) + cellH * j, cellW, cellH);
    }
  }
}
void keyPressed() {
  if (key == 's') {
    saveFrame("grid_25-###.png");
    println("Your image saved");
  }
}