This project was developed 

​

​

*/

​

let trackers = []; //objects

let widthGray = 150; //width of my gray area

let trackerText; //list of text trackers

//let locked = false;

​

function preload() {

  trackerText = loadStrings('assets/text.txt');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

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

    let y = 20 + 40 * i

    trackers[i] = new Tracker(trackerText[i], 15, y, 120, 30);

  }

}

​

function draw() {

  background(255);

  //gray area

  noStroke()

  fill(240)

  rect(0, 0, widthGray, height)

  let x = (width+widthGray)/2

  //regions

  stroke(240)

  strokeWeight(3)

  line(x, 0, x, height)

  line(0, height/2, width, height/2)

  noStroke()

  fill(150);

  textSize(width*0.015);

  textAlign(LEFT);

  fill(3, 161, 252);//blue

  text("“I think I remember how to do this on my own!”",widthGray+20, 40);

  fill("#32d15d");//green

  text("“I think I can look up how to do this!”", x+20, 40);

  fill("#ffe100");//yellow

  text("“I sort of remember this, but will probably need help!”",widthGray+20, (height / 2) + 30);

  fill(255, 17, 0);//red

  text("\"I have no idea what this means!\"", x+20, (height / 2) + 30);

  //text

  textSize(12);

  textAlign(LEFT);

  //fill(100)

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

    trackers[i].show();

  }

}

​

function mousePressed(){

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

    trackers[i].click(mouseX, mouseY);

  }

}

​

function mouseDragged() {

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

    trackers[i].draggred(mouseX, mouseY);

  }

}

​

function mouseReleased(){

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

    trackers[i].release(mouseX, mouseY);

  }

}