Art Gothique avec p5.js

Inspiration

Pour ce projet, je me suis inspiré des vitraux que l’on trouve dans les cathédrales gothiques.

J’ai aimé le défi que représentait la création de formes rectangulaires dans une toile dimensionnelle, j’ai donc passé un week-end à réfléchir à la conception de l’algorithme et à sa mise en code.

Le tableau retourne des cellules avec des hauteurs et largeurs aléatoires. C’est dispo ici

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);
}