Copyright: © 1998 Björn Ischo


Overview

Buttonz & Tilez is a powerful software package for web authors. There are two applications in this package, Buttonz! , which renders buttons of various size and shape, and Tilez! , which generates seamless textures using a procedural approach. In Tilez! can choose more than  20 basic texture types, all of which can be modified to suit your needs. Additionaly, textures can be combined in layers to produce more complex ones. You can even import images to include them in a texture as a layer. Buttonz! offers a wide range of button shapes and effects, as well as the batch rendering of several similar buttons with different captions. The button faces can either be filled with a texture, an imported image or a gradient.

Oh, and did I mention it's free? ;)


License Agreement

First of all: this package is free! Why? Because I believe in the original spirit  of shareware, and know there are many poor people out there who simply can't afford this. However, if you like this software please consider either to place the file "bt_link.gif" which can be found in your Buttonz & Tilez install directory somewhere on your site, and link it to:

http://www.b-ischo.horizont-is.net/bt_index.htm

or to send me a "donation" of your choice. Donations can be send to my private address either as cash (well-hidden) or as cheque. If you prefer to send your donation as cheque, please only do so for amounts larger than $40 US. Smaller amounts are not worth it due to the high commission charged by my bank. Also, checks should be written using the currency of your country (for example, an American check must be in US dollars, not Swiss Francs).

My private address:

Bjoern Ischo

Friesenstr. 24

D-20097 Hamburg

Germany

Limited Warranty

This software and documentation are protected by copyright law, with all rights reserved. Copyright is held by the author, Björn Ischo. This software is provided "as is". No warranties are made, express or implied, and the author does not warrant that the software will be fit for any particular purpose. The author will in no event be liable for loss of profits, nor incidental or consequential damages. You use this software at your own risk. This software may not be modified, disassembled or reverse engineered in any way without written authorization from the author. This software may be distributed in unmodified form free of charge, provided it is always distributed with this document and no charge is made for it without permission from the author, with the exclusion of reasonable distribution and/or service charges. It is a condition of use that you agree to the above terms.


System Requirements

Please check that your computer meets the following minimum requirements for running Tilez! :

IBM-compatible personal computer

486 or better processor with floating point unit (Pentium 166 or higher recommended)

High- or True-Color Graphics Adapter

Mouse or equivalent pointing device

Microsoft Windows 95/98/NT

8MB RAM (16MB Recommended)


Getting started

So, you're looking at all these sliders, and have no idea where to start? No problem, there's no need to get puzzled, you just have to get into it...Just experiment with all controls, you can't blow you're local nuclear plant or something.

An introductionary workshop:

Step 1: The base layer

When you start the program, all you see is a grey texture. This is the base layer texture. Later in this workshop, you will see that you can have different layers to create more complex effects, but let's get started with the first layer. Click on the greyscale gradient now. This will bring up a menu for choosing one of the preset gradient. Choose "Metallic -> Bronze" for a start. You will notice the texture has changed it's colors.

Now, click the second image down in the "Algorithm" section. These are the various rendering algorithms by the way, which greatly affect what you're texture will look like. The texture picture changes again. Play a bit with the Turbulence sliders until you get a texture that looks smooth and not too splotchy. Finally, click the "Layer is active" checkbox to active this layer for multiple layer renderings.

Step 2: We add a subtractive layer

Click the "Shader Layer 1" tab off the tabs located below the image. A totally blank image will appear, and all slider values will change. You have just switched to another layer, which basically means you create another simple texture which is about to be added to the final image. Click the gradient again (which is all black now) and choose "Greyscale -> Grey ABA Wash". On the algorithm section, click the one with the vertical stripes (which is no.9 from the left hand side). Again, play with the turbulence values if you like. Additionaly, try playing with the Amplitude slider a bit. In most algorithms, all this slider actually does is change the frequency or size of the algorithm-specific effect.

When you are finished playing, click "Layer is active" again, and click the "Layer Blend Mode" button. From the menu that pops up, select "Subtractive". This tells the program not to apply this shader layer opaque to the final texture, but to subtract the color values of this layer from the base layer.

Step 3: Almost done

Now, click the "Result" tab. You will see a texture that is a mixture of the base layer and the first shader layer. If this was going to be a texture you'd like to use on your homepage, you might be interested in seeing it tiled. To do so, click the "Tiled Preview" checkbox. Additionally, you can hit [F12] or select "Full Screen Preview" from the "Extras" menu. This will allow you to see the texture tiled over the whole screen, with sample text in different colors.

Now, you can save this texture if you wish to do so: Just select "Save Tile" from the "File" menu. This saves the current layer tile, which does not necessarily mean it saves the result! So, if you wish to save the resulting tile including all layers, you will have to select the "Result" tab first. This is of course not a bug, but a feature: You can save each layer separatly, in case you have a kewl tile in layer3 which might be useful, and also want to keep the result.


How does it work?

Textures are all based on different mathematic expression basically. Additionaly to using standard math functions like Sinus, all algorithms of Tilez! have a "Noise" factor that actually makes them seamless. The Noise(x,y) value is defined by two-dimensional maps of random values with their random factor being defined by the distance of 2 points on the map. The maps are made seamless by giving the edges nearly the same values first. After that, each point is rendered in a recursive function, until no blank points remain. This recursive function basically looks like

value[x,y]=(DELTA(x)+DELTA(y))/2+(random(0..1)-0.5)*DELTA(x,y)*turbulence

Two of these noise maps are generated, the second of them serving as a displacement map for the first one in many algorithms. All algorithms you can choose from actually rely on these two maps as a backbone. For example, algorithm 2 computes the value of a pixel by the following equation:

xx=noise2[x,y]

yy=noise2[y,x]

pixel[x,y]=noise[xx,yy]

Sounds like fun to program this, doesn't it ?


The User Interface

Main Menu:

File Menu

"Save Tile" saves the current selected layer or the result image if that tab is selected to an image file. Please note that the unregistered version only saves to .bmp files. JPG, PNG, TIF and other formats are available in the registered version.

"Save Parameters" and "Load Parameters" are obvious - and "Browse Presets" allows you to browse the preset files. Tip: To include your own parameters in the browse dialogs, just save the files to one of the "\presets" subdirectory.

"Exit" just exits the program.

Extras Menu

"Full Screen Preview" tiles the texture over the whole screen, with sample text in different colors so that you can judge what text color would suit your texture best.

"Preview Result in 2nd Window" brings up another window that shows a quick preview of the result texture, so that you don't have to switch between the layers whilst experimenting.

"Mutation Control" allows you to select which factors are affected by the "Mutate" button.

"Set as Windows Wallpaper" sets the current image as the wallpaper of your desktop.

Sliders:

Cell Width & Cell Height

Sets the width and height of the tile. Please note that both values are limited to a maximum of 255 for speed reasons. It is recommended, though not a must, to keep the tile quadratic as most algorithms look best on quadratic tiles.

Brightness

Edits the brightness of the palette. This actually only affects how the palette is applied to the tile, but does not really modify the palette you created.

Cycle

Moving this slider to the left or right lets you rotate your color palette to one side or the other. Again, this only applies to the way the palette is applied to the texture.

Amplitude

Has a rather different effect depending on which algorithm is selected. Basically, this slider controls any trigonometric functions used in an algorithms. In most cases, it will either control the frequency of how often a particular effect is repeated, or effect aa effects size. For example, on the vertical stripes algorithms, it allows you to set the length of one curve, additionally affecting the total number of curves. Anotehr example is the Weave like algorithm, where this slider sets the width of the threads.

(This slider might have no effect on some algorithms)

Turbulence 1 & Turbulence 2

These slider basically control how much "action" there is in the texture. Their meaning is also dependent of which algorithm you selected. For example, in the stripes algorithms, Turbulence 1 affects how much the shape of the threads differs from a perfect sin-curve, whilst the second Turbulence slider adds additional noise.

(This slider might have no effect on some algorithms)

Twist

Sort of a fun effect - using this slider, you can twist the inside of a layer. Controls the twist angle, from -180° to +180°.

Buttons:

Mutate

Assigns a random value for all options that are activated in the "Mutation Control" menu item.

Layer Blend Mode

Brings up a pop-up menu with the blend mode for use in multi-layered textures.

Checkboxes:

Tiled Preview

Allows you between tiled and centered preview.

Embossed

Applies an emboss filter to the layer.

Cards

Applies a cards filter to the layer.

Auto Update

Allows you to turn auto-updating of the texture on or off. When this is off, you will need to hit [F9] or click the "Update Now" button to apply any changes you made to the texture settings (That button is only visible when auto-updating is off).

Disabling the auto-update is useful when you have a slow machine that needs several to render the texture. As I rule of thumb, I'd suggest you turn it off when you're processor is clocked with less than 166MHz, or you have less than 16MB of RAM.

Layer is active

Enables or disables a layer for multiple layer texture. This has no effect on the single layer, but just on the resulting tile when using several layers.

Other Controls:

Random Seed

Using the Random seed, the random functions can repetitively generate a specific sequence of random numbers unique for each Random Seed. This enables you to reproduce textures.

Zoom Control

The loupe-buttons (above the image) let you zoom in and out of the image.

Layer Tabs

Using these, you switch between the layers. When you switch to a layer, that layers settings and image will be displayed in the controls so you can edit them. Please note that the sliders etc. are of course not emabled for the result image.

Algorithms

This combobox sllows you to select the algorithmic textures style for the current layer. You can also import an image by selecting the "Image File" item, and clicking the button located on right hand side of the  combobox to choose the file.


The Palette

There are two ways of assigning a color palette to the texture:

•	You can select one of the preset gradients by clicking the gradient, which brings up a pop-up menu

•	You can edit the palette by clicking the small button on the left hand side of the gradient that has a brush glyph. The palette editor is rather self explantory: The gradient is calculated in 5 steps, and you can set the Red, Green and Blue values for each step using the edit-boxes. Values range from 1 to 256 for each color channel.

Using the "Cycle" and "Brigthness" sliders, you can additionally modify the way the palette is applied to the texture.


Using Layers

Using the layers may be a seem a bit difficult in the first place, but you will find it rather easy once you got into it.

Let's assume you have created a nice texture in the base layer. You may, of course, be happy with that and save it to a file. However, you might want to combine it with another texture in order to create a third, more complex one. This is were you use the layers. Tilez! allows you to use up to three layers, and each is represented by a tab underneath the image. First of all, there is a base layer. This layer should be set to active using the "Layer is active" checkbox in most cases. Then, there are 2 "Shader Layers". These layers are, if active, mixed with the base layer. The way that the color values are mixed is set via the "Layer Blend Mode". Finally, there is the "Result" tab, which shows you the result of combining the layers.

There are several blend modes available. For example, "50% Opacity"  will result in the pixels of the two textures being averaged, whilst "Lighten" will only set a pixel of the shader of it is lighter than the original pixel. Finally, you can further customize the result by using the "Post Processing".


Post Processing

Warning, this is sort of complicated - so if you hate mathematics or don't want to spend hours with this software because you're addicted, don't read any further! :)

The Post Processing controls will appear when you select the result tab. There, you see 2 groups of controls:

The first one being for custom convolution filters, and the second one being a formula parser. The convolution is a bit hard to explain, but actually the name already says it all. This tool doesn't harm you're texture too much, so you can best learn how to use it by playing around.

The second and really powerful tool is the formula parser. When you know how to use this, you can aquire almost any effect. When you don't, you'll propably end up rather puzzled and with messed up tiles. Basically, all this does is apply a custom mathematical expression to every pixel in the tile. You enter the formulas, and Tilez! computes the whole thing. However, these expression don't necessarily have to leave any part of you're tile intact. For example, when you just enter x or y for the Red, Green and Blue channel, you'll simply have a grey-scale gradient. Each of the three color channels is rendered separatly, allowing you to use the original RGB values in each channel. For example, if you just wished to swap the red and green channels of the tile, the formulas might look like this:

R: g

G: r

B: b

Simple color adjustments are that easy, too. If you think you're result tile has to much red, you can darken the red channel by just using the formula r-50 for the red channel, and leaving green and blue untouched by applying the formula g for Green, and b for Blue.

So these are the basics. All colors are, by the way, mapped in a range from 0 to 255, where 0 is basically black and 255 is the full color. For complex formulas, the parser offers a high variety of build in functions and variables.

Supported functions :

    MIN(x), MAX(x) 	:  returns the higher/lower value

    COS, SIN, SINH, COSH, EXP, LN, ARCTAN,

    SQRT, ABS	:  like the standard arithmetic

    HEAV (heav(x) is =1 for x>0 and =0 for x<=0),

    SIGN (sign(x) is 1 for x>1, 0 for x=0, -1 for x<0),

    ZERO (zero(x) is 0 for x=0, 1 for x<>0),

    PH (ph(x) = x - 2*pi*round(x/2/pi))

    RND (RND(x) = x * Random)

    GRND (GRND(a,b) produces random numbers

                                    with Gaussian distribution about

                                    b, where a is the standard deviation)

    ODD (ODD(x) returns 1 if number is odd, 0 if not)

    PRIME (PRIME(x) returns 1 if number is a prime number, 0 if not)

    GAMMA(x,y) - gamma

Logical Functions:

    &(a,b)	: AND

    \(a,b)	: OR

    |(a,b)	: NOT

Defined variables:

x,y    : X and Y coordinates of the pixel, range: 0..255

r,g,b  : Red, green and blue intensity values


Getting started

So, you're looking at all these sliders, and have no idea where to start? No problem, there's no need to get puzzled, you just have to get into it...Just experiment with all controls, you can't blow you're local nuclear plant or something.

An introductionary workshop:

Let's assume you've got a website for Windows shareware, and you want several buttons for the different download areas. You don't want the buttons to be too big, so you can just leave the size at 100*25, which is sort of standard button size both for applications and web pages. As this site is about Windows software, you want clouds for the button face. Choose "Fill Style -> Plasma". Then, click the edit palette button, and choose "Clouds" from the "Presets->Default" menu. Close the dialog by clicking the "x" in the upper right-hand corner. From the plasma controls, choose "Aquarell" from the types. Click the "Assign" button. If you don't like the result, just click "Re-Render" as often as you wish to get a better one. Now, we want a smoother bevel. Click the "Bevel Style" Button and choose "Smooth".

As we need several buttons, we will enter the longest of the captions in the text field which appears when you click the "Caption"-labeled button and choose "Caption" from the menu that pops up. Let's assume the longest caption would be "Shareware". Enter this into the text field, click the "Caption" button again, and choose "Font & Style". We'll leave the font as it is for this excersise. However, click the outlined O to make the caption outlined. You see that the caption fit's into the button. Now we can start batch rendering:

From the main menu, choose "File -> Batch Render". In the following dialog, click "Next", and enter you're list of captions. In this case, captions might be like "Shareware","Freeware", "Tips" ...

The following parts of the dialog are self explanatory, just follow the wizard step by step.