Topic: Water effect (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=31529" title="Pages that link to Topic: Water effect (Page 1 of 1)" rel="nofollow" >Topic: Water effect <span class="small">(Page 1 of 1)</span>\$

X7JAY7X Neurotic (0) Inmate Newly admitted From: Insane since: Dec 2009	posted 12-09-2009 04:17 I have done alot of searching and cannot find what I am looking for. I want to be able to use the water effect in Javascript. All I can find is for Java. I know that Java is a better platform for this but my application requires javascript. Is it possible??
reisio Paranoid (IV) Inmate From: Florida Insane since: Mar 2005	posted 12-09-2009 15:41 Can you be any more specific?
racerX Nervous Wreck (II) Inmate From: Portland Oregon Insane since: Jun 2006	posted 12-09-2009 16:46 here's what you be looking for. http://timelessname.com/canvas/experiment01/
poi Paranoid (IV) Inmate From: Norway Insane since: Jun 2002	posted 12-09-2009 17:03 racerX: Your code tries to drawImage(...) one line that is completely outside of the source image and therefore throws an INDEX_SIZE_ERR in proper implementations of Canvas. See the Specification of CanvasRenderingContext2D.drawImage quote: If the source rectangle is not entirely within the source image, or if one of the sw or sh arguments is zero, the implementation must raise an INDEX_SIZE_ERR exception. You'd better change your loop to something like: code: for( var i=0; i<img.height; i++ ) { context.drawImage ( img, 0, i, img.width, 1, 40+Math.sin(4(step+i/20.0))(i/2.0), i, img.width, 1 ); } HTH (Edited by poi on 12-09-2009 17:05)
racerX Nervous Wreck (II) Inmate From: Portland Oregon Insane since: Jun 2006	posted 12-10-2009 00:14 I didn't actually write that code. I did use it to make this script, which seems to run no problem. 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"> <head> <title>Canvas Stuff</title> </head> <body> <h1>Canvas Stuff</h1> <h3>Water like image reflection</h3> <canvas id="can" width="820" height="800" style="background:black"></canvas> <script src="excanvas.js"></script> <script> var img = new Image(); var step = 0; function animate(){ var canvas = document.getElementById("can"); var context = canvas.getContext("2d"); context.fillStyle = "rgb(0,0,0)"; context.fillRect (0, img.height, img.width+60, img.height); var sinetable=new Array() for(var i = 0; i < img.height; i++){sinetable[i]=Math.sin(15(i/20.0))} for(var i = 0; i < img.height; i++){ context.drawImage( img, 0, 0+(img.height-i), img.width, 1, 40+Math.sin(12(step+i/20.0))(i/30.0), //(40+sinetable[step])+Math.sin(5(step+i/20))(i/50.0), img.height-1+i.3, img.width, .2); } step+= 1//0.0225; if (step==img.height){step-=img.height} setTimeout("animate();",200); } img.onload = function(){ var canvas = document.getElementById("can"); var context = canvas.getContext("2d"); context.drawImage(img,40, -1); setTimeout("animate();",100); } img.src = "http://tbn2.google.com/images?q=tbn:Nv5GSUrBhjC9RM:http://www.americanthinker.com/Obama%2520reuters%2520halo.jpg"; </script> </body> </html>
X7JAY7X Obsessive-Compulsive (I) Inmate From: Insane since: Dec 2009	posted 12-10-2009 02:09 I am looking for a transparent water effect. When a person clicks on the screen I want a ripple effect across the screen, like water. I found many examples in JAVA but not javascript. Would this eat the processor time?
reisio Paranoid (IV) Inmate From: Florida Insane since: Mar 2005	posted 12-10-2009 04:30 Sort of rudimentary one here: http://atsushi-takayama.com/junk/ripple/
poi Paranoid (IV) Inmate From: Norway Insane since: Jun 2002	posted 12-10-2009 11:22 (Edited by poi on 12-10-2009 11:53)
poi Paranoid (IV) Inmate From: Norway Insane since: Jun 2002	posted 12-10-2009 11:52 racerX: Did you read the snippet of specification I pasted ? Your code does NOT comply to it and throws an INDEX_SIZE_ERR exception in standards compliant browsers. The fact that it works in your browser of choice is a flaw in its implementation. You should fix your JavaScript code. Really. Side note: setTimeout("animate();",100 ); makes no sense. Since in your case you don't pass any argument to the animate function, you'd much better use setTimeout( animate, 100 ); and save the JavaScript engine the hassle of having another string of JavaScript code to parse and execute.
racerX Nervous Wreck (II) Inmate From: Portland Oregon Insane since: Jun 2006	posted 12-20-2009 02:06 Thanks for pointing that out poi. I'd remove it, but I'm too late to edit.
argo_navis Nervous Wreck (II) Inmate From: Insane since: Apr 2008	posted 01-09-2010 01:39 let us see if this stuff still works..
coach Nervous Wreck (II) Inmate From: Insane since: May 2011	posted 05-31-2011 11:03 Edit TP: spam removed

Topic: Water effect (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=31529" title="Pages that link to Topic: Water effect (Page 1 of 1)" rel="nofollow" >Topic: Water effect <span class="small">(Page 1 of 1)</span>\$

X7JAY7X
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Dec 2009

posted 12-09-2009 04:17

I have done alot of searching and cannot find what I am looking for. I want to be able to use the water effect in Javascript. All I can find is for Java. I know that Java is a better platform for this but my application requires javascript. Is it possible??

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted 12-09-2009 15:41

Can you be any more specific?

racerX
Nervous Wreck (II) Inmate

From: Portland Oregon
Insane since: Jun 2006

posted 12-09-2009 16:46

here's what you be looking for.
http://timelessname.com/canvas/experiment01/

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted 12-09-2009 17:03

racerX: Your code tries to drawImage(...) one line that is completely outside of the source image and therefore throws an INDEX_SIZE_ERR in proper implementations of Canvas. See the Specification of CanvasRenderingContext2D.drawImage

quote:
If the source rectangle is not entirely within the source image, or if one of the sw or sh arguments is zero, the implementation must raise an INDEX_SIZE_ERR exception.

You'd better change your loop to something like:

code:

for( var i=0; i<img.height; i++ )
{
    context.drawImage
    (
        img,

        0,
        i,
        img.width,
        1,

        40+Math.sin(4*(step+i/20.0))*(i/2.0),
        i,
        img.width,
        1
    );
}

HTH

(Edited by poi on 12-09-2009 17:05)

racerX
Nervous Wreck (II) Inmate

From: Portland Oregon
Insane since: Jun 2006

posted 12-10-2009 00:14

I didn't actually write that code. I did use it to make this script, which seems to run no problem.

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">
  <head>
    <title>Canvas Stuff</title>
  </head>
  <body>
    <h1>Canvas Stuff</h1>
    <h3>Water like image reflection</h3>

    <canvas id="can" width="820" height="800" style="background:black"></canvas>
<script src="excanvas.js"></script>
   <script>
	var img = new Image();

	var step = 0;

	function animate(){
	        var canvas = document.getElementById("can");
		var context = canvas.getContext("2d");
	        
	        context.fillStyle = "rgb(0,0,0)";
	        context.fillRect (0, img.height, img.width+60, img.height);
	        
 
	var sinetable=new Array()        
	      
  for(var i = 0; i < img.height; i++){sinetable[i]=Math.sin(15*(i/20.0))}
 for(var i = 0; i < img.height; i++){
	        	context.drawImage(
			img,
			0,
			0+(img.height-i),
			img.width,
	                1,
	                40+Math.sin(12*(step+i/20.0))*(i/30.0),
//(40+sinetable[step])+Math.sin(5*(step+i/20))*(i/50.0),
	                img.height-1+i*.3,
	                img.width,
	                .2);
	        }

	        step+= 1//0.0225;
if (step==img.height){step-=img.height}
	        setTimeout("animate();",200); 
		}

	img.onload = function(){
	        var canvas = document.getElementById("can");
		var context = canvas.getContext("2d");

	        context.drawImage(img,40, -1);

	        setTimeout("animate();",100); 
	}
	img.src = "http://tbn2.google.com/images?q=tbn:Nv5GSUrBhjC9RM:http://www.americanthinker.com/Obama%2520reuters%2520halo.jpg";

    </script>
  </body>
</html>

X7JAY7X
Obsessive-Compulsive (I) Inmate

From:
Insane since: Dec 2009

posted 12-10-2009 02:09

I am looking for a transparent water effect. When a person clicks on the screen I want a ripple effect across the screen, like water.

I found many examples in JAVA but not javascript. Would this eat the processor time?

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted 12-10-2009 04:30

Sort of rudimentary one here: http://atsushi-takayama.com/junk/ripple/

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted 12-10-2009 11:22

(Edited by poi on 12-10-2009 11:53)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted 12-10-2009 11:52

racerX: Did you read the snippet of specification I pasted ? Your code does NOT comply to it and throws an INDEX_SIZE_ERR exception in standards compliant browsers. The fact that it works in your browser of choice is a flaw in its implementation. You should fix your JavaScript code. Really.

Side note: setTimeout("animate();",100 ); makes no sense. Since in your case you don't pass any argument to the animate function, you'd much better use setTimeout( animate, 100 ); and save the JavaScript engine the hassle of having another string of JavaScript code to parse and execute.

racerX
Nervous Wreck (II) Inmate

From: Portland Oregon
Insane since: Jun 2006

posted 12-20-2009 02:06

Thanks for pointing that out poi. I'd remove it, but I'm too late to edit.

argo_navis
Nervous Wreck (II) Inmate

From:
Insane since: Apr 2008

posted 01-09-2010 01:39

let us see if this stuff still works..

coach
Nervous Wreck (II) Inmate

From:
Insane since: May 2011

posted 05-31-2011 11:03

Edit TP: spam removed

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Water effect (Page 1 of 1)

Insert Slimies »

Insert UBB Code »

Topic: Water effect (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=31529" title="Pages that link to Topic: Water effect (Page 1 of 1)" rel="nofollow" >Topic: Water effect <span class="small">(Page 1 of 1)</span>\$