November Patch-a-day

For the month of November 2011, I’m going to try to produce and post one new JSUI patch that uses the new MGraphics system. I’m currently working on MGraphics documentation, and thought that people would like a jump-start on this as part of learning this new drawing system.

The MGraphics system is based on the same coding engine used for C-based coding, so it is high-performance and ultra-capable. I hope that you enjoy these patches.

November 1, 2011

BasicStrokes shows how to set up the mgraphics system and do basic line drawing – called “paths” drawn with “strokes”. This is about the simplest useful patch I could come up with, but it hopefully helps you see how easy it is to create a basic UI.

November 2, 2011

BezStrokes is a bit different: it uses the Bezier curve drawing function to create a simple loop from the top, toward the bottom, then back up to the top. I also use “relative coordinate” mode, and have to calculate the aspect ratio in order to fill the display area. Relative coordinates can be easier to work with for arbitrary object sizes, but you have somewhat less control over the actual draw positions.

November 3, 2011

This is a simple example of drawing circles within the JSUI space, but uses “relative coordinate” mode so that it automatically scales properly. It also determines the aspect ratio in the paint() routine so that it will scale properly in both patching and presentation mode. This isn’t “art”, but it is something that is a great foundation for shape drawing work.

November 4, 2011

This shows some basic uses of the pattern generation functions within mgraphics. The creation of the pattern (pattern_create_linear and pattern_create_radial) builds a gradient for use during shape fills. In these originating calls, you define the “influence” points – the points on a plane that describe the location of gradient startup. If these points are close together, the edge between segments will be tightly defined; if the points are farther apart, the edge will be more of a gradient.

Once you define the two points, you have to give each a color (using the add_color_stop_rgba function, which needs an index – either 0 or 1 – followed by an rgba color set) and tell the next drawing routine to use this pattern for drawing. The next time you do a fill() or stroke() call, the routine will use the pattern rather than a single color.

So, in this case, I create a black background (using a rectangle), build up a color, then have a ball displayed/drawn using a background color. You’ll notice that the moving ball shows an unchanging background, since the pattern is defined by absolute location rather than relative (to the object) location. Thus, we perform the sleight-of-hand that makes it look like we have a “porthole” into the background, when in fact we are simply drawing the shape using a pattern.

November 5, 2011

I wanted to do something that showed management of line width. I started playing with something, and it ended up like this. I’m not sure that it is that useful for learning line width handling, but it does make a cool little op-art display.

November 6, 2011

I wanted to do something with the mouse, with timers and in non-relative mode. So this is what you get: a cool little drawer that does some cool animation on the tail of the draw. Later this week I’ll be doing a patch with a little easier means for persistent drawing, but for the moment you can have a little fun with this.

One fun part of this is to see what happens when mgraphics tries to draw really short, but really wide, lines. You get funky little stars because minute (1- or 2-pixel) lengths cause significant changes in the drawing function.

November 7, 2011

Time to write some text. Since I don’t have anything particular to say for myself, I’ll let the fonts speak for themselves.

Doing a lot of text printing can be a bit of a processing hog. You can see this by increasing the number of fonts to some Really Large Number. Or change the metro to run really fast. These drawn text lines will start to drag on the system…

But this is a cool introduction to text drawing, and how you can be a little creative with whatever you have on your system.

November 8, 2011

Fun with fonts, again – this time with a little rotation. Can you really make a flower that says “I am a flower”? Easy enough with Max.

You’ll notice in this Javascript that we call “identity_matrix()” after each rotation. That’s because the rotate function rotates the drawing area, and therefore needs to be reset after each path fill. Another option would be to rotate by the same amount for each iteration, but that would require a lot more thinking than simply resetting each time.

November 9, 2011

Sometimes, when you are working with relative coordinates, you have to do a little monkey work in order to deal with transformations (translation, rotation and scaling). In this case, we draw our spiral at the top-left, then let the translation functions to their thing.

If nothing else, it helps us communicate with Dr. Mesmer.

November 10, 2011

Up to now, all of our drawing has occurred in the paint() method, which is called every time that the component needs to refresh itself. This is fine in many cases, but troubling in some cases:

  • If the paint method contains some generative function, you cannot know when the visual is going to be recalculated.
  • If your drawing function does *a lot* of stuff, you can find performance starting to suffer.

So what to do? This sketch shows how to draw to an alternative MGraphics instance, save that visual as an Image object, then use that image to redraw the component during a refresh. The performance is very high (in this case, drawing 1000 semi-transparent rectangles) because the drawing is only done when you ask the drawing to be redone.

Very important stuff here. Thanks to JKC for the help with this!

November 11, 2011

When you create a surface for drawing (using the separate MGraphics instance we saw last time), you don’t have to make an opaque surface – it can be alpha channel reduced, allowing us to make semi-transparent figures that can be reused. In this case, I make a Big Red Square, scale the user space when drawing it, then draw a blue circle over the top. Everything is half-alpha’d, so you get a little see-thru no matter what happens.

November 12, 2011

You’ll notice by the name of the patch and javascript that this is a rubber stamping of a single image. But when you watch it run, you’ll see that it is not a rubber stamp – it’s a scaled, rotated and transformed version of the same star, warped and manipulated on the display area.

When you look at the code, you’ll see what’s happening – sorta. Some of the actions of the “stamp” are not obvious when you see the code. We are going to be exploring this over the next few days.

November Patch-a-day

Nov 11, 2011 at 3:22pm

Awesome! Thanks guys, this is a wonderful month!

Nov 13, 2011 at 12:58am

Thanksgiving at it’s finest!

Nov 25, 2011 at 11:41pm

Fantastic. I hope this turns into an ongoing monthly series.


You must be logged in to reply to this topic.