We like using but we always ran out of space. So we designed something like it that has enough space for us.

What it does

PixelBoard is a pixel based white board that uses the canvas element from html5, but it is rendered in chunks allowing the whiteboard size to be enormous. This means that camera functionality must also be added to the whiteboard. If you want to try it some tips are: zoom in and out with scroll wheel, and right click for easy camera movement. And don't worry if you draw something cool you can always take a picture

How I built it

We created a chunk class the would hold the data for the first chunk, and then created some tools to use on just one chunk. Then we removed some hard coded variables, and made everything relative. We then upped the chunk count and reworked bugs that that brought up. We then designed an elegant UI to frame the whole thing.

Challenges I ran into

Dividing the canvas into separate render able chunks, as well as accessing them seamlessly.

Accomplishments that I'm proud of

Dividing the canvas into discrete chunks. This allows us to only render what is on screen keeping the code efficient even at enormous sizes.

What I learned

Detailed TypeScript knowledge, esoteric jQuery commands, and using the HTML5 Canvas Element.

What's next for PixelBoard

We'd like to add peer-to-peer network capability's. This would allow multiple people to edit the same canvas without tying up resources, We think this would work great for brainstorming sessions, art fun, or in a classroom setting.

Built With

Share this project: