|
JavaScript - Canvas Animation Setinterval Help
Hi all,
I'm new to Javascript, and having an issue with getInterval. For my programming languages class we have to create a simulation of waves breaking on a shore from above. I've decided to use a canvas object and Javascript for this animation, but am getting stuck on refreshing the frames. Here is the code I have so far: Code: var shoreline = new Array();
var waves = new Array();
var canWidth = 600;
var canHeight = 400;
var waveNum = 0;
var count = 0;
function wave() {
setupShore();
var canvas = document.getElementById("canvas");
canvas.setAttribute("width",canWidth);
canvas.setAttribute("height",canHeight);
var ctx = canvas.getContext("2d");
createWave();
setInterval(update(ctx), 1000);
}
function update(ctx) {
if(waves.length != 0) {
drawWater(ctx);
drawShore(ctx);
drawWaves(ctx);
updateWaves();
}
}
function drawElement(ctx, x, y, width, height, fillcolor) {
ctx.fillStyle = fillcolor;
ctx.fillRect(x, y, width, height);
}
function setupShore() {
for(var i = 0; i <= canWidth/5; i++) {
shoreline[i] = Math.round(canHeight/5); // + Math.floor(Math.random()*101);
}
}
function createWave() {
/* Wave array setup:
[ [waveID1, [node1, node2, ..., nodeN]],
[waveID2, [node1, node2, ..., nodeN] ] */
waves.push([waveNum, []]);
for(var c = 0; c <= canWidth/5; c++){
waves[waves.length-1][1].push(canHeight);
}
waveNum = waveNum + 1;
}
function destroyWave() {
waves.shift();
}
function drawWater(ctx) {
drawElement(ctx, 0, 0, canWidth, canHeight, "#336699");
}
function drawShore(ctx) {
for(var s = 0; s <= shoreline.length; s++) {
drawElement(ctx, s*5, 0, 5, shoreline[s], "#FFCC00");
}
}
function updateWaves() {
for(var u = 0; u < waves.length; u++) {
var limit = waves[u][1].length;
for(var v = 0; v < limit; v++){
var temp = waves[u][1][v]-5;
waves[u][1][v] = temp;
if(waves[u][1][v] <= shoreline[v]){
destroyWave();
}
}
}
}
function drawWaves(ctx) {
for(var w = 0; w < waves.length; w++) {
for(var n = 0; n <= waves[w][1].length; n++){
y = waves[w][1][n];
drawElement(ctx, n*5, y, 5, 5, "Purple");
}
}
}
As you can see, the idea is that each 5-pixel wide node of the shore and wave are stored in arrays so that the position of each node can differ. The wave() function initializes all the required data, and then calls setInterval on update(). The function update() draws the water, shore, and wave, and then updates the wave position node-by-node. Ideally, setInterval would cause this to happen repeatedly, so that the wave would appear to move closer to the shore every 1000ms. However, this is not the case. It appears as though setInterval is working for one pass of update(), but fails after the first pass. You can tell that this is happening because the wave appears at its starting position, but does not continue to move. Any idea why this is happening? I read somewhere that setInterval can be broken by one-time functions, but I'm not sure. If you'd like to see what it's currently doing in a browser, I've hosted it here. Once I've got this animating properly I can continue my project, but I've hit a roadblock. Thanks in advance for your help, I'm really stuck. Marcus Similar TutorialsAnyone got any suggestions on techniques? The main one I find is to use translate to move the canvas around, which just seems odd to me. I don't even fully understand how it works. But the one I was looking at used clearRect. In examples given looked as though it had to redraw the canvas every frame. I'm just mucking around with a simple poker game, figured i'd have the table in one layer and anything that moves on a top layer? By doing that I could only clear each card as it moved around...yes? Anyone know of a better way of doing things? Hi, I've been working on a clock script that will appear on a frame of my site. Originally, I had used the following to refresh the page every second to the script shows the updated time and seconds. Code: <meta HTTP-EQUIV="Refresh" url="WEBSITE HERE" CONTENT="1"> This worked but unfortunately, there was the refresh "tick" sound every second, which became too annoying! I found the "setInterval" method and tried to apply it to my code. For the purpose of this thread, I've created another script similar to mine, but about 1/20 as long, though the result is the same. I would like it to re-run every second using setInterval, but it only runs once and then disappears. Code: <script type="text/javascript">
<!--
updateClock();
setInterval ("updateClock()", 1000);
function updateClock()
{
var t = new Date();
var seconds = t.getSeconds();
document.write(seconds);
}
// -->
</script>
Any help would be appreciated!! Thanks. Hi Guys, I'm new to javascript and I'm trying to have a delay. I seem to be having trouble with the setInterval(). Will someone please be able to tell me what have I have done wrong? Code:
function viewData()
{
var num = 10;
setLoop(num);
}
function setLoop(i)
{
setInterval(loopOpacity(i), 300);
}
function loopOpacity(i)
{
i--;
var iNum = "0." + i;
document.getElementById("fade").style.opacity = iNum;
if(i == 4)
{
document.getElementById("viewData").className = "view";
clearInterval(int);
}
else
setLoop(i);
}
function closeData()
{
document.getElementById("fade").style.opacity = 1;;
document.getElementById("viewData").className = "close";
}
Thanks for your help, tecmeister. Can anyone tell me how the following code actually works please? I've been trying to work out exactly why I need it all, but can't understand it at all! Code: var speed = 50
var myInterval
var pause
function start(){
window.clearInterval(pause)
myInterval = setInterval("auto()",speed)
}
pause = setInterval("start()",3000)
The body onLoad is set to run start(). If anyone can explain why this code is needed I would be very greatful. In my mouseClick function I have a setInterval which call cursor function. Unfortunately it's not working. Below is my code: Code: var canvas;
var ctx;
var cursor_width = 1;
var cursor_height = 16;
var wait_time = 500;
var repeat_time = 1000;
var height = 22;
var textbox = new Array();
var repeat;
function Class(__proto__) {
var Class = __proto__.hasOwnProperty("constructor") ? __proto__.constructor : (__proto__.constructor = function () {});
Class.prototype = __proto__;
return Class;
}
Class.prototype = Function.prototype;
function init(CanvasName) {
canvas = document.getElementById(CanvasName);
ctx = canvas.getContext("2d");
}
//============================================= Textfield =============================================
textfield = new Class({
constructor: function (x, y, w) {
this.x = x;
this.y = y;
this.w = w;
this.text = new Array();
var coordinates = new Array();
coordinates.x = x;
coordinates.y = y;
coordinates.w = w;
textbox.push(coordinates);
},
display: function () {
ctx.beginPath();
ctx.rect(this.x, this.y, this.w, height);
ctx.closePath();
ctx.stroke();
canvas.addEventListener("mousedown", this.mouseClick, false);
},
cursor : function () {
this.cursor_posX = this.x + 3;
this.cursor_posY = this.y + 3;
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.rect(this.cursor_posX, this.cursor_posY, cursor_width, cursor_height);
ctx.closePath();
ctx.stroke();
setTimeout(this.animateCursor, wait_time);
},
animateCursor :function () {
ctx.strokeStyle = "white";
ctx.stroke();
},
mouseClick: function (evt) {
var mouse_posX = evt.clientX - canvas.offsetLeft;
var mouse_posY = evt.clientY - canvas.offsetTop;
var self = this;
// if mouse coordination is within a texfield display cursor
for (child in textbox){
if((mouse_posX > textbox[child].x && mouse_posX < (textbox[child].x + textbox[child].w)) && (mouse_posY > textbox[child].y && mouse_posY < (textbox[child].y + height))) {
repeat = setInterval(this.cursor, repeat_time);
canvas.addEventListener("keypress", this.displayText, false);
break;
}
else
{
clearInterval(repeat);
canvas.removeEventListener("keypress", this.displayText, false);
}
}
}
});
I tried the following code as well but I received a message telling me it's not a function Code: repeat = setInterval("this.cursor()", repeat_time);
Can anyone help me please Hey guys, Im playing around with JS trying to learn more and i have come across this bit of code Code: <script type="text/javascript">
function print () {
document.write("Words ");
}
setInterval("print()", 1000);
</script>
Just having problems getting it to display correctly in all browsers its displaying the first Words fine in all but will only continue to reprint "Words" in chrome. Thanks any help tips ideas would be great. i have found a very simple ajaxexample on the internet, when this works i can adept it to my site, but it doesn't work :-( anybody sees why? Code: <div align="center" id="timeval">--:--:--</div>
<button id="stop">Stop</button>
<script src="jquery.js"></script>
<script>
$(document).ready(function()
{
//ajaxTime.php is called every second to get time from server
var refreshId = setInterval(function()
{
$('#timeval').load('ajaxTime.php?randval='+ Math.random());
}, 1000);
//stop the clock when this button is clicked
$("#stop").click(function()
{
clearInterval(refreshId);
});
});
</script>
and the phpscript:
ajaxtime.php
<?php
echo date("g:i:s A");
?>
Hello. I'm trying to get a script (and an html page, I guess) to run constantly, and I'm pretty sure I should be using setInterval() to do this. But I'm not familiar enough with Javascript to know what I'm doing wrong, or what I need to fix. This is the code... Code: <html>
<head>
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript">
<!--
function initialize_field() {
var jg = new jsGraphics();
var pixel_spacer = 10;
var field_length = 1000;
var field_width = 600;
jg.drawRect(pixel_spacer,pixel_spacer,field_length,field_width);
//...
return jg
}
function main() {
our_field = initialize_field();
dateobj = new Date();
current_time = dateobj.getMilliseconds();
our_field.drawString("Hello world!",current_time,500);
our_field.paint();
}
-->
</script>
</head>
<body onload="main(); setInterval('main()', 250 )">
</body>
</html>
If I understand setInterval() correctly, this should cause the page to run the main() function every 250 seconds. And within main(), the "Hello world!" string is being drawn at some point between 0 and 1000 pixels, depending upon the number of milliseconds, so it should essentially be scrolling across the screen. But I can only get it to "scroll" if I hammer F5 to repeatedly load the page. How can I get the main() function to run repeatedly? I tried calling main() from main(), but that did not work well... Thanks for any suggestions you have! I have this: function doThese(id){ clearInterval(interval); doThis(id); var interval = function(){ setInterval("doThis('"+id+"')", 2000); } interval(); doThisToo(id); alsoDoThis(id); } Everything works fine together. However when I run the doThese() function a second time(with different id), the interval keeps using the id of the first run. Thought clearinterval would fix that.. it doesn't. Any suggestions? Thx in advance. Hello, I'm having trouble with some scripts conflicting and interrupting my animation. I have a small website build around Joomla and I do my own modules and components.. I've made a simple browser game that uses Javascript's setInterval to highlight some elements. A few days ago I decided to add some advertising banners to cover the server costs but those banners are using Javascript and are interrupting my "game"... Is there a way to stop that from happening ? The script flow goes like this... Step 1. An XMLHttpRequest is being made and the server returns X numbers of elements out of Y total elements that need to get highlighted. Step 2. The elements default state is "blank" then a loop goes through the Y elements and sets a className of "highlight" on the elements that need to get highlighted. Step 3. The setInterval is being called and executes the code that highlights the X elements on every interval. Code: mytimer = setInterval ( animation, 500 ); The animation variable holds a function that changes the elements with class "highlight" to "highlighted". Some pseudo-code: Code: // After all the AJAX requests and more doodle codes...
while(i < num_arr.length) { // num_arr holds the X numbers to get marked as highlight
document.getElementsByTagName('td').item(X).setAttribute('name', 'highlight');
i++;
}
mytimer = setInterval ( animation, 500 );
var animation = function() {
document.getElementsByTagName('td').item(X).className = 'highlighted';
// There is an "if" check to kill the setInterval if no more Xs are found
clearInterval(mytimer);
}
* The above code is just a short example of the actual script * Any help would be much appreciated.. Thank you. How would you use setInterval so that theres a delay each time javascript runs through a certain loop?
thanks for your time - I am more of a hacker than a coder. I have a webpage with a setinterval script I put together which reloads another page's php content into an iframe on the page. It works fine in IE, but doesnt work in FF or Chrome. (I dont want to use a refresh meta though that seems to work in IE & Chrome but not FF.) Here's the script snippet I wrote: Code: <script>
window.setInterval("reloadIFrame();", 5000);
function reloadIFrame() {
document.frames["chat"].location.reload();
}
</script>
<iframe id="chat" src="../chat/buffer.php" width="100%" height="200"></iframe>
on the page's first load, all the info is there in the iframe, but except for IE, updates do not show (the reloads dont seem to occur). I have a javascript that precedes this script containing a setTimeout, but never had issues with it. I can post the entire page code, if needed... thanks again. HWL Hey guys, I'm trying to use the setInterval method for a function, but it's not working. Here's the code. Code: function interval_demo() {
function int_sum() {
alert("I will add two numbers for you, and then add another extra number!");
var n1 = prompt("What's your first number?", "");
var n2 = prompt("What's your second number?", "");
var sum = n1 + n2;
return sum;
}
window.setInterval('int_sum()', 1000);
}
window.onload = interval_demo;
The function works fine if I use window.setInterval('int_sum', 1000). What's the problem with setInterval('int_sum()', 1000)? Correct me if I'm wrong, but isn't that also a valid way to call functions in the setInterval method? Thanks! I found a little chat script online and I wanted to check it out. When I integrated it into a page I created, for some reason this will not work correctly <body onload="setInterval('chat.update()', 1000)"> I tested it with two different browswers open Lets say on two different browser windows you have user1 and user2 if user1 types 'Hello' it will not show up on user2 window but if user2 types 'Hi' then on user2 window it will say user1 says Hello user2 says Hi so basically for user1 to see what user2 has wrote, user1 has to type something first and send it to see what user2 said. hope you understand, if you would like I could post up the code. Hi, all. I am very new to Javascript (and coding generally); the code below is part of my first project. I teach, and just built a flash card / timed-drill site for my students which has a number of setIntervals going on as a central part of its timed functionality. I ran into a problem when trying to create controls that would allow adjustments in the drill timing within the same page. The running setIntervals simply need to be killed when a variable is changed through the user form input, but I cannot seem to do this through any means known to me. I've tried about 15 different approaches and none of them work. Here is one function in my code that runs a setInterval and refuses to be killed by any external stimuli (like, say, a specific killerVariable value): Code: function countdownTimer()
{
var countdown=timeLimit/1000;
var countdownString=countdown+'';
document.getElementById("countdownTimerArea").innerHTML = countdownString;
var killCountdown=setInterval(function() {
countdownString=(countdown-1)+'';
document.getElementById("countdownTimerArea").innerHTML = countdownString;
countdown--;
if (countdown==0)
{
clearInterval(killCountdown);
}
},1000);
}
The clearInterval shown in the code *does* work correctly. However, if I try to set up another conditional, killerVariable-value-driven clearInterval in this function (or even change the above to if (countdown==0 || killerVariable==1), it does not stop the setInterval when killerVariable changes. In the end, because I needed this to go online quickly, I "solved" this problem by simply creating a few different versions of the page with hard-coded variable values and having the form control buttons take the user to those pages rather than trying to stop and restart the timed processes within the same instance of the script. However, this was a real kludge of a solution, and I am still very curious as to what I could have done to actually make this work. Is there anything I could have done short of totally rewriting the function as a loop with setTimeout? Alternately-- and this *does* seem incredibly basic, but I can't get an answer no matter how I phrase my Google and CF queries-- is there some way to hard-kill a currently running function via another function in Javascript? I think that would have solved my problems. If you try some codes and then catch exception, it should catch the exception when there is. However, if there is a setInterval method in the try clause, then the exception cannot be caught... why??? the following works ( a usual method is invoked in the try clause): Code: <script language="javascript" type="text/javascript">
function invoke()
{ var i=0;
return i.x.y;
}
try
{
alert(invoke());
}
catch(ex){ alert(ex); } //Any Exception will be caught.
</script>
if the highlighted line is changed as below (using setInterval method), then it fails... Code: <script language="javascript" type="text/javascript">
function invoke()
{ var i=0;
return i.x.y;
}
try
{
setInterval(alert('invoke())',1000);
}
catch(ex){ alert(ex); } //The Exception will NOT be caught.
</script>
any idea? thx in advance This question probably has an obvious answer, but I'm an ActionScript guy and not a JS guy. I was just playing around with getting intervals to work with JS and ran into this weirdness. The page in question is he http://erikphansen.com/intervaltest.html It will remove the text on the page and add new text every 500ms. Click anywhere to stop it. It works fine in Safari. In Firefox it runs once, then seems to cause Firefox to just hang. The spinner just runs on the tab and nothing gets updated. To make things more unusual, refreshing the page in Firefox doesn't do anything. Here is the code: Code: theCounter = 0;
function writeText(arg)
{
theCounter++
document.write("<p>" + arg + " " + theCounter + "</p>")
}
function stopTheStuff()
{
clearInterval(myInterval);
alert("we stopped it");
}
// Two different ways of setting intervals have the same issue...
// ...and both work in Safari for Mac
// myInterval = setInterval("writeText('write this: ')", 500);
myInterval = setInterval(writeText, 500, "write this: ");
document.onclick = stopTheStuff;
Help show a newbie the way! Thanks a lot, Erik I realize this is an overly simple question, but I'm rather horrible at javascript. What I'm doing is changing an img src and having it loop through images. I want it to only start looping when I click and than stop if I click again. It loops through when I click once, but when I click again it starts changing its rate of image switching. Starts off switching at 1000 milliseconds than upon clicking again it switches through two images quickly and than slows again. Code: var myImage = document.getElementById("mainImage");
var imageArray=["1.jpg","2.jpg","3.jpg","4.jpg" ];
var imageIndex=0;
What I assume is the trouble causing function: Code: function changeImage(){
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if(imageIndex >= imageArray.length) {
imageIndex=0;
}
}
How the trouble function is being called: Code: var imgSwtch=0;
myImage.onclick= function(){
if(imgSwtch==0){
var intervalHandle = setInterval(changeImage,1000);
imgSwtch=1;
console.log("start");
}
else{
clearInterval(intervalHandle);
imgSwtch=0;
console.log("stop");
}
};
I want to create some type of seasonal feel on my Web page where there are falling leaves. I presently have 6 different gif images of leaves that I know I will probably have to load into an array. I also know that I will have to figure out the maximum width & height of the screen, which is different in Internet Explorer and other browsers. My goal is to load the leaves randomly as well using 'Math.floor(Math.random()*6)', if that is correct. Beyond that, I am lost on how to manipulate the Web page to make this animation occur. Any help would be appreciated. Thank you. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Autumn</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<script type="text/javascript">
<!--Hide from incompatible browsers
/* <![CDATA[ */
var widthMax=0;
var heightMax=0;
var leavesLoaded = new Array(6);
for (var i=0; i<6; ++i)
{
leavesLoaded[i] = new Image();
leavesLoaded[i].src = "leaf" + (i+1) + ".gif";
}
function setLeaf()
{
if (navigator.appName == "Microsoft Internet Explorer")
{
widthMax=document.documentElement.clientWidth;
heightMax=document.documentElement.clientHeight;
}
else
{
widthMax=window.innerWidth-14;
heightMax=window.innerHeight;
}
setTimeout('fallingLeaves()',400);
}
/* ]]> */
// Stop hiding from incompatible browsers -->
</script>
</head>
<body onload="setLeaf();" >
<p><img src="images/leaf1.gif" id="leaf" style="position:absolute; left:0px; top:0px; visibility:hidden" alt="Image of a Leaf" /></p>
</body>
</html>
Hi, I have created an animation exercise for an eLearning lesson in a program that uses JavaScript as the scripting for a Windows executable. A retired social worker who creates these eLearning materials as give-away's to help people in the community improve health, it would be a big help to reaching more people if instead of a Windows executable version, the animation could be developed in a web page. A lot more people could view the eLearning and try this exercise which trains people in pacing their breathing. The animation has a 300X300 circle on the canvas with a couple of text input boxes and a start button. The JS < 50 lines of script, but since it was not developed for a web page, it has no tags and it depends on objects like the circle or button (or 2 audio files to create the inhale/exhale sounds) that were already placed on the canvas in the Windows executable program. I'm not very skilled using Dreamweaver CS5, but with help, reading, references can try to convert this JS into a web version, if it's possible. Not sure how to do this and would appreciate any help. I am adding a screenshot of the interface and the JS functions that are called by the start button. //JS: ( bar1 is the variable entered by the use as breaths per minute-BPM; //time1 is the exercise length; the variables initially are set as follows: //time1=15, //volume=100) var time1 function minuteTimer() { breakLoop = false stopLoop = false fork (calcBreathing) for (var i=0;i<time1;i++) { wait(60) breakLoop = true Submit.Show() Text122.Show() Text12.Show() TextInput22.Show() TextInput2.Show() Submit2.Hide() TextInput2.SetTransparency(0,false) TextInput22.SetTransparency(0,false) Text12.SetTransparency(0,false) Text122.SetTransparency(0,false) Text5.SetTransparency(0,false) Frame12.SetTransparency(0,false) Submit.SetTransparency(0,false) TextInput2.Enable(true) TextInput22.Enable(true) Debug.trace("\n minutes elapsed "+(i+1)+"\n") } stopLoop = true } function calcBreathing() { var bar2 = 60/bar1 for (loop = 0;loop<bar1;loop++) { mySound.Play(1,volume) Vector8.Scale(.5,.5, bar2*.3) mySound.Stop() wait (bar2*.05) mySound2.Play(1,volume) Vector8.Scale(-.5,-.5,bar2*.6) mySound2.Stop() wait (bar2*.05) if (breakLoop) break } breakLoop = false if (bar1 > 6) bar1-- if (!stopLoop) calcBreathing() } Any help appreciated. Thanks very much. Kind Regards, saratogacoach |
|||||||