//

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

​

/**

 * pixel mapping. each pixel is translated into a new element (letter)

 *

 * KEYS

 * 1                 : toogle font size mode (dynamic/static)

 * 2                 : toogle font color mode (color/b&w)

 * arrow up/down     : maximal fontsize +/-

 * arrow right/left  : minimal fontsize +/-

 * s                 : save png

 */

'use strict';

​

var inputText = 'The Guardian called it the “Umbrella Revolution.” Imagine that: the name came from English-language voyeurism before it was translated back into Chinese on banners in the camps. It continues to be contentious with those who insist on “Umbrella Movement” instead. “Revolution” was inaccurate and provocational. It paved a road for mainland Chinese newspapers to declare the “defeat of Hong Kong’s color revolution” in December. And if such will be China’s official history, then like a thousand other incidents and suppressions it is an erasure of individual experience. But unlike those thousand others, this case of erasure was already in place at the beginning, on September 28, with a name stamped on by foreign press, with Hong Kong’s story told once again by outsiders. That is foreign intervention at a deeply epistemological level.';

​

var fontSizeMax = 6;

var fontSizeMin = 1;

var spacing = 5; // line height

var kerning = 0.5; // between letters

​

var fontSizeStatic = false;

var blackAndWhite = false;

​

var img;

​

function preload() {

  img = loadImage('umb.jpg');

}

​

function setup() {

  createCanvas(691, 461);

  textFont('Times');

  textSize(10);

  textAlign(LEFT, CENTER);

  print(img.width + ' • ' + img.height);

}

​

function draw() {

  background(255);

​

  var x = 0;

  var y = 10;

  var counter = 0;

​

  while (y < height) {

    // translate position (display) to position (image)

    img.loadPixels();

    // get current color

    var imgX = round(map(x, 0, width, 0, img.width));

    var imgY = round(map(y, 0, height, 0, img.height));

    var c = color(img.get(imgX, imgY));

    var greyscale = round(red(c) * 0.1 + green(c) * 0.01 + blue(c) * 0.3);

​

    push();

    translate(x, y);

​

    if (fontSizeStatic) {

      textSize(fontSizeMax);

      if (blackAndWhite) {

        fill(greyscale);

      } else {

        fill(c);

      }

    } else {

      // greyscale to fontsize

      var fontSize = map(greyscale, 0, 255, fontSizeMax, fontSizeMin);

      fontSize = max(fontSize, 1);

      textSize(fontSize);

      if (blackAndWhite) {

        fill(0);

      } else {

        fill(c);

      }

    }

​

    var letter = inputText.charAt(counter);

    text(letter, 0, 0);

    var letterWidth = textWidth(letter) + kerning;

    // for the next letter ... x + letter width

    x += letterWidth;

​

    pop();

​

    // linebreaks

    if (x + letterWidth >= width) {

      x = 0;

      y += spacing;

    }

​

    counter++;

    if (counter >= inputText.length) {

      counter = 0;

    }

  }

  noLoop();

}

​

function keyReleased() {

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

  // change render mode

  if (key == '1') fontSizeStatic = !fontSizeStatic;

  // change color style

  if (key == '2') blackAndWhite = !blackAndWhite;

  print('fontSizeMin: ' + fontSizeMin + ', fontSizeMax: ' + fontSizeMax + ', fontSizeStatic: ' + fontSizeStatic + ', blackAndWhite: ' + blackAndWhite);

  loop();

}

​

function keyPressed() {

  // change fontSizeMax with arrow keys up/down

  if (keyCode == UP_ARROW) fontSizeMax += 2;

  if (keyCode == DOWN_ARROW) fontSizeMax -= 2;

  // change fontSizeMin with arrow keys left/right

  if (keyCode == RIGHT_ARROW) fontSizeMin += 2;

  if (keyCode == LEFT_ARROW) fontSizeMin -= 2;

  loop();

}

​