Albers as a Millennial (WaffleJS)

Making generative art with JavaScript

Transcript

1. Albers as a Millennial Making Art with JavaScript
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)
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!
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?
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!
52. billyroh.com/albers Demo & Source Twitter @billyroh