JSFiddle - React, Tailwind, and code Playground

HTML

<html >
<head >
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
    <!-- <script type="text/javascript" src="/4d.js"></script> -->
</head>
<body >
    <p></p>
    <div id="sketch-holder">
        <!-- Our sketch will go here! -->
    </div>

    <script type="text/javascript"></script>
</body>
</html>

JavaScript

let screenDistancew = 1; //determined from player's direction, usually right in front of player

let zoom = 5;
let resizerw = 100; //resize the projected points

let playerPos = [0, 0, 0, -200];

let angles = [0, 0, 0, 0, 0, 0] 
let angleSpeeds = [0, 0.05, 0, 0, 0.05, 0];  


function rotation4xy(x, y, z, w, a){
    return [x * Math.cos(a) + y * (-Math.sin(a)),
        x * Math.sin(a) + y * Math.cos(a),
        z,
        w];
}
function rotation4xz(x, y, z, w, a){
    return [x * Math.cos(a) + z * (-Math.sin(a)),
            y,
            x * Math.sin(a) + z * Math.cos(a),
            w];
}
function rotation4xw(x, y, z, w, a){
    return [x * Math.cos(a) + w * (-Math.sin(a)),
            y,
            z,
            x * Math.sin(a) + w * Math.cos(a)];
}
function rotation4yz(x, y, z, w, a){
    return [x,
            y * Math.cos(a) + z * (-Math.sin(a)),
            y * Math.sin(a) + z * Math.cos(a),
            w];
}
function rotation4yw(x, y, z, w, a){
    return [x,
            y * Math.cos(a) + w * (-Math.sin(a)),
            z,
            y * Math.sin(a) + w * Math.cos(a)];
}
function rotation4zw(x, y, z, w, a){
    return [x,
        y,
        z * Math.cos(a) + (w * -Math.sin(a)),
        z * Math.sin(a) + (w * Math.cos(a))];
}


// Point = function(x=null, y=null, z=null, w=null){
Point = function(coordinate){
    this.origx = coordinate[0];
    this.origy = coordinate[1];
    this.origz = coordinate[2];
    this.origw = coordinate[3];
    this.x = coordinate[0];
    this.y = coordinate[1];
    this.z = coordinate[2];
    this.w = coordinate[3];
    // this.dimension = (x!=null) + (y!=null) + (z!=null) + (w!=null);

    this.draw = function(){
        projectedPoint = project4d(this.x, this.y, this.z, this.w)
        // d = ((projectedPoint[0]-playerPos[0])**2+(projectedPoint[1]-playerPos[1])**2+(projectedPoint[2]-playerPos[2])**2)**0.5
        // stroke(d*5)
        vertex(projectedPoint[0] * zoom, projectedPoint[1] * zoom, projectedPoint[2] * zoom)
  ...