# MIKO.ART - Full Content Archive
> Miko Meow is a creative developer, designer, and musician making browser-native apps, drawing tools, and sound experiments — creator of Sketchpad, Color Piano, and ColRD.
Generated: 2026-08-16T06:49:53.569Z
Author: Miko Meow
Website: https://miko.art
Curated index: https://miko.art/llms.txt
Journal index: https://miko.art/journal/
This file contains every journal entry in reverse chronological order.
---
## Color Piano, Reintroduced
URL: https://miko.art/journal/2026/04/color-piano-reintroduced/
Date: 2026-04-16
Categories: Apps
Tags: Color, Music, Piano, Web Audio
Color Piano has been one of the longest-running ideas in my work: a way of learning music through color, spatial memory, and visual association rather than theory-first intimidation.
The original concept goes back years, but the newer site makes the idea feel clearer and easier to walk into, especially for people who think of themselves as visual learners, pattern seekers, or late starters who have been told the front door is somewhere else.
In practice
At its best, Color Piano sits between instrument, learning aid, and synesthetic experiment. Notes become easier to track. Intervals feel more tangible. Memory gets multiple anchors at once: sound, color, position, repetition. If color can help someone remember a scale, recognize harmony, or simply feel less intimidated by the keyboard, then the software has done something useful.
Some projects are exciting because they are new. Color Piano hasn't gotten older so much as more itself. It hasn't changed direction. It's just gotten more honest about the one it was already going.
Color Piano hasn't gotten older so much as more itself.
The more I return to it, the more it feels like a durable part of the larger body of work around creative tools, visual systems, and musical interfaces.
So this is less a launch announcement than a reintroduction. Color Piano is still here, still evolving, and still trying to make music feel a little more visible.
---
## Be Here Meow v1.0
URL: https://miko.art/journal/2024/07/be-here-meow/
Date: 2024-07-29
Categories: Apps
Tags: Ai Tools, Journaling, Mindfulness
A quiet place to put your thoughts and occasionally be surprised by what comes back.
Be Here Meow is officially here. After months of building, testing, and listening to the kind people who walked through beta with us, we're stepping into v1.0. If you're new, welcome. If you've been with us since the beginning, thank you for staying.
What's inside
When you write about a dream, the app notices and offers an interpretation. Most of us forget our dreams by the time we've poured coffee, and the ones we remember we never do anything with. We wanted to give those fragments somewhere to land.
Every entry generates an image based on what you wrote. Not a stock photo, not a generic mood. An actual visual response to your actual words. Over time, your journal becomes a kind of gallery of the days you've lived.
You can export everything you've ever written, whenever you want, in full.
Your words belong to you.
If you want to take them somewhere else someday, you can.
There's a haiku feature too. The people in beta loved it, so we kept it.
The calendar view, light and dark mode, search, tags, all of that works the way you'd hope. Quietly, in the background, while you write.
What it's for
What we set out to build was a quiet place to put your thoughts and occasionally be surprised by what comes back. We think we got close.
Write. Reflect. Rest.
---
## Sketchpad 5.0
URL: https://miko.art/journal/2018/01/sketchpad-5-0/
Date: 2018-01-09
Categories: Apps
Tags: Drawing App, Sketchpad
Hot off the press, released January 2018! Introducing Sketchpad v5.0 (codename Fancy Fox), a year after 4.1. The biggest change: brushes now draw *into* layers instead of just on top of them, which opens up a pile of creative techniques that weren't possible before.
Sketchpad's exciting new features:
- Thousands of new [Clipart](https://sketch.io/sketchpad-v5.1/guide/#clipart) provided by OpenClipart!
- Hundreds of new [Fonts](https://sketch.io/sketchpad-v5.1/guide/#text) provided by Google Fonts!
- Entirely new [Sketchpad User Guide](https://sketch.io/sketchpad-v5.1/guide/#welcome) developed by Ryan Reece!
- **Paint into layers:** You can now use any brush to draw into any Shape or Image layer!
- **Mirror Brush:** A crowd favorite! The mirror brush, as its name suggests, allows you to easily draw symmetrical imagery, similar to a mandala. For example the image above was created with this brush! We find this tool to be especially effective art therapy.
- **Tile Brush:** Perhaps the most versatile brush, the Tile Brush, allows you to stretch an image across any path that you draw. This can be a lot of fun! If you want, you can even drag an image from your Desktop onto the Stroke, and stretch that image along the path you draw. Experiment for joys abound.
- **Align layers:** When using the Select tool you can now align layers in respect to other layers. The new methods supported are: _top, left, right, bottom, horizontal, vertical_
- **Distribute layers:** When using the Select tool you can now distribute layers in respect to other layers. The new methods supported are: _horizontal, vertical_
We hope you enjoy Sketchpad v5.0!
As always feel free to drop us a [message](https://sketch.io/contact.html) and let us know what you think :)
---
## Sketchpad 4.1
URL: https://miko.art/journal/2017/01/sketchpad-4-1/
Date: 2017-01-04
Categories: Apps
Tags: Drawing App, Sketchpad
Extra extra! Released January 2017. There’s a new SketchPad in town, focused on making it feel at home in more places around the world. Themes let you pick a look (I’m on "Deep Purple" right now), and 12 professional translations just shipped, including full RTL support. Here’s a rundown of the latest features:
- Choose a theme, or create your own! My current favorite is [Deep Purple](https://sketch.io/sketchpad/?theme=DeepPurple)!
- 12 languages professionally translated, complete with LTR/RTL support:
- [English](https://sketch.io/sketchpad/?lang=en)
- [中文 (Chinese)](https://sketch.io/sketchpad/?lang=zh)
- [Español (Spanish)](https://sketch.io/sketchpad/?lang=es)
- [日本語 (Japanese)](https://sketch.io/sketchpad/?lang=ja)
- [Português (Portuguese)](https://sketch.io/sketchpad/?lang=pt)
- [Deutsch (German)](https://sketch.io/sketchpad/?lang=de)
- [العربية (Arabic)](https://sketch.io/sketchpad/?lang=ar)
- [Français (French)](https://sketch.io/sketchpad/?lang=fr)
- [Русский Язык (Russian)](https://sketch.io/sketchpad/?lang=ru)
- [한국어 (Korean)](https://sketch.io/sketchpad/?lang=ko)
- [Polski (Polish)](https://sketch.io/sketchpad/?lang=pl)
- [Svenska (Swedish)](https://sketch.io/sketchpad/?lang=sv)
- Realtime preview of tools while editing settings!
- High-Res export is now more reliable with all tools.
- SVG export has been added.
- Heart shape added.
- A few spunky new clipart have been added, not much, but super cute, more soon!
- The interface has been smoothed out, to be more a structured, uniform, and visual user experience.
- Vector Fill has greatly improved support for Clipart.
- Bitmap Fill (previously Floodfill) is back! The latest version creates a vectorized cache of the floodfill region making future renders much speedier.
- Much speedier scrolling of Layers/History panes thanks to [Clusterize.js](https://clusterize.js.org/)
Hope you enjoy! Btw, If you work with a school or non-profit education center [contact me](https://sketch.io/contact.html?type=nonprofit) about getting a free license to use SketchPad with your students.
---
## Sketchpad 4.0
URL: https://miko.art/journal/2016/06/sketchpad-4-0/
Date: 2016-06-17
Categories: Apps
Tags: Drawing App, Sketchpad
I’m excited to announce [Sketchpad 4.0](https://sketch.io/sketchpad/)! The focus of this release was making the app more colorful, faster, and easier to use. That meant rewriting a lot of the interior: real gradient editors, smoother text editing via OpenType.js, and VectorFill replacing the old bitmap FloodFill for crisper edges and much faster rendering.
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](http://nodebox.github.io/opentype.js/) & some inspiration from [FitText](https://github.com/astrojs/fitsjs/)! 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](https://github.com/benjamine/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 deprecated. 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 to support the new Gradient Editor, and 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: [Sketchpad 3.7.6](https://sketch.io/sketchpad-3.7.6/)
Or better yet, check out the latest!
[Sketchpad](https://sketch.io/sketchpad/)
---
## C.A.R.D.S. Project
URL: https://miko.art/journal/2015/10/c-a-r-d-s-project/
Date: 2015-10-19
Categories: Code Art
Tags: Canvas, Generative Art
I was recently asked to create artwork for the [C.A.R.D.S. Project](http://thecardsproject.com). 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](http://gifpop.io/) for
lenticular printing.
Here's a few of my favorites (the squid in the first image is by Justin Windle):
[](images/screen-shot-2015-08-11-at-055212-2_20314615179_o.png)
[](images/screen-shot-2015-08-11-at-053939_20313118610_o.png)
[](images/perlin-noise_20799892485_o.png)
[](images/perlin-noise_20790376802_o.png)
[](images/perlin-noise_20613175359_o.png)
[](images/perlin-noise_20613161489_o.png)
[](images/perlin-noise_20613042299_o.png)
[](images/perlin-noise_20611897280_o.png)
[](images/perlin-noise_20611818660_o.png)
[](images/perlin-noise_20178989383_o.png)
[](images/perlin-noise_19985452132_o.png)
[](images/perlin-noise_19985443852_o.png)
[](images/perlin-noise_19966948056_o.png)
[](images/perlin-noise_19966917556_o.png)
[](images/perlin-noise_19854886179_o.png)
[](images/gradient2622scale00006865198035661689seed09447263730689883-1_20830072315_o.png)
[](images/gradient114scale00010705421606872893seed09447263730689883-2_20641740428_o.png)
[](images/gradient86scale00011066297416606127seed09447263730689883-1_20641485088_o.png)
[](images/gradient59scale00007795513832380769seed09447263730689883-2_20206943934_o.png)
[](images/gradient47scale00005197800407278259seed09447263730689883-2_20207076014_o.png)
[](images/gradient10scale00008660784598281973seed09447263730689883-4_20641470340_o.png)
[](images/gradient5scale00015952325924743118seed09447263730689883-6_20819934432_o.png)
---
## Sketchpad 3.7
URL: https://miko.art/journal/2015/02/sketchpad-3-7/
Date: 2015-02-03
Categories: Apps
Tags: Drawing App, Sketchpad
[Sketchpad v3.7](https://sketch.io/sketchpad/) has arrived, February 2015! This is the release I’d been hearing the most requests about: 300DPI export for print, automatic library saving so you never lose work, and path smoothing on the pencil tool so your lines stop looking shaky.
Full 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 😊✨
---
## Made with Code
URL: https://miko.art/journal/2014/06/made-with-code/
Date: 2014-06-23
Categories: Apps
Tags: Creative Coding, Generative Art, Webgl
I recently had the pleasure of working on Google’s [Made with Code](https://www.madewithcode.com/) initiative with
the [Red & Co.](http://redandco.com/) 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
people's 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](https://github.com/mrdoob/three.js/blob/master/examples/js/exporters/STLBinaryExporter.js)
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](http://openctm.sourceforge.net/)'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:
[](images/Screen-Shot-2014-06-05-at-11.33.53-AM.png)
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](http://en.wikipedia.org/wiki/STL_%28file_format%29) 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](http://en.wikipedia.org/wiki/Rhino_%28JavaScript_engine%29) but it was too slow. I ran across the
project [Jav8](https://code.google.com/p/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.
---
## Sketchpad for Custom Print
URL: https://miko.art/journal/2013/10/custom-print/
Date: 2013-10-28
Categories: Apps
Tags: Creative Tools, Drawing App, Sketchpad
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 at [Sketch contact](https://sketch.io/contact.html).
---
## Sketchpad 3.0
URL: https://miko.art/journal/2013/07/sketchpad-3-0/
Date: 2013-07-19
Categories: Apps
Tags: Drawing App, Sketchpad
Sketchpad 3 is available in the Chrome Webstore (for free), combining WebGL effects with vector editing, and lots of HTML5 goodness! You can now drop a photo through webcam filters and paint onto the result in the same session, and save your whole document (vectors + attached assets) as a single .SKETCH package via drag-and-drop.
Some of the major improvements include:
- [Webcam FX](https://chrome.google.com/webstore/detail/webcam-fx/inlmgknpbjingijmnphnnjakekmncnai?hl=en-US) core integration, take photos with your camera, add filters, and place into your drawing!
- Save your entire drawing, from vector commands, to attached assets into a single .SKETCH package container which can be reloaded into the app via Drag & Drop. Special thanks to [Zip.JS](http://gildas-lormeau.github.io/zip.js/)
- Gradient text support (with live preview).
- Improved SVG parsing/rendering.
- Improved UX.
[Sketchpad](https://sketch.io/sketchpad/)
---
## WebcamFX - GLSL Shaders
URL: https://miko.art/journal/2013/07/filterstack-webcam-effects/
Date: 2013-07-08
Categories: Apps
Tags: Image Filters, Shaders, Webcam Effects, Webgl
Take photos with your webcam: mix and match combinations of filters to come up with your own unique effects. FilterStack includes a large collection of filter combinations to help get you started.
Once you're happy with your image, you can save to your computer, or upload to Sketch.IO to share with your friends. Similarly, you can share your custom filters as well, this way your friends can use the same filter you made for their own pictures.
To enable editing, hover over the right side of the app, this will display the sidebar. Here you can: add filters, modify the values of each filter in the stack, reorganize which filter is processed first, enable/disable filters, or remove filters. Each of these controls can create vastly different effects.
Play around, share the results, and let us know what you think!
Available as a [Chrome Extension](https://chrome.google.com/webstore/detail/filterstack/inlmgknpbjingijmnphnnjakekmncnai?hl=en&gl=US) or [Web app](https://sketch.io/webcam-fx/).
[](images/3a611e84-6702-4fae-b255-c748188d7939.jpg)
[](images/3e4984d9-52c3-4bfe-a41c-68d6c32e6d9e.jpg)
[](images/4c29056b-014a-46d2-a811-93d9b8e3b430.png)
[](images/5b1fa9f0-4dc1-4fa3-a9a4-767797db5d5c.jpg)
[](images/6fa21528-ff94-4461-afb6-d6371f4fbc3b.jpg)
[](images/007.png)
[](images/7d48a7f3-2667-49de-9d28-f54d0b896884.png)
[](images/8a098df6-0203-45e9-bf84-7f735e027d7c.png)
[](images/8ce0a62e-d8f4-4465-bbc8-dc3db7eb6928.png)
[](images/8f974d64-2239-41d1-9ac9-7961ef155345.png)
[](images/9bd8f69a-62fa-4c76-bcba-f38782393760.png)
[](images/22b8a597-6755-4107-80bf-f66eac50b8a9-1.png)
[](images/30f4602a-e332-4720-a5aa-a391b7727658.png)
[](images/050.png)
[](images/056.png)
[](images/058.png)
[](images/062.png)
[](images/067.png)
[](images/87b4442e-4645-4c5d-8ca5-51dde79fd87d.jpg)
[](images/93b8cb10-707e-41f0-a981-707a2bfa76cc.png)
[](images/399d71ab-3b05-4466-851d-2bf88ee7c87a.png)
[](images/421a56b3-60c2-4cd5-b607-6249d54c7ece.jpg)
[](images/687c619d-fe21-4b4e-a098-887df084d083.png)
[](images/970c3962-32e0-452e-8279-8330ba00fce7.png)
[](images/5261b49c-8df9-4703-b453-79db8d16bc6e.png)
[](images/5997b176-9b28-4d4c-a29d-543b772400a0.png)
[](images/06408c29-b75f-4c57-ad5f-71a98f00b036.png)
[](images/9144c5d9-4d4f-4baf-92e2-8bb5bed62c3d.jpg)
[](images/9794f42a-ab83-4b0b-a754-30339c643b40.png)
[](images/343711d8-c1cc-42bf-b1f4-2e6896b3b545.png)
[](images/756398da-06b2-41cf-97fc-7319b3a52ac6.png)
[](images/2909228b-a971-49e8-b822-08d5131b9617.jpg)
[](images/9007740921_c6783059f6_o.jpg)
[](images/9009117952_57e84e5760_o.jpg)
[](images/a53b19f8-eeca-42bc-9d80-a9a81d569d8e.jpg)
[](images/aeacd09d-8d87-4c13-8af7-10c8c1db5748.png)
[](images/aec61ace-e152-4412-97cb-f5d5ebe2c5f3.jpg)
[](images/b33d7fef-cb5c-4ef1-8472-2b4151726ce8.jpg)
[](images/bc562e1b-067a-42d7-865e-764dc241b78f.png)
[](images/c2a10764-d19a-4c2a-a58c-01f46196d2a7.png)
[](images/d356d721-78cb-4904-b289-d5be9ecdc217.png)
[](images/d948411d-b8ad-4601-8d94-a724e48d23ec.jpg)
[](images/Drawing-14.png)
[](images/Drawing-16.png)
[](images/png-2-copy.png)
[](images/png-3.png)
[](images/png-4.png)
[](images/png-5.png)
[](images/png-6.png)
[](images/png-9.png)
[](images/Screen-Shot-2013-05-30-at-4.26.26-AM.png)
[](images/Screen-Shot-2013-06-07-at-3.35.52-PM.png)
[](images/Screen-Shot-2013-06-09-at-5.34.44-PM.png)
[](images/Screen-Shot-2013-06-09-at-5.56.34-PM.jpg)
[](images/Screen-Shot-2013-06-09-at-5.57.10-PM.jpg)
[](images/sketch-3-copy-3.png)
[](images/sketch-111.png)
[](images/sketch-16.png)
[](images/sketch-copy.png)
[](images/sketch.png)
[](images/sketch1.png)
---
## Sketchpad 2.1
URL: https://miko.art/journal/2012/11/sketchpad-2-1/
Date: 2012-11-03
Categories: Apps
Tags: Drawing App, Sketchpad
**UPDATE: [Read about Sketchpad 3.0](/journal/2013/07/sketchpad-3-0/)**
Where Sketchpad 2.0 introduced non-destructive vector + bitmap editing on the web. Sketchpad 2.1 (SP2.1) takes that bland package of vector tools and borrows features from [Sketch Mobile on the Wayback Machine](https://web.archive.org/web/*/http://sketchpad.io/mobile/), an app that exhibited my furthest exploration in creating colorful environments. SP2.1 is great at creating background wallpapers quickly now that most of the tools work with gradients, and are all editable in place, this can be especially fun on tools like Mr. Doob’s generative brushes, and the improved stamp tool.
New features include:
- Multiuser drawing (NodeJS + Socket.io)
- Editable generative brushes: Chrome, Fur, Shader, Sketchy, Web (via [Mr Doob](http://mrdoob.com)‘s [Harmony](http://mrdoob.com/projects/harmony/))
- Spacebar+drag while you're in a brush (recommended by [Chris Smith](https://twitter.com/startsequence))
- Change the tool type in the options drop-down menu after you’ve created a layer (Chris Smith)
- Preview (ghost) the stamp tool before you apply it (Chris Smith)
- Crayon tool reintroduced from Sketch Mobile.
- Shapes: Rectangle, Ellipse, Polygon, Gear, Star, Burst, Radial Burst, Spiral (Sketch Mobile)
- Gradients in the style window, useable with most tools.
- Stamp tool now has “Translate” feature, combined with a low “Flow”, and a nice looking gradient, can create beautiful tapestries in a few clicks.
You can access SP2.1beta in two ways:
- Create your own multi-user drawing room (replace “myRoom” with your room):
- [Archived multi-user room example](https://web.archive.org/web/*/http://sketchpad.io/sketch2.1/?server=myRoom)
- Create your own personal drawing room:
- [Archived Sketchpad 2.1 app](https://web.archive.org/web/*/http://sketchpad.io/sketch2.1/)
Have feature requests, or thoughts of how the interface is horrible? I would love to hear!
---
## Sketchpad 2.0
URL: https://miko.art/journal/2012/10/sketchpad-io/
Date: 2012-10-10
Categories: Apps
Tags: Drawing App, Sketchpad
**UPDATE: [Read about Sketchpad 3.0](/journal/2013/07/sketchpad-3-0/)**
Introducing a new way to create graphics online. [Sketchpad 2.0](http://sketchpad.io/sketch/?src=mudcube/1) is a non-destructive vector & image editor, built in HTML5, that you can start using right now, for free! I/O is for input and output, that means, any drawing you make can be shared, forked, and edited.
You can drag and drop images and SVGs into your browser to place them in your drawing. Then drag, resize and rotate. The time-machine feature provides unlimited undo/redo functionality. There’s a huge collection of fonts, graciously provided by those involved with the Google Fonts Directory, the text tool allows you to preview _exactly_ what your text looks like, instead of editing and clicking “apply” over and over. The select tool allows you to edit any layer, and even do bulk operations, such as changing the color of multiple layers.
Want your own Sketchpad installation? Sketchpad can be used for recoloring patterns for print or textile industries, drawing/photo competitions, customizing products, kids communities, collaging, or whatever else you can dream up, feel free to [contact me](http://sketchpad.io/contact.html) with your project details.
---
## Presets on Google Developer Live
URL: https://miko.art/journal/2012/10/making-web-magic/
Date: 2012-10-09
Categories: Talk
Tags: Creative Coding, Sketchpad
I recently had the honor to be part of a new series called Presets on Google Developer Live hosted by [Paul Irish](https://plus.google.com/113127438179392830442), and lovingly put together by [Louis Grey](https://plus.google.com/100535338638690515335), [Phoebe Peronto](https://plus.google.com/111795175737033304392) amongst other Googlers. We discussed my most popular [Chrome Experiments](http://www.chromeexperiments.com) including [Color Sphere](/sphere/), [Color Piano](/piano/), as well as my latest project [Sketchpad 2.0](http://dev.sketchpad.io). Here’s the description of the show;
> Starting today, we’re introducing a new series on +[GDL](https://plus.google.com/104600989437225677892), called Presents, highlighting Google developers and their incredible products. Kicking off is our first series, Making Web Magic, highlighting the minds behind the most popular+[Google Chrome](https://plus.google.com/100585555255542998765) experiments. These +[Google Developers](https://plus.google.com/111395306401981598462) showcase their latest web experiments and discuss how they are making the web faster, more fun, and more open in this 3-episode hangout.
>
> Join our host +[Paul Irish](https://plus.google.com/113127438179392830442) and see updates from some amazing guests in this three part series: +[Michael Deal](https://plus.google.com/107688529762867989230), +[Mark Danks](https://plus.google.com/114750061080899808673) and +[Hakim El Hattab](https://plus.google.com/110819624687392857345). The episodes air today at 1, 2 and 3 PM Pacific Time. Join us on +[GDL](https://plus.google.com/104600989437225677892): [Google Developer Live](https://developer.chrome.com/live/)
---
## "Time Traveler" piano song
URL: https://miko.art/journal/2012/09/the-traveler/
Date: 2012-09-20
Categories: Music
Tags: Piano
It’s time to start going out of my comfort zone and pursuing music a bit more! This is a song that I wrote earlier this year for the harpsichord and dulcimer, performed on the electric keyboard, and mastered in Logic. It’s dedicated to my sister, who is living in Tanzania the next few years teaching elementary school. It’s already tomorrow where she lives.
[Listen on SoundCloud](https://soundcloud.com/michael-deal/harpcimer)
---
## Sketch Mobile
URL: https://miko.art/journal/2012/07/sketch-mobile/
Date: 2012-07-18
Categories: Apps
Tags: Drawing App, Sketchpad
[Sketch Mobile](https://web.archive.org/web/*/http://sketchpad.io/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](http://m.chromeexperiments.com/) 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 ([Can I use: Font Face](https://caniuse.com/fontface)). My favorite resource for creating your custom fonts is [IcoMoon](https://icomoon.io/), 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;
```js
var width = window.innerWidth / 1280;
var height = window.innerHeight / 800;
var ratio = Math.min(width, height) * 100 >> 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](https://github.com/mudcube/Event.js) is available on GitHub 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](http://www.html5rocks.com/en/mobile/touch/) by [Boris Smus](http://smus.com/), 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; [archived overview on the Wayback Machine](https://web.archive.org/web/*/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 in Chrome’s modern [remote debugging docs](https://developer.chrome.com/docs/devtools/remote-debugging/).
…
Read more about Sketch Mobile in the archived “Information” section on the [Wayback Machine](https://web.archive.org/web/*/http://sketchpad.io/mobile/), where you can still 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:
---
## Color Picker
URL: https://miko.art/journal/2012/04/color-picker/
Date: 2012-04-28
Categories: Open Source
Tags: Color, Color Picker, Color Tools
The latest rendition of the Color Picker “Classic”, themed after Photoshop, GIMP, and other image editors, there are no frills here, it’s a basic Hue, Saturation, Luminance, and Alpha (HSVA) color selector. It works in browsers that support the `