Goals

• Start making visuals with p5.js
• Do some basic color work
• Think about patterns

Prerequisites

1. Accept the assignment on our Github Classroom.
2. Download the git repository to your local computer.

Assignment

For your first assignment, I would like you to make a Scottish tartan viewer/designer. A tartan (at least originally) was a cloth made of alternating horizontal and vertical color bands. The bands are in repeating patterns that are the same in both directions.

One of the interesting features of tartans is that a number of different shades are created as the threads are woven together. When threads of the same color cross, they form a solid block of color, but when threads of different colors cross, it produces blended colors.

Another draw for us as computer scientists is the way they are described. Starting some time in the 19th century, families, clans, etc, would register a particular pattern as their tartan. The patterns are recorded as threadcounts, which is a structured string that describes which colors are in the tartan, and how many threads of each. A sample threadcount might be G12 W4 G12 R2, which means the pattern is 24 threads of green, 4 threads of white, 12 threads of green and 2 threads of red.

Read up on threadcounts from the Scottish Register of Tartans.

I would like you to create a tartan viewer that allows the user to input a threadcount string and displays the described pattern. Assume that input patterns are symmetric/reflective, and that you needn't handle the special characters in the threadcount that indicate the pivots (you are welcome to support both, but if the characters aren't present, you should default to symmetric).

To get ideas about patterns to try, check out the extensive collection of tartans listed in the registry. Unfortunately, the threadcounts aren't listed for these, but you can generally work them out once you know what yuo are looking at.

Implementation details

To help you out, I set up a very bare bones template that includes a text field a button. Note that this doesn't make use of draw() function (this will save us on repeated drawing since the only time we really need to do anything is when the user has entered a new pattern and is ready to see it).

For colors, the Scottish Register has helpfully published a list of color codes. Rather wonderfully, this lists all of the colors in RGB. Rather less wonderfully, there are several variants for most of the codes -- some of them dramatically different. Use your best judgement and aesthetic sense and pick the one you prefer.

To parse the string, you can use any technique you like. Regular expressions wouldn't be a bad way to go, but these are simple enough that other techniques would work as well.

You are not required to mimic the warp and weft of the weave, only to simulate the effect. Alpha blending would be a perfectly acceptable approach.

You should also use your aesthetic sense to determine the thickness of the threads. While it is straightforward to assume that one thread is one pixel thick, you may find that the patterns look better bigger. Experiment. Just be consistent - a 24 count should be twice the width of a 12 count.

Requirements

• The user should be able to enter a valid threadcount description without pivot indications and see a simulation of the corresponding symmetric tartan pattern using overlapping bands of colors and alpha blending.
• The input should accept all color codes listed in the linked document and the codes should match to one of the listed RGB values.
• Invalid threadcounts should be rejected and the user told there is a problem.
• Sophisticated - Threadcounts with labeled pivots (and thus both symmetric and asymmetric patterns) are supported.
• Sophisticated - Recreate the patterns without alpha blending. Study one of the tartan images at full size and mimic the actual pattern created by the warp and weft of the weave.
• Sophisticated - Use createSelect to allow the user to chose to view the alpha blended or the woven version.

*A Sophisticated mark will be achieved by meeting all Sophisticated requirements*

Finishing up

Commit your changes to git and push them back up to GitHub. I will find them there.