Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Where do I place "setInterval" in this code?

    Hi there!
    I'm trying to load up an array of images in HTML5, which will mimic a "video".
    I've put together code for creating an array of images, which will be drawn by the draw() function, but I'm struggling to find the best way to achieve a setInterval ie make the "video" of images run at 30 fps.

    At present, when I click the "Draw" button, the images load up, one after the other, just as in a video, but I can't seem to control this loading up speed.
    Can anyone help? I'm sure I'm very close to a solution!
    Here is my code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <!--
    
      Created using /
      Source can be edited via /odexi/edit
    
    -->
    <head>
    <title>Sandbox</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
    body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
    </style>
    </head>
    <body>
      <input type="button" id="drawButton" value="draw" />
      <br/>
      
      <canvas id="canvas" width="1000px" height="800px">
    
      </canvas>
    <script>
    function init(){ 
    var fps = 1000; // frames / second
        const timeInterval = 1000 / fps; // milliseconds  
      setInterval(draw,timeInterval);
      draw();
    }
        function draw() { 
    	//var fps = 30; // frames / second
        //const timeInterval = 1000 / fps; // milliseconds
          var ctx = document.getElementById('canvas').getContext('2d'), 
              img, i, image_array = [10]; 
     
          image_array.push("track1.png"); 
          image_array.push("track2.png");
          image_array.push("track3.png"); 
    	  image_array.push("track4.png");
    	  image_array.push("track5.png");
    	  image_array.push("track6.png");
    	  image_array.push("track7.png");
    	  image_array.push("track8.png");
    	  image_array.push("track9.png");
    	  image_array.push("track10.png");
          // ... 
     
          for (i = 0; i < image_array.length; i++) { 
            img = new Image(); 
            img.src = image_array[i]; 
            img.onload = (function(img, i){ 
              return function () {
    			//setInterval(draw, timeInterval);
                ctx.drawImage(img,0,0); 
              } 
            })(img, i); 
          } 
        } 
    
    window.onload = function () {
      document.getElementById('drawButton').onclick = function () {
        draw();
      };
    };
    </script>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have since learnt where to re-position the setInterval, but I'm getting repeat loading of the array:
    Where am I going wrong??
    Thanks anyone!!
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <!--
    
      Created using /
      Source can be edited via /odexi/edit
    
    -->
    <head>
    <title>Sandbox</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
    body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
    </style>
    </head>
    <body>
      <input type="button" id="drawButton" value="draw" />
      <br/>
      
      <canvas id="canvas" width="1000px" height="800px">
    
      </canvas>
    <script>
    //function init(){ 
    //var fps = 30; // frames / second
        //const timeInterval = 1000 / fps; // milliseconds  
      //setInterval(draw,timeInterval);
      //draw();
    //}
        function draw() { 
    	var fps = 30; // frames / second
        const timeInterval = 1000 / fps; // milliseconds
          var ctx = document.getElementById('canvas').getContext('2d'), 
              img, i, image_array = [10]; 
     
          image_array.push("track1.png"); 
          image_array.push("track2.png");
          image_array.push("track3.png"); 
    	  image_array.push("track4.png");
    	  image_array.push("track5.png");
    	  image_array.push("track6.png");
    	  image_array.push("track7.png");
    	  image_array.push("track8.png");
    	  image_array.push("track9.png");
    	  image_array.push("track10.png");
          // ... 
     
          for (i = 0; i < image_array.length; i++) { 
            img = new Image(); 
            img.src = image_array[i]; 
            img.onload = (function(img, i)
    		{ 
              return setInterval(function () {
    			//setInterval(draw, timeInterval);
                ctx.drawImage(img,0,0); 
              }, timeInterval);
            })(img, i); 
          } 
        } 
    
    window.onload = function () {
      document.getElementById('drawButton').onclick = function () {
        draw();
      };
    };
    </script>
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •