JustLineOn Tutorial for Non-Coders

7. November 2008 Noch keine Kommentare

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>
to top Tweet this

Sei der Erste der “JustLineOn Tutorial for Non-Coders” kommentiert!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>