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


 
 
 

Leave a Reply

Spam protection by WP Captcha-Free