JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head><title>test card fan</title></head>
<body></body>
</html>
CSS
img { position: absolute; }
body { background-color: #6395EC; }
JavaScript
function go()
{
var textureWidth = 316;
var textureHeight = 492;
var cards = 20;
var range = Math.degreesToRadians(90);
var initialAngle = Math.degreesToRadians(-45);
var increment = range/cards;
var leftCorner = new Vector(0, textureHeight*1.5);
var rightCorner = new Vector(textureWidth, textureHeight*1.5);
var fanPosition = new Vector(500, 100);
for(var angle=0;angle<range;angle+=increment)
{
var cardAngle = initialAngle+angle;
var cardOrigin = Vector.lerp(rightCorner, leftCorner, angle/range);
console.log("cardAngle [" + cardAngle + "] cardOrigin [" + cardOrigin.elements + "] fanPosition [" + fanPosition.elements + "]");
drawCard(fanPosition, cardAngle, cardOrigin);
}
}
// VECTOR OBJECT
function Vector()
{
this.elements = Array.isArray(arguments[0]) ? arguments[0].slice() : Array.prototype.slice.call(arguments);
Vector.prototype.add = function(v2)
{
if(!(v2 instanceof Vector))
return new Vector(this.elements.map(function(x, i) { return x + v2; }));
if(this.elements.length!==v2.elements.length)
return null;
return new Vector(this.elements.map(function(x, i) { return x + v2.elements[i]; }));
};
Vector.prototype.subtract = function(v2)
{
if(!(v2 instanceof Vector))
return new Vector(this.elements.map(function(x, i) { return x - v2; }));
if(this.elements.length!==v2.elements.length)
return null;
return new Vector(this.elements.map(function(x, i) { return x - v2.elements[i]; }));
};
Vector.prototype.multiply = function(v2)
{
if(!(v2 instanceof Vector))
return new Vector(this.elements.map(function(x, i) { return x * v2; }));
if(this.elements.length!==v2.elements.length)
return null;
return new Vector(this.elements.map(function(x, i) { return x * v2.elements[i];...