{x: 0, y: 450}, {x: 300, y: 750}, {x: 1000, y: 450}, {x: 1500, y: 650},

  {x: 1800, y: 850}, {x: 2000, y: 1950}, {x: 2200, y: 1850}, {x: 2400, y: 2000},

  {x: 3100, y: 1800}, {x: 3150, y: 1550}, {x: 2500, y: 1600}, {x: 2200, y: 1550},

  {x: 2100, y: 750}, {x: 2200, y: 150}, {x: 3200, y: 150}, {x: 3500, y: 450},

  {x: 4000, y: 950}, {x: 4500, y: 1450}, {x: 5000, y: 1550}, {x: 5500, y: 1500},

  {x: 6000, y: 950}, {x: 6999, y: 1750}

];

// invert y values

segmentPoints.forEach(obj => obj.y = 3000-obj.y)

​

const MAX_HEIGHT = 3000;

const MAX_WIDTH = 7000;

​

let target = {

    x: (segmentPoints[13].x + segmentPoints[14].x) / 2,

    y: (segmentPoints[13].y + segmentPoints[14].y) / 2 - 100 // lift it from the segment a bit

  }

​

let chk_vis;

let chk_all;

​

function setup() {

  // aspect ratio 7:3

  createCanvas(700, 300);

  // invert y so it works..

  segmentPoints.forEach(obj => obj.my = map(obj.y, 0, MAX_HEIGHT, 0, height));

  segmentPoints.forEach(obj => obj.mx = map(obj.x, 0, MAX_WIDTH, 0, width))

  target.mx = map(target.x, 0, MAX_WIDTH, 0, width)

  print(target.y)

  target.my = map(target.y, 0, MAX_HEIGHT, 0, height);

            //map(segmentCenter.y, 0, MAX_HEIGHT, 0, height);

  chk_vis = createCheckbox('visible')

  chk_all = createCheckbox('all')

}

​

​

​

function draw() {

  background(220);

  stroke(0);

  strokeWeight(2);

  for (let i = 0; i < segmentPoints.length - 1; i++) {

    let startX = segmentPoints[i].mx

    let startY = segmentPoints[i].my

    let endX = segmentPoints[i + 1].mx

    let endY = segmentPoints[i + 1].my

    line(startX, startY, endX, endY);

  }

​

  let mouseXmapped = map(mouseX, 0, width, 0, MAX_WIDTH);

  let mouseYmapped = map(mouseY, 0, height, 0, MAX_HEIGHT);

  let segmentCenter = {

    x: (segmentPoints[13].x + segmentPoints[14].x) / 2,

    y: (segmentPoints[13].y + segmentPoints[14].y) / 2        - 100 // lift it from the segment a bit

  };

​

  // Check if the path from the mouse to the target segment is clear

  if (isClearPath(segmentPoints, mouseXmapped, mouseYmapped, segmentCenter)) {

    stroke('green');

  } else {

    stroke('red');

  }

  let centerMappedX = map(segmentCenter.x, 0, MAX_WIDTH, 0, width);

  let centerMappedY = map(segmentCenter.y, 0, MAX_HEIGHT, 0, height);

  line(mouseX, mouseY, centerMappedX, centerMappedY);

  if  (chk_vis.checked() || chk_all.checked()){

    for (const p of segmentPoints){

    if (isClearPath(segmentPoints, mouseXmapped, mouseYmapped, {x: p.x,  y: p.y - 100})){

      stroke('yellow')

      line(p.mx, p.my, mouseX, mouseY)

    } else {

      if (chk_all.checked()){

        stroke('orange')

        line(p.mx, p.my, mouseX, mouseY)

      }

    }

  }

  }

  circle(centerMappedX, centerMappedY, 15);

  print(centerMappedX, centerMappedY, target.mx, target.my)

}

​

// Updated to check for a clear path from mouse position to a target segment

function isClearPath(segments, mouseX, mouseY, target) {

  for (let i = 0; i < segments.length - 1; i++) {

    if (linesIntersect(mouseX, mouseY, target.x, target.y, segments[i].x, segments[i].y, segments[i + 1].x, segments[i + 1].y)) {

      return false;

    }

  }

  return true;

}

​

// Utility function to check if two lines intersect

function linesIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {

  // Calculate parts of the equations for intersection

​

    const denominator = (y4-y3)*(x2-x1) - (x4-x3)*(y2-y1)

    if (denominator == 0){

      return false 

    }

  const uA = ((x4-x3)*(y1-y3) - (y4-y3)*(x1-x3)) / denominator;

  const uB = ((x2-x1)*(y1-y3) - (y2-y1)*(x1-x3)) / denominator;

  // If uA and uB are between 0-1, lines are intersecting

  return uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1;

}