Sketch Mobile is a drawing tool that takes advantage of the new capabilities presented in modern mobile browsers; including multi-touch, the accelerometer, and the gyroscope; providing a fun & novel environment to express yourself in colorful ways! Sketch Mobile was commissioned by Google as part of the Mobile Chrome Experiments released at Google I/O 2012.
Sketch Mobile utilizes multi-touch capabilities by allowing each each finger to become a new input device—multiple people can paint on the same device at the same time, creating collaborative works of art. There are four primary types of tools to be aware of;
- Click (1 finger)—the “Floodfill” fills the screen with one click.
- Brushes (1+ finger)—with these tools, each finger represents one brush; use your whole hand to finger-paint like you did as a child, but with fun new twists. These types of brushes include; Pencil, Calligraphy, Crayon, Streamer, Automater, Spraypaint, Brush, Oil, Eraser, Spirograph, Hair, Web, Shader, Fur, Sketchy, and Chrome.
- Shapes (2 fingers)—two fingers represent one shape; rotating your fingers rotates the shape, spreading your fingers enlarges the shape, while pinching decreases the size, and dragging your fingers around the screen moves the shape. Included in Sketch Mobile you will find; Circle, Square, Polygon, Gears, Star, Burst, Radial Burst, Spiral and Supershape.
- Brushes (2+ finger)—the “Strings” tool allows you to create a non-regular polygon, where each point of the polygon is represented by one of your fingers; ten fingers creates a ten-sided non-regular polygon.
When you enter the drawing area, you will notice the screen is mostly blank, except for a small circular button on the top left hand side of the screen—this is the Power nib which is used as a gateway to configuring Sketch Mobile. There are two ways to use the Power nib;
- To enter the Tool builder, simply tap on the nib once (see next section).
- To enter the Power nib terminal simply tap & hold the nib—once the screen turns white, you can start entering gesture-based commands with your other hand;
- Draw a “check” to save your photograph.
- Once you’re in the save screen, tap and hold your finger on your drawing until a menu appears, and tap on “Save”.
- Draw a “circle” to clear the canvas.
- Draw the letter “s” to take a shortcut to the style chooser.
- While holding the button, tap the screen with different finger combinations to access tool presets that have been setup in the Tool builder, e.g. 1-finger tap = red soft paintbrush; 2-finger tap = blue star shape; 3-finger tap = large eraser, and so on. There are 5-spots that can be used for presets.
Each tool has an array of options with multiple blending modes, colors, gradients, and tool specific options, to quickly fill the canvas. Create pleasing digital artwork—no degree in design required! There are four primary sections to the Tool builder:
- Presets—there are five preset buttons, labeled 1-5, that are entirely customizable, and an easy way to get back to settings that you recently created. You can switch between presets by tapping these buttons, or accessing them in the Power nib terminal.
- Tool selector—tools are labeled with icons, such as a “Pencil” or “Crayon”, to change tools simply tap them once. Above the tool icons you will find a menu that allows you to select what type of tool you want to use, including:
- Paint brushes—Pencil, Calligraphy, Crayon, Streamer, Automator, Spraypaint, Brush, Oil, and the Eraser.
- Magic brushes—Spirograph, Hair, Strings, Web, Shader, Fur, Sketchy, Chrome, and the Flood Fill.
- Shapes—Circle, Square, Polygon, Gear, Star, Burst, Radial Burst, Spiral, and the Supershape.
- Tool customizer—located to the right hand side of the Tool selector, this is where all the options for configuring the tools exist. You can control things such as;
- Alpha—increase or decrease the opacity of your tool.
- Composite—Erase, Paint, Light, and Disco modes.
- Size—increase or decrease the radius of a shape.
- Style—toggle between colors and gradients.
- Color Mode—Linear, Radial or Cycling colors.
- Color Noise—add randomized noise to your colors.
- Rotation—control the random rotation of tool.
- Scale—control the random scaling of tool.
- Translate—control the random movement of tool.
- Preview—accessible by tapping on any colored box to the right of the Tool customizer. When you’re in the preview area, you can test out styles and tool settings without affecting your canvas.
Once you’ve chosen options you’re satisfied with, click on the bright green “check” button to return to the Drawing area.
- Gyroscope—controls where the drips go using spraypaint tool.
- Accelerometer—shake the device to clear the drawing like an Etch-a-Sketch.
- Canvas—used to create the drawing area.
- CSS3—used to create responsive design, looking the same on mobile devices as on desktop computers.
- Icon Fonts—used for all the graphical elements within the application.
- localStorage—used to keep configuration when user comes back.
DeveloperMichael Deal @mudcubeUI Designer
http://mudcu.be/Daniel Christopher @uxmonk“Chrome”, “Shaded”, “Sketchy”, “Web” and “Fur”
http://uxmonk.com/Ricardo Cabello @mrdoob“Spray-paint”
http://mrdoob.com/Lukasz Karluk @julapy“Streamer”
http://julapy.com/Dan Gries$1 Unistroke Recognizer
http://dangries.com/Jacob O. Wobbrock [email protected]HTML5 Boilerplate
Andrew D. Wilson [email protected]
Yang Li [email protected]
http://depts.washington.edu/aimgroup/proj/dollar/http://html5boilerplate.com/The Noun Projecthttp://thenounproject.com/IcoMoonhttp://keyamoon.com/icomoon/Texturisehttp://texturise.com/Web Treatshttp://webtreats.mysitemyway.com/
Sketch Mobile comes under various licensing:
- Sketch Mobile is available for schools and educational resources under the Creative Commons BY-NC 3.0 license. For more information, and a link to the code repo, contact me @mudcube.
- Mr. Doob’s ever-hypnotizing harmony tools, including; Web, Shader, Fur, Sketchy, and Chrome, are available under the MIT License.
- Event.js, which controls the multi-touch events in Sketch Mobile, including; Drag, Shake, Pinch, Rotate, Swipe, Tap, Taphold, Dbltap, Dblclick, and Click, is available under the MIT License.
- $1 Unistroke Recognizer, used for recognizing gestures in the Power nib terminal, is available under the New BSD License. I’ve made some slight modifications, which allow gestures to be more readily recognized that can be found on github.