Archive for the 'Actionscript 3' Category

JustLineOn Tutorial for Non-Coders

Published
by
Thomas
on 7. November 2008
in Actionscript 3, Coded Beauty, Flash, Generative Art, JustLineOn and Tutorial
. 0 Comments

As already mentioned in my last basic Tutorial there are two ways of creating your own JustLineOn-Project. Now I want to explain the easier one that is targeted towards non-coders and should therefore be suitable for almost everybody. To understand the underlying concept of JustLineOn reading the previous Tutorial is highly recommended.

What you are going to see is how to write your own XML configuration files to combine pre-coded elements. For those not familiar with XML - don't worry it's really easy. Let's just jump into the cold water by having a look at what such a configuration file looks like.

<justlineon>
	<title></title>
	<description></description>
	<author></author>
	<bgcolor></bgcolor>
	<project>
		<lineserver>
			<pointtransformer></pointtransformer>
			<painter>
				<palette></palette>
			</painter>
		</lineserver>
	</project>
</justlineon>

This is basically the empty skeleton of such a configuration file. You can see various elements in there.

The first three elements have no functional purpose, they only exist to describe this project. You can define a title, a short description, and an author of this project.

Drawing Elements

All the other elements define how the project behaves and looks like. Each project starts with <project> and ends with </project>. In between these elements you can define your LineServers, PointTransformers, Painters and Palettes with <lineserver>, <pointtransformer>,<painter> and <palette>. There is one parameter that each of these elements always has - the type parameter. This parameter defines what kind of LineServer, PointTransformer or Painter you want. Each of these types have a couple of additional special parameters. At the end of this post you can find a list of all types that come with the program.

Basically all of these parameters (except the type parameter) are optional. If you don't define them, default values are used instead. So all you have to do is pick the elements you want, configure them as you like and arrange them. On top there are as many LineServers as you want, inside each LineServer are as many PointTransformers and Painters as you want. And inside each Painter you can put as many Palettes as you want.

Palettes

Let me just quickly explain how these palettes work.

Palettes are used to define the colors a Painter uses to draw. So what exactly happens to the colors depends on what Painter you are using. The DotPainter for example draws colored dots and the RibbonPainter draws Ribbons. The best way to find out is to try.

There are 3 types of Palettes. Static, Dynamic and Preset.

Static Palettes are manually defined in advance. You can either fill them with colors like this:

<palette type="static">
      <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
      <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
      <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
      ...
</palette>

or you can fill them with color gradients:

<palette type="static">
      <gradient steps="1-20000">
           <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
           <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
           <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
           ...
      </gradient>
</palette>

or you can also combine single colors and gradients:

<palette type="static">
      <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
      <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
      <gradient steps="1-20000">
           <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
           <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
      </gradient>
      <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
</palette>

Dynamic palettes in contrast fill themselves with values according to some system or pattern. The dynamicHueCircle for example circles trough all hues starting from a certain color.

Finally there is the Preset Palette which in fact is a static palette with a fixed range of 5 colors. The only exception is the ghost preset which consists of only one color which actually isn't a real colour - full transparency. You can use this if you want to have gaps in your drawings our only want outlines.

Simple Example

So let's quickly create a simple example:

<justlineon>
      <title>Example</title>
      <description>Simple example to explain JustLineOn</description>
      <author>Thomas Kräftner</author>
      <bgcolor>0xFFFFFF</bgcolor>
      <project>
            <lineserver type="AlwaysTurn" angleDegreeMin="28" angleDegreeMax="28">
                  <pointtransformer type="PointPlusRandom"></pointtransformer>
                  <painter type="RibbonPainter">
                        <palette type="dynamicRandom"></palette>
                  </painter>
            </lineserver>
      </project>
</justlineon>

First we have those lines of description and we set the background color to white (0xFFFFFF).

Then the actual project starts. We use an AlwaysTurn Lineserver and use default values for all parameters except angleDegreeMin and angleDegreeMax which we both set to 28.

Then we add a PointTransformer of type PointPlusRandom with default values.

And as a Painter we use a RibbonPainter, as well with default values. The Palette we use is of type dynamicRandom. To keep it simple this is also used with default values.

Have Fun!

I think you can now understand how JustLineOn works. I won't get into more details on how to configure each element, just go and try on your own. There is nothing you can break!

You might want to check out the projects that come with the program. You can find them in the project folder of the download. And if you have any further questions feel free to contact me whenever you want to.

Here you can see all available elements plus all the possible parameters:

----LINESERVER----------------------------------------------------------------------------
<lineserver type="AlwaysTurn" length="20-150" lengthMulti="0.5-1" lengthAdd="0-20" angleDegreeMin="-360-360" angleDegreeMax="-360-360" away="1-500" breakOutChance="0-1" randomAbort="0-1"></lineserver>
<lineserver type="AlwaysTurnImplosion" length="20-150" lengthMulti="0.5-1" lengthAdd="0-20" angleDegreeMin="-360-360" angleDegreeMax="-360-360" away="1-500" breakInChance="0-1" randomAbort="0-1"></lineserver>
<lineserver type="CircularExplosion" length="20-150" angleDegreeMin="-360-360" angleDegreeMax="-360-360" away="1-500" awaySub="0-10"  breakOutChance="0-1" randomAbort="0-1"  circleStepWidthDegree="-360-360"></lineserver>
<lineserver type="CircularImplosion" length="20-150" angleDegreeMin="-360-360" angleDegreeMax="-360-360" awayStart="1-500" awayEnd="1-500" awaySub="0-10" breakInChance="0-1" randomAbort="0-1"  circleStepWidthDegree="-360-360" restart="true/false"></lineserver>
<lineserver type="LineServer"></lineserver>
<lineserver type="PathPlayer" path="test.txt" restart="true/false"></lineserver>
----PAINTER-------------------------------------------------------------------------------
<painter type="DotPainter" chance="0-1" minwidthdivisor="0.3-30" maxwidthdivisor="0.3-30" border="true/false" borderWidth="0-10"></painter>
<painter type="EndPointPainter" form="0/1" chance="0-1" minwidthdivisor="0.3-30" maxwidthdivisor="0.3-30" border="true/false" borderWidth="0-10"></painter>
<painter type="Painter"></painter>
<painter type="RibbonPainter" multi="0-300" twirl="true/false" jumpeach="true/false" minwidthdivisor="0.3-30" maxwidthdivisor="0.3-30" maxJumpPerc="0-100" border="true/false" borderWidth="0-10"></painter>
----POINTTRANSFORMER----------------------------------------------------------------------
<pointtransformer type="PointPlusRandom" x1="-500-500" x2="-500-500" y1="-500-500" y2="-500-500"></pointtransformer>
----PALETTE-------------------------------------------------------------------------------
<palette type="static">
      <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
      <gradient steps="1-20000">
           <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
           <color red="0-255" green="0-255" blue="0-255" alpha="0-1"></color>
      </gradient>
</palette>
<palette type="preset" name="MonaLisa_LeonardodaVinci"></palette>
<palette type="preset" name="PersistenceofMemory_SalvadorDali"></palette>
<palette type="preset" name="StarryNight_VincentvanGogh"></palette>
<palette type="preset" name="TheBirthofVenus_SandroBotticelli"></palette>
<palette type="preset" name="HarmonyinRed_HenriMatisee"></palette>
<palette type="preset" name="MarilynMonroe_AndyWarhol"></palette>
<palette type="preset" name="TheScream_EdvardMunch"></palette>
<palette type="preset" name="LesAmants_ReneMagritte"></palette>
<palette type="preset" name="AFlockofSeagulls"></palette>
<palette type="preset" name="BlackKnight"></palette>
<palette type="preset" name="Ghost"></palette>
<palette type="dynamicHueCircle" red1="0-255" green1="0-255" blue1="0-255" alpha1="0-1" stepWithDegree="-360-360"></palette>
<palette type="dynamicRandom" red="true/false" green="true/false" blue="true/false" alpha="true/false" fillWith="0-20000"></palette>

Coded Beauty/JustLineOn Tutorial

Published
by
Thomas
on 28. October 2008
in Actionscript 3, Coded Beauty, Flash, Generative Art, JustLineOn and Tutorial
. 1 Comment

Okay I knew this was going to happen. Deadlines were tough for my thesis project and as soon as the whole thing was done I got lazy. That's why there is no documentation or tutorial for my thesis Project. And of course now everybody is confused about the use of JustLineOn. So I think it's time for me to change that so more people may be able to explore this project.

Oh and one more thing before I go on: The thesis is called "Coded Beauty" and the program of that project is called "JustLineOn". Just to save you from confusion.

The concept of JustLineOn

Okay in theory it's quite simple.

There are 3 basic elements and a bunch of helper elements. They are:

  • LineServer
  • PointTransformer
  • Painter

plus:

  • Palettes
  • Gradients
  • Colors

Everything is formed from those elements. So let's see what they do.

LineServer

LineServer basically do nothing else than serving a constant stream of x/y coordinates. What these coordinates are is what makes different kinds of LineServers different. Those coordinates could simply be the position of the mouse. Or they can be randomly mixed all over the stage. Or they can form a certain path or pattern. This is obviously the most common way they will operate.

Each Lineserver can have as many PointTransformers and Painters added as a child.

PointTransformer

PointTransformers can be added to LineServers and "do something" to the coordinates coming from the LineServer. Here's a simple example:

coordinates from LineServer (10/5) -> PointTransformers adds 5 to each value -> (15/10)

Painters

Painters are attached to LineServers as well and receive the coordinates after they went through all PointTransformers attached to that LineServer. So using the example from above all Painters attached to the the same LineServer would receive the coordinates (15/10).

Then what Painters do is quite loosely defined: Draw something according to that coordinates. Most simple examples: Draw dots at those coordinates or connect them with lines.

Palettes

Palettes can be added to Painters. Palettes represent collections of colours. These Palettes can either be static or dynamic. If static you can manually add colours to them. If dynamic they "fill themselves" according to a certain system. For example they could just be filled with random numbers. Or start at some colour and constanly decrease Saturation.

Gradients

To fill static palettes with a gradient of colours you can easily define a gradient that smoothly fades between as many colours in as many steps as you want.

Colors

Just define a color using a RGBA color. These are used to fill static palettes directly or via the Gradients element.

How to use JustLineOn?

There are some simple Key-Controls:

Caps Lock    -    play/stop
Space        -    reset
R            -    reset & play
+            -    faster
-            -    slower
O (letter O) -    load new Project
P            -    export PNG
J            -    export JPEG

How to create your own projects?

There are 2 different approaches. Either you program or you combine&configure. Second is used for people who can't code (or lazy people)

If you want to have maximal flexibility grab yourself the source and get started. You can either combine those LineServers, PointTransformers, Painters, and Palettes I already created or you can create your own by extending the corresponding classes. For details check the ASDOC or wait for the next tutorial I am going to publish here soon about the technical details of this project.

If you wanna go the fast and easy way you can do that by simple XML configuration files. Don't be scared if you never heard of XML before. It's really easy. Also for that approach I'll be publishing a tutorial really soon. If you just want to try it on your own check out the XML files in the projects folder. There you can find various XML projects and might figure out how it works on your own. Start with "Beispielprojekt.xml" as it is the least complex one.

The Controller

Oh one more thing. If you start the controller application it will be black. As soon as you load a project in JustLineOn you will see a lot of controls appear. Some are those you have via Key-Controls already. Most of them refer to parameters in LineServers, PointTransformers and Painters. Those are the same parameters you can control via XML as well. I know that those controls look really confusing on most projects. Again - try "Beispielprojekt.xml" for a start.

With these controls you can influence a program while running and you can easily experiment with the parameters.

Have fun!

I hope this offers a good short introduction to JustLineOn and I would love to hear your thoughts on that project. So grab yourself a copy and start experimenting. And please check back soon to see my other tutorials about how to create your own projects with JustLineOn.

Oh and if you create nice pictures I would really love to see them. Mail me or put them on flickr and tag them "JustLineOn".

Firefly

Published
by
Thomas
on 14. May 2008
in Actionscript 3, Art and Generative Art
. 2 Comments

The last days I've been working on a file which has turned out to be quite nice.

The initial thought was to draw a set of connected lines randomly moving across the canvas with predefined angles.

I constantly added new features like colors, collision detection, line thickness, random abortion of line drawing,...

Just have a look at the images on flickr.

I may publish the source some day but for now there's still a lot of code cleanup to do.

Malewitsch

Published
by
Thomas
on 7. May 2008
in Actionscript 3, Art and Generative Art
. 0 Comments

So still inspired by the same exhibition now this work started from Malewitsch's work Suprematist Composition: Airplane Flying but as I continued to work on it it grew bigger and bigger...

Click on the Stage - Just play a bit if you like. Or scroll down for a more detailed description on the adjustable parameters and how it works.

Check my flickr account (widget on the right) for nice stuff I created with this tool.

This movie requires Flash Player 9

Controls on/off - Show/Hide the whole Options panel

Clear - Clears the Stage

Overlap - Allow/Disallow overlapping of Shapes

Width/Height/Rotation - Adjust Width/Height/Rotation of the Shapes

Dirt - Decide how much the Rectangle should be transformed

Random Malewitsch Colors - Stick to the colors from Suprematist Composition: Airplane Flying being Red, Blue, Yellow and Black

Random Colors - Randomly pick a color with every click

Choose Color - Pick a color yourself by entering a HEX Code

Now just some words on the Script itself.

First some tribute to stuff I used:

Again Grant Skinners awesome seeded Random Class.

Keith Peters MinimalComps for the Controls.

And now just two snippets from my Source which might be interesting.

var test_width:uint = 1 + dist * 2;
var x:Number;
var y:Number;
if (dist_iteration &lt; Math.pow(test_width,2)) {
	do {
	x = (dist_iteration % test_width) - dist;
	y = Math.floor(dist_iteration / test_width) - dist;
	dist_iteration++;
	}
	while(Math.abs(x)

This starts from a certain point 0,0 and then returns coordinates in concentric rectangles around the initial point. Combined with the next snippet (Collision detection) this was used to find an empty sport close to where you click.

The next snippets checks for an empty spot (white) on bitmap where a shape can be put. It could still use some work as it currently assumes that 0,0 is the same for the Bitmap and the Shape. It also only handles x,y and rotation applied to the shape, no scaling or other adjustments. But for now it does it's job quite well.

public static function check(shape:Shape,bitmapData:BitmapData):Boolean {
	var tempBmpData:BitmapData = new BitmapData(shape.width, shape.height, true, 0xFFFFFF);
	var matrix:Matrix = new Matrix();
	var rotation:Number = 2 * Math.PI * (shape.rotation / 360);
	matrix.rotate(rotation);
	matrix.translate(shape.width/2, shape.height/2);
	tempBmpData.draw(shape,matrix);
 
	var tempBmpDataSource:BitmapData = new BitmapData(shape.width, shape.height, true, 0xFFFFFF);
	var matrix2:Matrix = new Matrix();
	matrix2.translate(-shape.x+shape.width/2,-shape.y+shape.height/2);
	tempBmpDataSource.draw(bitmapData, matrix2);
 
	var empty:Boolean = tempBmpData.hitTest(new Point(0, 0), 0xFF, tempBmpDataSource, new Point(0, 0), 0xFF);
	tempBmpData.dispose();
	tempBmpDataSource.dispose();
 
	return(empty)
}

Mondrian

Published
by
Thomas
on 1. May 2008
in Actionscript 3, Art, Flash and Generative Art
. 0 Comments

Some days ago I was at an exhibition and when I looked at Mondrians Composition III I just had to do that.
Click at the picture to draw a new one.

This movie requires Flash Player 9

Oh and I used the excellent seeded Random Class by Grant Skinner so the results are random but seeded which means they will be the same whenever you come back to see the show again.