Roulette Experiment

Experimental Roulette wheel

by joshmoto

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <div style="z-index: 0; position: relative;top: 80px;max-width:1000px;">
        <div style=text-align:center;>  <span class="description"  id="score">&nbsp;</span>      </div>  
        <img class="roulette_wheel" src="https://drive.google.com/uc?export=view&id=0Bwn2d7AS_6YLZmRPbjl1dDFPSG8" onclick="roulette()" />
        <img class="roulette_center" src="https://www.dropbox.com/s/52x8iyb1nvkjm0w/wheelCenter.png?raw=1"  onclick="roulette_spin(this)">
        <div class="anchor"></div>
    </div>

CSS

.description{
            position: absolute;
           /* top: -68px;
            left: 611px; */
            top: -37px;
            left: 102px;
            font-weight: 700;
            font-size: 42px;
            font-family: Poppins;
            font-weight: 700;
            font-size: 2.5rem;
            background-color: red;
            background-image: linear-gradient(45deg, red, orange);
            background-size: 100%;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align:center;
        }
        /* .roulette_center {
            position: absolute;
            left: 501px;
            cursor: pointer;
            top: 505px;
        } */
        .roulette_center {
            position: absolute;
         /*   left: 256px;  */
            left: 254px;
            cursor: pointer;
            top: 253px;
        }
        .roulette_center:hover {
            transform: scale(1.01);
        }

      .roulette_wheel{
        touch-action:auto;

      }
        .roulette_wheel:hover{
            cursor: move; /* fallback: no `url()` support or images disabled */
            cursor: url(images/grab.cur); /* fallback: Internet Explorer */
            cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
            cursor:    -moz-grab; /* Firefox 1.5-26 */
            cursor:         grab; /* W3C standards syntax, should come least */
      }

        .roulette_wheel:active{
            cursor: -webkit-grabbing;
            cursor:    -moz-grabbing;
            cursor:         grabbing;
      }

        .anchor{
            position: absolute;
          /*  top: -12px;
            left: 791px;  */
            top: 22px;
            left: 353px;
            background-color: red;
            width: 1px;
            height: 80px;
        }

JavaScript

var values = [
       "Financial Factors", 
       "Environmental Factors", 
       "Social Wellness Factors", 
       "Physical Factors", 
       "Intellectual Factors", 
       "Emotional Factors", 
       "Spiritual Well-Being Factors"
       ];

       var spins = [360, 1131, 1543, 1954, 2366, 2777, 3189];
       var num = 0;
       var speed = 0;
        var segments = 7;
        // should init angle so that the cursor is at the center of the desired value,
        // this is just to test the offset is right
        var angle = getAngleFor("Certified Kosher");
        // how much of the speed is kept at each update step (0 < i < 1, the bigger the longer the wheel spins)
        var inertia = 0.989;
        var minSpeed = 7;
        // how much randomness in initial push speed
        var randRange = 7;
        // strongest absolute force that an attractor can exerce (is squashed to before scaling is applied)
        var maxAttractionForce = 0.5;
        // scale attraction force
        var attractionForceFactor = 0.02;
        var rouletteElem = document.getElementsByClassName('roulette_wheel')[0];
        var rouletteElem2 = 0;
        
        var scoreElem = document.getElementById('score');

        // offset the display angle so that angle 0 is at the edge of the first slice
        var offset = 26.42;
       

        function roulette_spin(btn) {
            // erase score
            scoreElem.innerHTML = '&nbsp;';
            // set initial speed randomly
            speed = Math.floor(Math.random() * randRange) + minSpeed;
            requestAnimationFrame(doAnimation);
        }

        function getSliceIndex(angle) {
            return Math.floor(((angle / 360) * values.length));
        }

        function getCircularDist(a, b) {
            // assuming both a and b are positive angles 0 <= angle <= 360
            // find shortest oriented distance
            // example: if a is 350 degrees and b is 10 degrees what's the actuals angular dist...