JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
    <canvas id="canvas" width="1000" height="200"></canvas>

    <br>

    <button onclick="start()">запуск</button>
    <button onclick="stop(); init(); render();">сброс</button>

    <style>
        #canvas {
            outline: 1px solid #000;
        }
    </style>

    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');


        var c = 1;
        var timeBetweenPlanets = 1000000;
        var accelerationTime = 100;
        var planetsCount = 3;  // вместе со стартовой

        var requiredVelocity = 0.8 * c;
        var spaceBetweenPlanets = requiredVelocity * timeBetweenPlanets;

        var totalAccDistance = 0;
        var distanceBetweenLines = 1 * c;
        var lastPlanetIndex = planetsCount - 1;

        var planetsCoords = [];
        var shipCoords = {};

        var planetsTime = 0;

        var currentVelocity = 0;

        var intervalID = null;
        var intervalFunction = makeAccStep;
        var msec = 100;


        init();
        render();

        function init()
        {
            var i;

            for (i = 0; i < planetsCount; i++) {
                planetsCoords[i] = {x: i * spaceBetweenPlanets,  y: 0};
            }

            totalAccDistance = 0;
            // среднее расстояние [0.004, 0.012, 0.020, ..., 0.780, 0.788, 0.796]
            for (i = -accelerationTime + 1; i <= 0; i++) {
                var currentSecond = i + accelerationTime;
                var startVelocity = requiredVelocity * (currentSecond - 1) / accelerationTime;
                var endVelocity = requiredVelocity * currentSecond / accelerationTime;
                var avgVelocity = (startVelocity + endVelocity) / 2;

                totalAccDistance += avgVelocity;
                totalAccDistance = round(totalAccDistance);
            }

            shipCoords = {x:...