weakish/heart.coffee

## heart.coffee
# Preview: http://jsbin.com/bijag

c = document.getElementById('c')
ctx = c.getContext('2d')

# full screen
c.height = window.innerHeight
c.width = window.innerWidth


letters = "♥".split("")

font_size = 20
columns = c.width/font_size

drops = (1 for x in [0..columns])


# drawing the characters
draw = ->
  # black BG for the canvas
  ctx.fillStyle = "rgba(214,0, 0, 0.0520)"
  ctx.fillRect(0,0,c.width,c.height)

  ctx.fillStyle = "pink"
  ctx.font = "20pt Android"

  # looping over drops
  for i in  [0..drops.length]
    letter = letters[Math.floor(Math.random() * letters.length)]
    ctx.fillText(letter, i * font_size, drops[i] * font_size)
    if (drops[i] * font_size > c.height and Math.random() > 0.99)
        drops[i] = 0
    drops[i] = drops[i] + 1


setInterval(draw, 100/2.14)

## jsbin.ORIpOxi.coffee
# Forked from http://jsbin.com/IDIgUL/8


letters = "ɒdɔbɘʇǫʜiႱʞlmnoqpɿƨƚƚuvwxyzAᙠƆᗡƎᖷᎮHIᐴႱᐴ⅃MИOꟼỌЯƧTUVWXYƸ1234567890アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲンッ".split("")


c = document.getElementById('c')
ctx = c.getContext('2d')

c.height = window.innerHeight
c.width = window.innerWidth

font_size = 10
columns = c.width/font_size


drops = (1 for x in [0..columns])

# drawing the characters
draw = ->
  # black BG for the canvas
  ctx.fillStyle = "rgba(0,0,0,0.05)"
  ctx.fillRect(0,0,c.width,c.height)

  ctx.fillStyle = "green"
  ctx.font = font_size + "px"

  # looping over drops
  for i in  [0..drops.length]
    letter = letters[Math.floor(Math.random() * letters.length)]
    ctx.fillText(letter, i * font_size, drops[i] * font_size)
    if (drops[i] * font_size > c.height and Math.random() > 0.99)
        drops[i] = 0
    drops[i] = drops[i] + 1


setInterval(draw, 1000/24)

## jsbin.ORIpOxi.css
/* basic reset */
* {margin: 0; padding: 0;}
/* adding a black bg to the body to make things clearer */
body {background: black;}
canvas {display: block;}

## jsbin.ORIpOxi.html
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
</head>
<body>
  <canvas id="c"></canvas>
</body>
</html>
	# Preview: http://jsbin.com/bijag

	c = document.getElementById('c')
	ctx = c.getContext('2d')

	# full screen
	c.height = window.innerHeight
	c.width = window.innerWidth


	letters = "♥".split("")

	font_size = 20
	columns = c.width/font_size

	drops = (1 for x in [0..columns])


	# drawing the characters
	draw = ->
	# black BG for the canvas
	ctx.fillStyle = "rgba(214,0, 0, 0.0520)"
	ctx.fillRect(0,0,c.width,c.height)

	ctx.fillStyle = "pink"
	ctx.font = "20pt Android"

	# looping over drops
	for i in [0..drops.length]
	letter = letters[Math.floor(Math.random() * letters.length)]
	ctx.fillText(letter, i * font_size, drops[i] * font_size)
	if (drops[i] * font_size > c.height and Math.random() > 0.99)
	drops[i] = 0
	drops[i] = drops[i] + 1





	setInterval(draw, 100/2.14)
	# Forked from http://jsbin.com/IDIgUL/8


	letters = "ɒdɔbɘʇǫʜiႱʞlmnoqpɿƨƚƚuvwxyzAᙠƆᗡƎᖷᎮHIᐴႱᐴ⅃MИOꟼỌЯƧTUVWXYƸ1234567890アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲンッ".split("")


	c = document.getElementById('c')
	ctx = c.getContext('2d')

	c.height = window.innerHeight
	c.width = window.innerWidth

	font_size = 10
	columns = c.width/font_size


	drops = (1 for x in [0..columns])

	# drawing the characters
	draw = ->
	# black BG for the canvas
	ctx.fillStyle = "rgba(0,0,0,0.05)"
	ctx.fillRect(0,0,c.width,c.height)

	ctx.fillStyle = "green"
	ctx.font = font_size + "px"

	# looping over drops
	for i in [0..drops.length]
	letter = letters[Math.floor(Math.random() * letters.length)]
	ctx.fillText(letter, i * font_size, drops[i] * font_size)
	if (drops[i] * font_size > c.height and Math.random() > 0.99)
	drops[i] = 0
	drops[i] = drops[i] + 1


	setInterval(draw, 1000/24)
	/* basic reset */
	* {margin: 0; padding: 0;}
	/* adding a black bg to the body to make things clearer */
	body {background: black;}
	canvas {display: block;}
	<!DOCTYPE html>
	<html>
	<head>
	<title>JS Bin</title>
	</head>
	<body>
	<canvas id="c"></canvas>
	</body>
	</html>