JSFiddle - React, Tailwind, and code Playground

by LeroyRon

HTML

<div id="coords">Something</div>

<canvas id='canvas' width='500' height='200' />

CSS

body { margin: 20px}
canvas {
    background-color: #333
}
#coords {
  color:#111;
  
}

JavaScript

var canv = document.getElementById('canvas');
var contx = canv.getContext('2d');
contx.clearRect(0, 0, canv.width, canv.height);

var app = { 
  frame:function() 
  {
    app.now = Date.now();
    app._delta = (app.now - app._then) / 10; // Converts to seconds (optional)
    app._then = app.now;
    app.update();
    app.animationFrameLoop = window.requestAnimationFrame(app.frame);
  },
  update: function() {
	

  }
}

function influenceFrac(v, b) {
  var dx = b.x == 0 ? 0 : (v.x - b.x*0.5)/b.x;
  var dy = b.y == 0 ? 0 : (v.y - b.y*0.5)/b.y;
  var dz = b.z == 0 ? 0 : (v.z - b.z*0.5)/b.z;
  
  var inf = Math.sqrt( dx * dx + dy * dy + dz * dz );
  
  return [inf, dx, dy, dz];//0 - 70
}
canv.onmousemove = function (e) 
  {
    e.preventDefault();
    ////CONSTRUCT
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;

    var infl = influenceFrac(
    {
      x: x, 
      y: y,
      z: 50
    }, 
    {
      x: canv.width, 
      y: canv.height,
      z: 100
    });

    coords.innerHTML = 'mouseX: '+x
                      +'<br>mouseY: '+y
                      +'<br>boundBoxW: '+canv.width
                      +'<br>boundBoxH: '+canv.height
                      +'<br>dx: '+infl[1]
                      +'<br>dy: '+infl[2]
                      +'<br>dz: '+infl[3]
                      +'<br>influence: '+infl[0];
    
  };

app._then = Date.now();
app.frame();
var coords = document.getElementById('coords');
/*drawShape(contx, 100, 100, 3, 80, 80, 0);
contx.moveTo(300, 20);
drawShape(contx, 300, 100, 3, 80, 15, 0);
contx.moveTo(500, 20);
drawShape(contx, 500, 100, 3, 80, 0, 0);
contx.moveTo(700, 180);
drawShape(contx, 700, 100, 3, 80, 80, Math.PI);

contx.moveTo(100, 220)
drawShape(contx, 100, 300, 4, 80, 80, 0);
contx.moveTo(300, 220);
drawShape(contx, 300, 300, 4, 80, 30, 0);
contx.moveTo(500, 220);
drawShape(contx, 500, 300, 4, 80, 0, 0);
contx.moveTo(756.568542, 243.4314575);
drawShape(contx, 700, 300, 4, 80, 80, Math.PI /...