grantmichaels/index.html

## index.html
<html>
    <head>
        <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="processing-1.2.1.min.js"></script>
        <script type="text/javascript" src="websocket_processing.js"></script>
    </head>
    <body>
        <canvas id="processing"></canvas>
    </body>
</html>

## websocket_processing.coffee
circles = []

coffee_draw = (p5) ->

    p5.setup = () ->
        p5.size $(window).width(), $(window).height()
        p5.background 0
        p5.ellipseMode p5.CENTER
        p5.colorMode p5.RBG
        p5.smooth()
        @ws = new WebSocket "ws://localhost:8080/service"

        @ws.onmessage = (evt) ->
            receivedMsg = evt.data
            msg = jQuery.parseJSON receivedMsg
            circle = new Circle p5, {
                x: msg.x
                y: msg.y
                r: msg.r
                g: msg.g
                b: msg.b
                diameter: msg.diameter
            }
            circles.push circle

    p5.draw = () ->
        circle.draw() for circle in circles

class Circle
    constructor: (@p5, opts) ->
        @x = opts.x
        @y = opts.y
        @r = opts.r
        @g = opts.g
        @b = opts.b
        @diameter = opts.diameter

    draw: () ->
        @p5.fill @r, @g, @b
        @p5.ellipse @x, @y, @diameter, @diameter

$(document).ready ->
    canvas = document.getElementById "processing"
    processing = new Processing canvas, coffee_draw

## websocket_processing_server.erl
-module(websocket_processing_server).
-export([start/1, stop/0]).

% start misultin http server
start(Port) ->
    misultin:start_link([{port, Port}, {loop, fun(Req) -> handle_http(Req, Port) end},
    {ws_loop, fun(Ws) -> handle_websocket(Ws) end}]).

% stop misultin
stop() ->
    misultin:stop().

% callback on request received
handle_http(Req, _Port) ->
    % output
    Req:ok([]).

% callback on received websockets data
handle_websocket(Ws) ->
    receive
        {browser, Data} ->
            {struct, [{<<"x">>, X}, {<<"y">>, Y}]} = mochijson2:decode(Data),
            Ws:send([mochijson2:encode({struct, [{"x", X},
                                                 {"y", Y},
                                                 {"r", random:uniform(255)},
                                                 {"g", random:uniform(255)},
                                                 {"b", random:uniform(255)},
                                                 {"diameter", 10 + random:uniform(30)}]})]),
            handle_websocket(Ws);
        _Ignore ->
            handle_websocket(Ws)
    end.
	<html>
	<head>
	<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="processing-1.2.1.min.js"></script>
	<script type="text/javascript" src="websocket_processing.js"></script>
	</head>
	<body>
	<canvas id="processing"></canvas>
	</body>
	</html>
	circles = []

	coffee_draw = (p5) ->

	p5.setup = () ->
	p5.size $(window).width(), $(window).height()
	p5.background 0
	p5.ellipseMode p5.CENTER
	p5.colorMode p5.RBG
	p5.smooth()
	@ws = new WebSocket "ws://localhost:8080/service"

	@ws.onmessage = (evt) ->
	receivedMsg = evt.data
	msg = jQuery.parseJSON receivedMsg
	circle = new Circle p5, {
	x: msg.x
	y: msg.y
	r: msg.r
	g: msg.g
	b: msg.b
	diameter: msg.diameter
	}
	circles.push circle

	p5.draw = () ->
	circle.draw() for circle in circles

	class Circle
	constructor: (@p5, opts) ->
	@x = opts.x
	@y = opts.y
	@r = opts.r
	@g = opts.g
	@b = opts.b
	@diameter = opts.diameter

	draw: () ->
	@p5.fill @r, @g, @b
	@p5.ellipse @x, @y, @diameter, @diameter

	$(document).ready ->
	canvas = document.getElementById "processing"
	processing = new Processing canvas, coffee_draw
	-module(websocket_processing_server).
	-export([start/1, stop/0]).

	% start misultin http server
	start(Port) ->
	misultin:start_link([{port, Port}, {loop, fun(Req) -> handle_http(Req, Port) end},
	{ws_loop, fun(Ws) -> handle_websocket(Ws) end}]).

	% stop misultin
	stop() ->
	misultin:stop().

	% callback on request received
	handle_http(Req, _Port) ->
	% output
	Req:ok([]).

	% callback on received websockets data
	handle_websocket(Ws) ->
	receive
	{browser, Data} ->
	{struct, [{<<"x">>, X}, {<<"y">>, Y}]} = mochijson2:decode(Data),
	Ws:send([mochijson2:encode({struct, [{"x", X},
	{"y", Y},
	{"r", random:uniform(255)},
	{"g", random:uniform(255)},
	{"b", random:uniform(255)},
	{"diameter", 10 + random:uniform(30)}]})]),
	handle_websocket(Ws);
	_Ignore ->
	handle_websocket(Ws)
	end.