HTML5 Canvas Spinners
This is an old canvas experiment I did awhile back. A few weeks ago I ported it over to CoffeeScript and posted it on codepen:
See the Pen Spinners by Zevan Rosser (@ZevanRosser) on CodePen.
There’s nothing much going on in the HTML or CSS, although I did use Sass for no real reason… The CoffeeScript is where everything happens:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | window.onload = () -> SIZE = 400 quarterSize = SIZE / 4 threQuarters = SIZE - quarterSize; TWO_PI = Math.PI * 2 createCanvas = () -> canvas = document.createElement "canvas" canvas.width = SIZE canvas.height = SIZE canvas canvas = createCanvas() document.body.appendChild(canvas) c = canvas.getContext("2d") trails = createCanvas() ct = trails.getContext("2d") clear = -> c.fillStyle = "black" c.fillRect 0, 0, SIZE, SIZE ct.fillStyle = "black" ct.fillRect 0, 0, SIZE, SIZE return clear() document.getElementById("erase").onclick = clear class DrawingThing constructor : (x, y) -> @x = x @y = y @radii = [30 , 60, 90] @num = @radii.length @thetas = [Math.random() * TWO_PI Math.random() * TWO_PI Math.random() * TWO_PI] @thetasInc = [Math.random() * 0.2 - 0.1 Math.random() * 0.2 - 0.1 Math.random() * 0.2 - 0.1] draw : -> ct.strokeStyle = "rgba(255,255,255,0.1)" for i in [0...@num] x = @x + @radii[i] * Math.cos(@thetas[i]) y = @y + @radii[i] * Math.sin(@thetas[i]) if i == 0 ct.beginPath(); ct.moveTo(x, y); else ct.lineTo(x, y); c.strokeStyle = "rgba(255,255,255,0.5)" c.fillStyle = "white" c.beginPath() c.arc(@x, @y, @radii[i], 0, TWO_PI, false) c.stroke(); c.beginPath(); c.arc(x, y, 2, 0, TWO_PI, false); c.fill(); @thetas[i] += @thetasInc[i]; ct.closePath(); ct.stroke(); return drawingThings = [new DrawingThing(quarterSize, quarterSize) new DrawingThing(threQuarters, quarterSize) new DrawingThing(threQuarters, threQuarters) new DrawingThing(quarterSize , threQuarters)]; setInterval(-> c.drawImage(trails, 0, 0) for drawThing in drawingThings drawThing.draw() , 30); return |