​

​

var col1 = {

  r: 255,

  g: 0,

  b: 0

}

​

var inputText = '01110011 01101111 00100000 01101000 01100101 01101100 01110000 00100000 01101101 01100101 00100000 01100111 01101111 01100100 ';

var fontSizeMax = 25;

var fontSizeMin = 5;

var spacing = 5;

var kerning = 0.5;

​

var fontSizeStatic = false;

var blackAndWhite = false;

​

var img;

​

function preload() {

  img = loadImage('https://picsum.photos/540/540?grayscale');

}

​

function setup() {

  createCanvas(540, 540);

  textFont('Times');

  textSize(10);

  textAlign(LEFT, CENTER);

  print(img.width + ' • ' + img.height);

}

​

function draw() {

  background(0);

​

  var x = 0;

  var y = 10;

  var counter = 0;

​

  while (y < height) {

    img.loadPixels();

    var imgX = round(map(x, 0, width, 0, img.width));

    var imgY = round(map(y, 0, height, 0, img.height));

    var c = color(img.get(imgX, imgY));

    var greyscale = round(red(c) * 0.222 + green(c) * 0.707 + blue(c) * 0.071);

​

    push();

    translate(x, y);

​

    if (fontSizeStatic) {

      textSize(fontSizeMax);

      if (blackAndWhite) {

        fill(greyscale);

      } else {

        fill(c);

      }

    } else {

      var fontSize = map(greyscale, 0, 255, fontSizeMax, fontSizeMin);

      fontSize = max(fontSize, 1);

      textSize(fontSize);

      if (blackAndWhite) {

        fill(0);

      } else {

        fill(c);

      }

    }

​

    var letter = inputText.charAt(counter);

    text(letter, 0, 0);

    var letterWidth = textWidth(letter) + kerning;

    x += letterWidth;

​

    pop();

​

    if (x + letterWidth >= width) {

      x = 0;

      y += spacing;

    }

​

    counter++;

    if (counter >= inputText.length) {

      counter = 0;

    }

  }

  col1.r = random(0, 255);

  col1.g = random(0, 255);

  col1.b = random(0, 255);

  fill(col1.r, col1.g, col1.b, 75);

  noStroke();

  rect(0, 0, 540, 540);

  noLoop();

}

​