At Portlandia Foods we’re excited to offer our customers the chance to have their photograph on Portland Ketchup bottles! Previewing what an image would look like is as simple as dragging and dropping a photograph from your desktop into the browser, or clicking “Choose file…” to browse images on your system. HTML5’s Canvas element along with the File API and Drag and Drop are the technologies used to create the demo.
HACKED BY SudoX — HACK A NICE DAY.
ColRD is a new website to help you find Colors, Palettes, Gradients and Patterns. It was developed by Daniel Christopher, of LucentPDX, and myself. The best place to get started is the Discover page. There you can narrow down results using filter by colors, or types, as seen in the above (Red/Black/Brown Patterns).
After many years of selecting colors, I haven’t come across the perfect color picker… With that in mind, the most natural for me so far has been combining the powers of RGB w/ HSL. This is what we did for the ColRD create pages, the Color Creator and the Palette Creator;
Once you create some content, or find some things you like, you can start building your own Swatch, where you can quickly find the content that you like. Check out my page, cool stuff! http://colrd.com/@/mud/
Let us know what you think, and how we can improve your experience!
HACKED BY SudoX — HACK A NICE DAY.
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. Ricardo (Mr. Doob) claims this framework is written “for dummies”, which is perfect for me, because that is exactly where I’m at with 3D programming ? Creating this wall of interactive color blocks was simple with Three.js.
MIDIBridge allows Javascript to connect to Java’s internal MIDI synthesizer. The author, Daniel, is working on a Javascript to Flash bridge that uses SoundFont2 to map amazing libraries of sound. There are thousands of SoundFont2 patches available, which opens up the doors to all sorts of new creativity. The framework is easy to tie into by sending direct midi messages to specific channels. For instance, the message code 128 turns the note off whereas 144 turns it on.
Matt West’s MIDI file reader jasmid was extremely useful to parse the MIDI files from the server on the client-side using Javascript. I’ve tweaked the script slightly to allow for pausing, and resuming of songs. The collection of royalty free classical piano pieces comes from Disklavier World. Thank you to all, amazing contributions!
Here’s the WebGL Music Box that reads a selection of classical music such as Tchaikovsky’s Waltz of the Flowers from the Nutcracker. And then there is the interactive version that you can control the notes with your mouse.
This demo has been tested on Mac in Google Chrome, Safari, and Firefox.
HACKED BY SudoX — HACK A NICE DAY.
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 given the same diversity in the 90-color palette. For instance, in the following image, the diversity of red in the 90-color palette is given equal weight to green;
<img class="aligncenter size-full wp-image-453" title="Screen Shot 2011-07-31 at 11.51 Discover More Here.52 PM” src=”http://mudcu.be/journal/wp-content/uploads/2011/08/Screen-Shot-2011-07-31-at-11.51.52-PM.png” alt=”” width=”544″ height=”241″ srcset=”https://galactic.ink/journal/wp-content/uploads/2011/08/Screen-Shot-2011-07-31-at-11.51.52-PM.png 1006w, https://galactic.ink/journal/wp-content/uploads/2011/08/Screen-Shot-2011-07-31-at-11.51.52-PM-300×133.png 300w” sizes=”(max-width: 544px) 100vw, 544px” />
Speed is looking good, these images are taking around 200ms to process.
More to come on this, and future developments in the land of color ?
HACKED BY SudoX — HACK A NICE DAY.
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 framework that blurs the line between “web-app” and “desktop-app”…
Due to my own budgetary constraints, and differing visions within the corporation, the time has come for me to move on from Orange Honey. The projects will continue under the direction of my good friend Charles Pritchard. He is without a doubt the most knowledgable developer I’ve worked with.
The following highlight a few of my final contributions to Mugtug; made possible with HTML5;
– Layer Styles; this module creates effects such as InnerShadow, OuterShadow, InnerGlow, and OuterGlow. These are similar to what Photoshop achieves—the difference is, my version has the ability to do what I’ve coined “style stacking”. Style stacking allows the designer to add multiple fills (solid, gradient, pattern) to, for instance, InnerShadow;
– SVG Parser; this module converts .svg files into <canvas> commands, accepting complex examples, supporting features from <gaussianblur> to the <use> element;
This is an image from OpenClipart rendered in the SVG->Canvas parser;
There is no Gaussian blur in HTML5’s <canvas>, and to do a “true” Gaussian blur takes a lot of processing, and computational time. I ended up using Mario Klingemann’s StackBlur to polyfill the support in the SVG parser, the results are pretty good; I think some of the blurring wasn’t turned up enough do to my own Matrix scaling issues. Canvas left, SVG right;
– Radial Gradient; this demo shows how fun radials and gradients can be ?
– Composite Erase; this module creates a new composite mode, allowing you to erase colors based on the color of a brush;
– Brushes; this module adds some fun new brushes to play with, like galaxy (left);
– Marquee; this module creates a “magick wand” with marching ants, for selecting portions of an image, and modifying them with fills, filters, and other effects;
HACKED BY SudoX — HACK A NICE DAY.
Galactic.ink