Make a draggable, rotating wheel snap to evenly distributed positions

Question

I have solved the issue.

'use strict';
function Wheel (element, options) {
    var self = this;

    // Variable initialization
    var WIDTH = options.width;
    var HEIGHT = options.height;

    if (!options.image) {
        throw new Error('Image argument missing');
    }

    var image = options.image;

    var showStats = options.showStats || options.stats;

    // Core variables
    var stats;
    var wheel;
    var domElement;
    var scene;
    var camera;
    var renderer;
    var rotationHistory;
    var input;
    var animate;
    var run = false;
    var ROTATION_HISTORY_MAX_LENGTH = 5;

    switch (typeof element) {
        case 'string':
            domElement = document.querySelector(element);
            break;
        default:
            if ('className' in element) {
                domElement = element;
            } else {
                throw new Error('Invalid element: ', element);
            }
    }

    if (typeof element == 'undefined') {
        throw new Error('Invalid element.')
    }

    /* Initializes the WebGL canvas with the wheel plane */
    function setupScene() {
        var VIEW_ANGLE = 45,
            ASPECT = WIDTH / HEIGHT,
            NEAR = 0.1,
            FAR = 10000;

        camera = new THREE.PerspectiveCamera(
            VIEW_ANGLE,
            ASPECT,
            NEAR,
            FAR);

        scene = new THREE.Scene();

        scene.add(camera);

        camera.position.z = 300;

        // Create renderer

        var container = domElement;

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(WIDTH * 2, HEIGHT * 2);
        renderer.setClearColor(0x000000, 0);

        // Create objects

        var wheelMaterial = new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture(image),
            depthWrite: false,
            alphaTest: 0.5
        });

        wheelMaterial.overdraw = true;

        wheel = new THREE.Mesh(
            new THREE.PlaneGeometry(245, 245),
            wheelMaterial);

        scene.add(wheel);

        container.appendChild(renderer.domElement);
    }

    function setupStats() {
        // Init stats
        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        document.body.appendChild(stats.domElement);
    }

    function setup() {
        setupScene();
        if (showStats) {
            setupStats();
        }
    }

    setup();

    // The tick function
    function update() {

        animate.update(); // Process interactions

        self.renderer.render(self.scene, self.camera);

        if (showStats) {
            self.stats.update();
        }
        if (run) {
            window.requestAnimationFrame(update);
        }
    }

    animate = new Animate();

    // Start and run the wheel every animationframe
    function start() {
        self.input = input = new Input();  // Start capturing input
        run = true;
        update();
    }

    /**
     * Animate the wheel
     */
    function Animate() {
        var self = this;

        self.velocity = 0;

        var velocityPositive = 0;

        self.friction = 0.001;

        self.snapThreshold = 0.03;

        self.isSnapping = false;

        var lastAnimationTime;

        self.tween;

        var rotationHistory = [];

        var PARTITIONS = 12;
        var PARTITION_ARC = 1 * Math.PI / (PARTITIONS / 2); // The width of each section

        function update() {
            var currentTime = (new Date).getTime();

            velocityPositive = self.velocity;

            if (velocityPositive < 0) {
                velocityPositive /= -1;
            }

            if (!self.isSnapping
                && !input.isDragging
                && velocityPositive < self.snapThreshold
                && velocityPositive > 0
                && lastAnimationTime) {
                rotationHistory = [];
                snap();
            }

            if (input.isDragging) {
                self.isSnapping = false;
                TWEEN.removeAll();
            }

            if (!self.isSnapping) {
                /**
                 * If the mouse is dragging the wheel
                 */
                if (input.lastMouseCoords && input.isDragging && !input.isSnapping) {
                    // Reset the velocity for the slowdown
                    self.velocity = 0;

                    // Get the delta rotation since last mouse coordinates
                    var deltaRadians = input.mouseCoordsToRadian(
                        input.mouseCoords.x, input.mouseCoords.y)
                        - input.mouseCoordsToRadian(
                            input.lastMouseCoords.x,
                            input.lastMouseCoords.y);

                    // Set the wheel rotation
                    wheel.rotation.z += deltaRadians;

                    // Save the rotation in the history and remove any excessive elements
                    rotationHistory.push({
                        time: currentTime,
                        deltaRad: deltaRadians
                    });

                    while (rotationHistory.length > ROTATION_HISTORY_MAX_LENGTH) {
                        rotationHistory.shift();
                    }
                }

                if (input.isDragging) {
                    input.lastMouseCoords = input.mouseCoords;
                }
                // Continue rotation of the released wheel
                if (!input.isDragging
                    && !input.lastMouseCoords
                    && lastAnimationTime
                    && !self.isSnapping) {

                    var delta = currentTime - lastAnimationTime;

                    if (self.velocity == 0) {
                        var meanVelocityOverTime = getMeanVelocity(rotationHistory);

                        self.velocity = meanVelocityOverTime;
                    } else if (!self.isSnapping && !self.isDragging) {
                        var currentIsNegative = self.velocity < 0 ? true : false;

                        var currentVelocity = self.velocity;

                        if (currentIsNegative) {
                            currentVelocity /= -1;
                        }

                        var newVelocity = applyFakeFriction(currentVelocity,
                                                            delta);

                        if (newVelocity < 0) {
                            self.velocity = 0;
                            rotationHistory = [];
                        } else {
                            if (currentIsNegative) {
                                // Revert to old polarity
                                newVelocity /= -1;
                            }
                            self.velocity = newVelocity;
                        }
                    }

                    wheel.rotation.z += self.velocity * delta;

                }

                if (!self.isSnapping) {
                    while (wheel.rotation.z > 2 * Math.PI) {
                        wheel.rotation.z -= 2 * Math.PI;
                    }

                    while (wheel.rotation.z < - (2 * Math.PI)) {
                        wheel.rotation.z += 2 * Math.PI;
                    }
                }
            }

            // Update snap tween
            TWEEN.update();

            // Update the history record
            lastAnimationTime = currentTime;
        }


        function applyFakeFriction(velocity, time) {
            /*
            var currentRotation = wheel.rotation.z;

            var nearestBorder = 0;
            var nearestBorderDistance = 100;

            for (var i = 0; i < PARTITIONS; i++) {
                var partition =  PARTITION_ARC * i - PARTITION_ARC * PARTITIONS / 2;
                var distance = currentRotation - partition;

                if (distance < 0) {
                    distance /= -1;
                }

                if (distance < nearestBorderDistance) {
                    console.log('distance is less than nearestBorderDistance')
                    nearestBorder = partition;
                    nearestBorderDistance = distance;
                    if (nearestBorderDistance < 0) {
                        nearestBorderDistance /= -1;
                    }
                }
            }


            console.log('nearestBorderDistance: ', nearestBorderDistance);
            */

            for (var i = 0; i < time; i++) {
                velocity -= self.friction; // * (10000 * wheelSlowDownVelocityPositive); // * (nearestBorderDistance * BORDER_FRICTION);
            }
            return velocity;
        }


        function getNearestWedge() {
            var currentRotation = wheel.rotation.z;

            var nearestBorder = 0;
            var nearestBorderDistance = 100;

            for (var i = 0; i < PARTITIONS; i++) {
                var partition =  PARTITION_ARC * i - PARTITION_ARC * PARTITIONS / 2;
                var distance = currentRotation - partition;

                if (distance < 0) {
                    distance /= -1;
                }

                if (distance < nearestBorderDistance) {
                    console.log('distance is less than nearestBorderDistance')
                    nearestBorder = partition;
                    nearestBorderDistance = distance;
                    if (nearestBorderDistance < 0) {
                        nearestBorderDistance /= -1;
                    }
                }
            }

            return {
                position: nearestBorder,
                distance: nearestBorderDistance
            };
        }

        function snap() {
            console.log('Snapping');
            if (self.isSnapping) {
                console.error('Already snapping, aborting.');
                return;
            }

            self.isSnapping = true;
            self.velocity = 0;
            var nearest = getNearestWedge();

            TWEEN.removeAll();

            console.log('nearest: ', nearest.position, nearest.distance)

            self.tween = new TWEEN.Tween({r: wheel.rotation.z})
                .to({r: nearest.position})
                .easing(TWEEN.Easing.Elastic.Out)
                .onUpdate(onUpdate)
                .onComplete(onComplete)
                .start();

            function onUpdate() {
                //console.log('current: ', this.r, self.velocity);
                wheel.rotation.z = this.r;
            };

            function onComplete() {
                self.isSnapping = false;
                console.log('Not snapping');;
            }

        }

        function getMeanVelocity(history) {
            if (history.length <= 1) {
                return 0;
            }

            var movements = [];
            var startTime = history[0].time;
            var totalTimeElapsed = 0;

            // Start from the second item in deltaRadians
            for (var i = 1; i < history.length; i++) {
                var item = history[i];

                var movement = item.deltaRad;
                movements.push(item.deltaRad);

                var movementTimeDelta = item.time - startTime - totalTimeElapsed;

                if (movementTimeDelta < 0) {
                    console.error('movementTimeDelta for history entry #' +
                        i + ' has travelled back in time somehow.');
                }

                totalTimeElapsed += movementTimeDelta;
            }

            var sum = movements.reduce(function (a, b) {
                return a + b;
            });

            return sum / totalTimeElapsed;
        }

        // Internal utilities
        function log() {
            if (console && _log) {
                var args = Array.prototype.slice.call(arguments, 0);
                args.unshift('Animate: ')
                console.log.apply(console, args);
            }
        }

        // exports
        this.update = update;
        this.rotationHistory = rotationHistory;
        this.PARTITIONS = PARTITIONS;
        this.PARTITION_ARC = PARTITION_ARC;
        this.snap = snap;

        return this;
    }


    /**
     * Handles input to the wheel.
     */
    function Input() {
        var self = this;
        var _log = true;

        domElement.addEventListener('mousedown', onDragStart, false);
        //domElement.addEventListener('touchstart', onDragStart, false);

        domElement.addEventListener('mouseup', onDragEnd, false);
        domElement.addEventListener('mouseout', onDragEnd, false);
        //domElement.addEventListener('touchend', onDragEnd, false);

        domElement.addEventListener('mousemove', onMouseMove, false);
        //domElement.addEventListener('touchmove', onMouseMove, false);

        function onDragStart(e) {
            self.isDragging = true;
            log('Drag start');
            self.mouseCoords = pageCoordsToCanvasCoords(e);
            animate.rotationHistory = [];
        }

        function onDragEnd(e) {
            self.isDragging = false;
            self.lastMouseCoords = null;
            self.mouseCoords = null;
            log('Drag end');
        }

        function onMouseMove(e) {
            e.preventDefault();
            self.mouseCoords = pageCoordsToCanvasCoords(e);
        }

        function pageCoordsToCanvasCoords(e) {
            var canvasX, canvasY;

            if ('touches' in e && e.touches.length > 0) {
                canvasX = e.touches[0].pageX;
                canvasY = e.touches[0].pageY;
            } else {
                canvasX = e.pageX
                canvasY = e.pageY
            }

            canvasX -= e.target.offsetLeft;
            canvasY -= e.target.offsetTop;

            // console.log(canvasX, canvasY);

            return {
                x: canvasX,
                y: canvasY
            };
        }

        function mouseCoordsToRadian(x, y) {
            var origoX = WIDTH / 2.0,
                origoY = HEIGHT / 2.0;

            x = x - origoX;
            y = y - origoY;

            var atan = Math.atan2(x, y);
            return atan;
        }

        // exports
        this.mouseCoordsToRadian = mouseCoordsToRadian;

        function log() {
            if (console && _log) {
                var args = Array.prototype.slice.call(arguments, 0);
                args.unshift('Input: ')
                console.log.apply(console, args);
            }
        }
        return this;
    }

    // Internal utils
    function log() {
        if (console && _log) {
            var args = Array.prototype.slice.call(arguments, 0);
            args.unshift('Wheel: ')
            console.log.apply(console, args);
        }
    }

    // exports
    self.start = start;
    self.update = update;
    self.scene = scene;
    self.camera = camera;
    self.wheel = wheel;
    self.renderer = renderer;
    self.stats = stats;
    self.domElement = domElement;
    self.input = input;
    self.animate = animate;

    return self;
}