I finally fixed streaming audio support (using the Web Audio API). The main streaming audio implementation was done already in Early 2011, using the Mozilla Audio Data API. However, this was Firefox only, and it was removed from Firefox builds in March 2014.
You can easily play all visible functions as sound in the functions panel, here is the realtime play button:
It uses the play options (sample length, rate etc) as the normal play function, but instead of rendering all at once and generating a wav file, it renders on the fly and keeps looping the area, so changes can be heard within a few milliseconds. The play options panel is expanded when you first press any of the play buttons:
So now it is once again possible to play around with this old example:
When plotting functions that grow rapidly such as exp and pow, it’s hard to get a sense of overview despite good scrolling and zooming tools. Why can’t we just graph it all?
The obvious answer is of course that there is way too much space, but isn’t it more fun to answer with another question:
-How can we warp that space to get as much useful information as possible?
Conceptually I figured that a warp could reveal the different types of functions, like this:
And… it works!
(note that you can click any screenshots to open the interactive lab in Mad Tea Lab)
Using the infinity graphing mode
It’s activated by just dragging in the top right corner, and drag the bottom left corner to enable negative infinity graphing (hold down alt-key for symmetry). If you double-click anywhere on the graph, the view will center on that point. The markers (gray lines) in the corners are just showing you basic functions:
You can look at the visual similarity to see what type your function behaves like. For example, lets say way have 1.1^x and x^29. Even though x^29 crosses the gray exponential marker, it is clearly not as steep.
The example below shows how extreme scalings of linear and quadratic functions still sort themselves into the correct categories in the corner:
It could also be used to compare extreme functions and see intersections etc.
This feature also work with the relevant function rendering styles:
For instance, here I use the “Repeat y” plot to see how the infinity corner area gets filled by the different base functions:
It’s not a big deal, my limited excursions of the world of mathematics gives me a slight preference for tau over pi. It’s like chosing between overall-ugliness (it’s ugly with two definitions for the same thing) or domain-ugliness (“wrong” constants gives uglier formulas). I came up with an interactive madtealab example to show the profoundness of tau in the domain of derivation:
Making an image more (or less) colorful seems like an easy task. But in order to make the colorfulness respond as we expect it to, we need to take human perception into account. A nice way to evalute color-functions is to use gradients that appear to have the same intensity and colorfulness. There is also a sophisticated perceptual model called CIECAM02 that can be used for reference (here is a useful CIECAM02 photoshop plugin). Below is a small tool to compare ways of changing colorfulness. It’s the same source image processed in photoshop using different methods.
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.
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 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:
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.
So it’s Chinese new year, and what animal?
The Rabbit! And what kind of association could
this bring to an oldschool 3D hacker?
Yeah, you got it! Of course it’s the Stanford Bunny!
So this is todays Mad Tea Lab exercise!
Parsing and rendering the good old bun in 3D!