JSFiddle - React, Tailwind, and code Playground

by panino

HTML

<div id="log"></div>
<canvas id="c" width="800" height="600"></canvas>
<img id="i"...

JavaScript

function $(x){return document.getElementById(x);}
function textureMap(ctx, texture, pts) {
    /*Mapeo UV basado en Regla de Crámer para resolución de ecuaciones lineales y en 
    la obtención de determinantes por regla de Sarrus (Gracias a Andrea Griffini, AKA 6502 )*/
    var tris = [[0, 1, 2], [2, 3, 0]];
    for (var t=0; t<2; t++) {
        var pp = tris[t];
        var x0 = pts[pp[0]].x, x1 = pts[pp[1]].x, x2 = pts[pp[2]].x;
        var y0 = pts[pp[0]].y, y1 = pts[pp[1]].y, y2 = pts[pp[2]].y;
        var u0 = pts[pp[0]].u, u1 = pts[pp[1]].u, u2 = pts[pp[2]].u;
        var v0 = pts[pp[0]].v, v1 = pts[pp[1]].v, v2 = pts[pp[2]].v;
        ctx.save(); ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1);
        ctx.lineTo(x2, y2); ctx.closePath(); ctx.clip();
        var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
        var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
        var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
        var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2
                      - v0*u1*x2 - u0*x1*v2;
        var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
        var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
        var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2
                      - v0*u1*y2 - u0*y1*v2;
        ctx.transform(delta_a/delta, delta_d/delta,
                      delta_b/delta, delta_e/delta,
                      delta_c/delta, delta_f/delta);
        ctx.drawImage(texture, 0, 0);
        ctx.restore();
    }
}
function getInterPoints(ctx,x1,y1,x2,y2,from,to,step,nPoints,inv){
    var tx,ty;
    var x=x2-x1;
    var y=y2-y1;
    var dist=Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
    var angle=Math.atan(y/x);
    var seg=dist/nPoints;
    tx=x1;
    ty=y1;
    for(var i=from,j=to;i<(to+1);i+=(step),j-=step){
            tx+=seg*Math.cos(angle);
            ty+=seg*Math.sin(angle);
            if(!inv)
               ...