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