Albers as a Millennial (WaffleJS)

Making generative art with JavaScript

Transcript

1. Albers as a Millennial
   Making Art with JavaScript
   

   View Slide

2. View Slide

3. But what about programming just
   for fun, with no clear utility in mind?
   

   View 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 Slide

5. View Slide

6. View Slide

7. Homage to
   the Square
   Josef Albers
   

   View Slide

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

   View Slide

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

   View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. Colour palette
    These works would be
    called analogous.
    

    View Slide

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

    View Slide

25. First create a random
    colour.
    Set the colour’s lightness
    to be on the higher side.
    

    View Slide

26. Then create another
    colour of a similar hue.
    Set its lightness to be
    low. (10–40%)
    

    View Slide

27. These two colours are
    essentially the two ends
    of your spectrum.
    

    View Slide

28. Then calculate the steps
    between these two
    colours.
    

    View Slide

29. And you’re done!
    

    View Slide

30. First we create a random
    colour.
    

    View Slide

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

    View Slide

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

    View Slide

33. Return all four as an
    array.
    

    View Slide

34. But wait there’s more!
    

    View Slide

35. View Slide

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?
    

    View Slide

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

    View Slide

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

    View Slide

39. View Slide

40. Fox II
    Anni Albers
    

    View Slide

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

    View Slide

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

    View Slide

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

44. Roll a random number,
    between 0 and 3.
    

    View Slide

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

    View Slide

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

    View Slide

47. The foremost element is
    the darkest. The
    background is the lightest.
    Palette & Layers
    

    View Slide

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

    View Slide

49. But wait there’s more!
    

    View Slide

50. View Slide

51. View Slide

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

    View Slide