let fullImg;

let hArray = [];

let vArray = [];

let sqArray = [];

let circleArray = [];

let index = 1;

let fragments, circles;

let xTemp = 0;

let yTemp = 0;

let paused = false;

​

function setup() {

  createCanvas(1200, 800);

  background(255);

  angleMode(DEGREES);

  //noStroke();

  fill(255, 0, 0 ,80);

  for(i = 0; i < 4; i++)

    {

      hArray[i] = loadImage('images/horizontal/h' + index + '.png');

      index++;

    }

  index = 1;

  for(i = 0; i < 3; i++)

    {

      vArray[i] = loadImage('images/vert/v' + index + '.png');

      index++;

    }

  index = 1;

  for(i = 0; i < 3; i++)

    {

      sqArray[i] = loadImage('images/square/s' + index + '.png');

      index++;

    }

  index = 1;

  for(i = 0; i < 5; i++)

    {

      circleArray[i] = loadImage('images/circles/c' + index + '.png');

      index++;

    }

  backgroundImg = loadImage('images/background.jpg');

  fullImg = loadImage('images/full.jpg');

  hFragments = new Fragment(hArray, 1, 4);

  vFragments = new Fragment(vArray, 2, 3);

  sqFragments = new Fragment(sqArray, 3, 3);

  circles = new Fragment(circleArray, 4, 5);

}

​

function draw() {

  //image(fullImg,0,0);

  image(backgroundImg,0,0);

  circles.show(0,2);

  drawLines(1);

  hFragments.show(0, 4);

  sqFragments.show(0,1);

  vFragments.show(0,1);

  drawLines(2);

  sqFragments.show(1,3);

  vFragments.show(1,3);

  drawLines(3);

  circles.show(2,5);

}

​

function mousePressed()

{

  console.log('x: ' + mouseX + ' ' + 'y: ' + mouseY);

  if(paused == false) paused = true;

  else paused = false;

  xTemp = constrain(mouseX, 0, 1200);

  yTemp = constrain(mouseY, 0, 800);

}

​

function drawLines(mode)

{

  let xVal = constrain(mouseX, 0, 1200);

  let yVal = constrain(mouseY, 0, 800);

  //lines

  push();

  if(mode == 1) //back

    {

      //1

      if((paused == false && xVal >= 1200) || (paused == true && xTemp >=1200)) 

      {

        strokeWeight(9);

        stroke(255);

        if((paused == false && yVal > height/3) || (paused == true && yTemp > height/3)) line(565, 95, 282, 645);

      }

      //2

      if((paused == false && xVal >= 700 && xVal <708) || (paused == true && xTemp >= 700 && xTemp <708)) 

      {

        strokeWeight(9);

        stroke(255);

        if((paused == false && yVal <= height/2) || (paused == true && yTemp <= height/2))  line(345, 709, 750, 185);

        strokeWeight(7);

        if((paused == false && yVal > height/2) || (paused == true && yTemp > height/2))  line(296, 295, 0, 380);

      }

      //3

      if((paused == false && xVal >= 562 && xVal <571) || (paused == true && xTemp >= 562 && xTemp <571)) 

      {

        strokeWeight(9);

        stroke(255);

        line(275, 397, 681, 91);

      }

      //4

      if((paused == false && xVal <5) || (paused == true && xTemp <5)) 

      {

        strokeWeight(9);

        stroke(255);

        line(924, 134, 924, 0);

        if((paused == false && yVal > height/3) || (paused == true && yTemp > height/3)) line(320, 296, 506, 700);

      }

    }

  else if(mode == 2) //middle

    {

      //1

      if((paused == false && xVal >= 1200) || (paused == true && xTemp >=1200)) 

      {

        strokeWeight(11);

        stroke(255);

        if((paused == false && yVal <= height/3) || (paused == true && yTemp <= height/3)) line(278, 654, 221, 0);

      }

    }

  else if(mode == 3) //front

    {

      //1

      if((paused == false && xVal >= 1200) || (paused == true && xTemp >=1200)) 

      {

        strokeWeight(11);

        stroke(255);

        if((paused == false && yVal > height/3) || (paused == true && yTemp > height/3)) line(900, 520, 1200, 800);

        else line(900, 520, 1200, 205);

      }

      //2

      if((paused == false && xVal >= 700 && xVal <708) || (paused == true && xTemp >= 700 && xTemp <708)) 

      {

        strokeWeight(9);

        stroke(255);

        if((paused == false && yVal <= height/2) || (paused == true && yTemp <= height/2)) line(290, 291, 229, 0);

        else line(790, 141, 1200, 800);

      }

      //3

      if((paused == false && xVal >= 562 && xVal <571) || (paused == true && xTemp >= 562 && xTemp <571)) 

      {

        strokeWeight(9);

        stroke(255);

        line(966, 598, 681, 91);

      }

      //4

      if((paused == false && xVal <5) || (paused == true && xTemp <5)) 

      {

        strokeWeight(9);

        stroke(255);

        if((paused == false && yVal <= height/3) || (paused == true && yTemp <= height/3)) line(320, 296, 1200, 800); 

      }

    }

  pop();

}