Albers as a Millennial

Albers as a Millennial

Making generative art with JavaScript

Bfb8a1489a81ab3faf55860402abb58e?s=128

Billy Roh

June 15, 2017
Tweet

Transcript

  1. 3.
  2. 5.

    http://www.albersfoundation.org/artists/biographies/ Josef Albers Born 1888 in Bottrop, Germany Died 1976

    in Connecticut Born 1899 in Berlin, Germany Died 1994 in Connecticut Anni Albers (née Fleischmann)
  3. 6.
  4. 7.
  5. 11.

    Homage to the Square is not a single work. It’s

    a body of work, with hundreds of pieces.
  6. 12.

    Homage to the Square is not a single work. It’s

    a body of work, with hundreds of pieces. There are some notable visual patterns though.
  7. 16.

    And less obviously, they tend to come in two flavours:

    • Similar colour palette • Contrasting colour palette
  8. 18.
  9. 19.

    Sizes of the squares The following squares grow by 20%

    until they reach 100%. 40% 60% 80% 100%
  10. 21.

    Positions of the squares The succeeding squares are positions in

    increments of 5% after that. (e.g. 10%, 15%) Colour Theory Break!
  11. 24.

    Colour palette Triads are hues that are roughly a third

    of the way away from one another on a colour wheel.
  12. 26.

    Colour palette These works would be called triads(ish) because some

    of these hues are further away than others.
  13. 27.
  14. 28.

    H S L 346 12% 74% First create a random

    colour. Set the colour’s lightness to be on the higher side. (60–90%)
  15. 29.

    H S L 346 12% 74% 312 15% 27% Then

    create another colour of a similar hue. Set its lightness to be low. (10–40%) These two colours are essentially the two ends of your spectrum.
  16. 30.

    H S L 346 12% 74% 334 13 57 323

    14 42 312 15% 27% Then calculate the steps between these two colours.
  17. 31.

    H S L 346 12% 74% 334 13% 57% 323

    14% 42% 312 15% 27% These four colours are now your analogous palette.
  18. 32.

    H S L 325 41% 84% 333 41% 45% First

    create two random colours of analogous hues.
  19. 33.

    H S L 325 41% 84% 333 41% 45% 73

    58% 56% 72 52% 66% Take the first colour, then subtract to get the triad of that hue. Take that hue and generate two analogous colours.
  20. 34.

    H S L 325 41% 84% 333 41% 45% 73

    58% 56% 72 52% 66% We now have a triad palette.
  21. 36.
  22. 37.

    Stand back from this painting and look at the whole

    thing. Are the squares stacked on top of each other, like cut out pieces of construction paper? Are they sinking underneath each other, as if you are looking at a painting of a tunnel? Each painting explored the same basic question: can an artist create the appearance of three dimensions, using only color relations?
  23. 39.

    Josef Albers explored this question with his medium: canvas and

    paint. How can we explore this further in our medium: JavaScript?
  24. 42.
  25. 43.

    95 This function rotates each square, such that: • The

    smaller the square is, the more it rotates. • The closer the cursor is to the edge of the composition, the more the squares rotate.
  26. 45.
  27. 47.

    If you look at this pattern closely, you’ll see it’s

    a random grid of triangles. Grid Pattern
  28. 48.

    If you look at this pattern closely, you’ll see it’s

    a random grid of triangles. Grid Pattern
  29. 49.

    If you look at this pattern closely, you’ll see it’s

    a random grid of triangles. Grid Pattern 1 2 3 4
  30. 53.

    If we create one svg polygon for each triangle, we’d

    end up with 900 polygons. This make this less unwieldy, we’ll use svg path instead.
  31. 55.
  32. 56.

    `M 19 342` means start at the x coordinate of

    19 and y coordinate of 342.
  33. 64.
  34. 65.
  35. 67.
  36. 70.
  37. 72.

    When you look at this piece, you can see that

    it’s a grid of 23 by 25. Grid Layout 23 25
  38. 73.

    23 25 For each point in the grid, there are

    4 different configurations of lines. Grid Layout 1 2 3 4
  39. 81.

    Palette We can achieve a sense of depth by putting

    each line type in its own group.
  40. 90.
  41. 91.

    Here we’re stating that the foreground layer should rotate by

    15 degrees. The midground should rotate 90% of that (13.5 degrees), and the background should rotate 90% of that (12.15 degrees).
  42. 93.
  43. 94.
  44. 95.

    The application of colour theory with HSL. The creation of

    generative compositions with SVG paths. The deepening of depth with translations and rotations.
  45. 96.