/1.png){kind=icon}
Skribblio Chrome Extension that Automatically Draws Images
Skribblio is a popular multiplayer drawing and guessing game. Players take turns to draw and others will try to guess the word, the faster it is guessed the more points they earn!
I became really interested in creating this project after seeing this video. I keep seeing awesome projects online and I always wondered how they were made. I was learning about chrome extensions and how they can manipulate a page's HTML/CSS. I was also learning about image processing using Javascript Canvas. I thought it would be the perfect time to put my skills to the test by putting these tools together!
- Drag and drop images from your computer or the web. They are automatically scaled to fit game canvas
- Convert image colors to the closest color available in game
- Select from different draw modes and brush sizes
- Simulating drawing using MouseEvents
- Non-blocking function design, so the thousands of draw commands won't freeze the page
Options Popup
Draw Mode - Dots
Draw Mode - Lines
- Download a ZIP of this GitHub Repo
- Extract the files to your desired location
- Open the Extension Management page by navigating to chrome://extensions
- Enable Developer Mode by clicking the toggle switch next to Developer mode.
- Click the LOAD UNPACKED button and select the extension directory
- Implement dithering
- In Skribblio you can only use a limited number of colors. Usually an image will have many more colors than what is available. Therefore, any color in the image must be converted into a color that is available in game. I used a simple color distance formula to do this, but it can ruin the look of the image. The appearance of the image can be grealy improved with dithering. This is something I hope to learn!
- Implement edge detection
- It will be much faster if we only draw the outlines of an image. It will also make it look like an actual drawing.
- Automatically present user with images related to the word they are drawing. The user can then choose an image to draw.
- Add more options (draw modes, invert colors, etc.)