save the nature / poster design

// karelerin arasındaki boşluk

const GAP = 0;

​

// karelerin satır ve sütun sayısı

const ROWS = 10;

const COLS = 10;

​

// karelerin genişliği ve yüksekliği

let w, h;

​

// karelerin başlangıç x ve y koordinatları

let x, y;

​

// renkler dizisi

let colors = [

  [218, 215, 205],

  [163, 177, 138],

  [88, 129, 87],

  [58, 90, 64],

  [52, 78, 65]

];

​

let customFont, additionalFont;

​

function preload() {

  // font

  customFont = loadFont('akira.otf');

  additionalFont = loadFont('afacad.ttf');

}

​

function setup() {

  createCanvas(500, 700);

  background(218, 215, 205);

​

  // karelerin genişliğini ve yüksekliğini hesapla

  w = (450 - (COLS - 1) * GAP) / COLS;

  h = (450 - (ROWS - 1) * GAP) / ROWS;

​

  // karelerin başlangıç koordinatlarını hesapla

  x = (width - 475);

  y = (height - 670);

​

  drawSquares();

  // metin

  textFont(customFont);

  fill(0); 

  textSize(55);

  textAlign(CENTER);

  text("SAVE", width / 4.7, height - 100);

  text("THE NATURE", width / 2, height - 40);

  // diger metin

  textFont(additionalFont);

  textSize(14);

  text("We're at war with nature. If we win, we're lost.", width / 1.4, height - 100);

}

​

function drawSquares() {

  // kareleri çizen döngüler

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

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

      // diziden rastgele bir renk seçin

      let index = Math.floor(random(colors.length));

      let color = colors[index];

​

      // seçilen rengi kareye uygula

      noStroke();

      fill(color[0], color[1], color[2]);

​

      // kareleri çiz

      rect(x + j * (w + GAP), y + i * (h + GAP), w, h);

    }

  }

}

​

function keyPressed() {

  if (key == 'r' || key == 'R') {

    redrawCanvas();

  } else if (key == 's') {

    saveCanvas("export", "jpg");

  }

}

​

function redrawCanvas() {

  background(218, 215, 205);

  drawSquares();

  // metin

  textFont(customFont);

  fill(0); 

  textSize(55);

  textAlign(CENTER);

  text("SAVE", width / 4.7, height - 100);

  text("THE NATURE", width / 2, height - 40);

  // diger metin

  textFont(additionalFont);

  textSize(14);

  text("We're at war with nature. If we win, we're lost.", width / 1.4, height - 100);

}

​