Stroep

Just a collection of random works – Mark Knol

Archive for 'Generative art'

Generative art: game (0)

December 21st, 2013, under Generative art.

game.05
game.04
game.03
game.02
game.01

Colors from Rayman game art (tinyurl.com/k8o7qla). Drawed using mousegestures.

Tagged with , .

Generative art: Garden (2)

December 27th, 2012, under Generative art.

garden.02 It’s been a while, but I got some new inspiration to create some new images. Generative arts keeps triggering me, so I started with a fresh new engine. It’s the same engine as I used for the faces of the previous two posts.

I’ve coded some straight-forward ribbons, no additional lines or shapes and stuff this time. I’ve created two pieces of art in the same style, I’ve used a nice colors an image of a garden. It’s created using actionscript (flash). Because it’s created using mouse gestures, it took a some time to fill the details.

garden.01
garden.02

Here are some detail shots, I find it really nice to have such level of details.
garden.01.detailgarden.02.detail

The full composition size is 8000×6000, so it is available for print. Hope you like it.

Tagged with , .

Generative art: Dennis (0)

December 24th, 2012, under Generative art.

I created some generative art for my colleague Dennis for ‘Sinterbaas’ at MediaMonks.
dennis.01
dennis.02
dennis.03
dennis.04
dennis.05

Created using actionscript 3
Composition size: 2000×2000 px
All rights reserved.

Tagged with , .

generative.face (1)

December 23rd, 2012, under Generative art.

face.mark
Detail shots:
face.mark.detail.01
face.mark.detail.02
full composition size: 6700×6700 px

This is created with actionscript, you can find the high-res version on flickr.

Tagged with , , .

Quick post.
I created a simple generative doodle using the canvas with javascript, check it out:
» Canvas Doodle

It is based on this experiment by mr.doob. For me it was a challenge to finally do a canvas experiment. It is kinda fun, you don’t have to compile and the surprise is very big if it works, since you don’t have such a thing as compile errors :)

A nice thing with the html-canvas is that you can set the line thickness to floats, where in actionscript you can only use an numbers that will be be rounded. That allows me to create nice thin lines. An annoying thing is that you have to use strings (with RGBA values) to define the color of the lines. Can this be a uint-value?

context.strokeStyle = ‘rgba(242, 43, 81, 0.8)’;

Another thing that I noticed, it’s is hard to blend two canvas contexts, you’ll have to do it pixel per pixel.

function merge(toContext, fromContext)
{
    var imageData = fromContext.getImageData(0, 0, width, height);
    var pixelData1 = imageData.data;
    var pixelData2 = toContext.getImageData(0, 0, width, height).data;

    if (pixelData1.length != pixelData2.length) return;
   
    for (var i = 0, total = pixelData1.length; i < total; i ++ )
    {
        pixelData1[i] = (pixelData1[i] + pixelData2[i]) / 2; // ugly blend
    }
   
    toContext.putImageData(imageData, 0, 0);
}
 

This works. Yeah yeah, I know if I want a normal blend, I should grab the RGB values separately and mix them per channel, but this works in the experiment.. (!?) ;) I’m open for suggestions and optimization of this thing. Is there a Actionscript-like

BitmapData.draw()

or

BitmapData.copyPixels()

alternative for this?

Tagged with , , .

Generative art: mixup (0)

December 11th, 2011, under Generative art.

Tagged with .

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.<int> = new Vector.<int>();
var data:Vector.<Number> = new Vector.<Number>();
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.<int> = new Vector.<int>();
var data:Vector.<Number> = new Vector.<Number>();
var path:GraphicsPath = new GraphicsPath(commands, data);
var drawing:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();

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
 

Tagged with , .