threejs double pendulum fractal

by mars91

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<div class="bottom-middle"><button id="logButton">Reset</button></div>
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}
button {
    padding: 5px 10px;
    font-size: 16px;
    color: black;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

.bottom-middle {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    z-index: 1000;
}

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

//////////////////////// COLOR MAP
const infernoQuinticCoefficients = {
    r1: [-0.027780558, 1.228188385, 0.278906882, 3.892783760],
    r2: [-8.490712758, 4.069046086],
    g1: [0.014065206, 0.015360518, 1.605395918, -4.821108251],
    g2: [8.389314011, -4.193858954],
    b1: [-0.019628385, 3.122510347, -5.893222355, 2.798380308],
    b2: [-3.608884658, 4.324996022]
};
const dot = (a, b) => a.reduce((sum, val, i) => sum + val * (b[i] || 0), 0);
////////////////////////

//////////////////////// DoublePendulum
class DoublePendulumRK4 {
    constructor(l1 = LSIZE, l2 = LSIZE, m1 = 1, m2 = 1, g = 9.81) {
        this.state = [0,0,0,0];
        this.l1 = l1;
        this.l2 = l2;
        this.m1 = m1;
        this.m2 = m2;
        this.g = g;
        this.x1 = 0.0;
        this.y1 = 0.0;
        this.x2 = 0.0;
        this.y2 = 0.0;
        this.c1 = 0.0;
        this.c2 = 0.0;
        this.c3 = 0.0;
    }

    derivatives([theta1, omega1, theta2, omega2]) {
        const { l1, l2, m1, m2, g } = this;
        const delta = theta2 - theta1;
        const den1 = (m1 + m2) * l1 - m2 * l1 * Math.cos(delta) ** 2;
        const den2 = (l2 / l1) * den1;

        const domega1 = 
            (m2 * l1 * omega1 ** 2 * Math.sin(delta) * Math.cos(delta) +
            m2 * g * Math.sin(theta2) * Math.cos(delta) +
            m2 * l2 * omega2 ** 2 * Math.sin(delta) -
            (m1 + m2) * g * Math.sin(theta1)) / den1;
        
        const domega2 = 
            (-l2 / l1 * domega1 * Math.cos(delta) +
            (-m2 * l2 * omega2 ** 2 * Math.sin(delta) * Math.cos(delta) +
            (m1 + m2) * g * Math.sin(theta1) * Math.cos(delta) -
            (m1 + m2) * l1 * omega1 ** 2 * Math.sin(delta) -
            (m1 + m2) * g * Math.sin(theta2)) / den2);

        return [omega1, domega1, omega2, domega2];
    }
    solveCoordinates() {
        const [theta1, , theta2] =...