Untitled

**Please Note:** The sketches take some time to run upon loading the page. It may freeze your browser but it should return to normal shortly.

# Design Programming (DECO1012) Assessment One


**Author**: Harry Morris (Unikey: hmor5172)

**Chosen Theme:** Movement and Energy

**Chosen Format:** Poster, Apparel (T-shirt, bags, etc)

## Introduction and Ideation ##

As both a DJ and a musician, the ideas of movement and energy are incredibly important to me. I view music as one of the strongest instigators of movement, and, in particular, the genre of 'Techno' is among the most powerful. It was decided to represent the movement, energy and ideals of Techno in a visual manner for this project, as if the client were a Techno record label looking to promote an artist.

## Breakdown of Themes ##
In order to assist the development process, a set of themes is considered to guide the creative process. The genre of Techno is extremely broad and covers a range of themes, but there are a few that stick out.

* Darkness: Techno is among the darkest genres of music produced. This darkness is core to the genre and is its major distinction from other genres of dance music. This is commonly expressed as being 'monochrome' or 'black', and this provides a useful visual analogy.

* Texture and Atmosphere: Techno, since its inception, has often been noted for the high-energy atmosphere it creates. This is typically achieved, musically, through the combination of thick textures, layered and layered. Each layer, whilst quite simple, works with the others to create a product that is greater than the sum of its parts. Quite often these textures are described as (and sometimes are quite literally) noisy or creating a cacophany, which may translate into visual terms in a powerful manner.

* Repetition and Simplicity: In order to create the high-energy atmosphere and movement central to dance music, techno employs significant repetition in it's structure, and typically of simple parts. This repetitive minimalism is crucial to the genre, and is a similarly powerful visual device. Likewise the simplicity of the elements within a track can be metaphorically represented by basic geometry and linework, for its 'purity'. This is often cited as creating a sense of 'order' in what is otherwise a very chaotic musical form.

With the analysis of my central themes complete, it was time to find inspiration.

## Inspiration ##
Techno music has a wealth of strong visual components, particularly record covers and event flyers, and these formed the basis of my inspiration. Much of the inspiration that follows seems to strongly represent the themes express above and my extrapolation into visual terms can be seen clearly. The aspects of each image that I enjoyed are written.

* [Justin Perkovy - Vice](http://www.residentadvisor.net/images/cover/tr-392036.jpg)
  * Strong geometric forms.
  * Abstract background
  * Repetitive geometry - rhythmic qualities.
  * Absence of colour - metaphor for bleakness.
* [Inigo Kennedy - Insistence](http://www.junodownload.com/plus/wp-content/uploads/2013/06/inigo_kennedy_590.jpg)
  * Absence of colour
  * Strong, abstract, simple and repetitive geometry suggest rhythm.
* [Dadub - You Are Eternity](http://beatsperminute.com/wp-content/uploads/2013/04/dadub-you-are-eternity.jpg)
  * Abstract, black and white background creates a sense of rhythm.
* [Lucy - Wordplay for Working Bees](http://3.bp.blogspot.com/-VyzQTR7Ru-E/TvvchUJgRRI/AAAAAAAABjw/wIFNitFLAhQ/s400/working%2Bbees.jpg)
  * Noisy, black and white background is a very strong visual metaphor for texture.
  * Strong geometric form created from simple, repeated shapes - again representative of the repetition in the music.
* [Pfirter - Ahora](http://electropeople.org/uploads/posts/2013-05/1370008365_7329578.jpg)
  * Symmetry creates a powerful impression and creates a sense of order in an otherwise chaotic image.
  * Sense of rhythm created by repetitive texture.
* [Iueke - Alecot](http://www.junodownload.com/plus/wp-content/uploads/2013/04/IUEKE-ALECOT-ARTWORK.jpg)
  * Extremely powerful and complex patterns created from the intersection of basic geometry.


## Idea Testing ##

To begin with, a list of layers was developed based on the values investigated above. By developing a composition using multiple layers, it was hoped to represent the thick layers of textures used throughout the genre. These include:

*  Noise Background
  * Generating noise is a simple process that adds significant texture to an image. Similarly, it contains connotations of decay and darkness, which aligns well with the values of techno.
* Noise details
  * In order to create a more interesting background, an extra layer of noise that produces sharper details should be included.
* Grid
  * A grid is a perfect form that represents the inherent order in Techno music, juxtaposed against the chaos of the noise below it. It creates a strong sense of rhythm in its strong repetition.
* Circle pattern
  * Much like the grid, the circle is commonly seen as the purest geometric form. This adds a rhythm that also represents the musical simplicity of the genre.
* Triangle patterns
  * Again, a repetitive application of a simple shape, the overlapping of the simple triangle form can create extremely strong, complicated patterns. This is analogous to the 'greater than the sum of its parts' theory of Techno music.
* Linework patterns
  * Linework patterns, much like the triangles used above, can create extremely strong visual forms, particularly when repetition is used. Similarly, these form 'vectors' in the image, leading your eye around the composition and creating a sense of movement.

### Mockup ###

In order to evaluate the ideas generated, a mock-up was created using Adobe Photoshop and Illustrator, embodying all of the above as a test of the aesthetic created.

[First Revision](http://i.imgur.com/d65CmQq.jpg)

The first stage focused on evaluating the first few components, primarily the ones with less visual engagement. The image was created using significant processing of images of clouds and nebulae, and the repetition of patterns.


[Second Revision](http://i.imgur.com/wSVhitc.jpg)

In the second stage of the process, the final layers - the triangles and linework - were added. These components were created using tools in Adobe Illustrator suited to the creation of repetitive elements. The effect created was deemed incredibly effective.

The elements layered together in the final composition created a work that I found represented the values desired perfectly and in a visually-pleasing manner. It was decided that this set of layers would be used in the final composition.

## Sketch Process ##

After the evaluation of the mockup, it was time to develop a sketch. Each component of the composition was developed in isolation before being compiled into the main sketch.

### Noise Background / Detail ###
Initial experiments with the random() function produced noise that was far too unpleasant - much like static.

~~~
/** @peep sketch */
float redFactor = 0.75f;
float blueFactor = 0.95f;
float greenFactor = 0.5f;
float alphaFactor = 0.82f;

size(400, 400);
background(0);

for (int x = 0; x < width; x += 1) {
  for (int y = 0; y < height; y += 1) {
    float noiseVal = random(0, 1);
    color noiseColor = color(redFactor * noiseVal * 255, greenFactor * noiseVal * 255, blueFactor * noiseVal * 255, alphaFactor * noiseVal * 255);
    // Draw the pixel
    stroke(noiseColor);
    point(x, y);
  }
}
~~~

Despite a more complicated implementation, the perlin-noise based noise() function provided a far better result. Unfortunately, it required much more tweaking to get a good result, experimenting with the noise detail level and the 'frequency' of the noise. Eventually an algorithm that produced reliably interesting noise was produced.

~~~
/** @peep sketch */
// Colour of the noise
float redFactor = 0.75f;
float blueFactor = 0.95f;
float greenFactor = 0.5f;
float alphaFactor = 0.82f;


int noiseDetails = 88;
float noiseFrequency = 32;


size(400, 400);
background(0);

for (int x = 0; x < width; x += 1) {
  for (int y = 0; y < height; y += 1) {
    float noiseVal = noise(x / noiseFrequency, y / noiseFrequency);

    // Generate the colour from noise
    color noiseColor = color(redFactor * noiseVal * 255, greenFactor * noiseVal * 255, blueFactor * noiseVal * 255, alphaFactor * noiseVal * 255);

    // Draw the pixel
    stroke(noiseColor);
    point(x, y);

    // Detail layer
    noiseVal = pow(noiseVal, 4);

    noiseColor = color(redFactor * noiseVal * 255, greenFactor * noiseVal * 255, blueFactor * noiseVal * 255, alphaFactor * noiseVal * 255);

    // Draw the pixel
    stroke(noiseColor);
    point(x, y);
  }
}
~~~

### Grid ###
In the process of creating this piece of code, it was noted that, in order to simplify the code, this part of the program could utilize the same for loop as the noise algorithm created prior did. As such it was developed in a way that may appear suboptimal, but would work well in the complete sketch. A simple set of random ranges was defined for the grid, and it was implemented. It was difficult to evaluate the quality of this part as it was designed to work as part of the entire composition.

~~~
/** @peep sketch */
int gridSize = (int)random(4, 40);


size(400, 400);
background(0);

for (int x = 0; x < width; x += 1) {
  for (int y = 0; y < height; y += 1) {
    if (x % gridSize == 0 || y % gridSize == 0) {
      // Draw the pixel
      stroke(255, 40);
      point(x, y);
    }
  }
}
~~~

### Circle Pattern ###
The circle pattern similarly was implemented in a simple manner. The range of randomness was tweaked until a good range was found. Much like the grid, this layer was designed to work as part of the composition and as such was not very pleasing in itself.

~~~
/** @peep sketch */
int circleSpacing = (int)random(8, 64);
int circleSize = (int)random(2, 5);

size(400, 400);
background(0);
noStroke();
fill(255, 100);
for (int x = 0; x < width; x += 1) {
  for (int y = 0; y < height; y += 1) {
    if (x % circleSpacing == 0 && y % circleSpacing == 0) {
      ellipse(x, y, circleSize, circleSize);
    }
  }
}
~~~

### Triangle patterns
This portion of the project was largely based on the mock-up created earlier. A simple repetition of triangles in the vertical direction was developed. In order to produce a stronger composition, it was decided to redraw the triangles on both sides, rather than just the centre. A series of random ranges was defined that produced an aesthetically pleasing outcome in most cases.

~~~
/** @peep sketch */
int x = 32;
float y = random(-32, 32);
float w = random(64, 256);
float h = random(64, 256);
float s = random(16, 64);
float offs = 400 - (x * 2);

size(400, 400);
background(0);
noFill();
stroke(255, 40);


for (int i = 0; i < 16; i++) {
  //Draw the triangles on the left
  triangle(x, y + i * s, x - w / 2, y + h + i * s, x + w / 2, y + h + i * s);

  //Draw triangles in the middle
  pushMatrix();
  translate(200, 0);
  triangle(0, y + i * s, 0 - w / 2, y + h + i * s, 0 + w / 2, y + h + i * s);
  popMatrix();

  //Offset using translate to save mathz.
  pushMatrix();
  translate(offs, 0);
  triangle(x, y + i * s, x - w / 2, y + h + i * s, x + w / 2, y + h + i * s);
  popMatrix();
}
~~~

### Linework Patterns ###
This part of the project required some more complex thought to translate into a Processing sketch and to apply randomness. The first attempt drew lines at random, choosing two points anywhere on the canvas.

~~~
/** @peep sketch */
size(400, 400);
background(0);
noFill();
stroke(255, 40);

for (int i = 0; i < 48; i++) {
  line(random(0, 400), random(0, 400), random(0, 400), random(0, 400));
}
~~~

The result this produced was unappealing and overly chaotic. Attempts were made to constrain the randomness, but it still appeared without thought and uninterestng.

In order to create visually interesting patterns, it was decided that a complex recursive algorithm that made use of significant randomness. A simple algorithm was created that created lines of diminishing length, rotating with each iteration. As an experiment, this was mirrored across the Y-axis to create a sense of greater repetition. Additionally, it was decided to layer a few instances of this algorithm ontop of one another, with a low alpha value. The effect this created was powerful and was decided upon.

~~~
/** @peep sketch */
void setup() {
  size(400, 400);
  background(0);
  noFill();
  stroke(255, 40);
}

void draw() {
  for (int i = 0; i < 48; i++) {
    tree(200, 200, (int)random(8, 256), 0f, 8);
  }
  noLoop();
}

float angles[] = {
  45f, 135f, 225f, 315f
};
// Recursive algorithm to draw a tree that branches.
void tree(float x, float y, int hyp, float lastAngle, int decay) {
  float newx = 0f;
  float newy = 0f;
  float angle = lastAngle;

  angle = angles[(int)random(0, 4)];

  newx = round(x + cos(radians(angle)) * hyp);
  newy = round(y + sin(radians(angle)) * hyp);

  line(x, y, newx, newy);
  // Mirror the line
  line(width / 2 - (x - width / 2), y, width / 2 - (newx - width / 2), newy);

  // Decay
  int newLen = hyp - decay;

  // Have we decayed past the stop point?
  if (newLen > 8)
    tree(newx, newy, newLen, angle, decay);
}
~~~

### First Integration: ###

After each component was complete, it was possible to create the final composition by combining them. To accomplish the goal of repetition and textured layers, the program was made to draw itself a number of times, one on top of the other, to produce a result with greater depth and stronger texture.

~~~
/** @peep sketch */
// ------------------------------------
// Constant Variables
// ------------------------------------

// Number of iterations to complete.
int iterations = 2;

// Tree parameters
// Number of trees to run per iteration
int treesMin = 20;
int treesMax = 40;

// The amount to decay by each iteration
int treeDecay = 4;

//The point at which to stop the recursion
int treeStop = 8;

//The size of the starting branch
int branchMin = 1;
int branchMax = 6;
int branchSize = 32;

color treeColor = color(200, 200, 200, 70);

// Triangle parameters
// Number of triangles.
int trisMin = 8;
int trisMax = 24;
float triX = 48;

// Stating Y position range
float triYMin = -32;
float triYMax = 128;

// Width range
float triWMin = 64;
float triWMax = 256;

// Triangle range
float triHMin = 64;
float triHMax = 256;

// Vertical spacing between the triangles
float triSpaceMin = 32;
float triSpaceMax = 64;

color triColor = color(200, 200, 200, 70);

float centreWidth = width / 2;

// Noise parameters
// Colour of the noise
float redFactor = 0.85f;
float blueFactor = 0.795f;
float greenFactor = 0.92f;
float alphaFactor = 0.82f;

// The number of octaves used in the noise algoroithm - sharper detail
int noiseDetails = 88;

// Frequency of the noise - higher value = smoother noise.
float noiseFrequency = 256;

int noiseAlpha = (int)random(120, 190);

// Grid parameters
int gridAlpha = (int)random(12, 58);
// Width of each grid cell
int gridSize = (int)random(4, 40);

// Circle pattern parameters
int circleSpacing = (int)random(14, 38);
int circleSize = 2;
int circleAlpha = (int)random(40, 80);

color bgColor = color(0, 0, 0, 255);


// ------------------------------------
// Setup
// ------------------------------------
void setup() {
  // Setup our canvas
  size(400, 400);
  smooth();
  background(bgColor);
  noiseDetail(noiseDetails);
}

// ------------------------------------
// Draw loop
// ------------------------------------
void draw() {
  // We iterate through the algorithm a few times to create a decayed look with many layers.

  for (int iter = 0; iter < iterations; iter++) {

    //Go through every pixel of the screen.
    for (int x = 0; x < width; x += 1) {
      for (int y = 0; y < height; y += 1) {

        // Draw noise layer.
        // Get the noise value at our position.
        float noiseVal = noise(x / noiseFrequency, y / noiseFrequency);

        // Generate the colour from that.
        color noiseColor = color(redFactor * noiseVal * 255, greenFactor * noiseVal * 255, blueFactor * noiseVal * 255, alphaFactor * noiseVal * 255);

        // Draw the pixel
        stroke(noiseColor);
        point(x, y);

        // Detail layer
        noiseVal = pow(noiseVal, 4);

        noiseColor = color(redFactor * noiseVal * 255, greenFactor * noiseVal * 255, blueFactor * noiseVal * 255, alphaFactor * noiseVal * 255);

        // Draw the pixel
        stroke(noiseColor);
        point(x, y);

        // Draw the circle pattern layer.
        noStroke();
        fill(255, circleAlpha);
        if (x % circleSpacing == 0 && y % circleSpacing == 0) {
          ellipse(x, y, circleSize, circleSize);
        }

        // Layer of random black noise ontop to produce grit.
        stroke(0, random(0, noiseAlpha));
        point(x, y);

        // Draw the grid layer
        // If we are on a grid line
        if (x % gridSize == 0 || y % gridSize == 0) {
          stroke(255, gridAlpha);
          point(x, y);
        }
      }
    }

    stroke(triColor);
    noFill();
    // Draw triangles on all but the last iteration so they don't come through too strong.
    if (iter < iterations - 1) {

      //X position - static.
      float x = triX;
      // Y Position
      float y = random(triYMin, triYMax);
      // Triangle width
      float w = random(triWMin, triWMax);
      // Triangle height
      float h = random(triHMin, triHMax);
      // Spacing
      float s = random(triSpaceMin, triSpaceMax);

      // Position of the righthand side;
      float offs = 400 - (x * 2);

      //Number of triangles to draw.
      int numTri = (int)random(trisMin, trisMax);

      for (int i = 0; i < numTri; i++) {
        //Draw the triangles on the left
        triangle(x, y + i * s, x - w / 2, y + h + i * s, x + w / 2, y + h + i * s);

        //Draw triangles in the middle
        pushMatrix();
        translate(200, 0);
        triangle(0, y + i * s, 0 - w / 2, -y + h + i * s, 0 + w / 2, -y + h + i * s);
        popMatrix();

        //Offset using translate to save mathz.
        pushMatrix();
        translate(offs, 0);
        triangle(x, y + i * s, x - w / 2, y + h + i * s, x + w / 2, y + h + i * s);
        popMatrix();
      }
    }

    stroke(treeColor);
    // Draw the tree a few times.
    int trees = (int)random(treesMin, treesMax);
    for (int i = 0; i < trees; i++) {
      tree(centreWidth, height / 2, (int)(random(branchMin, branchMax)) * branchSize, 0f, treeDecay);
    }
  }
  //Do not loop the draw function.
  noLoop();
}

// Possible angles for the tree branches.
float angles[] = {
  45f, 135f, 225f, 315f
};

// Recursive algorithm to draw a tree that branches.
void tree(float x, float y, int hyp, float lastAngle, int decay) {
  float newx = 0f;
  float newy = 0f;
  float angle = lastAngle;

  // Lookup possible angles in an array - don't let it repeat the same angle or the same angle in reverse.
  while (angle == lastAngle)
    angle = angles[(int)random(0, 4)];

  //Calculate the end point.
  newx = round(x + cos(radians(angle)) * hyp);
  newy = round(y + sin(radians(angle)) * hyp);

  // Draw the first line
  line(x, y, newx, newy);
  // Mirror the line
  line(width / 2 - (x - width / 2), y, width / 2 - (newx - width / 2), newy);

  // Decay
  int newLen = hyp - decay;

  // Have we decayed past the stop point?
  if (newLen > treeStop)
    tree(newx, newy, newLen, angle, decay);
}
~~~

### Refinement Process ###

After compiling the sketches together, the result was deemed far from appropriate. As such, it was neccessary to make adjustments to achieve the final result.

- It was noted that the additional detail on the noise layer became distracting as a background, and as such this layer was removed.
- The noise then became very 'plasticky' looking, being too smooth. After adjustment of variables provided unsatisfactory results, an extra pass of noise, this time based on the 'harsher' random() function, was added ontop.
- The grid came through too strong, so it was decided to modulate its opacity based on the noise below it.
- Linework patterns became overly chaotic and had to be toned down significantly. The algorithm also had to be modified to ensure that a more focused result was created.
- Additional factors of randomness were added to the linework algorithm.
- The linework produced a strong pattern in the centre of the image which overpowered the composition. Conditionals were added to prevent these from drawing.
- Linework often started to draw offscreen. Position was reset to the centre if this happened. This also improved the aesthetic qualities.
- The triangles were often overly wide which produced an unpleasant effect. This required adjustment of the range of random values.
- The triangle patterns were overly distracting - it was decided to not draw them on the last iteration as they showed through too much.
- The central column of triangles was flipped to create more interest.
- The circle pattern often looked like it didn't belong in the scene - they were too perfect a form. For each circle, I decided to draw a few black pixels ontop to make it look like they were worn.
- Most of the layers tended to compete with the others - this required adjustment of alpha value ranges to ensure a balanced image.
- An odd bug that resulted in the production of significantly different results between the desktop (Incorrect) and web-versions (Correct) of Processing. The revision above looked far better than as it is shown here. This was fixed, which then required the re-adjustment of most parameters.

To assist the above tweaking process, all the 'magic numbers' used in the code were moved into variables at the top of the code, allowing easy adjustment. This allowed me to refine the algorithms until the optimum result was found.

## The Final Revision ##

~~~
/** @peep sketch */
// ------------------------------------
// Constant Variables
// ------------------------------------

// Number of iterations to complete.
int iterations = 3;

// Tree parameters
// Number of trees to run per iteration
int treesMin = 14;
int treesMax = 25;

// The amount to decay by each iteration
int treeDecay = 32;

// The point at which to stop the recursion
int treeStop = 16;

// The size of the starting branch
int branchMin = 2;
int branchMax = 5;
int branchSize = 32;

int branchMargin = 42;

// The chance each iteration of the recursion has to decay.
float decayChance = 0.6;

color treeColor = color(200, 200, 200, 94);

// Triangle parameters
// Number of triangles.
int trisMin = 6;
int trisMax = 16;
float triX = 48;

// Stating Y position range
float triYMin = -32;
float triYMax = 128;

// Width range
float triWMin = 32;
float triWMax = 128;

// Triangle range
float triHMin = 64;
float triHMax = 368;

// Vertical spacing between the triangles
float triSpaceMin = 32;
float triSpaceMax = 64;

color triColor = color(200, 200, 200, 80);

// Noise parameters
// Colour of the noise
float redFactor = 0.85f;
float blueFactor = 0.795f;
float greenFactor = 0.92f;
float alphaFactor = 0.35f;

// The number of octaves used in the noise algoroithm - sharper detail
int noiseDetails = 12;

// Frequency of the noise - higher value = smoother noise.
float noiseFrequency = 77;

int noiseAlpha = (int)random(100, 170);

// Grid parameters
int gridAlpha = (int)random(4, 14);
// Grid noise power - apparent density.
int gridPow = 1;

// Width of each grid cell
int gridSize = 16;

// Circle pattern parameters
int circleSpacing = (int)random(14, 38);
int circleSize = 2;
int circleAlpha = (int)random(18, 30);
int circleGrit = 7;
int gritAlpha = 44;

color bgColor = color(0);


// ------------------------------------
// Setup
// ------------------------------------
void setup() {
  // Setup our canvas
  size(400, 400);
  smooth();
  background(bgColor);
  noiseDetail(noiseDetails);
}

// ------------------------------------
// Draw loop
// ------------------------------------
void draw() {
  // We iterate through the algorithm a few times to create a decayed look with many layers.

  for (int iter = 0; iter < iterations; iter++) {

    // Go through every pixel of the screen.
    for (int x = 0; x < width; x += 1) {
      for (int y = 0; y < height; y += 1) {

        // Draw noise layer.
        // Get the noise value at our position.
        float noiseVal = noise(x / noiseFrequency, y / noiseFrequency);

        // Generate the colour from that.
        color noiseColor = color(redFactor * noiseVal * 255, greenFactor * noiseVal * 255, blueFactor * noiseVal * 255, alphaFactor * noiseVal * 255);

        // Draw the pixel
        stroke(noiseColor);
        point(x, y);

        // Draw the circle pattern layer.
        noStroke();
        fill(255, circleAlpha);
        if (x % circleSpacing == 0 && y % circleSpacing == 0) {
          ellipse(x, y, circleSize, circleSize);
          stroke(0, gritAlpha);
          // Paint a few random black pixels around it.
          for (int i = 0; i < circleGrit; i++) {
            int ax = x + (int)random(-circleSize, circleSize + 1);
            int ay = y + (int)random(-circleSize, circleSize + 1);
            point(ax, ay);
          }
        }

        // Layer of random black noise ontop to produce grit.
        stroke(0, random(0, noiseAlpha));
        point(x, y);

        // Draw the grid layer
        // If we are on a grid line
        if (x % gridSize == 0 || y % gridSize == 0) {
          // The grid works on the inverse of the noise so that it shows where there is no noise drawn.
          noiseVal = 1f - noiseVal;
          stroke(255, pow(noiseVal, gridPow) * gridAlpha);
          point(x, y);
        }
      }
    }

    stroke(triColor);
    noFill();
    // Draw triangles on all but the last iteration so they don't come through too strong.
    if (iter < iterations - 1) {

      //X position - static.
      float x = triX;
      // Y Position
      float y = random(triYMin, triYMax);
      // Triangle width
      float w = random(triWMin, triWMax);
      // Triangle height
      float h = random(triHMin, triHMax);
      // Spacing
      float s = random(triSpaceMin, triSpaceMax);

      // Position of the righthand side;
      float offs = 400 - (x * 2);

      // Number of triangles to draw.
      int numTri = (int)random(trisMin, trisMax);

      for (int i = 0; i < numTri; i++) {
        // Draw the triangles on the left
        triangle(x, y + i * s, x - w / 2, y + h + i * s, x + w / 2, y + h + i * s);

        // Draw triangles in the middle - upside down.
        pushMatrix();
        translate(200, 0);
        triangle(0, y + i * s, 0 - w / 2, -y - h + i * s, 0 + w / 2, -y - h + i * s);
        popMatrix();

        // Offset using translate to save mathz.
        pushMatrix();
        translate(offs, 0);
        triangle(x, y + i * s, x - w / 2, y + h + i * s, x + w / 2, y + h + i * s);
        popMatrix();
      }
    }

    stroke(treeColor);
    // Draw the tree a few times.
    int trees = (int)random(treesMin, treesMax);
    for (int i = 0; i < trees; i++) {
      tree(width / 2, height / 2, (int)(random(branchMin, branchMax)) * branchSize, 0f, treeDecay);
    }
  }
  // Do not loop the draw function.
  noLoop();
}

// Possible angles for the tree branches.
float angles[] = {
  45f, 90f, 135f, 180f, 225f, 270f, 315f
};

// Recursive algorithm to draw a tree that branches.
void tree(float x, float y, int hyp, float lastAngle, int decay) {
  float newx = -1f;
  float newy = -1f;
  float angle = lastAngle;

  // Lookup possible angles in an array - don't let it repeat the same angle or the same angle in reverse.
  while (angle == lastAngle && angle != lastAngle - 180f)
    angle = angles[(int)random(0, 7)];

  // Calculate the end point.
  newx = round(x + cos(radians(angle)) * hyp);
  newy = round(y + sin(radians(angle)) * hyp);

  // Check that we're within our margin - prevents offscreen drawing.
  if (newx < 0f + branchMargin || newx > width - branchMargin || newy < 0f + branchMargin || newy > height - branchMargin) {
    newx = width / 2;
    newy = width / 2;
  }
  else {
    // Don't draw lines coming out the centre - these overpower the image.
    if (x != width / 2 && y != height / 2) {
      // Draw the first line
      line(x, y, newx, newy);
      // Mirror the line
      line(width / 2 - (x - width / 2), y, width / 2 - (newx - width / 2), newy);
    }
  }
  // Only decay based on chance.
  int newLen = hyp;
  if (random(0, 1) < decayChance)
    newLen = hyp - decay;

  // Have we decayed past the stop point?
  if (newLen > treeStop)
    tree(newx, newy, newLen, angle, decay);
}
~~~

## Final Evaluation ##

Based upon the final sketch, I deem that I have achieved my goal as stated in this portfolio post. However, there are a range of factors that could be improved in the final sketch.

* Runtime: The sketch takes a large amount of time to run, and could be optimized.
* Refinement of the background: The algorithm used to produce the background image often produces results that aren't visually pleasing. Development of a new algorithm that doesn't rely on Perlin noise would be optimal.
* Large variability in sketch outcome: Occasionally, the sketch produces an outcome that isn't as strong as it could be. The range of random factors in the sketch need further refinement.
* Experimentation with vertical symmetry: I believe this would create an aesthetic form that would even moreso espouse the values contained within the project. Whilst simple to implement, this would require the re-tweaking of all the parameters in the project to create a pleasing composition.
* Experiment with different linework algorithms: Whilst I find the algorithm in use very effective, it is worth exploring other possible ways to generate strong imagery. The final outcome diverges from my mockup mostly in this component of the project, as the mockup only worked well due to extreme consideration that is not possible with random generation. Other algorithms may be able to produce a similarly striking result whilst incorporating random elements.

Despite this, in my view, the sketch produces a strongly aesthetic result that represents the values and theme desired, well within the technical constraints of the project. The result produced balances extremely complex components into a composition that well represents movement and energy, particularly through the creation of a sense of rhythm via repetition and strong vector lines. I have achieved my goal of representing 'Techno' in an abstract, visual format. Most of the images produced are extremely powerful and are, in my opinion, a match for the quality of my cited inspiration and as such absolutely suitable for the stated client and format.