Bary Centric Demo

Bary Centric Demo

For A: BC = (0,0,0) A is on the edge.

For B: BC = (0,0,0) B is on the edge.

The HTML file:

<html lang="en">
<head>
<script type="text/javascript" src="prog.js"></script>
</head>

<body>
<main>
<title>Bary Centric Demo</title>
<h1>Bary Centric Demo</h1>

<canvas id="canvas" width=500 height=500 style="border:2px solid"></canvas>
<p>
<div id="AArea">
For A: BC = (0,0,0)
A is on the edge.
</div>
<p>
<div id="BArea">
For B: BC = (0,0,0)
B is on the edge.
</div>
<p>
<div class="slidecontainer">
  <label for="pinput">p</label>
  <input type="range" id="pinput" min="0" max="100" value="50" class="slider" onchange="ChangeP(this.value);">
</div>
<div class="slidecontainer">
  <label for="qinput">q</label>
  <input id="qinput" type="range" min="0" max="100" value="50" class="slider" onchange="ChangeQ(this.value);">
</div>

<script>
'use strict'
 const canvas = document.getElementById('canvas');

 const ctx = canvas.getContext('2d');
 ctx.transform(1,0,0,-1,0,canvas.height);

 let p = .5;
 let q = .5;

 function Redraw() {
     DrawTriangle(ctx, canvas.width, canvas.height);
     DrawPoints(ctx, p, q);
 }

 function ChangeP(paramP) {
      p = paramP/100; 
      Redraw();
 }

 function ChangeQ(paramQ) {
      q = paramQ/100; 
      Redraw();
 }

 Redraw();
</script>
</main></body></html>

prog.js

'use strict'

const points = [ [10,10,0], [100,480,0],[ 450, 30,0]];
const bc = [[0,1,0], [1,0,0], [0,0,1]];

function Interp(s,e,p) {
   return s*(1-p) + e*p;
}

function InterpV (S, E, p) {
     let r = []

     for(let i =0;i<3; i++) {
         r.push(Interp(S[i], E[i], p));
     }
     return r;
}

function DrawTriangle(ctx, w,h) {

    ctx.clearRect(0,0, w, h);
    ctx.strokeStyle = "black";

    ctx.beginPath();
    ctx.moveTo(points[2][0], points[2][1]);
    for (let i = 0; i < 3; i++) {
       ctx.lineTo(points[i][0], points[i][1]);
    }
    ctx.stroke();
    ctx.closePath();
    return;
}

function Plot(ctc, pt, bc, up, color) {
    ctx.fillStyle = color;

    ctx.strokeStyle = color
    let text = "(" + bc[0].toFixed(2).toString()
                   + ", " + bc[1].toFixed(2).toString() 
                   + ", " + bc[2].toFixed(2).toString() + ")"
    ctx.font = '20px sans-serif'

    ctx.save()
    ctx.scale(1,-1)
    ctx.beginPath()
    if (up) {
        ctx.strokeText(text, pt[0]+10, -pt[1]-10)
    } else {
        ctx.strokeText(text, pt[0]+10, -pt[1]+20)
    }
    ctx.stroke()
    ctx.restore()

    ctx.beginPath();
    ctx.arc(pt[0], pt[1], 5, 0, 2*Math.PI);
    ctx.fill();
}

function Line(ctx, a, b, color) {
    ctx.fillStroke = color
    ctx.beginPath()
    ctx.moveTo(a[0],a[1])
    ctx.lineTo(b[0],b[1])
    ctx.stroke()
}

function Edge(p, limit) {
    for(let i = 0; i < 3; i++) {
       if (p[i] < limit) {
          return true;
       }
    }
    return false;
}

function Log(id, name , pt) {
    let plus = "";

    if (Edge(pt, 0.05)) {
       plus = " is on the edge";
    }

    document.getElementById(id).innerText = ( name + "   (" + pt[0].toFixed(2) 
              + ", " + pt[1].toFixed(2)
              + ", " + pt[2].toFixed(2) + ")" + plus);
}

function DrawPoints(ctx, p,q) {
    let a = InterpV(points[0], points[1], p);
    let b = InterpV( points[2],a, q);

    let bcA = InterpV(bc[0], bc[1], p);
    let bcB = InterpV(bc[2], bcA, q);

    Log("AArea", "Blue", bcA);
    Log("BArea", "Red", bcB);

    Plot(ctx, a, bcA,true, "blue")
    Plot(ctx, b, bcB,false, "red")
    Line(ctx, a, b, "black")
}