Makes a graph of sin(4 theta) with just a hundred points. Still looks pretty good.
Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<canvas width=600 height=350 id='canvas-1'></canvas>
<script>
// Feel free to change or delete any of the code you see!
// get the canvas element
var canvas = document.getElementById('canvas-1');
// get a context to draw in
var ctx = canvas.getContext('2d');
var height = 350;
var width = 500;
function tick() {
// clear what was drawn in the previous frame
canvas.width = canvas.width;
// begin a new path: arc is a line instruction like lineTo
ctx.beginPath();
// define the circle: position according to time, 50px radius
ctx.arc((Date.now() / 10) % 500 + 50, 50 + Math.sin(Date.now() / 100) * 10, 50, 0, 2 * Math.PI);
ctx.fillStyle = "green";
ctx.fill()
ctx.arc(((Math.sin(new Date() / 1000) + 1) % 2) * 500 + 50, 50, 50, 0, 2 * Math.PI);
ctx.fillStyle = "purple";
// draw the circle
ctx.fill();
// request a chance to draw the circle again as soon as possible
requestAnimationFrame(tick);
}
var ball = {
x: 100,
y: 100,
radius: 35,
color: 'blue',
draw: function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
}
};
ball.draw();
//tick();
</script>
</body>