Pixel is a real-time collaborative canvas inspired off of Reddit's Place. It uses the EaselJS JavaScript library to interact with an HTML5 canvas element, and uses MongoDB to store pixel data. It's open source, and it's entirely scriptable!
Though, unlike Reddit Place, everything is anonymous. However, it can be configured to set a rate limit for each IP address.
Try it out yourself! A live demo is available!
-
Install the Node.js dependencies.
$ npm install
-
If your webserver is running on a different public server than the WebSocket server, modify
src/public/scripts/pixel-config.js
to point to your WebSocket server.
eg.PIXEL_SERVER: "ws:https://127.0.0.1:3001",
-
(Optional) Adjust the dimensions of the canvas, zoom settings, or even the color palette.
CANVAS_WIDTH: 50, CANVAS_HEIGHT: 50, CANVAS_INITIAL_ZOOM: 20, CANVAS_MIN_ZOOM: 10, CANVAS_MAX_ZOOM: 40, CANVAS_COLORS: ["#eeeeee", "red", "orange", "yellow", "green", "blue", "purple", "#614126", "white", "black"]
NOTE: The canvas size needs to be set in two places (one for the server and one for the browser). For the server set at the top of PixeServer.js, and for the browser set in pixel-config.js.
-
(Optional) Enable MongoDB support by creating a database with a collection named
pixels
.
When running the script, make sure theMONGODB_URI
environment variable is set. In Heroku, it's underSettings -> Config Variables
.
Note: If the MongoDB URI is not set, all pixel data will only be kept in memory and will not be saved after a script reload.
- Run the WebSocket server.
$ npm start
- Upload the
src/public/
folder to your webserver of choice.
Pixel can be manipulated with the PixelSocket class (included in PixelSocket.js
).
-
PixelSocket(server, autoconnect = false)
Creates a PixelSocket object for the specified server. If autoconnect is set to true, it connects automatically. -
PixelSocket.connect()
Connects to server specified in the constructor -
PixelSocket.sendPixel(x, y, colorID)
Sends a paint request to the server with the specified coordinates and color ID -
PixelSocket.getPixel(x, y)
Tells the server that we need to update a specific pixel -
PixelSocket.setMessageHandler(callback)
Specify the handler for client commands from the server eg. ps.setMessageHandler(function(data){ ... }) "data" is a JS object containing an "action" attribute, specifying the type of message-
Action:
canvasInfo
Server sends updated canvas dimensions
Attributes: 'width', 'height' -
Action:
updatePixel
Server notifies the client a pixel was updated with coordinates
Attributes: 'x', 'y', 'color' -
Action:
timer
Server sends the time when the next pixel can be drawn
Attributes: 'time', 'type'
-
-
PixelSocket.setCanvasRefreshHandler(callback)
Specify the handler used for complete canvas refreshes -
PixelSocket.requestRefresh()
Tells the server that we need to refresh the entire canvas, and to resend all the pixel data
PixelSocket.onopen(event)
PixelSocket.onerror(event)
PixelSocket.onclose(event)
Brandon Asuncion
hanslivingstone - Added Support for Rectangular Canvases