D3 Examples - Spinning Wheel

Spinning Wheel

Simulation of the visual illusion that occurs when the visual capture frame-rate is unable to absorb all the intermediary positions of a spinning object. Patterns start emerging at angular velocities that are multiples of even circle divisions.

The wheel's angular velocity increases linearly from 0 to infinity. Its constant acceleration is implemented using the force-constant force type, part of the d3-force simulation engine.

xxxxxxxxxx
 
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.js"></script>
    <script src="//unpkg.com/d3-force-constant"></script>
​
    <link rel="stylesheet" href="style.css">
</head>
​
<body>
​
    <div id="controls">
        # spokes:
        <input type="number" min="1" max="60" step="1" value="1" oninput="onSpokesChange(this.value)">
    </div>
    <div class="info-section">
        Angular velocity: <span class="angle-info"></span>&deg;/frame
        <br>
        (<span class="freq-info"></span> Hz)
    </div>
    <svg id="canvas"></svg>
​
    <script src="index.js"></script>
</body>
    