Grains a_da

let poteau_width = 80;

let poteau_height = 200;

let shadow_length = 120;

let gap = 100; // Espace entre les poteaux

let border = 20; // Épaisseur du cadre

let rows, cols; // Nombre de lignes et de colonnes de poteaux

let depth = 30; // Profondeur des poteaux

let padding = 50; // Espace entre le cadre et les poteaux

​

let colorScale7 = chroma.scale(["#FFFFFF42", "#CAC6C660", "#79797999", "#464646D1", "#000000E8"]).domain([-50, 50]);

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  angleMode(DEGREES);

  p5grain.setup();

​

  // Déterminer le nombre de lignes et de colonnes en fonction de la taille de l'écran, du padding et de l'ombre

  rows = Math.floor((height - 2 * (border + padding) - shadow_length) / (poteau_height + gap));

  cols = Math.floor((width - 2 * (border + padding)) / (poteau_width + gap));

}

​

function draw() {

  background(255);

  noStroke();

​

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

    for(let j = 0; j < cols; j++) {

      let x = j * (poteau_width + gap) + poteau_width / 2 + gap + border + padding;

      let y = i * (poteau_height + gap) + poteau_height / 2 + gap + border + padding;

      // Ajout de l'effet isométrique

      y += i * gap / 2;

      // Poteau

      push();

      translate(x, y);

      fill(0);

      rect(-poteau_width / 2, -poteau_height, poteau_width, poteau_height);

      pop();

​

      // Ombre

      push();

      randomSeed(PI * i * j);

      translate(x, y);

      fill(colorScale7(Math.floor(Math.random(-50, 50))).hex());

      beginShape();

      vertex(-poteau_width / 2, 0);

      vertex(poteau_width / 2, 0);

      vertex(poteau_width / 2 - shadow_length / 2, shadow_length / 2);

      vertex(-poteau_width / 2 - shadow_length / 2, shadow_length / 2);

      endShape(CLOSE);

      pop();

      // Ajout du volume

      stroke(180);

      //line(x - poteau_width / 2, y - poteau_height, x - poteau_width / 2 + depth, y - poteau_height - depth);

      //line(x + poteau_width / 2, y - poteau_height, x + poteau_width / 2 + depth, y - poteau_height - depth);

      line(x - poteau_width / 2 + depth, y - poteau_height - depth, x + poteau_width / 2 + depth, y - poteau_height - depth);

      line(x - poteau_width / 2 + depth, y - poteau_height - depth, x - poteau_width / 2 + depth, poteau_height / 2 - depth);

      line(x + poteau_width / 2 + depth, y - poteau_height - depth, x + poteau_width / 2 + depth, poteau_height + depth);

    }

  }

​

  // Ajouter un cadre noir

  noFill();

  stroke(0);

  strokeWeight(border);

  rect(border / 2, border / 2, width - border, height - border);

​

  // Utiliser p5grain pour ajouter du grain à l'image

  granulateSimple(64);

  noLoop();

}

​

function windowResized() {

  setup();

}

​

function keyPressed() {

  // Press [S] to save frame

  if (keyCode === 83) {

    saveCanvas('export.png');

  }

}

​