Coordinate Transformation Demo

Coordinate Transformation

The HTML file:

<html lang="en">
<head>
    <script src="demo.js" defer></script>
</head>
<body>
<main>
<title> Coordinate Transformation Demo</title>
    <h1>Coordinate Transformation</h1>
    <canvas id="theCanvas" width=300 height=300 style="border:1px solid black;"></canvas>
    <img src="hiDraft.png" height=300 alt="The hand drawn image in modeling space">

</main>
</body>
</html>

demo.js

"use strict"

const canvas = document.getElementById("theCanvas")
console.dir(canvas);
const ctx = canvas.getContext("2d")

const oMin = {x:-10, y:-10};
const oMax = {x:10, y:10};
const nMin = {x:0, y:0};
// change to this to see the picture in a different location
//const nMin = {x:canvas.width/2, y:canvas.height/2};
const nMax = {x:canvas.width, y:canvas.height};


// the actual model:
//    Stored as line segments.
const lines = [
   // bounding box
   {x:-9.5, y:-9.5}, {x:-9.5, y:9.5},
   {x:-9.5, y:9.5}, {x:9.5, y:9.5},
   {x:9.5, y:9.5}, {x:9.5, y:-9.5},
   {x:9.5, y:-9.5}, {x:-9.5, y:-9.5},

// H, this is symetric along the y axis so no problem.
{x:-7,y:7}, {x:-7,y:-7}, {x:-3,y:7}, {x:-3,y:-7}, {x:-7,y:0}, {x:-3,y:0},
// I, this to is symmetric
{x:0,y:7}, {x:3,y:7}, {x:1.5,y:7}, {x:1.5,y:-7}, {x:0,y:-7}, {x:3,y:-7},
// ! remember, this is upside down
{x:7,y:6}, {x:7,y:-7},
{x: 6.5, y:6.5}, {x: 6.5, y:7.5}, {x: 6.5, y:7.5}, {x: 7.5, y:7.5}, 
{x: 7.5, y:7.5}, {x: 7.5, y:6.5}, {x: 7.5, y:6.5}, {x: 6.5, y:6.5},
]

function Transform( old) {
   let x = (old.x  - oMin.x ) * (nMax.x-nMin.x)/(oMax.x-oMin.x) + nMin.x;
   let y = (old.y  - oMin.y ) * (nMax.y-nMin.y)/(oMax.y-oMin.y) + nMin.y;

   return {x:x, y:y};
}

function DrawLine(p1, p2) {
    ctx.beginPath();

    let A = Transform(p1);
    console.log(p1, " maps to ", A);
    ctx.moveTo(A.x, A.y);

    let B = Transform(p2);
    console.log(p2, " maps to ", B);
    ctx.lineTo(B.x, B.y);

    ctx.stroke();
}

for(let i = 0; i < lines.length; i+= 2) {
   DrawLine(lines[i], lines[i+1]);
}