//WARNING: massive spaghetti ahead

//variables that'll be used in multiple functions

let darkest;

let ladderLength = 8;

let ladder = {

  gridX: 3,

  gridY: (64-9)**(1/2),

};

let unitSpacing, wallWidth, grassHeight, wallStart;

let clicking = -1;

let atkinson;

let buttonX;

const dydt = -2

const buttonY = 200;

const buttonL = 120;

const buttonW = 50;

const leeway = 10;

function setup() {

  createCanvas(600, 400);

  atkinson = loadFont('Atkinson-Hyperlegible-Regular-102.ttf')

  buttonX = width-170;

  darkest =  color(50, 50, 76);

  frameRate(60)

/*  console.log("Calculated:",ladderLength);

  console.log("Expected: ~",8.544);*/

}

​

function circleY() {

  noStroke(); circle(ladder.x1,ladder.y1,leeway*2);

}

function circleX() {

  noStroke(); circle(ladder.x2,ladder.y2,leeway*2);

}

function remap(input,inMin,inMax,outMin,outMax){

  return (input - inMin) * (outMax - outMin)/(inMax - inMin) + outMin;

}

function hovering(x1, y1, x2, y2, range){

  return ((x2 - range <= x1 && x1 <= x2 + range) &&

          (y2 - range <= y1 && y1 <= y2 + range))

}

​

​

function updateLadder(setting) {

  /*figures out which one is being manually set

  and makes the other follow; 2 = x and 1 = y*/

  fill(color(219, 178, 148));

  if(setting == 2){

    circleX()

    ladder.gridX = remap(mouseX,wallWidth,wallWidth+10*unitSpacing,0,10);

    ladder.gridY = ((ladderLength**2)-(ladder.gridX**2))**(1/2); //b = √(c²-a²)

    if(ladder.gridX>=ladderLength){

      ladder.gridX=ladderLength;

      ladder.gridY = 0;

    }

    if(ladder.gridX<0){

      ladder.gridY=ladderLength;

      ladder.gridX = 0;

    }

  }

  if(setting == 1){

    circleY()

    ladder.gridY = remap(mouseY,height-grassHeight,wallStart,0,10);

    ladder.gridX = ((ladderLength**2)-(ladder.gridY**2))**(1/2); //√a = (c²-b²)

    if(ladder.gridY>=ladderLength){

      ladder.gridY=ladderLength;

      ladder.gridX = 0;

    }

    if(ladder.gridY<0){

      ladder.gridX=ladderLength;

      ladder.gridY = 0;

    }

  }

  if(setting == 0){

    ladder.gridY += dydt/60;

    ladder.gridX = ((ladderLength**2)-(ladder.gridY**2))**(1/2);

    if(ladder.gridY>=ladderLength){

      ladder.gridY=ladderLength;

      ladder.gridX = 0;

    }

    if(ladder.gridY<0){

      ladder.gridX=ladderLength;

      ladder.gridY = 0;

    }

  }

}

function mousePressed() {

//    console.log(mouseX,mouseY);

    if(hovering(mouseX,mouseY,ladder.x2,ladder.y2,leeway)){

      clicking = 2;

    } else if(hovering(mouseX,mouseY,ladder.x1,ladder.y1,leeway)) {

      clicking = 1;

    } else { clicking = -1; }

}

function mouseReleased(){

  clicking = -1;

/*  console.log(ladder.gridX,ladder.gridY);

  console.log(mouseY,height-grassHeight,grassHeight+10*unitSpacing,0,10);*/

}

​

​

function draw() {

  textFont(atkinson);

  background(color(188, 229, 255));

  noStroke();

  //wall

  wallWidth=width*0.25;

  wallStart=height*0.2

  fill(color(118, 116, 116));

  rect(0,wallStart,wallWidth,height);

  //grass

  grassHeight = height*0.2;

  fill(color(57, 160, 72));

  rect(0,height-grassHeight,width,grassHeight);

  //"grid" marks

  for(let i = 1; i < 10; i++){

    stroke(darkest);

    strokeWeight(4);

    unitSpacing=(height-grassHeight-wallStart)/10;

    const tickWidth=5;

    //vertical lines

    line(wallWidth-tickWidth,grassHeight+i*unitSpacing,

         wallWidth+tickWidth,grassHeight+i*unitSpacing);

    //horizontal lines

    line(wallWidth+i*unitSpacing,height-grassHeight-tickWidth,

         wallWidth+i*unitSpacing,height-grassHeight+tickWidth)

  }

  //adding "hey click me" nodes

  fill(color(175, 121, 94));

  if(hovering(mouseX,mouseY,ladder.x1,ladder.y1,leeway)) { circleY(); }

  if(hovering(mouseX,mouseY,ladder.x2,ladder.y2,leeway)) { circleX(); }

  //"falling" button

  textSize(25);

  let buttonC = color(119, 140, 166); //standard grey;

  let buttonT = color(50, 50, 76); //darkest grey

  const buttonHover = mouseX >= buttonX && mouseX <= buttonX+buttonL &&

     mouseY >= buttonY && mouseY <= buttonY+buttonW;

  if(buttonHover){

    stroke(darkest);

    buttonC = color(154, 185, 211); // lighter grey;

  }

  //move ladder when mouse is clicked + change color of button

  if(mouseIsPressed){

    if(buttonHover){

      buttonC = color(85, 95, 121); //darker grey

      buttonT = color('white');

      updateLadder(0);

    }

    if(clicking != -1){ updateLadder(clicking) }

  }

  if(touches.length > 0){

    mouseX = touches[0].x;

    mouseY = touches[0].y;

  mousePressed();

  }

  noStroke();

  fill(buttonC);

  rect(buttonX, buttonY, buttonL, buttonW);

  fill(buttonT);

  text(`dy/dt=${dydt}`,buttonX+10,buttonY+(0.65*buttonW));

  //drawing the ladder

  stroke(color(130, 63, 40));

  strokeWeight(8);

  ladder.x1 = wallWidth;

  ladder.y1 = wallStart+((10-ladder.gridY)*unitSpacing);

  ladder.x2 = wallWidth+ladder.gridX*unitSpacing;

  ladder.y2 = height-grassHeight;

  line(ladder.x1,ladder.y1,ladder.x2,ladder.y2);

  //show the numbers too

  noStroke();

  fill(darkest)

  textSize(30);

  text(`Anchors:\nX = ${round(ladder.gridX,3)}\nY = ${round(ladder.gridY,3)}`,width-150,40);

}

​