Skip to content

Instantly share code, notes, and snippets.

@anissen
Created January 7, 2012 22:06
Show Gist options
  • Save anissen/1576213 to your computer and use it in GitHub Desktop.
Save anissen/1576213 to your computer and use it in GitHub Desktop.
Pretty cool page (server included) using coffeekup, processing.js and node.js in less than 40 lines of code
kup = require 'coffeekup'
# Client-side web page with canvas and processing
webpage = kup.render ->
doctype 5
html ->
head ->
meta charset: 'utf-8'
title 'CoffeeKup Processing'
style '''body { background-image:url('http://icanhasnoise.com/1d0b07-4a2219/40x1500/4'); text-align: center; } header { font-family: 'Lobster Two', cursive; font-size: 28px; color: white; text-shadow: 3px 3px 3px brown; }'''
link rel: 'stylesheet', href: 'http://fonts.googleapis.com/css?family=Lobster+Two&v2'
script src: 'http://processingjs.org/content/download/processing-js-1.3.6/processing-1.3.6.min.js'
coffeescript ->
pjsDraw = (pjs) ->
pjs.setup = ->
pjs.size 600, 600
pjs.smooth()
pjs.noStroke()
@max_distance = pjs.dist 0, 0, pjs.width, pjs.height
pjs.draw = ->
pjs.background 0, 0, 0, 0
for i in [0..pjs.width] by 40
for j in [0..pjs.height] by 40
size = (pjs.dist pjs.mouseX, pjs.mouseY, i, j) / @max_distance * 132
pjs.fill i * 0.4, 50 + size * 2, j * 0.4
pjs.ellipse i, j, size, size
window.onload = ->
canvas = document.getElementById 'drawCanvas'
processing = new Processing canvas, pjsDraw
body ->
header -> h1 'CoffeeCup Processing'
canvas id: 'drawCanvas'
# Server-side HTTP server listing on port 1337
http = require 'http'
server = http.createServer (req, res) ->
res.writeHead 200, 'Content-Type': 'text/html'
res.write webpage
res.end()
server.listen 1337
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment