<script src="https://assets.codepen.io/3560077/CanvasAnimater.js"></script>
<canvas id="myCanvas"></canvas>
<script src="./script.js"></script>
// create a CanvasAnimater object that targets a canvas element with id='myCanvas'
let canvasAnimater = new CanvasAnimater('myCanvas');
// flex the canvas to fill the entire window
canvasAnimater.flex(true);
// define and set a draw function with a time parameter that draws a black background and a white disk moving in a circle using Dwitter function names
canvasAnimater.draw = function (t) {
let W = canvasAnimater.width;
let H = canvasAnimater.height;
// draw a black background
x.fillStyle = R(0, 0, 0, 1);
x.fillRect(0, 0, W, H);
// define a radius for the circular path the disk follows
let D = Math.min(W,H)/4;
// draw a white disk that moves in a circle
x.beginPath();
x.arc(W/2 + D*S(t), H/2 - D*C(t), D/4, 0, 2*Math.PI);
x.closePath();
x.fillStyle = R(255, 255, 255, 1);
x.fill();
}
// set Dwitter mode to create dwitter namespace
canvasAnimater.dwitterMode();
// set a time evolution range
canvasAnimater.evolve(0);
// set the render rate in frames-per-second
canvasAnimater.FPS(60);
// render the animation
canvasAnimater.animate();
This Pen doesn't use any external CSS resources.