자바스크립트 원 모양의 사인파를 캔버스로 그리기

출처: https://stackoverflow.com/questions/33586669/agar-io-style-ripple-effect-for-canvas-arcs

출처: https://www.w3schools.com/howto/howto_js_rangeslider.asp

진폭:

파장 갯수:

Your browser does not support the HTML5 canvas tag.

소스코드

<input type="range" min="1" max="20" value="10" class="slider" id="amplitude">

  <p>진폭: <span id="demo"></span></p>

<input type="range" min="1" max="20" value="10" class="slider" id="count">

  <p>파장 갯수: <span id="demoCount"></span></p>

<p><br /></p><canvas id="canvas" width="300" height="300" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var slider = document.getElementById("amplitude");

var output = document.getElementById("demo");

output.innerHTML = slider.value;

slider.oninput = function() {

  output.innerHTML = this.value;

}

var sliderCount = document.getElementById("count");

var outputCount = document.getElementById("demoCount");

outputCount .innerHTML = sliderCount .value;

sliderCount .oninput = function() {

  outputCount .innerHTML = this.value;

}

function draw() {

 var canvas=document.getElementById("canvas");

 var ctx=canvas.getContext("2d");

 var cx=150;

 var cy=150;

 var radius=100;

 var amp=slider.value;

 var sineCount=sliderCount .value;

 ctx.clearRect(0,0,300,300);

 ctx.beginPath();

 for(var i=0;i<360;i++){

  var angle=i*Math.PI/180;

  var pt=sineCircleXYatAngle(cx,cy,radius,amp,angle,sineCount);

  ctx.lineTo(pt.x,pt.y);

 }

 ctx.closePath();

 ctx.stroke();

}

function sineCircleXYatAngle(cx,cy,radius,amplitude,angle,sineCount){

  var x = cx+(radius+amplitude*Math.sin(sineCount*angle))*Math.cos(angle);

  var y = cy+(radius+amplitude*Math.sin(sineCount*angle))*Math.sin(angle);

  return({x:x,y:y});

}

setInterval ( draw, 10);

</script>