The code is pretty new so there might be bugs, especially if you do things in a weird order. The basic code should work though, but you can reports bugs to me at contactme (at) withmyhandsdream.com. (Replace “(at)” with “@”).

The code has been tested on Google Chrome browser and Safari and it requires allowing javascript and pop-up windows. Unfortunately, the code doesn’t work on mobile devices as it has been designed for mouse users.

Instructions

The main window has 4 parts: Colormap, Patternmaker, Stripe table and Your fabric picture. I go through all of them.

Colormap

Colormap is used to choose the colors on the final design. To make basic patterns with the Patternmaker, you do not need a colormap so you can skip this part if you only want to draw patterns.

First, you’ll need to choose the number of colors in use. Then you use the dropdown menus to choose colors. The exact look of the color selectors depends on the operating system and browser but you should not be restricted on just basic colors. On my own computer, I have to click the “other” link below the first color selector to access an advanced menu that allows the user to choose colors on a gradient view or to type in hex codes.

You can save your colormap by clicking “Create a colormap file” after which you need to give a name for the file. The file doesn’t upload to your computer directly (this protects your computer as random webpages can’t upload viruses on your computer). Instead, you’ll need to click the “Download colormap” link to download the file. You can upload a saved colormap by clicking “Choose file”.

If you want to see how changing positions of the colors on your colormap affects your design, click “Random colors!” and you’ll get a random order of colors. This is fun after you have a fabric design!

Patternmaker

On the patternmaker window, you’ll design horizontally repeating two-color patterns. First, you’ll need to give the pattern height and width. Currently changing the pattern height and width also clears the canvas.

There are three draw modes: “black”, “white” and “flip”. Black and white are self-explanatory. Flip turns black pixels into white ones and vice versa but the function may be a bit buggy.

Drawing is done with a mouse just like on any drawing desktop application.

When you have drawn a pattern you like, click “Create file”. The pop-up window asks a name for the file. It is useful to give a .txt ending to the file as it allows you to view the file contents with a Notepad or something similar. Once again you have to download the file separately.

If you want modify or view a previously created file, click “Choose file” through which you can… well… choose the file. After clicking “open” the file is uploaded and your design should show on the canvas.

Stripe table

First on the Stripe table you’ll choose the number of stripes. You can always increase this number, so it doesn’t matter if the number is too small at the beginning. Similarly, it doesn’t matter if you end up having empty rows at the end of the table (or somewhere in the middle). Just start from the first line to avoid any problems.

On the first column, you’ll need to choose the correct type for the stripe. The options are “Color” or “Pattern”. A Color-stripe is filled with a solid color whereas a Pattern-stripe is colored with two colors following the design on a pattern file.

The Height column is filled with the width of the color stripe. (I know that the name is a bit confusing but my brain couldn’t handle two different coordinate systems and so you’ll have to deal with this!) If you have selected a pattern-type, the height is determined by the pattern file.

File-column cells are active only when you have selected a Pattern type on the first column. Click “Choose file” and locate the file that has a pattern that you have previously generated with the Patternmaker. Every pattern row needs its own file entry but you can use the same file or a variable number of different files.

The last two columns contain the colors on the colormap. For a Color-type stripe only the first column is active. For the Pattern-row you need to give two colors, one for the white and the other for the black pixels.

When you have filled the table (or want to check your progress) click “Draw fabric”. In the example below, the table has one Pattern row and four Color rows:

If you want to modify your design, like change the width of a stripe or switch to a different Pattern file, make the changes to the table and click “Draw fabric” again. However, if you want to completely change the colors and keep the basic design, it is best to change the colors on the Colormap. By changing the colors on the Colormap every row which has a color with the same number changes.

Try also clicking the “Random colors” button under the Colormap and see how your fabric design changes!

You can save the table similarly as described before by clicking “Create a file from the table” and then downloading the file separately via a link.

You can upload a previously generated design by clicking “Choose file” and locating the file that has your design. Due to javascript and some security reasons the application can’t access the Pattern files on your computer. After the table has loaded you will get a window that prompts you to upload the Pattern files manually.

You can save your fabric design by right-clicking on the image and choosing “Save Image As”.

Have fun with designing new stripy fabrics!

t. Katja