Graphics in Mad Tea Lab

As you might have noticed, Mad Tea Lab comes with a graph box, but it can do a little more than just your daily sine plot

Function Rendering Styles

For every function, there’s a function rendering style option, it’s a really condensed drop down menu at the right side of each function entry, here’s some examples of it in use:

The names of the rendering styles are prefixed with the input and output, for instance, Image Color has (x,y)[R,G,B], which means you get x and y as input, and your result should be an array with three values, red, green, and blue.

Gamma Corrected Anti-alias

High quality rendering is nice, specially for fractals.

Just hold shift down when pressing the “FULL”-button and you’ll get anti-alias (2*2 subsampling), ctrl will give you more (4*4), and both together you’ll probably get more quality than you need (8*8). Gamma Correction is enabled by default but can be disabled by holding down the alt key while pressing “FULL”.


madtealab_antialias

You can also set anti-alias parameters globally:

  • aaIt = Sample iterations for x and y (so 3 means 3×3 samples)
  • aaGamma = Gamma correction on/off

Drawing Graphics From Code

You have a bunch of functions for drawing, color, and transforms. Such as line, rect, triangle, quad etc. These should be called from one of the two callbacks:

  • draw() – called after all function plots etc are drawn
  • drawOveride() – nothing is drawn unless you do it

There are two “spaces” in which you can draw, and you set them using the functions:

  • screenSpace() – Pixel coords, top left corner of the graph is 0,0
  • plotSpace() – Graph coords, you can move/zoom etc

SVG Export

For everything drawn in the graph, you can export a SVG file, for instance if you draw a 3D cube, you will get a file that is really small, and that you can open in a vector program such as inkscape, and access the vertices and move around the objects.

Overview

This should be somewhat similar to how it all fits together:

madtealab_graphics_s

Yellow colored boxes indicate that interfaces are intended for use from the Expression-box. These function names and parameters are (intentionally) quite similar to the processing API, which itself has some heritage to OpenGL. For most parts I think it’s a nice API for these kind of purposes.

Leave a Reply