Tab

May 7, 2023

Inspiration

For this project, i was inspired by the stained glass that we can found in gothic cathedral.

I liked the challenge of generating rectangular shapes in a dimensional canvas so I took a weekend to think about designing the algorithm and putting it into code.

Table with randomly generated cells of height and width. To see live click here

Design steps

// Empty arrays that will contain the different random 
// coordinates on an x-axis and a y-axis respectively.
let randomVertical = [];
let randomHorinzontal = [];

// The canva setup
let c;

function setup() {
  c = createCanvas(windowWidth, windowHeight);
  background(220);
}

function saveCanva () {
  saveCanvas(c, 'myCanva', 'jpg');
}

function randomColor() {
  const letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * letters.length)];
  }
  return color;
}

function draw() {
  noLoop()
    // Draw vertical lines
  for(let i = 0; i < 30; i++) {
    const randomCoord = Math.ceil(random(0, windowWidth - 1));
    randomVertical.push(randomCoord);
    stroke('red');
    line(randomCoord, 0, randomCoord, height);
    
  }
  
  // Draw horizontal lines
  for(let k = 0; k < 30; k++) {
    const randomCoord = random(0, windowHeight - 1);
    randomHorinzontal.push(Math.ceil(randomCoord));
    stroke('green');
    line(0, randomCoord, width, randomCoord);
  }
  
  // Sort in ascending order
  randomVertical.sort((a, b) => a-b);
  randomHorinzontal.sort((a, b) => a-b);

  // Add 0 in array
  if (!randomVertical.includes(0)) {
    randomVertical.unshift(0);
  }
  if (!randomVertical.includes(windowWidth)) {
    randomVertical.push(windowWidth);
  }
  if (!randomHorinzontal.includes(0)) {
    randomHorinzontal.unshift(0);
  }
  if (!randomHorinzontal.includes(windowHeight)) {
    randomHorinzontal.push(windowHeight);
  }


  // Draw rect in each box
  for(let m = 0; m < randomHorinzontal.length - 1; m++) {
    for(let n = 0; n < randomVertical.length - 1; n++) {
      stroke('black');
      fill(randomColor());
      rect(randomVertical[n], randomHorinzontal[m], (randomVertical[n+1] - randomVertical[n]), randomHorinzontal[m+1] - randomHorinzontal[m]);
    }
  }

  textSize(100);
  fill('black');
  text('Tab', 20, windowHeight - 20);
  describe('Table with randomly generated cells of height and width.');
  button = createButton('Save canva');
  button.position(windowWidth - 80, windowHeight - 50);
  button.mousePressed(saveCanva);
}