JSFiddle - React, Tailwind, and code Playground

by Yiler Huang

HTML

<html>

<head>
    <title>Light Illustration</title>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js"></script>
</body>

</html>

JavaScript

//------------------------------------------------------------------------------
//setup and functions
let draw = SVG().addTo("body").size(1800, 900);

draw.node.id = "svgCanvas"

let windowHeight = window.innerHeight;

let windowWidth = window.innerWidth;

let windowHeightSmallerThan900;

if (windowHeight < 900) {
    windowHeightSmallerThan900 = true;
} else if (windowHeight > 900) {
    windowHeightSmallerThan900 = false;
}

//from https://stackoverflow.com/questions/10298658/mouse-position-inside-autoscaled-svg
// Find your root SVG element
let svg = document.getElementById('svgCanvas');

// Create an SVGPoint for future math
let pt = svg.createSVGPoint();

// Get point in global SVG space
function cursorPoint(evt) {
    pt.x = evt.clientX;
    pt.y = evt.clientY;
    return pt.matrixTransform(svg.getScreenCTM().inverse());
}

//let loc;

//svg.addEventListener('mousemove', function(evt) {
//loc = cursorPoint(evt);
////console.log(loc)
//// Use loc.x and loc.y here
//}, false);

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    move(xDistance, yDistance) {
        return new Point(this.x + xDistance, this.y + yDistance)
    }
    moveByAngle(angle, distance) {
        let r = angle * Math.PI / 180;
        return new Point(this.x + distance * Math.sin(r), this.y + distance * Math.cos(r))
    }
}

function createMatrix(nRows, nColumns, elemFunc) {
    let outputMatrix = [];
    for (let yi = 0; yi < nRows; yi++) {
        let row = [];
        for (let xi = 0; xi < nColumns; xi++) {
            row.push(elemFunc(yi, xi))
        }
        outputMatrix.push(row)
    }
    return outputMatrix
}

function mapMatrix(inputMatrix, elemFunc) {
    let outputMatrix = [];
    for (let yi = 0; yi < inputMatrix.length; yi++) {
        let row = inputMatrix[yi];
        let outputRow = [];
        for (let xi = 0; xi < row.length; xi++) {
            outputRow.push(elemFunc(xi, yi, row[xi]))
        }
       ...