let pg;

let button;

​

​

​

function setup() {

  c = createCanvas(1200,800);

  /* Sections for setting up sliders; line numbers written in \L00\ form */

  //ROTATION

  //create a Slider to change grid size \L68\

  gridSlider = createSlider(6, 40,16, 0.5);

  gridSlider.position(900, 150);

  gridSlider.style('width', '250px');

  //create a Slider to change rotation 2 value \L165\

  spcSlider = createSlider(10, 200,80, 10);

  spcSlider.position(900, 200);

  spcSlider.style('width', '250px');

  //OFFSET

  //create a Slider to change offSet value \XXL93\

  offSetSlider = createSlider(1, 40,20, 1);

  offSetSlider.position(900, 250);

  offSetSlider.style('width', '250px');

  //FILL

  //fill: red value slider \L153\

  redSlider = createSlider(1,225,255,1);

  redSlider.position(900, 350);

  redSlider.style('width', '250px');

  //fill: green value slider \L154\

  grSlider = createSlider(101,225,180,1);

  grSlider.position(900, 400);

  grSlider.style('width', '250px');

  //fill: blue value slider \L155\

  blSlider = createSlider(11,225,225,1);

  blSlider.position(900, 450);

  blSlider.style('width', '250px');

  //OPPACITY \L156\

  oppSlider = createSlider(60,180,80,5);

  oppSlider.position(900, 550);

  oppSlider.style('width', '250px');

  //BG Slider \L62\ & \L75\

  bgSlider = createSlider(0,255,0,127);

  bgSlider.position(900, 600);

  bgSlider.style('width', '250px');

  background(bgSlider.value());

  rectMode(CENTER);

  textSize(12);

  frameRate(8);

  //noLoop();

  noFill();

  rotate(frameCount * 4);

​

​

}

​

function draw() {

  background(bgSlider.value(),60);

​

  push();

  translate(140,140); //centers the grid in the canvas [hardcoded]

  let mySize = (gridSlider.value() * 5) - (100 / gridSlider.value());

  let howManyX = (gridSlider.value());  //determines number of collumns (elements on x axis)

  let howManyY = howManyX;  //determines number of rows (elements on y axis)

  let horSpc = spcSlider.value();    //adds spacing between collumns (vertical gap)

  let verSpc = horSpc;    //adds spacing between rows (horizontal gap)

  let offSet = offSetSlider.value();

  //CREATING THE GRID//

​

  //Outer loop with i as counter -> to calcualte X

  for (let i = 0; i < howManyX; i = i + 1) {

    //Inner loop with j as counter -> to calculate Y

    for (let j = 0; j < howManyY; j = j + 1) {

      //print("Outer loop i: ", i,". Inner loop j: ", j);

      let myX = (mySize + horSpc) * i + mySize;

      let myY = (mySize + verSpc) * j + mySize;

      //print("myX: ", myX,". myY: ", myY);

      //stroke(floor(random(0,255)),floor(random(100,180)), floor(random(120,255)) );

      noFill();

    let myConfigObj = {

    x:myX,

    y:myY,

    myOffSet: offSet,

    myNum: 6 * mySize / 50, //floor(random(3, 10)),

    myStep: 10, //floor(random(2, 25)),

    myStr: random(0.25, 1.25),

    wiggleX: random([-offSet,offSet]),

    wiggleY: random([-offSet,offSet]),

  }

  //same function but with a configObj

  drawingPyramid4(myConfigObj);

    }

  }

  pop();

}

​

function drawingPyramid4(confObj) {

​

  push();

​

  //unwrapping the confObj parcel

   let x = confObj.x;

   let y = confObj.y;

   let num = confObj.myNum;

   let step = confObj.myStep;

   let strW = confObj.myStr;

   let offS = confObj.myOffSet

    let wiggleX = random(-offS,offS);

    let wiggleY = random(-offS,offS);

​

  //pyramid drawing code start

  for (let i = 0; i < num; i = i + 1) {

    //this calculates the size of the rect

​

    let s = (num * step) - (step * i);

    noStroke();

    fill(floor(random(0,redSlider.value())),        //red channel

         floor(random(100,grSlider.value())),       //green channel

         floor(random(120,blSlider.value())),       //blue channel

         oppSlider.value() );                       //oppacity

    if(i < 1){

      noFill();

      rect(x,y,s,s);

    }else{

    rect(x + wiggleX / num * s, y + wiggleY / num * s, s, s);

      rotate((-frameCount / 2) * 4);

      rect(x + wiggleX / num * s, y + wiggleY / num * s, s, s);

  }

  }

 pop();

​

  //setup side panel rectangle

  fill(170);

  rect(900,0,400,1400);

  //UI TEXT

  fill(255);

  textSize(30);

  text('GenArt / 604', 870-140, 60-140);

  fill(40);

  textSize(14);

  text('< by_KacperJaroszynski >', 875-140, 80-140);

  fill(60);

  textSize(14);

  text('> size', 900-140,140-140);

  text('> spacing', 900-140,190-140);

  text('> offset value', 900-140,240-140);

  text('> red value', 900-140,340-140);

  text('> green value', 900-140,390-140);

  text('> blue value', 900-140,440-140);

  text('> oppacity', 900-140,540-140);

  text('> background color', 900-140,590-140);

  text('> press S to save image', 910-140,700-140);

  text('> refresh page to restart', 910-140,730-140);

}

​

​

function keyPressed() {

    if (key == 's') {

       saveCanvas(c, 'GenArt604.png');

    }

}