November Patch-a-day

November 26, 2011

Back home from the Wisconsin trip, and time to put the kids to work. “Here’s Photoshop. Please make me a spaceship…”

This is a very simple implementation of a layered sprite system. It has a GenericSprite object, and a use-specific ship object that augments the GenericSprite with a move function. The result is that bangs move the ship back-and-forth among some trees, properly layered within the other sprites.

Nothing too mgraphics-specific here, but useful for seeing how to perform some basic sprite-like operations within the JSUI/MGraphics system.

November 27, 2011

Just like working with path and image drawing, you can also transform the user space for pattern creation. Rather than stretching this out over several examples, I just created a simple “Pattern Transform Explorer” for you to see how each of the functions works with a simple linear pattern creation.

November 28, 2011

Sometimes it is more convenient to do your drawing with another program, then use JSUI to do the display. The problem is that scaling can get to be sort of grainy. Not the case if you use the SVG file format for the drawing – and use the svg_render() function to render it into the current user space.

This patch includes a little SVG I created in Illustrator; I use it within JSUI to create a cool little animation with almost no code.

November 29, 2011

Using the transform(), translate(), rotate() and scale() functions give us the ability to do some complex graphical drawing that would otherwise require altogether too much math to consider. In this one, we use these function to create a tilted three-planet orbit display on a pretty blue background.

Oh, and we also pipe the output to a Jitter matrix! In order to do this, we use the push_group() and pop_group() functions to create a working area for the drawing, produce an image from the result, then display the output in both the JSUI drawing area and output it as a matrix. The translation (from mgraphics to Jitter matrix) isn’t perfect, but it gives us the ability to do a lot with the result.

November 30, 2011

Alas, we hit the end of the road. In this ditty, we do a bit of javascript coding to perform a word-wrap on my heartfelt goodbye. Change the font or the font size and the text should wrap accordingly. This uses the text_measure() function to get the width of a string, then back-pedal if we’ve gone too far.

Not the most elegant wordwrap function ever written, but you get the idea.

I hope you’ve enjoyed the series, and find the mgraphics system to your liking!

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.