//

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

​

/**

 * cutting and multiplying an area of the image

 *

 * MOUSE

 * position x/y         : area position

 * left click           : multiply the area

 *

 * KEYS

 * 1-3                  : area size

 * r                    : toggle random area

 * s                    : save png

 */

"use strict";

​

var img;

var tileCountX = 4; //number of columns

var tileCountY = 4; //number of rows

var tileCount = tileCountX * tileCountY;

var imgTiles = []; //create an array for image tiles

var tileWidth;

var tileHeight;

var cropX;

var cropY;

​

var selectMode = true;

var randomMode = false;

​

var startScreen = true;

​

function preload() {

  img = loadImage("data/image.jpg");

}

​

function setup() {

  createCanvas(800, 600);

​

  //image(img);

  tileWidth = width / tileCountY; //console.log(tileWidth); //200

  tileHeight = height / tileCountX; //console.log(tileHeight); //150

}

​

function draw() {

  if (selectMode) {

    // in selection mode, a white selection rectangle is drawn over the image

    cropX = constrain(mouseX, 0, width - tileWidth); //constrain mouseX between 0-600

    cropY = constrain(mouseY, 0, height - tileHeight); //constrain mouseY between 0-450

    image(img, 0, 0);

    noCursor();  //Hides the cursor from view

    //69-72 is related to the selection rectangle

    noFill();

    stroke(255);

    strokeWeight(2);

    rect(cropX, cropY, tileWidth, tileHeight);

  } else {

    // reassemble image

    var imgIndex = 0;

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

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

        image(imgTiles[imgIndex], gridX * tileWidth, gridY * tileHeight);

        imgIndex++;

      }

    }

  }

  intro();

}

​

function cropTiles() {

  tileWidth = width / tileCountY;

  tileHeight = height / tileCountX;

  imgTiles = [];

​

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

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

      if (randomMode) {

        cropX = int(random(mouseX - tileWidth / 2, mouseX + tileWidth / 2));

        cropY = int(random(mouseY - tileHeight / 2, mouseY + tileHeight / 2));

      }

      cropX = constrain(cropX, 0, width - tileWidth);

      cropY = constrain(cropY, 0, height - tileHeight);

      imgTiles.push(img.get(cropX, cropY, tileWidth, tileHeight));

    }

  }

}

​

function intro() {

  if (startScreen) {

    //107- 109 related to layer blur 

    fill(150, 150);

    noStroke();

    rect(0, 0, width, height); 

    fill(0);

    rect(width / 4, height / 4, width / 2, height / 2);

    //noFill();

    fill(255);

    textSize(24);

    text("press:", width / 4 + 170, height / 4 + 80);

     textSize(18);

    text("1 - 4 to explore", width / 4 + 135, height / 4 + 130);

    text("R or r to randomize", width / 4 + 120, height / 4 + 160);

    text("S or s to save", width / 4 + 145, height / 4 + 190);

    text("click to begin", width / 4 + 150, height / 4 + 260);

  }

}

​

function mouseMoved() {

  //when moving the mouse, select mode is true until you mousePressed

  selectMode = true;

}

​

function mouseReleased() {

  //when mouseReleased, selectMode turns to false because the are has been selected and cropTiles function is running

  if (!startScreen) {

    selectMode = false;

    cropTiles();

  } else {

    startScreen = false;

  }

}

​

function keyReleased() {

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

​

  if (key == "r" || key == "R") {

    randomMode = !randomMode;

    //selectMode = false;

    //cropTiles();

  }

​

  if (key == "1") {

    tileCountX = 4;

    tileCountY = 4;

    cropTiles();

  }

  if (key == "2") {

    tileCountX = 8;

    tileCountY = 8;

    cropTiles();

  }

  if (key == "3") {

    tileCountX = 12;

    tileCountY = 12;

    cropTiles();

  }

   if (key == "4") {

    tileCountX = 16;

    tileCountY = 16;

    cropTiles();

  }

}

​