Generative art: mixup

Mark Knol — Sun, 11 Dec 2011 12:49:55 +0000

The new graphics.lineTo

Mark Knol — Tue, 19 Jul 2011 19:34:08 +0000

I am working on a Pie-chart class. Data visualisation is fun, so I want to create my own pie-chart. Reinventing the wheel (creating another pie-chart) is a good thing if you want to create a custom wheel, so you know how to modify to make it fit your needs. Now this post is not about the pie-chart, but about something I discovered inside the graphics class. Most flashcoders knows you can draw lines using graphics.lineTo. There is another way of drawing lines in actionscript, using the graphics.drawPath and graphics.drawGraphicsData function. Let’s take a look at it.

graphics.lineTo

The good old method. Drawing a line from point (x:100, y:150) to point (x:300, y:300). Check out these four lines of clear code.

 graphics.clear(); // start with blank canvas
 graphics.lineStyle(2, 0xFF9900);
 graphics.moveTo(100,150);
 graphics.lineTo(300,300);
  

graphics.drawPath

Now, you could also use this alternative way of drawing. There is no such thing as creating circles or squares using this method, only manual. It is using commands (moveTo, lineTo, curveTo) and has a separate list of data containing the actual values. All values in the data-list represents the x-positions (odd values) and y-positions (even values). So we are pushing x, y, x, y etc.
When using CURVE_TO, you need to define four values; controlX, controlY, x, y. Take a look at the code:

var commands:Vector. = new Vector.();
 var data:Vector. = new Vector.();
 commands.push(GraphicsPathCommand.MOVE_TO, GraphicsPathCommand.LINE_TO); // add 2 commands, moveTo and lineTo
data.push(100, 150)
data.push(300, 300); // push all values into data-list
graphics.clear(); // clear the canvas
 graphics.lineStyle(2, 0xFFCC00); // Set the stroke style
 graphics.drawPath(commands, data); // finally, draw it all
  

As you could see, you need to write a bit more code. As you can see you can combine the graphics.lineStyle and the graphics.drawPath functions, so its not completely new.

By the way, did you know you could push multiple items to an list at a time?

graphics.drawGraphicsData

Be prepared, 12 lines to draw the same a line.

 var commands:Vector. = new Vector.();
 var data:Vector. = new Vector.();
 var path:GraphicsPath = new GraphicsPath(commands, data);
 var drawing:Vector. = new Vector.();
var stroke:GraphicsStroke = new GraphicsStroke(2);
 stroke.fill = new GraphicsSolidFill(0xFF9900);
 // The stroke definition with a fill
commands.push(GraphicsPathCommand.MOVE_TO, GraphicsPathCommand.LINE_TO); // add 2 commands, moveTo and lineTo
 data.push(100, 150)
 data.push(300, 300); // push all values into data, odd represents the x-positions, even represents the y-positions. So we are pushing x, y, x, y etc.
 drawing.push(stroke, path); // collect all data inside one list
graphics.clear(); // clear the canvas
 graphics.drawGraphicsData(drawing); // finally, draw it all
  

The drawGraphicsData function forces you to push all data into a new list. The fun thing is, you feel very exited when you have the last example running. I don’t know why, but getting advanced stuff working feels good. Note, for the last example we need to import these classes to draw that orange line. Five classes for one simple orange line, pretty impressive eh?

 import flash.display.GraphicsPath;
 import flash.display.GraphicsPathCommand;
 import flash.display.GraphicsSolidFill;
 import flash.display.GraphicsStroke;
 import flash.display.IGraphicsData;
  

Borders/fills

When I first started to use this way of drawing lines, I noticed that I needed 2 lines of code to define a stroke. The fill is the last parameter of the GraphicsStroke class, and I really dislike to define all other optional parameters just to set that one parameter at the end. Oh, without a fill or color, a border is invisble Still don’t get it! The fill is a fun part of this advance drawing method. Now in the normal lineTo-world we know these linestyles graphics.lineBitmapStyle, graphics.lineGradientStyle, graphics.lineShaderStyle and ofcourse the graphics.lineStyle. Now if you want to create a border to be ‘filled’ with something, you could create a GraphicsSolidFill, GraphicsGradientFill, GraphicsBitmapFill or GraphicsShaderFill.

It is nice to know the same classes could be used to fill a shape, so they could be added to the drawing-list too. That is really a nice part of this advanced way of drawing, just add or remove instances of classes to the drawing-list (it should implement IGraphicsData).

You can now define fills, strokes and multiple paths before you actually draw it on the stage.

Saving graphics; saving numbers

The cool thing of this whole advanced drawing method is that you could save the commands/paths as a file and redo it more easy than graphics.lineTo. If you do generative arts this could be a benefit. There is no official function for saving the data, but you could write it yourself since we are dealing with numbers. When opening a file you could theoretically push all commands/paths/fills inside the drawing-list and you could draw the same drawing. I haven’t test this, but maybe you could save the whole vector as ByteArray using ByteArray.writeObject(), compress it and then you have a nice way of saving ‘graphics’. Another benefit, you could delay ‘the draw’ and still collect data which could be drawed later. Very handy if you are doing heavy generative arts.

Conclusion?

It is not easy to draw lines using the the advanced method, since you are dealing with vectors with numbers, instead of lines. It is cool to have every graphic-thing as a separate classes and fills are nicely done and easily swap-able. Graphics data is now more flexible. Adobe could add more graphics classes. I hope they will add support for custom strokes (like Illustrator). At the other side, most things still fit in the good-old lineTo coding-style, which is very clean and straight-forward. Anyhow, it is nice to see a new way of saving graphics.

When you are drawing lots of lines, this advanced way should bring better performance since it is delaying the actual draw. I haven’t benchmarked how much exactly, but since you can mix graphics.drawPath with graphics.lineStyle, it feels graphics.drawGraphicsData is syntactic sugar which has the benefits noted I already mentioned.

I also wonder if it there would be a performance boost if you create your own lineTo function (which only pushes data to a list) based on the graphics.drawGraphicsData, with one drawNow() function.

Hope this will inspire you to share other or new possibilities.

 var theEnd:GraphicsEndFill = new GraphicsEndFill(); // thanks for reading
  

Arthouse

Mark Knol — Mon, 01 Feb 2010 18:48:20 +0000

Mocha ArtHouse is an experimental space that fuses the experience of art, culture and food, and exist as a platform for young artist and performers. ArtHouse brings new artist and audiences together in a manner that is accessible and inspirational.

The gallery was 21 december 2009. Unfortunately, I couldn’t see it in real life, because it was in India, and I live in the Netherlands (yes, almost other side of the world, 6.400km). It was great to work with those guys, they have showed some of my favorites and send me nice photo’s. Hope to have an gallery like this in Holland ever too (someone interested to do this?)

» More photo’s here

Particle test center – video

Mark Knol — Sat, 02 Jan 2010 08:12:38 +0000

More info here

Generative art: Tiger

Mark Knol — Sat, 03 Oct 2009 14:41:29 +0000

Tiger represents power. I love to express strong animals with powerful lines. This one is created with actionscript (flash). I edited the composition with photoshop to add the text and changed contrast. The lines and letters are created generatively, using mouse gestures and random movements. I have worked hard to create this image, it is full with details, full of lines. Hope you like it.

full composition size: 10.000 x 7500 px

Generative art: Eagle

Mark Knol — Sat, 03 Oct 2009 12:05:22 +0000

I love eagles, they look very strong and powerful. This one is created with actionscript (flash). I edited the composition with photoshop to add the text and changed contrast. The lines and letters are created generatively, using mouse gestures and random movements. I have worked hard to create this image, it is full with details, full of lines. Hope you like it.

Full composition size: 10.000 x 7500 px

see.the.sky @ iGoogle

Mark Knol — Sat, 12 Sep 2009 21:16:55 +0000

I like iGoogle. It’s very handy, because I can read my RSS-feeds everywhere I am. A while ago, I tried to personalize the header of iGoogle. I found the option to create your own skin, simply by uploading an image. I didn’t know the theme would be public, because I didn’t read the conditions. So, if anyone is interested.. Here is the iGoogle-theme:
see.the.sky @ iGoogle

Generative art – Tentacles

Mark Knol — Sat, 25 Jul 2009 07:51:48 +0000

I’ve experimented with some tentacle/swirls. Every tentacle starts in the center and becomes smaller every time. I love it’s design; It looks like it is done with illustrator or something but maybe a little bit more complex. I used fresh colors to make it look very trendy. The flowers and random letters are also generatively created.

All tentacle experiments can be found here.

Stroep » Generative art