Skip to content

Instantly share code, notes, and snippets.

@imzhi
Forked from weakish/heart.coffee
Created February 18, 2016 17:04
Show Gist options
  • Save imzhi/c7fda355f591dd6079fa to your computer and use it in GitHub Desktop.
Save imzhi/c7fda355f591dd6079fa to your computer and use it in GitHub Desktop.
Matrix digital rain http://jsbin.com/ORIpOxi/
# 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment