Today I thought I would show how Mad Tea Lab can be used to prototype audio effects in realtime. Note that this only works in Firefox, and that the song might need some time to load. Here is the lab.

Audio streaming support using Mozilla (Audio Data API) was implemented quite a long time ago, but since it’s firefox only and a bit shaky I never felt like documenting it or show it as a feature. But it’s fun and useful so I think it’s about time…

Compare for yourself

Hover mouse over the link captions below to compare, click to “lock” an image (hover response might initially be slow due to image loading). You can also compare in high-res.

Desaturate

Saturate

For another comparison, check mark meyer’s blog it also has some scatter plots.

Hue/Saturation Dialog – Saturation

• This method has several “dead areas” where colorfulness cannot be increased (where any color-channel is 0 or 255), here are some examples:
  • 004e4a (0,78,74)
  • a2bdff (162,189,255)
  • ffb7ad (255,183,173)
• Colors close to “dead areas” have a limited saturation span.
• Increasing colorfulness will also increase the perceived brightness of the colorful areas.
• Technically this seems to be a plain HSL (bi-hexcone) implementation.

Vibrance Dialog – Vibrance

• Vibrance increases colorfulness so that vivid colors are boosted less and faded colors are boosted more.
• Colors close to red are bosted less (the intent is to retain skin colors according to the manual).
• Using vibrance -100 will not fully desaturate and dark colors will be retained more than light ones.
• Calculation involves a HSV/HSL-like space*.
• An interesting side-effect of desaturating vibrance is that the colored parts of the image get a kind of S-curve applied to it, increasing the contrast of the desaturated material. This often looks quite good (see below), though it can cause some clipping of bright colors.
  Hover mouse here to see Vibrance -100
  Hover mouse here to see Grey (CIECAM02)
  

Vibrance Dialog – Saturation

• Overall, this algorithm is a very nice improvement over the older Hue/Saturation dialog, since it seems to be gamma corrected, and calculation is not done in HSV/HSL space*. Result is quite similar to CIECAM02.
• Colors are mixed to grey using about 28% 72% 0% (and then interpolated in linear RGB), which is close to perceptual standards.
• Bluish images might appear darker after desaturated (and using saturation -100 will discard all blue information).
• Saturation values are somewhat counter intuitive, if you saturate by -33 you have to saturate by 50 to get back to the original level. Though it is mathematically correct if you think in percentages; (1 – 0.33) * (1 + 0.5) is about one.

Channel Mixer Dialog

• Increasing colorfulness will also increase the perceived brightness of the colorful areas.
• Quite smooth and consistent, might be useful if you don’t have access to vibrance color controls.
• Mixer values (+120 -10 -10, -10 +120 -10, -10 -10 +120)
• Mixer values used for grey (+30 +60 +10 Monochrome)

* HSV/HSL color space is strikingly perceptually inconsistent, an extreme example is that it treats these two colors as having the same brightness:

0000FF (0,0,256)

FFFF00 (256,256,0)

Artifacts from the HSV/HSL transforms can be seen in the comparison tool, such as unsmooth gradients and increased noise (clearly visible in a still image from Canon D7 footage with a high ISO setting). Also note that, for most images these inconsistencies do not pose any major problem.

Check out this old school sinus animation!

I just had to write a blog entry since it’s 10/10/10!

But also, there are a few features that I’ve worked on lately but been too lazy to blog about, so this seems like a good opportunity! Here’s the list:

• Loading and drawing Images
• Channel and Pixel access, for easy prototyping of color filters etc
• Color-space conversions (from/to) HSV, HSL, YUV
• A lot of behind the scenes stuff, better alignment of the processing api, fixes, new unfinished stuff etc

This is a video made from animation rendered in Mad Tea Lab mixed with some footage I shot at Tore Jarlos studio in Stockholm. The music is Tores remix of Dear Martins song called “We Are”.

Here is a lab if you want to play!

If you’re interested in rendering animation with Mad Tea Lab read more here…

So, I made a mandelbrot zoom with some color tweaking, the youtube clip above was rendered using Mad Tea Lab. If you’re interested in rendering animation with Mad Tea Lab read more here…

(Note that rendering fractals using javascript is painfully slow, so if you know you just want to render some basic fractal animations, there are probably better tools out there…)

Still images:
High resolution snapshot 1
High resolution snapshot 2

(Click the image below to explore/edit the pi fractal!)

I had some fun creating a minimalistic font system! (maybe something like this should be included/supported in Mad Tea Lab?)

Merry Christmas Everyone! (And a happy new year too )

(Note that the URL is longer than 2083 characters so it won’t work in IE, hehe, it’s the c64 font encoded as an array of 32 bit ints that takes some bytes…)

Go try out Mad Tea Lab right away, or check the links to the introducing articles. Feel free to leave general comments and questions under this this post, but also note that you can leave comments on the articles as well!

• What is Mad Tea Lab?
• Graphics in Mad Tea Lab
• Sound in Mad Tea Lab
• Which Browser is recommended?