title: how to attach a range/input slider onto a canvas animation?
body: <p>I am aiming to attach a slider onto this codepen animation, so the user can edit the speed of the animation.</p>
  
  <p>At the moment, I am not getting any errors, but I am not getting the value from the input slider passed through to the animation.</p>
  
  <pre><code>   this.speed     = dotSpeed;
  </code></pre>
  
  <p>I am aiming to take the value from the slider, create a variable and put it through the "function Circle" properties. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var dotArray = [];
  
  function threeDotSliderChangeSpeed (value) {
                      document.getElementById('threeDotSpeed').innerHTML = value;
                      dotSpeed = +value;   // + will convert the string to number
                  for (var i = 0; i &lt; dotArray.length; i++) {
                      dotArray[i].speed = Math.round(1 * dotSpeed);
                  }
              }
              
  
   var canvas = document.getElementById( 'canvas2' ),
    c = canvas.getContext( '2d' ),
    i = 0,
    rowOne = [],
    rowTwo = [],
    rowThree = [],
    length = canvas.width * 0.4,
    origin = [ canvas.width / 2, canvas.height / 2 ],
    angle = 90,
          dotSpeed = 2,
    loop;
  
   function Circle( args ) {
    this.position  = [ 0, 0 ];
    this.angle     = 30;
    this.speed     = dotSpeed;
    this.offset    = 1;
    this.length    = 100;
    this.size      = 5;
    this.color     = '#fff';
    this.direction = 'grow';
  
    if ( 'undefined' !== typeof args.position )
     this.position = args.position;
    if ( 'undefined' !== typeof args.angle )
     this.angle = args.angle;
    if ( 'undefined' !== typeof args.speed )
     this.speed = args.speed;
    if ( 'undefined' !== typeof args.length )
     this.length = args.length;
    if ( 'undefined' !== typeof args.size )
     this.size = args.size;
    if ( 'undefined' !== typeof args.color )
     this.color = args.color;
    if ( 'undefined' !== typeof args.offset ) {
     this.offset = args.offset;
     this.length = canvas.width * this.offset * 0.03
    }
   }
  
   Circle.prototype.render = function() {
    this.move();
    this.draw();
   }
  
   Circle.prototype.draw = function() {
    c.fillStyle = this.color;
    c.beginPath();
    c.arc( this.position[0], this.position[1], ( this.size / 2 ), 0, Math.PI * 2, true );
    c.closePath();
    c.fill();
   }
  
   Circle.prototype.move = function() {
    this.angle = ( this.angle &lt; 360 ) ? this.angle + this.speed : 0;
  
    if ( 'grow' == this.direction ) {
     this.length++;
     this.direction = ( 150 &gt;= this.length ) ? 'grow' : 'shrink';
    } else {
     this.length--;
     this.direction = ( 50 &lt;= this.length ) ? 'shrink' : 'grow';
    }
  
    this.position[0] = this.length * Math.sin( this.angle * ( Math.PI / 180 ) );
    this.position[1] = this.length * Math.cos( this.angle * ( Math.PI / 180 ) );
  
    this.position[0] = this.position[0] + origin[0];
    this.position[1] = this.position[1] + origin[1];
   }
  
   for ( i = 1; i &lt; 10; i++ ) {
    var offset = 1;
    rowOne.push( new Circle( {
     angle: 0,
     offset: i
    } ) );
    rowTwo.push( new Circle( {
     angle: 120,
     offset: i
    } ) );
    rowThree.push( new Circle( {
     angle: 240,
     offset: i
    } ) );
   }
  
   function render() {
    c.fillStyle = 'rgba( 0, 0, 0, 0.025 )';
    c.fillRect( 0, 0, canvas.width, canvas.height );
    for ( i = 0; i &lt; 9; i++ ) {
     rowOne[i].render();
     rowTwo[i].render();
     rowThree[i].render();
    }
   }
  
   (function animate() {
    render();
    loop = setTimeout( animate, 40 );
   })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;CodePen - 3 dotted-line canvas animation.&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;script type="text/javascript" src="jquery-2.1.0.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
       &lt;canvas id="canvas2" width="400" height="400"&gt;&lt;/canvas&gt;
       &lt;p id="attribute"&gt;Speed &lt;/p&gt;
       &lt;span id="threeDotSpeed" class="sliderSpan"&gt;5&lt;/span&gt;
       &lt;input type="range" min="0" max="10" value="5" step="1" onchange="threeDotSliderChangeSpeed(3)"/&gt;
       &lt;br /&gt; &lt;br /&gt;
       &lt;script src="js/index.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a video of another one I got going, using the same method.</p>
  
  <p><a href="https://www.youtube.com/watch?v=vjZ6CfQ2WrY&amp;feature=youtu.be" rel="nofollow">https://www.youtube.com/watch?v=vjZ6CfQ2WrY&amp;feature=youtu.be</a></p>