​

function preload() {

  myText = loadStrings('lorem.txt');

}

​

function setup() {

  createCanvas(400, 400);

  let container = createDiv();

  container.position(0, 0);

  container.size(width, AUTO);

​

  for (let i = 0; i < myText.length; i += 1) {

​

    // still want to create p

    let paragraph = createP();

    paragraph.id("p-" + i);

    let words = splitTokens(myText[i]);

    let paragraphText = "";

​

    for (let j = 0; j < words.length; j += 1) {

      paragraphText += " <span id=\"p-" + i + "-w-" + j + "\">";

      paragraphText += words[j];

      paragraphText += "</span>";

    }

    // print(paragraphText);

    paragraph.html(paragraphText);

    paragraph.parent(container);

  }

}

​

function draw() {

  background(220);

  let i = 0;

  let j = 0;

  let test = select("#" + "p-" + i + "-w-" + j);

  if (test) {

    test.style('background-color', '#000');

  }

}

​

// non fxning code

      // parameters for redaction

//       let wordWidth = textWidth(words), // get width of word

//           lineHeight = 15, // get height of word

//           xPos = width,

//           yPos = AUTO; // not sure about location

//       let wordToRedact = select('span');

//       if (wordToRedact) {

//         rect(xPos, i * yPos, wordWidth, lineHeight);