//

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

​

/**

 * changing circle amount, size and position in a grid

 *

 * MOUSE

 * position x          : circle amount and size

 * position y          : circle position

 * left click          : random position

 *

 * KEYS

 * s                   : save png

 */

'use strict';

​

let song, buttton, svgButton, fft, space_between_lines, spectrum;

let tileCountX, tileCountY, tileWidth, tileHeight, count = 0;

​

const numSections = 1024; // 'bass', 'lowMid', 'mid', 'highMid', 'treble'

​

var circleCount = 0;

var endSize = 0;

var endOffset = 0;

​

var actRandomSeed = 0;

let numRowsPerSection = 1;

let sectionHeight;

let rowHeight;

let conductorHeight;

let img;

​

function toggleSong() {

  if(song.isPlaying()) {

    song.pause();

  } else {

    song.play();

  }

}

​

​

function preload() {

  song = loadSound('audio/928 Horn Jam.mp3'); 

  img = loadImage('assets/09450020.JPG')

}

​

​

function setup() {

  frameRate(300);

  createCanvas(1544, 1024);

  background(255);

  conductorHeight = height * 0;

  song.play();

​

  fft = new p5.FFT();

  sectionHeight = (height - conductorHeight) / numSections;

  rowHeight = sectionHeight / numRowsPerSection;

  tileCountX = song.duration() / numRowsPerSection;

​

  tileWidth = width / tileCountX;

  tileHeight = rowHeight;

  noFill();

  // Displays the image at its actual size at point (0,0)

  image(img, 0, 0);

  // Displays the image at point (0, height/2) at half size

  image(img, 0, height, img.width, img.height);

}

​

function draw() {

  spectrum = fft.analyze();

  const currTimeInSong = song.currentTime() / song.duration();

  const currRow = Math.floor(currTimeInSong * numRowsPerSection);

  const numTile = (((currTimeInSong * numRowsPerSection) - currRow) * tileCountX);

​

  // for (let i = 0; i< spectrum.length; i++){

  //   let x = map(i, 0, spectrum.length, 0, width);

  //   let h = -height + map(spectrum[i], 0, 255, height, 0);

  //   rect(x, height, width / spectrum.length, h )

  // }

  noStroke();

  const rawSongPos = map(song.currentTime(), 0, song.duration(), 0, width);

  const currRowInSection = song.currentTime() / song.duration() * 100;

  for (let sectionNumIdx = 0; sectionNumIdx < numSections; sectionNumIdx++) {

    let sectionFloor = Math.round((spectrum.length / numSections) * sectionNumIdx);

    let rVals = 0;

    let bVals = 0;

    let gVals = 0;

    let numRVals = 0;

    let numGVals = 0;

    let numBVals = 0;

    for (let i = sectionFloor; i < sectionFloor + (spectrum.length / numSections); i++){

      rVals += i % 2 === 0 ? spectrum[i] : 0;

      bVals += i % 2 === 1 ? spectrum[i] : 0;

      gVals += spectrum[i];

      let xPos = (numTile * tileWidth);

      fill(get(xPos + tileWidth / 2, currRow * (tileHeight / 2) + (sectionHeight * sectionNumIdx)), spectrum[currRow]);

      rect(xPos, currRow * tileHeight + (sectionHeight * sectionNumIdx), -50, tileHeight * spectrum[i])

    }

    let rAvg = rVals / ((spectrum.length / numSections) / 2);

    let bAvg = bVals / ((spectrum.length / numSections) / 2);

    let gAvg = gVals / (spectrum.length / numSections);

​

  }

}

​

function mousePressed() {

  actRandomSeed = random(100000);

}

​

function keyReleased() {

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

}

​