...

View Full Version : Where do I place "setInterval" in this code?



dave204
03-01-2012, 12:41 PM
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:


<!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>

dave204
03-01-2012, 02:49 PM
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!!


<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum