Albers as a Millennial (SeattleJS)

Bfb8a1489a81ab3faf55860402abb58e?s=47 Billy Roh
August 10, 2017

Albers as a Millennial (SeattleJS)

Bfb8a1489a81ab3faf55860402abb58e?s=128

Billy Roh

August 10, 2017
Tweet

Transcript

  1. Albers as a Millennial Making Art with JavaScript

  2. Opendoor Work Meetup WaffleJS Twitter @billyroh

  3. None
  4. But what about coding just for fun, with no clear

    end goal in mind?
  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)
  6. None
  7. None
  8. http://www.albersfoundation.org/artists/biographies/

  9. Homage to the Square Josef Albers

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    of these hues are further away than others.
  27. None
  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%)
  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.
  30. H S L 346 12% 74% 334 13% 57% 323

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

    14% 42% 312 15% 27% These four colours are now your analogous palette.
  32. H S L 325 41% 84% 333 41% 45% First

    create two random colours of analogous hues.
  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.
  34. H S L 325 41% 84% 333 41% 45% 73

    58% 56% 72 52% 66% We now have a triadic palette.
  35. But wait there’s more!

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

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

    paint. How can we explore this further in our medium: JavaScript?
  40. Rotate TranslateX TranslateY

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

  42. Get Coordinates Recalculate Redraw

  43. 0 50 100 50 100

  44. 0 50 100 50 100 -1 0 +1 0 +1

    75, 13 0.5, -0.25
  45. None
  46. Get Coordinates Recalculate Redraw Output: scaled x, y

  47. None
  48. 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.
  49. 95 The same principles apply to these translation functions here.

  50. Get Coordinates Recalculate Redraw Output: scaled x, y Output: new

    x, y, rotation
  51. None
  52. None
  53. None
  54. None
  55. Fox II Anni Albers

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

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

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

    a random grid of triangles. Grid Pattern 1 2 3 4
  59. Random Number Triangle 4 2 1 3

  60. Random Number Triangle 4 2 1 3

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

    end up with 900 polygons.
  62. 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.
  63. Move To Line Arc Curve Z (Close Pathz?)

  64. None
  65. `M 19 342` means start at the x coordinate of

    19 and y coordinate of 342.
  66. `L 38 342` means draw a line from the current

    point to 38, 342.
  67. `L 19 361` means draw a line from the current

    point to 19, 361.
  68. `Z` means you’re finished drawing this shape, which closes it.

  69. We repeat this and append it to a single string

    to create a single path.
  70. The colour palette here is analogous too. Palette & Layers

  71. She also had many works with bright, complementary colours. Palette

    & Layers
  72. But wait there’s more!

  73. None
  74. None
  75. Shadows move in the opposite direction of the light source.

  76. None
  77. The window and the shadow translate in opposite directions.

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

    window.
  79. None
  80. Recalculate Redraw Get Coordinates

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

  82. Beta will handle translateY.

  83. Gamma will handle translateX.

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

  85. 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.
  86. None
  87. First record the initial beta and gamma values. This will

    be the base for our range.
  88. We then use these initial values to create a scale

    that maps to the width of the element.
  89. We use the scales to calculate values for the animation

    function, which expects a value between 0 and the width of the element.
  90. None
  91. Orchestra Anni Albers

  92. When you look at this piece, you can see that

    it’s a grid of 23 by 25. Grid Layout 23 25
  93. 23 25 For each point in the grid, there are

    4 different configurations of lines. Grid Layout 1 2 3 4
  94. Random Number Line 3 1 2 4

  95. Random Number Line 3 1 2 4

  96. The colour palette in this piece is simple and high

    contrast. Palette
  97. H S L 0 0% 2% 60 14% 91%

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

  99. H S L 24 21% 72% 31 31% 48% 251

    15% 36%
  100. But wait there’s more!

  101. Palette We can achieve a sense of depth by putting

    each line type in its own group.
  102. Palette Horizontal lines in a single group.

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

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

  105. Foreground Midground Background

  106. Foreground Midground Background

  107. Foreground Midground Background

  108. Foreground Midground Background

  109. The closer the layer, the bigger the 3D rotation and

    translation.
  110. None
  111. 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).
  112. Apply a simple linear scale for each layer.

  113. None
  114. None
  115. The application of colour theory with HSL. The creation of

    generative compositions with SVG paths. The deepening of depth with translations and rotations.
  116. None
  117. billyroh.com/albers Demo & Source Twitter @billyroh