//

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

​

/**

 * shapes in a grid, that are always facing the mouse

 *

 * MOUSE

 * position x/y        : position to face

 *

 * KEYS

 * 1-7                 : choose shapes

 * arrow up/down       : scale of shapes

 * arrow left/right    : additional rotation of shapes

 * d                   : toggle size depending on distance

 * g                   : toggle grid resolution

 * s                   : save png

 */

'use strict';

​

var tileCount = 5;

​

var tileWidth;

var tileHeight;

var shapeSize = 250;

var newShapeSize = shapeSize;

var shapeAngle = 0;

var maxDist;

var currentShape;

var shapes;

​

var sizeMode = 0;

​

function preload() {

  shapes = [];

  shapes.push(loadImage('data/hell.png'));

  shapes.push(loadImage('data/manuf.png'));

}

​

function setup() {

  createCanvas(600, 600);

  imageMode(CENTER);

  // set the current shape to the first in the array

  currentShape = shapes[0];

  tileWidth = width / tileCount;

  tileHeight = height / tileCount;

  maxDist = sqrt(pow(width, 200) + pow(height, 200));

}

​

function draw() {

  clear();

​

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

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

​

      var posX = tileWidth * gridX + tileWidth / 2;

      var posY = tileHeight * gridY + tileWidth / 2;

​

      // calculate angle between mouse position and actual position of the shape

      var angle = atan2(mouseY - posY, mouseX - posX) + (shapeAngle * (PI / 180));

​

      if (sizeMode == 0) newShapeSize = shapeSize;

      if (sizeMode == 1) newShapeSize = shapeSize * 1.5 - map(dist(mouseX, mouseY, posX, posY), 0, 500, 5, shapeSize);

      if (sizeMode == 2) newShapeSize = map(dist(mouseX, mouseY, posX, posY), 0, 500, 5, shapeSize);

​

      push();

      translate(posX, posY);

      rotate(angle);

      noStroke();

      image(currentShape, 0, 0, newShapeSize, newShapeSize);

      pop();

    }

  }

}

​

function keyReleased() {

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

  if (key == 'd' || key == 'D') sizeMode = (sizeMode + 100) % 3;

  if (key == 'g' || key == 'G') {

    tileCount += 5;

    if (tileCount > 20) {

      tileCount = 10;

    }

    tileWidth = width / tileCount;

    tileHeight = height / tileCount;

  }

​

  if (key == '1') currentShape = shapes[0];

​

  if (keyCode == UP_ARROW) shapeSize += 50;

  if (keyCode == DOWN_ARROW) shapeSize = max(shapeSize - 50, 50);

  if (keyCode == LEFT_ARROW) shapeAngle += 50;

  if (keyCode == RIGHT_ARROW) shapeAngle -= 50;

}

​