Share your repls and programming experiences

← Back to all posts
Multiplayer Drawing Canvas
SpicedSpices (34)

Multi-person Drawing Canvas


This canvas is multiplayer so anyone can change this screen. I was 'inspired' by Reddit's r/place which was a social experiment hosted on April 1st, 2017. It was a giant canvas where each person could change the color of one pixel, with a cooldown of 5 minutes.


In this version that I made, there is a 80 by 45 pixel space, and no cooldown time, so you can change as many pixels as you would like. You could even possibly make a bot to draw pixels for you.


How Do I Use This?

To use this canvas, all you need to do is to click on whichever pixel you would like to change, and press the key corresponding to the color you would like.


Colors:
  • Red - 1
  • Orange - 2
  • Yellow - 3
  • Green - 4
  • Light-Green - 5
  • Light-Blue - 6
  • Medium-Blue - 7
  • Blue - 8
  • Purple - 9
  • Magenta-Red - 0
  • Black - Minus Sign
  • White - Equal Sign

I used Node.JS and 2 frameworks, Express.JS for sending files, and Socket.IO for real-time web connections.


An upvote if you enjoyed it would be appreciated


Please let me know how it is and give me feedback

Thank you for trying this out!

Commentshotnewtop
MrEconomical (1877)

incredible job! love the concept

ItsYeBoiJ (3)

I was very bored lmao

SpicedSpices (34)

@ItsYeBoiJ Thats insane! lmao how do you have the time to do that

CodeABC123 (199)

My eyes... Good job on making this. But it will make my eyes explode.

ChezTacoz (8)

This is really cool and fun! :)

IshaNair (3)

SO MANY PIXELS!!! But I definitely think this is SOOOOOO AWESOME!!!

TaylorLiang (771)

what happened to it?

SpicedSpices (34)

@TaylorLiang oh that sucks. Someone either has a really weird screen or they bypassed the safeguard I put up to stop incorrect data because I had a console.log() there. I just fixed it. That sucks that everyone's creations disappeared :(

Roar123 (124)

Very cool! Let's hope Hi survives the wrath of the internet :)

SpicedSpices (34)

@Roar123 nice that takes a lot of effort!

SilentShadowBla (498)

Why is it just showing a black screen for me?

SpicedSpices (34)

@SilentShadowBla You might have clicked or interacted with the screen before the page was fully loaded. Have you tried reloading it or opening it in another tab?

SilentShadowBla (498)

yes i have must be my computer's problem or something, whatever, looking at the images in the comments, I say you did an amzing job! @SpicedSpices

SixBeeps (1309)

Black doesn't work :(

Great site, otherwise.

LiamDonohue (167)

「戸惑う言葉 与えられても 自分の心 ただ上の空 もし私から 動くのならば すべて変えるのなら 黒にする」

what does this mean lol
@SixBeeps

mwilki7 (865)

@SixBeeps
if your keyboard has a 'mute' function that works as black

SpicedSpices (34)

@mwilki7 oh thanks for that!
@SixBeeps I coded it to work with the keycodes instead of the key names so that is probably why. Sorry for that lol

SixBeeps (1309)

@mwilki7 Nope, I've got a normal keyboard.

EDIT: What the heck why does that work (Fn + F2)

DeBeast591 (126)

Cool! (I made the HI with the yellow BG)

SpicedSpices (34)

@DeBeast591 Nice! Thanks for using it :)

SpicedSpices (34)

@kaldisberzins This might of happened if you clicked or responded to the webpage before the screen loaded. Maybe trying it again or reloading it might help

mkhoi (226)

Wow! This is really cool!

SpicedSpices (34)

@mkhoi Thanks for enjoying it!