Pro Yearly is on sale from $80 to $50! »

Albers as a Millennial (WaffleJS)

Bfb8a1489a81ab3faf55860402abb58e?s=47 Billy Roh
November 03, 2016

Albers as a Millennial (WaffleJS)

Making generative art with JavaScript

Bfb8a1489a81ab3faf55860402abb58e?s=128

Billy Roh

November 03, 2016
Tweet

Transcript

  1. Albers as a Millennial Making Art with JavaScript

  2. None
  3. But what about programming just for fun, with no clear

    utility in mind?
  4. 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)
  5. None
  6. None
  7. Homage to the Square Josef Albers

  8. Homage to the Square is not a single work.

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

    a body of work, with hundreds of pieces.
  10. 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.
  11. Most obviously, they’re a series of three or four nested

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

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

    • Similar colour palette
  14. And less obviously, they tend to come in two flavours:

    • Similar colour palette • Contrasting colour palette
  15. Let’s take these two things and try to generate our

    own images. L a y o u t &
  16. Sizes of the squares The smallest square is 40% of

    the size of the canvas. 40%
  17. Sizes of the squares The following squares grow by 20%

    until they reach 100%. 40% 60% 80% 100%
  18. Positions of the squares The second largest square is positioned

    5% from the bottom of the canvas.
  19. Positions of the squares The succeeding squares are positions in

    increments of 5% after that. (e.g. 10%, 15%) Colour Theory Break!
  20. Colour palette Hues can be represented as this wheel.

  21. Colour palette Analogous colours are hues that are close to

    one another on a colour wheel.
  22. Colour palette Triads are hues that are roughly a third

    of the way away from one another on a colour wheel.
  23. Colour palette These works would be called analogous.

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

    of these hues are further away than others.
  25. First create a random colour. Set the colour’s lightness to

    be on the higher side.
  26. Then create another colour of a similar hue. Set its

    lightness to be low. (10–40%)
  27. These two colours are essentially the two ends of your

    spectrum.
  28. Then calculate the steps between these two colours.

  29. And you’re done!

  30. First we create a random colour.

  31. Then create a hue that’s a triad of the first

    colour.
  32. With that, you can create the next two colours.

  33. Return all four as an array.

  34. But wait there’s more!

  35. None
  36. 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?
  37. Josef Albers explored this question with his medium: canvas and

    paint.
  38. Josef Albers explored this question with his medium: canvas and

    paint. How can we explore this further in our medium: JavaScript?
  39. None
  40. Fox II Anni Albers

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

    a random grid of triangles. Grid Pattern
  42. If you look at this pattern closely, you’ll see it’s

    a random grid of triangles. Grid Pattern
  43. If you look at this pattern closely, you’ll see it’s

    a random grid of triangles. Grid Pattern 1 2 3 4
  44. Roll a random number, between 0 and 3.

  45. Depending on the number you just rolled, return one of

    the four triangles.
  46. The colour palette here is analogous too. Palette & Layers

  47. The foremost element is the darkest. The background is the

    lightest. Palette & Layers
  48. She also had many works with bright, complementary colours. Palette

    & Layers
  49. But wait there’s more!

  50. None
  51. None
  52. billyroh.com/albers Demo & Source Twitter @billyroh