Yay! I won the contest! CS4 is all mine!
Thanks again to everybody who voted for me!
One of the things everybody knows but are still ignored most of the times is the power of constraints. It keeps you from loosing yourself in complexity and saves you a lot of time when an idea turns out not to work. Therefore I love the The 25-Line ActionScript Contest run by Keith Peters. I have to admit it's also the hope of winning a CS4 Suite.
Anyway, I thought my code could be of some interest and inspire other people to work in such tight boundaries as well.
Okay here come my first entries to the 25-Line AS Contest. I started off with ideas still floating in my head from the Coded Beauty project, but what came out was actually quite different:
25lineDisco swf | 25lineDisco Code
25lineNebula | 25lineNebula Code
And this is my current entry for the 25lines Contest. I reused parts of the code from my last entry but it still turned out to look quite different.
My first too entries didn't make it, so let's hope for this round.
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>
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".
I just launched the website accompanying my diploma project. As the creation of this blog was initially caused by this diploma project I'm really pleased to announce it here.
The thesis is written in German (except for the Abstract). Therefore I will publish some major topics, concepts and findings in English language in the course of the next weeks on this Blog.
Anyway the application that is part of the project as well as all the source code and documentation are available in English for Mac and Windows.
Please visit http://codedbeauty.kraftner.com/ or contact me for further information.
Recent Comments