​

poem = `שִׁנְאַנִּים שַׁאֲנַנִּים כְּנִצּוֹצִים יִלְהָבוּ

לַהֲטֵיהֶם וּמַעֲטֵיהֶם כְּעֵין קָלָל יִצְהָבוּ

מוּל כִּסֵּא מִתְנַשֵּׂא בְּקוֹל רַעַשׁ יִרְהָבוּ

הֵן בְּמַחֲזֶה זֶה לָזֶה לְהַקְדִּישׁ אֵל יֶאֱהָבוּ

הָבוּ לַאדֹנָי בְּנֵי אֵלִים הָבוּ`

​

let noiseImg;

let textGraphics = [];

let cnt = 0

let xOffset = 0;

let yOffset = 0;

let isMoving = false;

let i = 0;

let sound;

let lens = []

function preload() {

  sound = loadSound('2133%20Tawil.mp3')

}

​

function setup() {

  frameRate(30);

  createCanvas(853, 480);

  pixelDensity(1)

  cursor(HAND)

  noiseImg = createGraphics(width, height);

  generateNoise(noiseImg);

  let lines = poem.split('\n')

  lines.forEach((line, row) => {

    let words = line.split(' ')

    words.forEach((word, col) => {

      lens.push(min(word.replace(/[^א-ת]/g, '').length, 6))

      textGraphics.push(createTextTemplate(createGraphics(width, height), word, (row + 1) / (lines.length + 1) , (col + 1) / (words.length + 2)))

    })

  })

}

​

function draw() {

  background(0);

  if (prob < 1)

    generateNoise(noiseImg, prob);

  image(noiseImg, 0, 0);

  if (isMoving) {

    xOffset += random([2,3]);

    yOffset += random([0,.5,-.5])

    cnt += 1;

    if (cnt >= 10.5*lens[i]) {

      xOffset = 0

      yOffset = 0;

      cnt = 0  

      i++;

      if (i == textGraphics.length)

        i = 0;

    }

    if (xOffset > width) {

      xOffset = 0;

    }

  }

  let movingTextImg = getMovingTextImage(noiseImg, textGraphics[i], xOffset|0, yOffset|0);

  image(movingTextImg, 0, 0);

}

​

function generateNoise(graphics, prob=1) {

  graphics.loadPixels();

  for (let x = 0; x < graphics.width; x++)

    for (let y = 0; y < graphics.height; y++)

      if (prob == 1 || random() < prob) {

        const [r, g, b] = random() < .5 ? [80, 80, 140] : [200, 200, 0]

        const i = (y*graphics.width+x) * 4

        graphics.pixels[i] = r

        graphics.pixels[i + 1] = g

        graphics.pixels[i + 2] = b

        graphics.pixels[i + 3] = 255

      }

  graphics.updatePixels();

}

​

function createTextTemplate(graphics, text, row, col) {

  graphics.textFont('Serif');

  graphics.textSize(120);

  graphics.textStyle('bold');

  graphics.textAlign(RIGHT, CENTER);

  graphics.text(text, graphics.width * (.35 + .65 * (1-col)), graphics.height * row);

  return graphics;

}

​

function getMovingTextImage(noiseGraphics, textGraphics, xOffset, yOffset) {

  let tempImg = createImage(noiseGraphics.width, noiseGraphics.height);

  tempImg.copy(noiseGraphics, 0, 0, noiseGraphics.width, noiseGraphics.height, 0, 0, noiseGraphics.width, noiseGraphics.height);

  tempImg.mask(textGraphics);

  let movingImg = createImage(tempImg.width, tempImg.height);

  movingImg.copy(tempImg, 0, 0, tempImg.width, tempImg.height, -xOffset, -yOffset, tempImg.width, tempImg.height);

  return movingImg;

}

​

function mousePressed() {

  if (mouseButton && mouseButton != 'left')

    return

  isMoving = true;

  sound.loop()

}

​

function mouseReleased() {

  isMoving = false;

  sound.pause();

}

​

document.addEventListener('pointercancel', mouseReleased)

addEventListener('blur', mouseReleased)

​

function touchStarted() {

  mousePressed()

}

​

function touchEnded() {

  mouseReleased()

}

​