Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Albers as a Millennial (SeattleJS)

Billy Roh
August 10, 2017

Albers as a Millennial (SeattleJS)

Billy Roh

August 10, 2017
Tweet

More Decks by Billy Roh

Other Decks in Technology

Transcript

  1. Albers as a Millennial
    Making Art with JavaScript

    View full-size slide

  2. Opendoor
    Work Meetup
    WaffleJS
    Twitter
    @billyroh

    View full-size slide

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

    View full-size slide

  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)

    View full-size slide

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

    View full-size slide

  6. Homage to
    the Square
    Josef Albers

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Colour palette
    These works would be
    called analogous.

    View full-size slide

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

    View full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. 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 full-size slide

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

    View full-size slide

  31. But wait there’s more!

    View full-size slide

  32. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Rotate
    TranslateX
    TranslateY

    View full-size slide

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

    View full-size slide

  37. Get Coordinates

    Recalculate

    Redraw


    View full-size slide

  38. 0 50 100
    50
    100

    View full-size slide

  39. 0 50 100
    50
    100
    -1 0 +1
    0
    +1
    75, 13
    0.5, -0.25

    View full-size slide

  40. Get Coordinates

    Recalculate

    Redraw


    Output: scaled x, y

    View full-size slide

  41. 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 full-size slide

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

    View full-size slide

  43. Get Coordinates

    Recalculate

    Redraw


    Output: scaled x, y Output: new x, y,
    rotation

    View full-size slide

  44. Fox II
    Anni Albers

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. Random Number Triangle
    4
    2
    1
    3

    View full-size slide

  49. Random Number Triangle
    4
    2
    1
    3

    View full-size slide

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

    View full-size slide

  51. 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 full-size slide

  52. Move To
    Line
    Arc
    Curve
    Z (Close Pathz?)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  60. But wait there’s more!

    View full-size slide



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

    View full-size slide

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






    View full-size slide

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






    View full-size slide

  64. Recalculate

    Redraw

    Get Coordinates


    View full-size slide

  65. Alpha Beta Gamma
    [0, 360] [-180, 180] [-90, 90]

    View full-size slide

  66. Beta will handle translateY.

    View full-size slide

  67. Gamma will handle translateX.

    View full-size slide

  68. Beta Gamma
    [-180, 180] [-90, 90]

    View full-size slide

  69. Beta Cursor Scale
    Min i - 90 0 -1
    Max i + 90 width +1
    Gamma Cursor Scale
    Min i - 45 0 -1
    Max i + 45 width +1
    Limit the range to get the animation without effort.

    View full-size slide

  70. First record the initial beta and gamma
    values. This will be the base for our range.

    View full-size slide

  71. We then use these initial values to create a
    scale that maps to the width of the element.

    View full-size slide

  72. We use the scales to calculate values for
    the animation function, which expects a
    value between 0 and the width of the
    element.

    View full-size slide

  73. Orchestra
    Anni Albers

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  76. Random Number Line
    3
    1
    2
    4

    View full-size slide

  77. Random Number Line
    3
    1
    2
    4

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  82. But wait there’s more!

    View full-size slide

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

    View full-size slide

  84. Palette
    Horizontal lines in a
    single group.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  87. Foreground
    Midground
    Background

    View full-size slide

  88. Foreground
    Midground
    Background

    View full-size slide

  89. Foreground
    Midground
    Background

    View full-size slide

  90. Foreground
    Midground
    Background

    View full-size slide

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

    View full-size slide

  92. 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 full-size slide

  93. Apply a simple linear scale for each layer.

    View full-size slide

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

    View full-size slide

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

    View full-size slide