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, an app that exhibited my furthest exploration in creating colorful enviroments. SP2.1 is great at creating background wallpapers quickly now that most of the tools work with(…)
Javascript
Sketchpad 2.0
Introducing a new way to create graphics online. Sketchpad 2.0 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(…)
Making Web Magic
I recently had the honor to be part of a new series called Presets on Google Developer Live hosted by Paul Irish, and lovingly put together by Louis Grey, Phoebe Peronto amongst other Googlers. We discussed my most popular Chrome Experiments including Color Sphere, Color Piano, as well as my latest project Sketchpad 2.0. Here’s the description of(…)
ColRD: Image DNA
Exciting news on ColRD.com! Today we’re announcing the public beta of Image DNA, available exclusively on the Chrome Webstore. Image DNA is an application that aides you with intelligent extraction of colors from images. The colors extracted are spread evenly across the humanly visible spectrum; so you’ll notice, for example, although there is not much blue in(…)
Color Sphere
Color Sphere was one of my 1st HTML5 projects, way back in 2007. Well, the years passed, browsers sped up, my hair grew longer, and nothing changed on Color Sphere… but the time has come! The latest rendition is bigger (easier to see), more accurate (pixel perfect), and looks really cool when you switch it(…)
Bitwise Gems and other optimizations
One of my favorite posts in the last few years was Bitwise Gems in AS3 by Polygonal Labs, an article inspired by Bitwise Operations in C on Gamedev. This article is a summery of what I’ve learned, applied to Javascript, plus a few other tricks. What’s the wisdom in using bitwise? Bitwise operations can be(…)
Color Accessibility in the Browser
Announcing the release of color-blindness daltonization + simulation bookmarklets; daltonize.appspot.com The Chrome Daltonize extension is faster in many cases, and uses less bandwidth than the bookmarklet—highly recommended when Google Chrome is an option! What is daltonization? “Daltonization is a process performed by the computer that allows people with color vision deficiencies to distinguish a range of detail they are(…)
Background Generator
I worked on a future release of BG a few months back, and am excited to share some screenshots! It’s exciting to be able to produce wallpapers for my Desktop in my Browser. Since creating these images, I’ve found that by using JSZip and Downloadify the browser can generate HUGE, high-resolution and print-ready graphics. The largest file that I’ve successfully exported from(…)
Music Box
Last weekend I got a chance to mess around with Mr. Doob’s rendering framework Three.js and Daniel van der Meer’s amazing MIDIBridge. I’ve been a big fan of both Ricardo and Daniel for some time now, so it was fun to work with their codebases. Three.js is a lightweight 3D engine that can render in <canvas>, <svg> and WebGL.(…)
ColRD: Color Extractor
UPDATE: Renamed to Image DNA and released as a Chrome Extension, read more. I spent last weekend working on a color palette extractor in HTML5. These examples illustrate automatically picked 7-color and the 90-color palette to represent the image. Although the results are organized by the color popularity within the palette, colors that don’t show up much are(…)
Orange Honey; Epilogue
The past four years (2007-2011) much of my energy and capital has been focused into building the Mugtug graphics suite; Sketchpad, Darkroom and Lightbox. The suite has come a long way since I developed Sketchpad during a seven month work binge of Red-Bulls! Through the collaboration of many developers we’ve moved forwards to create an entire(…)
HTML5: Typographic Effects
HTML5 Rocks is a website that helps inspire developers and teach how to implement those shiny new HTML5 features in real world examples. They recently asked me to write an article for their website. Working on a project for Google was inspiring (even if there was no pay involved)! … Neon Rainbow Jitter; … Sleek Zebra (inspired by WebDesignerWall);(…)
HTML5: Typographic Metrics
Typography support between browsers has a history of being spotty. One of the major hurdles in creating the (yet-to-be-released) next-incarnation of Sketchpad was typographic support; between browsers and even within the <canvas> specs. One pitfall of the <canvas> tag is the lack of text-metrics support (past calculating the width via ctx.measureText). This prevents us from(…)
HTML5: Unicode Profiling Project
The Unicode Profiling Project was designed to gather statistics on unicode support across systems. The software checks each symbol in your systems Unicode catalog (65,535 glyphs) to see which are visible on your computer using <canvas> and Javascript. The data generated from your computer will help profile the state of unicode support on the web. Your computers unicode(…)
HTML5: Font Detection
So you want to detect fonts in a HTML5 webapp? Presenting a fast-native solution for accurately detecting fonts installed on your system — this demo utilizes Javascript and the <canvas> tag and requires a browser that supports ctx.fillFont(), and ctx.getImageData() — including Chrome, Firefox, IE9, Opera and Safari. This plugin would make sense a website such as TypeTester(…)
Dynamic MIDI generation in the browser
UPDATE: This project has been cancelled, the MIDIBridge (which takes this idea much further) is what you’re looking for; http://www.abumarkub.net/abublog/?p=505 Have you ever wanted to use MIDI in your Javascript or Flash project? It’s been a long time dream of mine. After a long search I came up with one solution that would provide the best(…)
Sketchpad 1.0
Sketchpad is a free application utilizing <canvas> to allow anyone with a web-connection and a recent copy of Safari, Firefox, Opera, or Chrome the ability to create beautiful drawings. Sketchpad includes a number of Drawing Tools — including: Text, Shape, Spirograph, Brush, Calligraphy, Pencil, Paint-Bucket, and Stamp. These tools can be used together with the(…)
Sketchpad (alpha)
Welcome to the preview of Sketchpad. Though not all browsers support <canvas> we’re working hard to extend support before our official release. Until then, you lucky FireFox users (download Firefox) will be able to kick the tires and hold the wheel of what we believe will become the new standard in Web-authoring. Sketchpad uses the(…)