let newButton;

let saveButton;

let colorOpt;

let playBtn;

let playState = true;

​

function setup() {

  let mobileView = createElement('meta');

  mobileView.attribute('name', 'viewport');

  mobileView.attribute('content', 'width=device-width, initial-scale=1, maximum-scale=1');

  let winWidth, winHeight;

  if(windowWidth < 400){

    winWidth = windowWidth;

  } else {

    winWidth = 400;

  }

  let canvas = createCanvas(winWidth,600);

​

  canvas.center("horizontal");

  colorMode(HSB, 360, 100, 100);

  makeUI();

  draw();

  //set frame rate to 10 for cool effect

  frameRate(8);

  playPause();

}

​

function downloadCanvas(){

  saveCanvas(canvas, "Victor Vasarely", "png");

}

​

// let amount = 1;

// let growShrink = 1;

function draw() {

  background(220);

  let amount = numSlider.value();

  makeRows(0, 0, amount, -1);

  // amount = amount + growShrink;

  // if (amount >= 4) {

  //   growShrink = -1;

  // } else if (amount <= 1) {

  //   growShrink = 1;

  // }

}

​

function makeCell(x, y, size, c1, c2) {

  noStroke();

  fill(c1.h, c1.s, c1.b);

  square(x, y, size);

  fill(c2.h, c2.s, c2.b);

  circle(x + size / 2, y + size / 2, 0.8 * size);

}

​

let c1, c2;

function makeRows(x, y, number, prevHue) {

  let cellSize = width / number;

  if(prevHue == -1){

    prevHue = random(360);

  }

  if (y < height - cellSize) {

    //pick random offset from initial hue to avoid repitition by chance

    c1 = { h: clampLimits(prevHue+random(30,180), 360),

           s: 100,

           b: 65 };

    //then, the secondary color is generated based on the first's value.

    let offsets = {

      h: 0,

      s: 0,

      b: 0

    };

    switch(colorOpt.value()){

      case "random":

        offsets.h = random(60, 120);

        offsets.s = -15;

        break;

      case "triadic":

        offsets.h = 120;

        offsets.s = -15;

        break;

      case "triadic spiral":

        c1.h = prevHue+270;

        offsets.h = 120;

        offsets.s = -15;

        break;

      case "monochromatic":

        offsets.h = 0;

        offsets.s = -30;

        offsets.b = c1.b*-.35;

        break;

    }

​

    c2 = { h: clampLimits(c1.h+offsets.h, 360),

           s: c1.s+offsets.s,

           b: c1.b+offsets.b };

    //cyclically wrap hue between 0 and 360

    for (let i = 0; i < number; i++) {

      if (i % 2 == 0) {

        makeCell(x + i * cellSize, y, cellSize, c1, c2);

      } else {

        makeCell(x + i * cellSize, y, cellSize, c2, c1);

      }

    }

    makeRows(x, y + cellSize, number + 1, c1.h);

  }

}

​

//cyclically wraps val between 0 and max

function clampLimits(val, max){

  if(val < max){

    return val;

  } else {

    return clampLimits(val-max, max);

  }

}

​

function playPause(){

  if(playState){

    loop();

    playState = !playState;

  } else {

    noLoop();

    playState = !playState;

  }

}

​

function makeUI(){

  playBtn = createButton("⏯");

  playBtn.position(width/2, height+15);

  playBtn.mouseReleased(playPause) 

  numSlider = createSlider(1, 10, 2, 1);

  numSlider.position(0, height+10);

  numSlider.center("horizontal");

  numSlider.style('width', '175px');

  numSlider.mouseClicked(draw);

  numSlider.touchEnded(draw);

  newButton = createButton("Create");

  newButton.position(0, height+60);

  newButton.center("horizontal");

  newButton.mouseReleased(draw);

  saveButton = createButton("Save");

  saveButton.position(0, height + 85);

  saveButton.center("horizontal");

  saveButton.mouseReleased(downloadCanvas);

  colorOpt = createSelect();

  colorOpt.option("monochromatic");

  colorOpt.option("triadic");

  colorOpt.option("random");

  colorOpt.option("tridaic spiral");

  colorOpt.position(0, height+35);  

  colorOpt.center("horizontal");

}