createCanvas(400, 400);

  //noLoop();

}

//Card project

function draw() {

  fill(255, 224, 196);

  wd=width;

  ht=height;

  let xcpospos = width/2;

  let ycpospos = height/2;

  let xcnegneg = width/2;

  let ycnegneg = height/2;

  let xcposneg = width/2;

  let ycposneg = height/2;

  let xcnegpos = width/2;

  let ycnegpos = height/2;

  background(220);

  //rect(200, 200, 250, 400)

  function cardrec(xcord, ycord, w, h){

  rectMode(CENTER);

  rect(xcord, ycord, w*5/8, h); //200, 200, 250, 400 - 5/8 ratio

  strokeWeight(2);

  fill("rgb(221,0,0)");

  textSize(w*0.1)

  textAlign(CENTER, CENTER);

  text('V', xcord - w*0.225, ycord - h*7/16);

  text('♦️', xcord - w*0.225, ycord - h*7/16 + 0.1*h);

  text('Ʌ', xcord + w*0.225, ycord + h*7/16);

  text('♦️', xcord + w*0.225, ycord + h*7/16 - 0.1*h);

  noFill();

  strokeWeight(w*0.0175);

  strokeJoin(BEVEL);

  beginShape();

  vertex(xcord + w*1/16, ycord - h*3/20);

  vertex(xcord + w*7/40, ycord);// maybe reduce 200(ycord) to 197

  vertex(xcord + w*0.2925, ycord - h*0.1);

  endShape();

  beginShape();

  vertex(xcord - w*1/16, ycord + h*3/20);

  vertex(xcord - w*7/40, ycord);// maybe reduce 200(ycord) to 197

  vertex(xcord - w*0.2925, ycord + h*0.1);

  endShape();

  fill(255, 224, 196);

  strokeWeight(1);  

  line(xcord - w*5/16, ycord, xcord + w*5/16, ycord);

  circle(xcord, ycord + h/4 + h*3/32, w*3/16);

  fill(255, 224, 196);

  strokeWeight(w*0.0175);

  noFill();

  arc(xcord - 0.1*w, ycord, w/4, h/4, PI, PI+HALF_PI);

  arc(xcord + 0.1*w, ycord, w/4, h/4, 0, HALF_PI);

  strokeWeight(1);

  fill(255, 224, 196);

  ellipse (xcord, ycord, w/4, h/2);

  circle(xcord, ycord - h/4 - h*3/32, w*3/16);

  fill("white");

  ellipse(xcord-w*0.0375, ycord - 0.375*h, 0.0325*w, 0.0175*h);

  ellipse(xcord+w*0.0375, ycord - 0.375*h,0.0325*w,0.0175*h);

  triangle(xcord-w*0.0375, ycord - h*0.325, xcord+w*0.0375, ycord - h*0.325, xcord, ycord - h*0.3)

  ellipse(xcord-w*0.0375, ycord + 0.375*h, 0.0325*w, 0.0175*h);

  ellipse(xcord+w*0.0375, ycord + 0.375*h, 0.0325*w, 0.0175*h);

  triangle(xcord-w*0.0375, ycord + h*0.325, xcord+w*0.0375, ycord + h*0.325, xcord, ycord + h*0.3)

  fill(255, 224, 196);

  }

  /*

  function recurse(counterup, counterdown){

  //let counter = 0;

  if (counterup == 0 && counterdown==0){//IDEA - enclose into different counter ifs

    return;

  }

  wd=wd/4;

  ht=ht/4;

  //cardrec(xcpospos - wd*0.85, ycpospos + ht*0.9, wd, ht);

  xcpospos=xcpospos + wd*0.85;

  ycpospos=ycpospos - ht*0.9;

  cardrec(xcpospos, ycpospos, wd, ht);

  //cardrec(xcnegneg - wd*0.85, ycnegneg + ht*0.9, wd, ht);

  recurse(counterup-1, counterdown);

  xcpospos=xcpospos - wd*0.85;

  ycpospos=ycpospos + ht*0.9;

  cardrec(xcpospos - wd*0.85, ycpospos + ht*0.9, wd, ht);

  wd=wd*4;

  ht=ht*4;

  */

  /*

  function recurse (xcpospos, ycpospos, wd, ht, max){

  if (wd<=width/pow(4, max)){

    return;

  }

  cardrec(xcpospos, ycpospos, wd, ht); //PLUS

  recurse (xcpospos + wd*0.85, ycpospos - ht*0.9, wd/4, ht/4);

  recurse (xcpospos - wd*0.85, ycpospos + ht*0.9, wd/4, ht/4);

  }

  */

  //cardrec(xcpospos - wd*0.85, ycpospos + ht*0.9, wd, ht); //MINUS

  //counterup++;

  //cardrec(xcpospos + wd*0.85, ycpospos - ht*0.9, wd, ht); //PLUS

  //cardrec(xcpospos - wd*0.85, ycpospos + ht*0.9, wd, ht); //MINUS

  //recurse (xcpospos - wd*0.85, ycpospos + ht*0.9, wd/4, ht/4);

  // xcpospos=xcpospos - wd*0.85;

  // ycpospos=ycpospos + ht*0.9;

  // cardrec(xcpospos + wd*0.85, ycpospos - ht*0.9, wd, ht);

  // cardrec(xcpospos - wd*0.85, ycpospos + ht*0.9, wd, ht);

  //cardrec(xcpospos, ycpospos, wd, ht);

  //cardrec(xcnegneg + wd*0.85, ycnegneg - ht*0.9, wd, ht);

  //recurse(counterup, counterdown-1); 

    // wd=wd*4;

    // ht=ht*4;

    // xcpospos + wd*0.85;

    // ycpospos - ht*0.9;

    //return;

  cardrec(xcpospos, ycpospos, wd, ht);

  for (i=0; i<2; i++){

  wd=wd/4;

  ht=ht/4;

  cardrec(xcpospos - wd*0.85, ycpospos + ht*0.9, wd, ht);

  xcpospos=xcpospos + wd*0.85;

  ycpospos=ycpospos - ht*0.9;

  cardrec(xcpospos, ycpospos, wd, ht);

  cardrec(xcnegneg + wd*0.85, ycnegneg - ht*0.9, wd, ht);

  xcnegneg=xcnegneg - wd*0.85;

  ycnegneg=ycnegneg + ht*0.9;

  cardrec(xcnegneg, ycnegneg, wd, ht);

  }

  //cardrec(xcnegneg + wd*0.85, ycnegneg - ht*0.9, wd, ht);

  //xcposneg = xcposneg - wd*0.85;

  //ycposneg = ycposneg + ht*0.9;

  //

  //xnegpos =  xnegpos + wd*0.85

  //ynegpos = ynegpos - ht*0.9

  //let max = 2;

  //recurse(xcpospos, ycpospos, wd, ht, pow(4, max));

  //recursion function

  //}

  //IDEA move everything right and down by constant that is fraction of new w and h

  //centralize at 275, 100

  //75 is 37.5% of 200 w

  // 100 - 200 h

  fill(0);

  textAlign(LEFT, BOTTOM)

  textSize(12);

  text(mouseX + ',' + mouseY, 20, 20);

}