Loomis Head Study

by Richard

HTML

<html>

<canvas width="400" height="500"></canvas>
<br />

a: <input type="range" id="a" min="0.75" max="2" step="0.05"><br/>
b: <input type="range" id="b" min="0.5" max="2" step="0.05"><br/>
c: <input type="range" id="c" min="0" max="10" step="0.05"><br/>

<script src="loomis.js"></script>

</html>

JavaScript

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const craniumRadius = 100;
const craniumCenterX = canvas.width / 2;
const craniumCenterY = canvas.height / 3;

// Can we create a formula for some of these???? Based on a face direction???
// The shear should probably always kiss the cranium for now. On either side....
// Handle side mode and front/back later....
let a = 1;
let b = 1.45;
let c = 0;

let shearDeltaY = 0;

function oval(cx, cy, rx, ry) {
	ctx.beginPath();
	// ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
	ctx.ellipse(cx, cy, rx, ry || rx, 0, 0, 360);
	ctx.stroke();
}

function line(x1, y1, x2, y2) {
	ctx.beginPath();
	ctx.moveTo(x1, y1);
	ctx.lineTo(x2, y2);
	ctx.stroke();
}

function render() {
	ctx.fillStyle = "#eee";
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	const shearWidth = craniumRadius * a;
	const shearHeight = craniumRadius * b;
	const shearCenterX = craniumCenterX - craniumRadius + shearWidth / 2 + c;
	const shearCenterY = craniumCenterY;
	const craniumLeft = craniumCenterX - craniumRadius;
	const craniumRight = craniumCenterX + craniumRadius;
	const shearRight = shearCenterX + shearWidth / 2;
	const shearTop = shearCenterY - shearHeight / 2;
	const shearBottom = shearCenterY + shearHeight / 2;
	// interception of top shear line and cranium circle
	const shearTopCraniumX =
		Math.sqrt(craniumRadius ** 2 - (shearTop - craniumCenterY) ** 2) +
		craniumCenterX;
	const shearBottomCraniumX =
		Math.sqrt(craniumRadius ** 2 - (shearBottom - craniumCenterY) ** 2) +
		craniumCenterX;
	const jawTop =
		Math.sqrt(craniumRadius ** 2 - (shearCenterX - craniumCenterX) ** 2) +
		craniumCenterY;
	const browCenterX = (shearRight + craniumRight) / 2;
	const browCenterY = shearCenterY;
	const noseBaseCenterX = (shearCenterX + craniumRight) / 2;
	const noseBaseCenterY = shearBottom;
	const jawCenterX = noseBaseCenterX;
	const jawCenterY = noseBaseCenterY + shearHeight /...