Circle Animation🤔

circle-animation.markdown

Circle Animation🤔

A Pen by Zack on CodePen.

License.

index.html

<div id="container">
  <canvas id="canvas" width="640" height="640"></canvas>
</div>

script.js

function Params() {
  this.frameSpeed = 50;
  this.ballCenterX = 0;
  this.ballCenterY = 0;
  this.trajectoryRadius = 50;
  this.trajectoryTheta = 0;
  this.fps = 30.0;
}

const ctx = document.getElementById("canvas").getContext("2d");

var params = new Params();
var gui = new dat.GUI();

params.ballCenterX = canvas.width / 2;
params.ballCenterY = canvas.height / 2;

// gui.add(params, "frameSpeed", 10, 100).onChange(draw)
gui.add(params, "fps", 0, 200).listen();
gui.add(params, "frameSpeed", 1, 100).listen();
gui.add(params, "ballCenterX", 0, canvas.width).listen();
gui.add(params, "ballCenterY", 0, canvas.height).listen();
gui.add(params, "trajectoryRadius", 10, canvas.width / 2).listen();
gui.add(params, "trajectoryTheta", 0, 360).listen();

var date1 = new Date();

function dtr(degree) {
  return degree * (Math.PI / 180);
}

// 2PI = 360
// PI = 180
// radian
const movingBallRadius = 10;
function drawMovingCircle() {
  var dx = Math.cos(dtr(params.trajectoryTheta)) * params.trajectoryRadius;
  var dy = Math.sin(dtr(params.trajectoryTheta)) * params.trajectoryRadius;

  params.trajectoryTheta = params.trajectoryTheta + 0.1 * params.frameSpeed;

  if (params.trajectoryTheta >= 360) params.trajectoryTheta = 0;

  const originX = canvas.width / 2;
  const originY = canvas.height / 2;

  params.ballCenterX = dx + originX;
  params.ballCenterY = dy + originY;

  // Reset position
  if (
    params.ballCenterX + movingBallRadius <= 0 ||
    params.ballCenterX - movingBallRadius >= canvas.width
  ) {
    // params.ballCenterX = canvas.width / 2;
    params.trajectoryTheta = 0;
  }

  if (
    params.ballCenterY + movingBallRadius <= 0 ||
    params.ballCenterY - movingBallRadius >= canvas.height
  ) {
    // params.ballCenterY = canvas.height / 2;
    params.trajectoryTheta = 0;
  }

  // The moving circle
  ctx.beginPath();
  ctx.arc(
    params.ballCenterX,
    params.ballCenterY,
    movingBallRadius,
    0,
    2 * Math.PI,
    false
  );
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.lineWidth = 0;
  ctx.strokeStyle = "#003300";
  ctx.stroke();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  drawMovingCircle();

  // center red dot
  ctx.beginPath();
  ctx.arc(
    canvas.width / 2,
    canvas.height / 2,
    movingBallRadius / 5,
    0,
    2 * Math.PI,
    false
  );
  ctx.fillStyle = "red";
  ctx.fill();

  params.fps = 1000.0 / (new Date().getTime() - date1.getTime());

  date1 = new Date();
  requestAnimationFrame(draw);
}

requestAnimationFrame(draw);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>

style.css

html,
body {
  margin: 0;
  padding: 0;
  background: #ccc;
}

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

canvas {
  width: 640px;
  height: 640px;
  margin: 0 auto;
  display: block;
  background: #000;
}