CSC-WebApps / Storage

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

PixelShare

Create a shared pixel canvas.

Workshop steps

  1. Create firestore.json with appropriate credentials (available from console). Run npm install inside pixelshare.
  2. Confirm can read values from database by running db.js and adding code for reading from pixels db.
  3. Try draw functionality.
  4. Inside index.js, write a loadPixels() function that reads files from db. Create web socket connection with canvas client and emit event to load data.
  5. Create a web socket connection and emit event for saving drawn pixels.
  6. Subscribe to changes to firestore and broadcast to canvas.

Example class canvas

screenshot

About


Languages

Language:JavaScript 64.7%Language:HTML 35.3%