//

// Generative Gestaltung – Creative Coding im Web

// ISBN: 978-3-87439-902-9, First Edition, Hermann Schmidt, Mainz, 2018

// Benedikt Groß, Hartmut Bohnacker, Julia Laub, Claudius Lazzeroni

// with contributions by Joey Lee and Niels Poldervaart

// Copyright 2018

//

// http://www.generative-gestaltung.de

//

// Licensed under the Apache License, Version 2.0 (the "License");

// you may not use this file except in compliance with the License.

// You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software

// distributed under the License is distributed on an "AS IS" BASIS,

// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

// See the License for the specific language governing permissions and

// limitations under the License.

​

/**

 * generates a specific color palette and some random "rect-tilings"

 *

 * MOUSE

 * left click          : new composition

 *

 * KEYS

 * s                   : save png

 * c                   : save color palette

 */

'use strict';

​

var colorCount = 20;

var hueValues = [];

var saturationValues = [];

var brightnessValues = [];

var actRandomSeed = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB, 360, 100, 100, 100);

  noStroke();

}

​

function draw() {

  noLoop();

  randomSeed(actRandomSeed);

​

  // ------ colors ------

  // create palette

  for (var i = 0; i < colorCount; i++) {

    if (i % 2 == 0) {

      hueValues[i] = random(130, 220);

      saturationValues[i] = 100;

      brightnessValues[i] = random(15, 100);

    } else {

      hueValues[i] = 195;

      saturationValues[i] = random(20, 100);

      brightnessValues[i] = 100;

    }

  }

​

  // ------ area tiling ------

  // count tiles

  var counter = 0;

  // row count and row height

  var rowCount = int(random(5, 30));

  var rowHeight = height / rowCount;

​

  // seperate each line in parts

  for (var i = rowCount; i >= 0; i--) {

    // how many fragments

    var partCount = i + 1;

    var parts = [];

​

    for (var ii = 0; ii < partCount; ii++) {

      // sub fragments or not?

      if (random() < 0.075) {

        // take care of big values

        var fragments = int(random(2, 20));

        partCount = partCount + fragments;

        for (var iii = 0; iii < fragments; iii++) {

          parts.push(random(2));

        }

      } else {

        parts.push(random(2, 20));

      }

    }

​

    // add all subparts

    var sumPartsTotal = 0;

    for (var ii = 0; ii < partCount; ii++) {

      sumPartsTotal += parts[ii];

    }

​

    // draw rects

    var sumPartsNow = 0;

    for (var ii = 0; ii < parts.length; ii++) {

      sumPartsNow += parts[ii];

​

      var x = map(sumPartsNow, 0, sumPartsTotal, 0, width);

      var y = rowHeight * i;

      var w = -map(parts[ii], 0, sumPartsTotal, 0, width);

      var h = rowHeight;

​

      var index = counter % colorCount;

      var col = color(hueValues[index], saturationValues[index], brightnessValues[index]);

      fill(col);

      rect(x, y, w, h);

​

      counter++;

    }

  }

}

​

function mouseReleased() {

  actRandomSeed = random(100000);

  loop();

}

​

function keyPressed() {

  if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');

  if (key == 'c' || key == 'C') {

    // -- save an ase file (adobe swatch export) --

    var colors = [];

    for (var i = 0; i < hueValues.length; i++) {

      colors.push(color(hueValues[i], saturationValues[i], brightnessValues[i]));

    }

    writeFile([gd.ase.encode(colors)], gd.timestamp(), 'ase');

  }

}

​