//green grid

let p0, p1, p2, p3;

​

//red green

let p00, p10, p20, p30;

// green grid 'margins'

let marginx = 10,marginy = 10;

// an arbitrary point

let refp;

​

​

let green_grid = [],red_grid = [];

​

let newbase = 30;

​

function setup() {

  createCanvas(400, 400);

  //colors 

  g = color(40, 220, 40);

  r = color(255, 40, 40);

  b = color(40, 40, 220);

  // green grid

  p0 = createVector(0 + marginx, 0 + marginy);

  p3 = createVector(width - marginx, height - marginy);

  p1 = createVector(p3.x, p0.y);

  p2 = createVector(p0.x, p3.y);

  //red grid

  p00 = createVector(0 + marginx, 0 + marginy);

  p30 = createVector(width - marginx - newbase, height - marginy - newbase);

  p10 = createVector(p30.x, p00.y);

  p20 = createVector(p00.x, p30.y);

  //arbitrary ref point

  refp = createVector(100, 200);

  //grids points

  green_grid = [p0, p1, p2, p3];

  red_grid = [p00, p10, p20, p30];

  //grids w and h (ref is not zero)

  const green_w = p1.x - p0.x;

  const green_h = p3.y - p1.y;

  const red_w = p10.x - p00.x

  const red_h = p30.y - p10.y

  // intersection refp with axis  

  const xax = createVector(refp.x, p0.y);

  const yax = createVector(p0.x, refp.y);

  //ratios for ref point and green grid

  //************//dist divided //grid width/height

  const rx = (refp.x - p0.x) / (green_w);

  const ry = (refp.y - p0.y) / (green_w);

    //calc a point with the same ratio to the red grid

  const pp_x = rx * (red_w);

  const pp_y = ry * (red_h);

  const proppoint = createVector(pp_x, pp_y);

  // intersection proppoint with axis  

  const xaxis = createVector(proppoint.x, p0.y);

  const yaxis = createVector(p0.x, proppoint.y);

  ///draw

  background(121);

  points_D(green_grid, r);

  points_D([refp],r);

  points_D(red_grid, r);

  stroke(40, 255, 40);

​

  //green grid

  push();

  stroke(40, 255, 40);

  strokeWeight(2.5);

  pvline(p0, p1);

  pvline(p1, p3);

  pvline(p2, p3);

  pvline(p0, p2);

  pop();

  //red_grid

  push();

  stroke(255, 40, 40);

  pvline(p00, p10);

  pvline(p10, p30);

  pvline(p20, p30);

  pvline(p00, p20);

  pop();

  // the ref arbitrary point to grid w/h

  push();

  stroke(40, 40, 255);

  pvline(p3, refp);

  pvline(p1, refp);

  pop();

  //the intersections

  push();

  stroke('black');

  pvline(refp, xax);

  pvline(refp, yax);

  pop();

  //the calculated point

  push();

  points_D([proppoint], 'white');

  //triagle with grid's vertices

  stroke('white')

  pvline(proppoint,p10);

  pvline(proppoint,p30);

  //intersection with grid axis

  stroke('black');

​

  pvline(proppoint, xaxis);

  pvline(proppoint, yaxis);

  pop();

  // that's it

  console.log(`original rx= ${rx}

calculated point x= ${proppoint.x}

calculated point x / red_w= ${proppoint.x / red_w}

original ry= ${ry}

calculated point y= ${proppoint.y}

calculated point y / red_h= ${proppoint.y / red_h}`);

​

​

  push()

  noStroke();

   text(`original rx= ${rx}

calc point x= ${proppoint.x}

calc point x/red_w= ${proppoint.x / red_w}

original ry= ${ry}

calc point y= ${proppoint.y}

calc point y/red_h= ${proppoint.y / red_h}`, 180, 100)

  text('this black lines are respectively\nproportional to red and green grids.', refp.x - 80, refp.y + 40);

  stroke(0);

  fill(255,50);

  rect(180, 90, 195, 90);

  rect(refp.x - 82, refp.y + 30, 195, 31);

  ellipse(refp.x - 40, refp.y -4,4)

  line(refp.x - 40, refp.y -4, refp.x - 80,refp.y + 30 )

  pop()

}

​

​

function points_D(p5vs, c) {

  push();

  noFill();

  stroke(c);

  for (const p5v of p5vs) {

    ellipse(p5v.x, p5v.y, 7);

  }

  pop();

}

​

function pvline(pv1, pv2) {

  line(pv1.x, pv1.y, pv2.x, pv2.y);

}

​