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 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 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 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 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 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 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 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 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 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 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 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 posted 05-31-2011 11:03
Edit TP: spam removed


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu