HTML5 canvas liquid effect

Liquid effect using HTML5 canvas implementation.
Results as shown below:


The mouse to click on the water surface fluctuation, viscosity changing roller. Click on the upper left corner of the block of color change the color of the liquid.
Well go and try it -> online presentation (including source code)

Because of a rush to write, no further optimize the code, comments are also almost No. Interested students can leave a message to me.

Started by Cherry at November 25, 2016 - 2:20 PM



Posted by Gustave at December 08, 2016 - 2:50 PM

Not open

Posted by Drew at December 12, 2016 - 2:55 PM

Try the connection, or copy the following code running locally
The following code is HTML, js, css.
HTML source code:
<html>	
  <body>
  <div id='container'>
      <canvas id="canvas">
       Oh, your browser does not support canvas. Sorry~
      </canvas>
	  <span  id="blue" onclick="blue()"></span>
      <span id="purple" onclick="purple()"></span>
      <span id="black" onclick="black()"></span>
  </div>
  </body>
</html>

JS source code:
var canvas,ctx;
	var vertexes = [];
	var diffPt = [];var autoDiff = 1000;
	var verNum = 250;
	var canvasW = window.innerWidth+40;
	var addListener = function( e, str, func ) {
		if( e.addEventListener ) {
			e.addEventListener( str, func, false );
		}else if( e.attachEvent ) {
			e.attachEvent( "on" + str, func );
		}else {
			
		}
	};
	
	addListener( window, "load", init );
	
	function resize(){
		canvasW = document.getElementById('container').offsetWidth + 40;	initCanvas(canvasW,window.innerHeight);
			var cW = canvas.width;
			var cH = canvas.height;
			for(var i = 0;i <verNum;i++)
				vertexes[i] = new Vertex(cW / (verNum -1) * i , cH / 2,cH/2);
			initDiffPt();
		var win_3 = window.innerWidth/3;

	}
	function init(){
		resize();
		var FPS =30;
		var interval = 1000 / FPS >> 0;
		var timer = setInterval( update, interval );
		if ( window.addEventListener ) addListener( window, "DOMMouseScroll", wheelHandler );
		addListener( window, "mousewheel", wheelHandler );
		addListener(window,"resize",resize);
		
		canvas.onmousedown=function(e)
		{
				//div.innerHTML=e.clientX+":"+e.clientY;
				//var mx = document.getElementById("mx");
				
				//alert(1);
		var mouseX,mouseY;
				if (e) {
					mouseX = e.pageX;
					mouseY = e.pageY;
				}else {
				mouseX = event.x + document.body.scrollLeft;
				mouseY = event.y + document.body.scrollTop;
				}
				
				
				if(window.innerHeight/2 - mouseY <50 && window.innerHeight/2 - mouseY> -50)
					//diffPt[150] = autoDiff;
					{
					autoDiff = 1000;
					if(mouseX<canvas.width-2){
						xx = 1 + Math.floor((verNum - 2) * mouseX / canvas.width);
						
						diffPt[xx] = autoDiff;
					}
					
					}
		}
	}
	
	var wheelHandler = function( e ) {
			var s = ( e.detail ) ? -e.detail : e.wheelDelta;
			s > 0 ? ( dd > 15 ? dd-- :  dd=dd) : ( dd <50 ? dd++ : dd=dd );
	};
	
	function initDiffPt(){
		for(var i=0;i<verNum;i++)
		   diffPt[i]= 0;
	}
	var xx = 150;
	var dd = 15;
	
	function update(){
		//ctx.rect(50,20,280,620);
		//ctx.stroke();
		//ctx.clip();
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		autoDiff -= autoDiff*0.9;
		diffPt[xx] = autoDiff;
		//Left
		//The difference, so that each point is the solution to the next time the last point, due to the difference function of the solutions is a curve, and after each iteration, curve addition results in the formation of continuous wave
			for(var i=xx-1;i>0;i--)
				{
				    var d = xx-i;
					if(d > dd)d=dd;
					diffPt[i] -= (diffPt[i]-diffPt[i+1])*(1-0.01*d);
				}
		//Right
			for(var i=xx+1;i<verNum;i++)
				{
				    var d = i-xx;
					if(d > dd)d=dd;
					diffPt[i] -= (diffPt[i]-diffPt[i-1])*(1-0.01*d);
				}
		
		//Y coordinate points update
		for(var i = 0;i <vertexes.length;i++){
			vertexes[i].updateY(diffPt[i]);
		}

		draw();
		
	}
	var color1="#6ca0f6";
	var color2 = "#367aec";
	function draw(){
		ctx.beginPath();
		ctx.moveTo(0,window.innerHeight);
		ctx.fillStyle=color1;
		ctx.lineTo(vertexes[0].x,vertexes[0].y);
		for(var i = 1;i <vertexes.length;i++){
			ctx.lineTo(vertexes[i].x,vertexes[i].y);
		}
		ctx.lineTo(canvas.width,window.innerHeight);
		ctx.lineTo(0,window.innerHeight);
		ctx.fill();

		ctx.beginPath();
		ctx.moveTo(0,window.innerHeight);
		ctx.fillStyle=color2;
		ctx.lineTo(vertexes[0].x+15,vertexes[0].y+5);
		for(var i = 1;i <vertexes.length;i++){
			ctx.lineTo(vertexes[i].x+15,vertexes[i].y+5);
		}
		ctx.lineTo(canvas.width,window.innerHeight);
		ctx.lineTo(0,window.innerHeight);
		ctx.fill();
		
		ctx.fillStyle="#777";
		ctx.font="12px sans-serif";
		ctx.textBaseline="top";
		ctx.fillText("Click on the surface of the liquid",70,canvas.height/2-20);
		ctx.fillStyle="#fff";
		ctx.fillText("Use mouse wheel to change the viscosity",70,canvas.height/2+15);
		ctx.fillText("Viscosity change roller / Viscosity: "+((dd-15)*20/7).toFixed(2)+"%",70,canvas.height-20);
	}
	function initCanvas(width,height){
		canvas = document.getElementById("canvas");
		canvas.width = width;
		canvas.height = height;
		ctx = canvas.getContext("2d");
	}
		
	function Vertex(x,y,baseY){
		this.baseY = baseY;
		this.x = x;
		this.y = y;
		this.vy = 0;
		this.targetY = 0;
		this.friction = 0.15;
		this.deceleration = 0.95;
	}
		
	Vertex.prototype.updateY = function(diffVal){
		this.targetY = diffVal + this.baseY;
		this.vy += this.targetY - this.y
		this.y += this.vy * this.friction;
		this.vy *= this.deceleration;
	}
	var blue = function(){
		color1 = "#6ca0f6";
		color2 = "#367aec";
	}
	var black = function(){
		color1 = "#595959";
		color2 = "#000000";
	}
	
	var purple = function(){
		color1 = "#ff92ec";
		color2 = "#f727d2";
	}

CSS source code:

html{
  overflow:hidden;
}
body{
   margin:0px;
}
canvas{
   margin-left:-40px;
}
span{
	 height:7px;
   width:20px;
	 display:inline-block;
	 cursor:pointer;  
	 position:absolute;
	 top:0px;
	         transition: height 0.2s;
	      -o-transition: height 0.2s;	
	    -moz-transition: height 0.2s;	
	 -webkit-transition: height 0.2s;	

}
span:hover{
	 height:12px;
}
#blue{
  background-color:#367aec;
  left:30px;
}
#purple{
  background-color:#f727d2;
  left:50px;
}
#black{
  background-color:#000000;
  left:70px;
}
#container{
  width:100%;
  
}

Posted by Cherry at December 22, 2016 - 3:34 PM

Great~

Posted by Yale at January 02, 2017 - 4:29 PM

Good writing I was learn Canvas

Posted by Rod at January 04, 2017 - 5:15 PM