Concrete Poetry

This week we learned about Concrete Poetry. Our assignment is to use JavaScript, CSS, and HTML to create a concrete poem programmatically.

For some reason I got the crazy idea to create anaglyphs. An anaglyph is a stereoscopic illusion created by offsetting an image's red channel from its blue and green (cyan) channels and viewing that image with red and cyan glasses. It happens I'm quite interested in the subject and have done a lot of work with anaglyphs in the past. I know how to do this with pixels, but can I do it with HTML instead?

With a little bit of research and experimentation I was able to make an anaglyph using JavaScript, HTML, and CSS. The basic idea is to duplicate every div text element and color the font red in one div and cyan in the other. The two div tags can be positioned offset from each other by a small amount. I can use the CSS property mix-blend-mode to properly combine the colors in the places where the two div tags overlap. It is critical that the overlapping regions are black, not red or cyan.

See the below sketch. The poem is a haiku in the X-Y plane but when you look at it with 3D Glasses you will see the words are positioned meaningfully along the Z axis, making it a concrete poem as well. For example, the words near and far appear close or far from the viewer.

If you click on the sketch the words red and cyan will swap Z positions.

If you are interested you can see the code. The most important part of the code is the drawText function, shown below.

function drawText(content, xPos, yPos, divergence) {
  let leftDiv = createDiv(content);
  let rightDiv = createDiv(content);

  leftDiv.class('anaglyph');
  leftDiv.position(xPos - divergence, yPos);
  leftDiv.style("color", "#FF0000");
  leftDiv.style("font-size", "28pt");
  leftDiv.style("mix-blend-mode", "multiply");

  rightDiv.class('anaglyph');
  rightDiv.position(xPos + divergence, yPos);
  rightDiv.style("color", "#00FFFF");
  rightDiv.style("font-size", "28pt");
  rightDiv.style("mix-blend-mode", "multiply");
}