Archiv der Kategorie ‘CoffeeScript‘

 
 

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

11. November 2014 | CoffeeScript, html, html5, javascript | Comments (0)

Random Spotify Covers

A few weeks ago I created a demo using CoffeeScript, Twitter Bootstrap, jQuery and Mustache. It grabs data from the Spotify API to display a bunch of random album covers:

See the Pen Random Spotify Covers by Zevan Rosser (@ZevanRosser) on CodePen.

The html is pretty straight forward and includes a small mustache template

1
2
3
4
5
6
7
8
9
10
11

<div class="container-fluid">
  <h1 class="title">Random Spotify Covers <span>click anywhere to regenerate</span></h1>
  <div class="rand-covers row">
  </div>
</div>
 
<script id="cover" type="text/html">
  <div class="cover col-lg-2 col-sm-3 col-xs-3">
    <img src="{{src}}">
  </div>
</script>

The CSS is also pretty straight forward. Bootstrap is included for the responsive images and prefix-free is used for the text-shadow.

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

/* bootstrap is included */
body{
  background : black;
  cursor : pointer;
}
.title{
  color : white;
  position : fixed;
  top: 30px;
  left : 0px;
  padding-left : 30px;
  padding-top : 10px;
  padding-bottom : 10px;
  z-index : 1000;
  width : 100%;
  background : rgba(0,0,0,0.7);
  text-shadow : 0px 0px 10px black,
                0px 0px 10px black;
 
}
.title span{
  font-size : 18px;
}
.cover{
  padding-left : 0px;
  padding-right : 0px; 
}
.cover img{
  width : 100%; 
}

The real trick happens in the CoffeeScript on line 16 where the query string for the Spotify API is randomly generated:

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

$ ->
  class RandomCovers
 
    constructor : ->
      @alph = "abcdefghijklmnopqrstuvwxyz1234567890".split ""
      @randCovers = $ ".rand-covers"
      @tmpl = Mustache.compile $("#cover").html()
 
      @randomAlbums()
 
     randomAlbums : =>
       a = @alph[parseInt(@alph.length * Math.random())]
       b = @alph[parseInt(@alph.length * Math.random())]
 
       @randCovers.html ""
       $.get "https://api.spotify.com/v1/search?q=#{a}*%20%20#{b}*&type=album", @renderAlbums
       return
 
     renderAlbums : (d) =>
       items = d.albums.items
 
       for item in items
          img = item.images[1]
          if img.height ==  300 and img.width == 300 
            url = img.url
            url = url.replace "http://i.scdn.co/", "http://o.scdn.co/"
 
            $(@tmpl src : url).appendTo @randCovers
       return
 
  randomCovers = new RandomCovers();
  $(document).click randomCovers.randomAlbums

11. November 2014 | CoffeeScript, html, html5, jquery | Comments (0)