Sketch Mobile

admin July 18, 2012

Sketch Mobile is a drawing app build for mobile browsers; taking advantage of technologies such as 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 show in San Francisco. It was an exciting project to be part of, I hope you enjoy!

This is a short rundown of some of the technologies used to create the Sketch Mobile app;

Accelerometer—shake the device to clear the drawing like an Etch-a-Sketch.
Canvas—used to create the drawing area and outputs of all the tools pixel/vector based tools. This has long been one of my favorite HTML5 elements ?
CSS3—used to create responsive design, looking the same on mobile devices as on desktop computers.
Gyroscope—controls where the drips go using spray paint tool.
Icon Fonts—used for all the graphical elements within the application.
localStorage—used to keep configuration when user comes back.

Icon Fonts

One of the biggest challenges in this project was creating a design that would work as well on a 30” monitor, as it would on an iPhone display—without programming separate designs for each of them. In order to achieve this resolution independence we had to throw raster images out the window; instead we opted to use Icon Fonts along with some fancy CSS3 designed/coded by Daniel Christopher.

Icon Fonts allow you to create a package consisting of your own custom SVG illustrations, which are embedded with the @fontface CSS3 attribute; the best part is, this feature is supported by all modern browsers (http://caniuse.com/fontface). My favorite resource for creating your custom fonts is IcoMoon (http://keyamoon.com/icomoon/), they make generating Icon Fonts a snap! Check it out ?

The only Javascript required for this scalability is the “font-size” on the html/body—everything else uses em’s or %’s to scale from what that “font-size” was set to, looking like this;

var width = window.innerWidth / 1280;
var height = window.innerHeight / 800;
var ratio = Math.min(width, height) * 100 &gt;&gt; 0;
document.body.style.fontSize = ratio + "%";

Event.js

Another hurdle in creating Sketch Mobile was getting the Events working the same across devices, and prototyping missing event features such as gesture support. I ended up putting together one of the most complete events libraries available—this library is especially relevant if you’re building a HTML5 Canvas application, as it takes into account CSS zooming. Event.js is available to you at Github (https://github.com/mudcube/Event.js) under the MIT license. The primary features of the library includes;

1 finger click, dblclick, and dbltap—Ghost onclick event shaves off 300ms on response.
1+ finger tap, taphold, drag, and swipe—Customizable, from 1 to 12 fingers.
2+ finger pinch, and rotate—Customizable, from 2 to 12 fingers.
Shake detection.
Keeps track of scaling, event bubbling, bounding boxes, and other things manually, in order to make sure things work the same across browsers.

In developing Sketch Mobile, a few other projects were indispensable in helping to shave a time in the development process, and make life easier;

Tongseng for TUIO

Tongseng allows developers to use the MacBook pro touch pad as if it were an iPad, transmitting touch events to the browser. It can be a bit tricky to install, but totally worth it… if you’re having problems installing it, you’ll need to compile it on your own, and in XCode you’ll want to click on “fix errors” and switch the code over to the latest SDK. To learn more, head over the excellent HTML5Rocks article on Developing for Mobile Touch by Boris Smus, and head to the bottom of the page near “Developer Tools” to read more.

Adobe Shadow

Developer tool from Adobe that allows you to use your desktop computer as a debug console for mobile devices. You can connect to your device wirelessly, and use your browsers normal error console to get helpful messages that will help debug your applications. Shadow works with Mobile Safari, Chrome Mobile, and the Android Browser; http://labs.adobe.com/technologies/shadow/

Chrome Mobile Debug

Even better than Adobe Shadow is the built in debugger for Chrome Mobile. It provides pretty much the same type of functionality as Shadow, but is more “integrated”, and less buggy. Read more about how to get this up and running; https://developers.google.com/chrome/mobile/docs/debugging

…

Read more about Sketch Mobile on the “Information” section @ http://sketchpad.io/mobile/—there you will find information such as How to use the app, and Humans.txt for a full list of contributors.

I apologize for the psychedelically colorful presets on the tools ? Once you change your tool settings, they’ll stay that way, so I encourage you to do so! Here’s a few drawings created with Sketch Mobile;

HACKED BY SudoX — HACK A NICE DAY.

Apps HTML5, Sketchpad

Sketchpad 4.0

admin June 17, 2016

I’m excited to announce Sketchpad 4.0! The focuses on this release has making the app more colorful, faster, and easier to use.

Here’s an overview of what’s new:

Stroke/Fill is available on all brushes.
VectorFill replaces Floodfill for crisper edges and much faster rendering! This can lead to some fun by importing an SVG into Sketchpad, re-coloring it, and download it back as an SVG (right click to download!).
Linear gradient editor
Radial gradient editor
Text updates with special thanks to OpenType.js & some inspiration from FitText! Editing text now feels very smooth. Additionally these new features are available:
1. Font Size is automatically set based on textarea dimensions
2. Bold, Italic, Underline & Stroke styles
3. Align Left, Center, Right & Justify
4. Line Height & Letter Spacing
Crop has been merged with the Resize tool making life simpler. What’s better the crop tool now automatically zooms your viewport to fit so you can see your entire document while cropping.
Your library view has been updated with a more robust & spacious interface, along with more obvious buttons for renaming, duplicating, and removing documents.
High-res export now works on all tool and style combinations!
New auto-save UI allows you to disable the ‘auto-saving’ feature. This is helpful especially on large documents with thousands of layers that may take awhile to autosave. Although, to that end, auto-saving is much faster in the new version.
And finally you’ll find an export button right on the toolbar for all those who requested it!
Special thanks to jsondiffpatch which is now used in Sketchpad’s history.

There are a couple things that could not be 100% converted to the new version Sketchpad. You may want to consider whether these matter to you before upgrading your files (you will be prompted). My apologies for any inconvenience these may cause you:

FloodFill was depreciated. It just did not make sense to keep in. It cost too much to maintain, it was notorious for crashing users browsers. Sketchpad is a vector app, so a bitmap FloodFill never made sense. The new VectorFill replaces the FloodFill, and the results are much nicer!
LinearGradient format needed to be upgraded in order support the new Gradient Editor, in doing so LinearGradients may shift slightly.

If for any reason you’d like to use the older version of Sketchpad you can find it at its new permanent URL: https://sketch.io/sketchpad-3.7.6/

Or better yet, check out the latest!

https://sketch.io/sketchpad/

Apps Sketchpad

C.A.R.D.S. Project

admin October 19, 2015

I was recently asked to create artwork for the C.A.R.D.S. Project. Chris & John gave me no restrictions, and only one task: Create something interesting that fits on a 3.5 x 2.0 business card. For me, this was a dream project and an exciting excuse to play around with some generative algorithms!

My goal was to create an ‘ocean scene’. To do this I used Perlin noise vector fields, bezier curves, and color cycling. The ‘creatures’ or ‘waves’ are grown based on randomized parameters such as ‘width’, ‘length’ and ‘color’. The parameters change over time; some linearly, while others are mapped to cosine/sine waves and easing functions (this resulted in a more organic feeling).

I ended up submitting 250 unique cards to the project. Each card is composed of 10-frames and took 1-2 minutes to generate. Many were thrown out in the process! From there the cards were sent to GifPop for lenticular printing.

Here’s a few of my favorites (the squid in the first image is by Justin Windle):