let can1

let btPause, pause;

let radHue;

let btHueChange;

let radStroke, slStroke;

let radAlpha, slAlpha;

let slTime;

let pHue, pStroke, pAlpha;

let radShape;

​

​

function setup() {

  can1 = createCanvas(500, 500);

  background(200);

  noStroke();

  colorMode(HSB, 100);

  hue = random(100);

  sat = random(100);

  bri = random(100);

  alp = random(100);

​

  w = can1.width / 5;

  h = can1.height / 5;

​

  rectMode(CENTER);

  // console.log("setup complete", w, h);

  createP(""); //moves buttons below canvas

​

  btPause = createButton("Pause");

  btPause.mouseClicked(flipPause);

  pause = false;

​

  btHueChange = createButton("Change hue now");

  btHueChange.mouseClicked(randomHue);

​

  pHue = createP("Hue management");

​

  radHue = createRadio('Hue');

  radHue.option(1,"Hue Constant");

  radHue.option(2,"Hue per time (by slider)");

  slTime = createSlider(5, 500, 50);

​

  pStroke = createP("Stroke Management");

​

  radStroke = createRadio('Stroke');

  radStroke.option(1,"No Stroke");

  radStroke.option(2,"Stroke from slider");

  radStroke.option(3,"Random Weight");

​

  slStroke = createSlider(0, 10, 3);

​

  pAlpha = createP("Transparency Management");

​

  radAlpha = createRadio('Alpha');

  radAlpha.option(1,"Opaque");

  radAlpha.option(2,"Alpha from slider");

  radAlpha.option(3,"Random Alpha");

​

  slAlpha = createSlider(0, 100, 30);

​

  createP(""); //spacing

​

  radShape = createRadio('Shape');

  radShape.option(1,"Rectangle");

  radShape.option(2,"Ellipse");

  radShape.option(3,"Both !");

}

​

​

function draw()

​

{

  if (pause == false) {

    let xx = random(width);

    let yy = random(height);

​

    rectDraw(xx, yy, w, h);

  }

​

}

​

function mouseClicked() {

  rectDraw(mouseX, mouseY, w, h);

}

​

function rectDraw(x, y, wd, ht) {

​

  //initial parameters

  sat = random(100);

  bri = random(100);

  alp = random(100);

  stroke(0);

​

  //hue management

  let hueV = radHue.value();

  if (hueV == 2) {

    time = slTime.value();

    if (frameCount % time == 0) {

      hue = random(100);

    }

    pHue.html("hue is " + round(hue));

  }

​

​

​

  //stroke management

  let stV = radStroke.value();

  if (stV == 1) {

    noStroke();

    pStroke.html("Stroke Weight : currently 0");

​

  }

  if (stV == 2) {

    strokeWeight(slStroke.value());

    pStroke.html("Stroke Weight : currently " + slStroke.value());

    // "Stroke management, current stroke = ",

  }

  if (stV == 3) {

    let stW = random(2, 8);

    strokeWeight(stW);

    pStroke.html("Stroke Weight : currently " + round(stW));

​

  }

​

  //transparency management

  let alpV = radAlpha.value();

  if (alpV == 1) {

    alp = 100;

    pAlpha.html("Transparency, currently 0");

​

  }

  if (alpV == 2) {

    alp = slAlpha.value();

    pAlpha.html("Transparency, currently " + alp);

​

  }

  if (alpV == 3) {

    alp = random(0, 100);

    pAlpha.html("Transparency, currently " + round(alp));

​

  }

​

  fill(hue, sat, bri, alp);

​

  let k = random(1);

  let s = random(can1.width / 5);

  let p = (random(2) - 1);

  p = p / abs(p);

​

  // console.log("k, s, p ",k, " ", s, " ", p);

​

​

  wd = w + s * p;

  ht = h + s * p;

  // console.log("wd adn ht", wd, ht);

​

  if (k < 0.5) {

    wd = (ht * 1.618);

  } else {

    ht = int(wd * 1.618);

  }

  // console.log("in draw cycle", x, y, wd, ht);

  // startShape()

​

  let sp = radShape.value();

  if (!sp) {

    rect(x, y, wd, ht);

  }

  if (sp == 1) {

    rect(x, y, wd, ht);

  }

  if (sp == 2) {

    ellipse(x, y, wd, ht);

  }

  if (sp == 3) {

    ellipse(x, y, wd, ht);

    rect(x, y, wd, ht);

  }

}

​

function flipPause() {

  pause = !pause;

}

​

function randomHue() {

  hue = random(100);

}

​