const imageHeight = 100;

const quiltWidth = 300;

const quiltHeight = 300;

const fabricSize = 100;

let mouseChangedX = 0;

let mouseChangedY = 0;

let fNeedleimg;

let mNeedleimg;

let kinttingimg;

let kinttingimg2;

let oldFabicsPart = ['oldfabicpart1.png','oldfabicpart3.png',

 'oldfabicpart5.png','oldfabicpart7.png',

 'oldfabicpart9.png','oldfabicpart11.png'];

let oldFabicsPartObj = [];

let oldFabics = ['oldfabicpart2.png','oldfabicpart4.png',

'oldfabicpart6.png','oldfabicpart8.png', 'oldfabicpart10.png','oldfabicpart12.png'];

let oldFabicsObj = [];

​

​

let newFabicsPart = ['newfabicpart1.png','newfabicpart3.png',

 'newfabicpart5.png','newfabicpart7.png',

 ];

let newFabicsPartObj = [];

let newFabics = ['newfabicpart2.png','newfabicpart4.png',

'newfabicpart6.png','newfabicpart8.png', ];

let newFabicsObj = [];

​

​

​

let quiltps = [];

let wQuiltps = [];

let oDesk;

let nDesk;

var num = 60;

var x = [];

var y = [];

let tintValue = 0;

let drawTintNum = 0;

let drawWTintNum = 0;

function preload() {

  fNeedleimg = loadImage('assets/needleFemale.png');

  mNeedleimg = loadImage('assets/needleMale.png');

  kinttingimg = loadImage('assets/knitting.png');

 kinttingimg2 = loadImage('assets/knitting2.png');

  oDesk = loadImage('assets/oDesk.jpg');

  nDesk = loadImage('assets/nDesk.jpg');

  for (let i = 1;i<=12;i++)

    {

      quiltps.push(loadImage('assets/quiltp/quiltrp'+i+'.png'));

    }

  for (let i = 1;i<=4;i++)

    {

      wQuiltps.push(loadImage('assets/wquiltrp'+i+'.png'));

    }

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

       oldFabicsPartObj.push(new Fabric(0,0,loadImage('assets/' + oldFabicsPart[0])));

      oldFabicsPartObj.push(new Fabric(0,0,loadImage('assets/' + oldFabicsPart[1])));

       oldFabicsPartObj.push(new Fabric(0,0,loadImage('assets/' + oldFabicsPart[2])));

       oldFabicsPartObj.push(new Fabric(0,height-fabricSize,loadImage('assets/' + oldFabicsPart[3])));

       oldFabicsPartObj.push(new Fabric(width/8,height-fabricSize,loadImage('assets/' + oldFabicsPart[4])));

       oldFabicsPartObj.push(new Fabric(width/2-fabricSize/2,height-fabricSize,loadImage('assets/' + oldFabicsPart[5])));

  for (let i = 0;i<6;i++)

    {

      oldFabicsObj.push(loadImage('assets/' + oldFabics[i]));

    }

  newFabicsPartObj.push(new Fabric(0,0,loadImage('assets/' + newFabicsPart[0])));

  newFabicsPartObj.push(new Fabric(0,0,loadImage('assets/' + newFabicsPart[1])));

  newFabicsPartObj.push(new Fabric(0,0,loadImage('assets/' + newFabicsPart[2])));

  newFabicsPartObj.push(new Fabric(0,0,loadImage('assets/' + newFabicsPart[3])));

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

    {

      newFabicsObj.push(loadImage('assets/' + newFabics[i]));

    }

}

function setup() {

  let canvas = createCanvas(windowWidth, windowHeight);

  nDesk.resize(windowWidth/2, windowHeight);

  oDesk.resize(windowWidth/2, windowHeight);

  fNeedleimg.resize(imageWidth, imageHeight);

  mNeedleimg.resize(imageWidth, imageHeight);

  kinttingimg.resize(10, 10);

  kinttingimg2.resize(10, 10);

  for (let i = 0;i<6;i++)

    {

      oldFabicsPartObj[i].img.resize(fabricSize,fabricSize);

  oldFabicsObj[i].resize(fabricSize,fabricSize);

    }

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

    {

      newFabicsPartObj[i].img.resize(fabricSize,fabricSize);

  newFabicsObj[i].resize(fabricSize,fabricSize);

    }

  oldFabicsPartObj[1].x = width/4-fabricSize/2;

  oldFabicsPartObj[2].x = width/2-fabricSize;

  oldFabicsPartObj[3].x = 0;

   oldFabicsPartObj[3].y = height-fabricSize;

  oldFabicsPartObj[4].x = width/4-fabricSize/2;

   oldFabicsPartObj[4].y = height-fabricSize;

  oldFabicsPartObj[5].x = width/2-fabricSize;

   oldFabicsPartObj[5].y = height-fabricSize;

  newFabicsPartObj[0].x = width/2;

  newFabicsPartObj[1].x = width-fabricSize;

  newFabicsPartObj[2].x = width/2;

  newFabicsPartObj[3].x = width-fabricSize;

  newFabicsPartObj[2].y = height-fabricSize;

  newFabicsPartObj[3].y = height-fabricSize;

  noCursor();

   for (var i = 0; i < num; i++){

    x[i] = 0;

    y[i] = 0;

  }

  for (let i = 0;i<12;i++)

    {

      quiltps[i].resize(quiltWidth, quiltHeight);

    }

}

​

function draw() {

  background(220);

  image(oDesk, 0, 0);

  image(nDesk, width/2, 0);

  stroke(10);

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

  push();

  tint(tintValue, tintValue, tintValue);

  for (let i = 0;i<drawTintNum;i++)

    {

    // quiltps[i].filter(BLUR, 1);

      image(quiltps[i], width/8, height/2-quiltHeight/2);

    } 

  pop();

  for (let i = 0;i<drawWTintNum;i++)

    {

    // quiltps[i].filter(BLUR, 1);

      image(wQuiltps[i], width - width/8-quiltWidth, height/2-quiltHeight/2);

    }

  for (let i = 0;i<6;i++)

    {

      if (oldFabicsPartObj[i].isDraw == true)

    {

       image(oldFabicsPartObj[i].img, oldFabicsPartObj[i].x, oldFabicsPartObj[i].y);

    }

    }

      //image(oldFabicsPartObj[1], 0, 0);

  image(oldFabicsObj[0], 0, 0);

  image(oldFabicsObj[1], width/4-fabricSize/2, 0);

  image(oldFabicsObj[2], width/2 - fabricSize, 0);

  image(oldFabicsObj[3], 0, height-fabricSize);

  image(oldFabicsObj[4], width/4-fabricSize/2, height-fabricSize);

  image(oldFabicsObj[5], width/2 - fabricSize, height-fabricSize);

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

    {

      if (newFabicsPartObj[i].isDraw == true)

    {

       image(newFabicsPartObj[i].img, newFabicsPartObj[i].x, newFabicsPartObj[i].y);

    }

    }

  image(newFabicsObj[0], width/2, 0);

  image(newFabicsObj[1], width-fabricSize, 0);

  image(newFabicsObj[2], width/2, height-fabricSize);

  image(newFabicsObj[3], width - fabricSize, height-fabricSize);

  if (mouseX < width/2)

    image(fNeedleimg, mouseX, mouseY-100);

  else

    image(mNeedleimg, mouseX, mouseY-100);

  //Copy array values from back to front

  for (var i = num-1; i > 0; i--){

    x[i] = x[i-1];

    y[i] = y[i-1];

  }

  x[0] = mouseX + imageWidth; //set the first element

  y[0] = mouseY-imageHeight; //set the first element

  for (let i = 0; i < num; i++){

    if (mouseX < width/2)

       image(kinttingimg, x[i], y[i]);

    else

      image(kinttingimg2, x[i], y[i]);

      //ellipse(x[i], y[i], 10, 10);

  }

}

function mouseDragged() {

  checkinSide();

  let changedX = mouseChangedX - mouseX;

  let changedY = mouseChangedY - mouseY;

  for (let i = 0;i<6;i++)

    {

  if (oldFabicsPartObj[i].isDraw == true)

    {

  if ((mouseX > oldFabicsPartObj[i].x) && (mouseX < oldFabicsPartObj[i].x + fabricSize)) {

    if ((mouseY > oldFabicsPartObj[i].y) && (mouseY < oldFabicsPartObj[i].y + fabricSize)) {

      oldFabicsPartObj[i].x -= changedX;

      oldFabicsPartObj[i].y -= changedY;

    }

  }

    }

    }

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

    {

  if (newFabicsPartObj[i].isDraw == true)

    {

  if ((mouseX > newFabicsPartObj[i].x) && (mouseX < newFabicsPartObj[i].x + fabricSize)) {

    if ((mouseY > newFabicsPartObj[i].y) && (mouseY < newFabicsPartObj[i].y + fabricSize)) {

      newFabicsPartObj[i].x -= changedX;

      newFabicsPartObj[i].y -= changedY;

    }

  }

    }

    }

  mouseChangedX = mouseX;

  mouseChangedY = mouseY;

}

function mouseMoved()

{

  mouseChangedX = mouseX;

  mouseChangedY = mouseY;

}

function mouseClicked() {

  //tintValue += 255/12;

}

function checkinSide(){

  for (let i = 0;i<6;i++)

    {

  if (oldFabicsPartObj[i].isDraw == true)

    {

  if ((oldFabicsPartObj[i].x>width/6)&&

    (oldFabicsPartObj[i].x<width/2))

    {

      if ((oldFabicsPartObj[i].y>height/2 - quiltHeight/2)&&

    (oldFabicsPartObj[i].y<height/2 + quiltHeight/8))

        {

          oldFabicsPartObj[i].isDraw = false;

          tintValue += 255/6;

          drawTintNum+=2;

        }

    }

    }

    }

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

    {

  if (newFabicsPartObj[i].isDraw == true)

    {

  if ((newFabicsPartObj[i].x>width/2 + width/6)&&

    (newFabicsPartObj[i].x<width))

    {

      if ((newFabicsPartObj[i].y>height/2 - quiltHeight/2)&&

    (newFabicsPartObj[i].y<height/2 + quiltHeight/8))

        {

          newFabicsPartObj[i].isDraw = false;

          drawWTintNum+=1;

        }

    }

    }

    }

}