let speed = 0.01;

var canvas;

var myColor;

​

function setup() {

  createCanvas(600, 600);

  constructGraphics();

​

  marginGridWidth = 1;

  marginGridHeight = 1;

  changeSize = 20;

  distanceToNext = 1.3;

  strokeSize = 1;

  count = 10;

  letter = "E";

}

​

function constructGraphics() {

  canvas = createGraphics(600, 600);

​

  //creates a PGraphics where an letter will be called. PGraphics canvas will not be called/drawn?

  canvas.fill(255);

  canvas.rect(0, 0, canvas.width, canvas.height);

  canvas.smooth(4);

  canvas.clear();

  canvas.textSize(500);

​

  canvas.textAlign(CENTER, CENTER);

}

​

function draw() {

  canvas.clear();

  canvas.text(letter, width / 2, height / 2);

​

  background(0);

​

  count = count + speed;

​

  if (count >= 30) {

    speed = -0.003;

  }

​

  if (count <= 10) {

    speed = speed + 0.003;

  }

​

  for (

    let x = marginGridWidth;

    x <= width - marginGridWidth;

    x += changeSize * distanceToNext

  ) {

    for (

      let y = marginGridHeight;

      y <= height - marginGridHeight;

      y += changeSize * distanceToNext

    ) {

      myColor = canvas.get(x, y);

      readCanvas();

​

      //posOff = posOff + 0.0001;

      aument = noise(x / count, y / count) * 100;

​

      direcX = aument;

      direcY = aument;

      push();

​

      translate(x, y);

      drawColumne();

      pop();

    }

  }

}

​

function readCanvas() {

  if (myColor[0] > 200) {

    stroke(0);

    fill(255);

  } else {

    noStroke();

    noFill();

  }

}

​

function drawColumne() {

  //left wall

  strokeJoin(ROUND);

  strokeWeight(strokeSize);

​

  //upper wall

  quad(

    direcX,

    direcY - changeSize,

    direcX - changeSize,

    direcY - changeSize,

    0,

    0,

    changeSize,

    0

  );

​

  //right wall

  quad(

    direcX - changeSize,

    direcY,

    direcX - changeSize,

    direcY - changeSize,

    0,

    0,

    0,

    changeSize

  );

​

  //lower wall

  quad(

    direcX,

    direcY,

    direcX - changeSize,

    direcY,

    0,

    changeSize,

    changeSize,

    changeSize

  );

​

  //left wall

  quad(

    direcX,

    direcY,

    direcX,

    direcY - changeSize,

    changeSize,

    0,

    changeSize,

    changeSize

  );

​

  rect(direcX - changeSize, direcY - changeSize, changeSize);

}

​