Team Bread was formed for the Hack the North 2020++ hackathon and is the team behind the creation of Sketchy. The team consists of 4 members with various education and university backgrounds:
Rosalyn Cheng - 4th year Commerce student at Queen's University
Terry Luan - 2nd year Electrical & Computing Engineering student at University of Toronto
Jasper Mai - 2nd year Computer Science student at University of Toronto
Jenny Vong - 2nd year Mathematics student at University of Waterloo
While there are several online apps for sketching or jotting down notes (e.g. sketchpad.io and notes.io), none of these applications provide quick access and they all require opening another new webpage or tab. Sketchy is a Google Chrome Extension that allow users to quickly sketch down drawings and notes. Users can use the application for any momentary ideas and save their canvas onto their computer as a .png or .jpg file for future access.
Sketchy features a blank canvas with a pen tool, an eraser tool, and an option to clear the canvas - all accessible with just one click. The thickness of the pen can be adjusted with a slider on the navigation bar and the sketches can be saved locally onto your computer.
Sketchy features 3 different modes: Sketchy mode, Dark mode, and Rainbow mode.
- Sketchy Mode is the default mode, with a simple colour scheme and black pen tool.
- Dark Mode is for those who prefer working with darker-coloured screens and uses a white pen tool.
- Rainbow Mode is created for those craving a light-hearted, cute mode to work on and uses a rainbow-coloured pen tool.
To run Sketchy as a Chrome extension on your own Google Chrome browser, extract the files from the Github repo as a .zip file. After you have saved the folder in a secure location, follow these steps:
- Navigate to the chrome://extensions page through Chrome -> settings or typing it into the search bar
- Turn on Developer Mode on the top-right corner
- Click on the Load unpacked button that is on the top bar
- Select the Sketchy file from your local device
The extension can now be found in your Chrome Extensions list in the top right of your browser! Feel free to pin the extension for easy access in the future. For optimal use, open the extension on any https or http website.
Sketchy is built using primarily HTML, CSS, and JavaScript. The user interface and logo were designed with Figma, HTML, CSS, and Bootstrap while the backend interactiveness was accomplished through JavaScript. The team also worked with a Canvas API, which provided the starting blocks for the overall sketchpad.
In hopes of making students' lives even better and more efficient, the team sees a ton of potential in this application for future implementations:
- Creating a transparent mode that will extend outside of the canvas and allow users to draw directly on their current tab
- Allow users to send their sketches via messaging and email platforms (e.g. Facebook Messenger, Gmail) through working with external APIs