Archive for the ‘Mad Tea Lab’ Category

Realtime Audio Returns

Wednesday, March 16th, 2016

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:

Prototyping layouting algorithm

Tuesday, March 31st, 2015

I just wrote an article about layouting,
check it out if you want some context!

If not, then here’s a simple demonstration of a layouting algorithm, try it out in Mad Tea Lab, or just check the video:

Graphing Infinity

Tuesday, November 4th, 2014

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:

concept sketch

And… it works!

gif anim

(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.

example 1

The example below shows how extreme scalings of linear and quadratic functions still sort themselves into the correct categories in the corner:

example 2

It could also be used to compare extreme functions and see intersections etc.


This feature also work with the relevant function rendering styles:

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:


Happy Tau Day!

Friday, June 28th, 2013

Did you hear about the pi vs tau debate yet?

Tau vs Pi
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:

Check it out!

Note that triple derivation is also implemented as a graphing mode, so this is how I’d do it hacker-style.

(by the way, tau is now defined in madtealab!)

11 11 11

Friday, November 11th, 2011

Another nice date passes by… 🙂

Today I thought I would show how Mad Tea Lab can be used to prototype audio effects in realtime. Note that the song might need some time to load. Here is the lab, or, just check out the video below!


(Note: Initially this feature used the Audio Data API, and because of that it only worked in Firefox)

Happy New Year Again!

Thursday, February 3rd, 2011

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!


Merry Christmas 2010

Friday, December 24th, 2010


(check it out)

10 10 10 10 10

Sunday, October 10th, 2010


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:

Music video with Mad Tea lab

Monday, May 3rd, 2010

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…

Mandelbrot Zoom

Sunday, April 25th, 2010

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