A lot has happened since Jitter Recipes: Book Three. Max 6 came along, and brought with it a wealth of new tools for making some really fine Jitter work. With a full physics engine, support for complex scene hierarchies, advanced animation tools, it has taken me some time to catch my breath and get caught up. And don’t get me started on Gen! Now I’ve emerged from the Jitter Test Kitchen to give you a new series of recipes that will help you get caught up too.
Below you will find the fourth installment of Jitter Recipe Collection. More snacks for the Patching Enthusiast! Stay tuned for more entries to your favorite cookbook.
Recipe 44: ScrollyBrush
- Using jit.mgraphics to create a nice airbrush effect
- Combining graphics with compositing/feedback
- Using jit.pix for some basic image compositing
I thought it would be fun to come up with a drawing tool that moved as you draw, automatically creating tile-ready images. Combining some really basic MGraphics techniques with feedback and image offset makes for a super fun drawing patch. Start scrolling.
We’ll start with creating our brush shape. To do this, the mouse coordinates from jit.pwindow are packed together and formatted to create a simple radial gradient in the correct location. Walking through that big message box, we paint the background white, create our gradient, create an ellipse vector shape, set the fill source to our gradient, and then fill the ellipse. You can see the result in the small jit.pwindow on the left.
To accumulate our brush strokes, we have a named Jitter Matrix “blip” that is composited with the brush shape for each frame.
The really tricky things are happening inside of the jit.pix object. You’ll notice that the jit.mgraphics output is actually black and white, but the image we create is in full color. The red-channel of the brush image is taken and used to mix the accumulated image with a defined color (bcolor). Another way to think of it is that the brush image is the alpha channel in the compositing between the image and the color.
Finally, the scroll is done by adding to the coordinates used by the ‘nearest’ operator. If I had used ‘sample’, the image would look streaky before long, and wouldn’t have that endless scroll effect I wanted. ‘Nearest’ will always take the nearest sample from the incoming matrix instead of interpolating.