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

​

/**

 * extract and sort the color palette of an image

 *

 * MOUSE

 * position x          : resolution

 *

 * KEYS

 * 1-4                 : load different images

 * 5                   : no color sorting

 * 6                   : sort colors on hue

 * 7                   : sort colors on saturation

 * 8                   : sort colors on brightness

 * 9                   : sort colors on greyscale (luminance)

 * s                   : save png

 * c                   : save color palette

 */

'use strict';

​

var img;

var colors = [];

var sortMode = null;

​

function preload() {

  loadImage('data/beach.jpg', setImage);

}

​

function setup() {

  createCanvas(600, 450);

  noCursor();

  noStroke();

}

​

function draw() {

  var tileCount = floor(width / max(mouseX, 5));

  var rectSize = width / tileCount;

​

  img.loadPixels();

  colors = [];

​

  for (var gridY = 0; gridY < tileCount; gridY++) {

    for (var gridX = 0; gridX < tileCount; gridX++) {

      var px = int(gridX * rectSize);

      var py = int(gridY * rectSize);

      var i = (py * img.width + px) * 4;

      var c = color(img.pixels[i], img.pixels[i + 1], img.pixels[i + 2], img.pixels[i + 3]);

      colors.push(c);

    }

  }

​

  GRID;

​

  var i = 0;

  for (var gridY = 0; gridY < tileCount; gridY++) {

    for (var gridX = 0; gridX < tileCount; gridX++) {

      fill(colors[i]);

      rect(gridX * rectSize, gridY * rectSize, rectSize, rectSize);

      i++;

    }

  }

}

​

function keyReleased() {

  if (key == 'c' || key == 'C') writeFile([GRID.ase.encode(colors)], GRID.timestamp(), 'ase');

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

​

  if (key == '1') loadImage('data/beach.jpg', setImage);

  if (key == '2') loadImage('data/beautiful butterfly.jpg', setImage);

  if (key == '3') loadImage('data/family photo.jpg', setImage);

  if (key == '4') loadImage('data/gnome.jpg', setImage);

​

  if (key == '5') sortMode = null;

  if (key == '6') sortMode = GRID.HUE;

  if (key == '7') sortMode = GRID.SATURATION;

  if (key == '8') sortMode = GRID.BRIGHTNESS;

  if (key == '9') sortMode = GRID.GRAYSCALE;

}

​

function setImage(loadedImageFile) {

  img = loadedImageFile;

}

​