Albers as a Millennial

Making generative art with JavaScript

Transcript

1. Albers as a Millennial
   Making Art with JavaScript
   

   View Slide

2. Opendoor
   Work Meetup
   WaffleJS
   Twitter
   @billyroh
   

   View Slide

3. View Slide

4. But what about coding just for fun,
   with no clear end goal in mind?
   

   View Slide

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)
   

   View Slide

6. View Slide

7. View Slide

8. http://www.albersfoundation.org/artists/biographies/
   

   View Slide

9. Homage to
   the Square
   Josef Albers
   

   View Slide

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

    View Slide

11. Homage to the Square is
    not a single work.
    It’s a body of work, with
    hundreds of pieces.
    

    View Slide

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.
    

    View Slide

13. Most obviously, they’re a
    series of three or four
    nested squares.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. Let’s take these two
    things and try to
    generate our own
    images.
    L a
    y o u
    t
    &
    

    View Slide

18. Sizes of the squares
    The smallest square is
    40% of the size of the
    canvas.
    40%
    

    View Slide

19. Sizes of the squares
    The following squares
    grow by 20% until they
    reach 100%.
    40%
    60%
    80%
    100%
    

    View Slide

20. Positions of the squares
    The second largest
    square is positioned 5%
    from the bottom of the
    canvas.
    

    View Slide

21. Positions of the squares
    The succeeding squares
    are positions in
    increments of 5% after
    that. (e.g. 10%, 15%)
    Colour Theory Break!
    

    View Slide

22. Colour palette
    Hues can be represented
    as this wheel.
    

    View Slide

23. Colour palette
    Analogous colours are
    hues that are close to
    one another on a colour
    wheel.
    

    View Slide

24. Colour palette
    Triads are hues that are
    roughly a third of the
    way away from one
    another on a colour
    wheel.
    

    View Slide

25. Colour palette
    These works would be
    called analogous.
    

    View Slide

26. Colour palette
    These works would be
    called triads(ish)
    because some of these
    hues are further away
    than others.
    

    View Slide

27. View Slide

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%)
    

    View Slide

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.
    

    View Slide

30. H S L
    346 12% 74%
    334 13 57
    323 14 42
    312 15% 27%
    Then calculate the steps
    between these two
    colours.
    

    View Slide

31. H S L
    346 12% 74%
    334 13% 57%
    323 14% 42%
    312 15% 27%
    These four colours are
    now your analogous
    palette.
    

    View Slide

32. H S L
    325 41% 84%
    333 41% 45%
    First create two random
    colours of analogous
    hues.
    

    View Slide

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.
    

    View Slide

34. H S L
    325 41% 84%
    333 41% 45%
    73 58% 56%
    72 52% 66%
    We now have a triad
    palette.
    

    View Slide

35. But wait there’s more!
    

    View Slide

36. View Slide

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?
    

    View Slide

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

    View Slide

39. Josef Albers explored this question with
    his medium: canvas and paint.
    How can we explore this further in our
    medium: JavaScript?
    

    View Slide

40. Rotate
    TranslateX
    TranslateY
    

    View Slide

41. The smaller the square, the bigger the effect.
    

    View Slide

42. View Slide

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.
    

    View Slide

44. 95
    The same principles apply to these translation functions here.
    

    View Slide

45. View Slide

46. Fox II
    Anni Albers
    

    View Slide

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

    View Slide

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

    View Slide

49. If you look at this pattern
    closely, you’ll see it’s a
    random grid of triangles.
    Grid Pattern
    1 2 3 4
    

    View Slide

50. Random Number Triangle
    4
    2
    1
    3
    

    View Slide

51. Random Number Triangle
    4
    2
    1
    3
    

    View Slide

52. If we create one svg polygon for each
    triangle, we’d end up with 900 polygons.
    

    View Slide

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.
    

    View Slide

54. Move To
    Line
    Arc
    Curve
    Z (Close Pathz)
    

    View Slide

55. View Slide

56. `M 19 342` means start at the x
    coordinate of 19 and y coordinate of 342.
    

    View Slide

57. `L 38 342` means draw a line from the
    current point to 38, 342.
    

    View Slide

58. `L 19 361` means draw a line from the
    current point to 19, 361.
    

    View Slide

59. `Z` means you’re finished drawing this
    shape, which closes it.
    

    View Slide

60. We repeat this and append it to a single
    string to create a single path.
    

    View Slide

61. The colour palette here
    is analogous too.
    Palette & Layers
    

    View Slide

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

    View Slide

63. But wait there’s more!
    

    View Slide

64. View Slide

65. View Slide

66. 
    
    Shadows move in the opposite
    direction of the light source.
    

    View Slide

67. View Slide

68. The window and the shadow
    translate in opposite directions.
    
    
    
    
    
    
    

    View Slide

69. Because it’s closer, the effect is
    more pronounced for the window.
    
    
    
    
    
    
    

    View Slide

70. View Slide

71. Orchestra
    Anni Albers
    

    View Slide

72. When you look at this
    piece, you can see that
    it’s a grid of 23 by 25.
    Grid Layout
    23
    25
    

    View Slide

73. 23
    25
    For each point in the
    grid, there are 4 different
    configurations of lines.
    Grid Layout
    1 2 3 4
    

    View Slide

74. Random Number Line
    3
    1
    2
    4
    

    View Slide

75. Random Number Line
    3
    1
    2
    4
    

    View Slide

76. The colour palette in this
    piece is simple and high
    contrast.
    Palette
    

    View Slide

77. H S L
    0 0% 2%
    60 14% 91%
    

    View Slide

78. Other similar pieces have
    low contrast, with
    analogous colours.
    Palette
    

    View Slide

79. H S L
    24 21% 72%
    31 31% 48%
    251 15% 36%
    

    View Slide

80. But wait there’s more!
    

    View Slide

81. Palette
    We can achieve a sense
    of depth by putting each
    line type in its own
    group.
    

    View Slide

82. Palette
    Horizontal lines in a
    single group.
    

    View Slide

83. Palette
    The top-right to bottom-
    left lines in a group.
    

    View Slide

84. Palette
    The top-left to bottom-
    right lines in a group.
    

    View Slide

85. Foreground
    Midground
    Background
    

    View Slide

86. Foreground
    Midground
    Background
    

    View Slide

87. Foreground
    Midground
    Background
    

    View Slide

88. Foreground
    Midground
    Background
    

    View Slide

89. The closer the layer, the bigger the
    3D rotation and translation.
    

    View Slide

90. View Slide

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).
    

    View Slide

92. Apply a simple linear scale for each layer.
    

    View Slide

93. View Slide

94. View Slide

95. The application of colour theory with HSL.
    The creation of generative compositions with SVG paths.
    The deepening of depth with translations and rotations.
    

    View Slide

96. View Slide

97. billyroh.com/albers
    Demo & Source Twitter
    @billyroh
    

    View Slide