Sketchpad 4.0

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!


adminSketchpad 4.0

C.A.R.D.S. Project


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):

adminC.A.R.D.S. Project

Sketchpad 3.7

Sketchpad 5 copy

Sketchpad v3.7 is here! Here’s a list of new features:

  • High-Res export for print! 300DPI
  • Autosaving to library!
  • Document resizing.
  • Path smoothing on Pencil tool—no more shaky lines!
  • Path tool – curved path editor.
  • Polyline tool – straight line editor.
  • Arrow brush with curved path (or straight path)
  • More background styles! Colors, gradients and patterns, oh my.
  • Outline style on Shapes, Text, and various supported Brushes.
  • Angle control on Linear Gradient style.
  • Color Noise on Linear & Radial Gradients
  • Designed for Mobile/Desktop hybrid experience.
  • Improved speed of undoing multiple actions.
  • Text-box resizing without scaling by holding ShiftKey.

Play around with the latest version to see for yourself 🙂

adminSketchpad 3.7

Made with Code


I recently had the pleasure of working on Google’s Made with Code initiative with the Red & Co. creative studio and Mash a group of developers located in Portland Oregon.

My primary focuses were creating the renderer for the Bracelet Challenge along with the binary exporter that takes peoples rendered bracelets and sends them to Shapeways for 3D printing. I have to say this job was probably the most satisfying work that’s come my way! For three reasons: (1) The initiative of inspiring a more diverse range of people interested in programming at an early age is awesome (2) Red & Co and Mash were friendly, fun and altogether great team to work with (3) The work was challenging and allowed me time to work with more cutting edge technologies 😀

The Bracelet renderer was developed with ThreeJS. My modest contribution back to the ThreeJS project can be found here: STLBinaryExporter

The letters were generated by Red & Co. and exported into STLs. Since STLs are huge uncompressed representations of 3D objects (made up of tons of triangles) the files from there were converted into CTMs using OpenCTM‘s ctmconv—this shaved 10’s of megabytes of the combined file-size of the entire alphabet. The letters were then mapped to a spiral like lego bricks as conceived by Ryan Reece of Mash. Here’s a screenshot of what that looked like:

Screen Shot 2014-06-05 at 11.33.53 AM

The app also needed to run in Java (on Google’s AppEngine) so the server could render the bracelets the users created. Although the app could very well send the STL files directly to Shapeways, we needed to control what was being sent so there was no unfortunate surprises! By rendering on the backend we could be sure what was being sent to Shapeways. Instead of re-writing the code from scratch I decided to keep as much as possible in Javascript. I first got the scripts running in Rhino but it was too slow. I ran across the project Jav8 and was quite happy with the results performing around 10x faster than Rhino. I ended up writing some of the matrix math in Java and exposing the function to Javascript to speed things up further.

From there, the bracelets are sent to Shapeways where they are printed with high-quality nylon plastic on 3D printers from EOS, a German printer manufacturer who provided P760 SLS 3D printers to support the initiative.

The Bracelet challenge has a limited print run, so get them while you can! After that there will still be a lot of other fun challenges on the Made with Code website.

Here’s a video from Shapeways:


adminMade with Code

Sketchpad for Custom Print

Screen Shot 2013-10-28 at 3.55.16 PM

Sketchpad has been used in applications from scientific machine learning, to kids drawing, but we haven’t had much chance to focus on any commercial aspects. This is why we’re excited to be changing that. We’re gearing up to provide the technology that makes your users product customization experience quick and easy by tapping into our experience + codebase in building Sketchpad.

One of the many features we’re creating to push the envelope is instant previews of customized products—there is no more need to upload the artwork, process the preview on the server, and then download once again, this can all be done in milliseconds in the browser.

We’re looking for partners who own print companies, with websites that are in the need of automation and HTML5 goodness. Connect with us—https://sketch.io/contact.html

adminSketchpad for Custom Print