Reproduce this with vector math... or not? - solved :)

Hello.
I’m using scalar math to keep track of points relations to one another. It’s fine. I’m bad at vector math, but it looks to me that this would be really easier and cleaner using vectors. They are already all around… but I’m unpacking it to make mundane calculations and packing again… How could this be done using vector math and p5Vectors methods.

Here a working explanatory example

llet r, g, b, w;
//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);
}


and a pict

and the sketch

thanks

1 Like

Just found out, not hard.

const rpv = p5.Vector.sub(refp,p0).div(green_dim).mult(red_dim);

where green_dim is a vector holding the green grid width/height and red_dim is the same for red grid.

2 Likes