Slow motion sine & cos curve on html Canvas



var y =125 - 120*( Math.sin(( Math.PI/180 ) * angle))
angle is variable in degree

More about Math.sin() with radian or degree as input

Drawing Curves , Graphs , Grids on Canvas

CODEDetails
sin()Simple Sine curve
sin()sine curve in slow motion
cos()cos() curve
sin() & cos()Both curves with grid and shadow effect
var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var my_canvas1=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var gctx1 = my_canvas1.getContext("2d");
gctx.beginPath();
my_start=function my_start(){	
/////////// Grid ///////
var gap=10;

for (var ver = 0; ver <=my_canvas.width; ver+=gap){
gctx.moveTo(ver,0)
gctx.lineTo(ver,my_canvas.height);
}
for (var ver = 0; ver <=my_canvas.height; ver+=gap){
gctx.moveTo(0,ver)
gctx.lineTo(my_canvas.width,ver);
}
gctx.strokeStyle= '#f0f040';
gctx.stroke();

////////// Grid end ////////

/////// Axis //////
gctx.beginPath();
gctx.lineWidth=3;
gctx.shadowColor = '#ffffff';
gctx.strokeStyle= '#0060c0';
gctx.moveTo(0, my_canvas.height/2); 
gctx.lineTo(my_canvas.width,my_canvas.height/2); // Horizontal X Axis 
gctx.moveTo(10, 2);
gctx.lineTo(10,my_canvas.height);  // Vertical Y Axis
gctx.stroke(); 
////////Axis end///
}

var angle=0;
var speed=5;
gctx.lineWidth=2;

gctx1.lineWidth=2;


var x_old=10;
var y_old=my_canvas.height/2
var x1_old=10;
var y1_old=10;
my_function=function my_function(){	
gctx.beginPath();
gctx.strokeStyle= '#f00000';
var y =my_canvas.height/2 - 140*( Math.sin(( Math.PI/180 ) * angle))
var x=10 + angle;
$('#t1').html("Angle : " + angle);
gctx.moveTo(x_old,y_old);
gctx.lineTo(x,y);
x_old=x;
y_old=y;
gctx.stroke();

gctx1.beginPath();
gctx1.strokeStyle= '#00ff00';
var y1 =my_canvas.height/2 - 140*( Math.cos(( Math.PI/180 ) * angle))
var x1=10 + angle;
//$('#t1').html("Angle : " + angle);
gctx1.moveTo(x1_old,y1_old);
gctx1.lineTo(x1,y1);
x1_old=x1;
y1_old=y1;
gctx1.shadowColor = '#303040';
gctx1.shadowOffsetX=2;
gctx1.shadowOffsetY=2;
gctx1.shadowBlur = 2;
gctx1.stroke();

my_function2();
}

my_function2=function my_function2(){
if(angle <=my_canvas.width -11){	
angle=angle+1;
my_time=setTimeout('my_function()',speed)
}else{angle=0;
gctx.moveTo(10, my_canvas.height/2);
gctx1.moveTo(10, my_canvas.height/2);
clearTimeout(mytime)
}
}
////////////
my_function2();
/////////////////
$('#b1').click(function(){
gctx.clearRect(0, 0, my_canvas.width,my_canvas.height);
gctx1.beginPath();
gctx.beginPath();

 angle=0;
gctx.lineWidth=2;
gctx1.lineWidth=2;
 x_old=10;
 y_old=my_canvas.height/2
 x1_old=10;
 y1_old=10;
my_start()
my_function2();
})
///////////
my_start()
Visitors Rating
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.




HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer