//Press keys 'g','o', 'm' and 's' to change the image

//Sliders = self-explanatory

//Press keys 'p' and 'c' to change between circle and polygon. Also reloads the visual output if you press the same key. (Currently circle works and I am trying to adapt polygon)

​

var shapes = [];

var startingR = 80;

var maxLoops = 3000;

let img;

let currentShape = 'polygon';

let shaped;

let hval;

let maxR = 80;

let lastR = 80;

let currentR;

let lval;

​

function preload() {

  img = loadImage('data/image1.jpeg');

  fontMedium = loadFont("data/Roboto-Medium.ttf");

  fontLight = loadFont("data/Roboto-Light.ttf");

}

​

​

function setup() {

  createCanvas(700, 400);

  generateShapes();

  img.loadPixels();

​

  hSlider = createSlider(0, 360, 0);

  hSlider.position(50, 225);

  lSlider = createSlider(0, 100, 0);

  lSlider.position(50, 285);

  rSlider = createSlider(5, 80, 80, 5);

  rSlider.position(50, 345);

}

​

function draw() {

  background(360);

​

  image(img, 50, 75, 100, 100);

​

  fill(0);

  textFont(fontMedium);

  textSize(20);

  text('Material Generator', 50, 50);

  textFont(fontLight);

  textSize(14);

  text('Background Hue', hSlider.x, 210);

  text('Background Lightness', lSlider.x, 270);

  text('Maximum Radius', rSlider.x, 330);

​

  lval = lSlider.value();

  hval = hSlider.value();

  lastR = maxR;

  maxR = rSlider.value();

  lastShape = currentShape;

​

  if (lastR != maxR) {

    shapes = [];

    generateShapes();

  }

​

​

  fill(hval, 100, lval);

  rect(300, 0, width, height);

​

  colorMode(RGB);

​

  for (var i = 0; i < shapes.length; i++) {

    let x = map(shapes[i].x, 300, width, 0, img.width);

    let y = map(shapes[i].y, 0, height, 0, img.width);

​

    fill(img.get(x, y));

​

    shapes[i].draw();

​

  }

​

  colorMode(HSL);

​

}

​

​

function generateShapes() {

  currentR = maxR;

  var loopCycle = maxLoops;

​

  while (loopCycle > 0) {

    if (currentShape == 'polygon') {

      shaped = new Polygon(random(300 + currentR, width), random(height), currentR);

    } else if (currentShape == 'circle') {

      shaped = new Circle(random(300 + currentR, width), random(height), currentR);

    }

​

    var available = true;

    for (var j = 0; j < shapes.length; j++) {

      var otherS = shapes[j];

      if (dist(shaped.x, shaped.y, otherS.x, otherS.y) < shaped.r + otherS.r + 2) {

        available = false;

        break;

      }

    }

​

    if (available) {

      shapes.push(shaped);

    }

​

​

    loopCycle--;

    if (loopCycle == 0) {

      if (currentR > 5) {

        currentR = currentR - 1;

        console.log('Reduced Radius: ' + currentR, 'Shapes: ' + shapes.length);

        loopCycle = maxLoops;

      }

    }

  }

}

​

function keyPressed() {

  if (key == 'm') {

    img = loadImage('data/image1.jpeg');

  } else if (key == 'o') {

    img = loadImage('data/image3.jpg');

  } else if (key == 'g') {

    img = loadImage('data/image2.jpg');

  } else if (key == 's') {

    img = loadImage('data/image4.jpg');

  } else if (key == 'c') {

    currentShape = 'circle';

    shapes = [];

    generateShapes();

  } else if (key == 'p') {

    currentShape = 'polygon';

    shapes = [];

    generateShapes();

  }

}