Sine Wave Animation HTML & CSS
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
canvas {
border: 5px solid rgb(0, 255, 76);
margin: 30px;
}</style>
<input onchange="init()" id="f" type="range" min="0" max="100" value="3" step="1">
<output for="f" id="output_f">20</output>
<canvas width="350px" height="200px"></canvas>
<script type="text/javascript">
// special thanks to stackoverflow.com
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
cHeight = canvas.height,
cWidth = canvas.width,
frequency = document.querySelector("#f").value,
amplitude = 80,
x = 0,
y = cHeight / 2,
point_y = 0;
var t;
window.onload = init;
function init() {
document.querySelector("#f").addEventListener("input", function() {
frequency = this.value;
document.querySelector("#output_f").value = frequency;
}, false);
x=0
drawSine();
t=setInterval(aaa,10)
}
function drawSine() {
ctx.clearRect(0, 0, cWidth, cHeight);
ctx.beginPath();
ctx.moveTo(0, y);
ctx.strokeStyle = "Blue";
ctx.lineTo(cWidth, y);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.closePath();
}
function aaa(){
x++
point_y = amplitude * -Math.sin((frequency / 95.33) * x) + y;
ctx.lineTo(x, point_y);
if(x>=340) clearInterval(t)
ctx.stroke();}
</script>
</body>
</html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
canvas {
border: 5px solid rgb(0, 255, 76);
margin: 30px;
}</style>
<input onchange="init()" id="f" type="range" min="0" max="100" value="3" step="1">
<output for="f" id="output_f">20</output>
<canvas width="350px" height="200px"></canvas>
<script type="text/javascript">
// special thanks to stackoverflow.com
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
cHeight = canvas.height,
cWidth = canvas.width,
frequency = document.querySelector("#f").value,
amplitude = 80,
x = 0,
y = cHeight / 2,
point_y = 0;
var t;
window.onload = init;
function init() {
document.querySelector("#f").addEventListener("input", function() {
frequency = this.value;
document.querySelector("#output_f").value = frequency;
}, false);
x=0
drawSine();
t=setInterval(aaa,10)
}
function drawSine() {
ctx.clearRect(0, 0, cWidth, cHeight);
ctx.beginPath();
ctx.moveTo(0, y);
ctx.strokeStyle = "Blue";
ctx.lineTo(cWidth, y);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.closePath();
}
function aaa(){
x++
point_y = amplitude * -Math.sin((frequency / 95.33) * x) + y;
ctx.lineTo(x, point_y);
if(x>=340) clearInterval(t)
ctx.stroke();}
</script>
</body>
</html>
OUTPUT
Posts
44 Comments
Best
ReplyDeletenice
ReplyDeleteAttractive
ReplyDeleteGood
ReplyDeleteVery Best
ReplyDeleteNice Work
ReplyDeleteWonderful
ReplyDeleteWow whatn amazing ❤❤❤
ReplyDeleteWonderful 😊😊😊😊
ReplyDeleteGood Job
ReplyDeleteWow So Beautiful
ReplyDeleteSuperb
ReplyDeleteAttractive
ReplyDeleteAmazing ❤❤❤
ReplyDeleteOsm
ReplyDeleteFabulous 😊😊😊
ReplyDeleteNicely done
ReplyDeletesuper
ReplyDeleteWonderful
ReplyDeleteEffective
ReplyDeleteSuperb
ReplyDeleteMind Blowing
ReplyDeletefantastic
ReplyDeleteNice
ReplyDeleteInteresting
ReplyDeleteGood Work
ReplyDeleteSuperb
ReplyDeletePerfect
ReplyDeleteAarju
ReplyDeleteVery nice😊😊😊😊
Waw
ReplyDeleteSupar
ReplyDeleteSuper
ReplyDeleteGreat
ReplyDeletePerfect 👌
ReplyDeleteUnbelievable
ReplyDeleteAmazing perfect 👌
ReplyDeleteWonderful
ReplyDeletepowerful
ReplyDeletePerfect 👌
ReplyDeleteosm
ReplyDeletesuperb
ReplyDeleterefreshing
ReplyDeleteKallu
ReplyDeleteNice work
Kallu
ReplyDeleteVery Best