JSFiddle - React, Tailwind, and code Playground

by rmurphey

HTML

<html>
<head>
<title>Ro Program</title>

<!-- Style -->
<style>
canvas {
  border-style: dotted;
}
</style>

<!-- Scripts -->
<script>
window.onload = function() {
  ro = new Ro(400, 400);
  ro.go();
}
</script>

</head>

<!-- Body -->
<body>
  <canvas id="canvas1" width="400" height="400"></canvas>
</body>
</html>

JavaScript

Ro = function(width, height) {
    this.canvasWidth = width;
    this.canvasHeight = height;
    this.V3 = 500.0
    // View point z dimention(?)
    this.S = 100.0
    // View Plain(?)
    this.A = .0
    // Angle of rotation x-axis
    this.B = .6
    // Angle of rotation y-axis
    this.loadData();

    this.mouseDown = false;
};
Ro.prototype = {
    // main method
    go: function() {
        var self = this;
        var canvas1 = document.getElementById('canvas1');

        function hitch(obj, method) {
            return function() {
                method.apply(
                obj,
                // this allows passing the arguments
                // to the original method
                Array.prototype.slice.call(arguments)
                )
            };
        }

        canvas1.onmousedown = hitch(self, self.onMouseDown);
        canvas1.onmouseup = hitch(self, self.onMouseUp);

        this.context = canvas1.getContext('2d');
        this.render();
    },
    // Test set up handler with this
    handlerTest: function(e) {
        return this.onMouseUp.call(this, e)
    },
    render: function() {
        this.clear()
        this.rotate();
        this.calc2d();
        this.draw();
    },
    clear: function() {
        this.context.clearRect(0, 0, 400, 400);
    },
    // Rotate along two axis - set xro, yro, zro values
    rotate: function() {
        for (i = 0; i < this.points.length; i++) {
            point = this.points[i];
            // Rotate X Axis:
            point.xro = point.x
            point.yro = Math.cos(this.A) * point.y - Math.sin(this.A) * point.z
            point.zro = Math.sin(this.A) * point.y + Math.cos(this.A) * point.z
            // Rotate Y Axis:
            point.xro = Math.cos(this.B) * point.xro - Math.sin(this.B) * point.zro
            point.zro = Math.sin(this.B) * point.xro + Math.cos(this.B) * point.zro
        };
    },
    // 3D to 2D transform -- set x2d, y2d values
    calc2d: function() {
        for...