Slide 1
Slide 1 text
Albers as a Millennial
Making Art with JavaScript
Slide 2
Slide 2 text
Opendoor
Work Meetup
WaffleJS
Twitter
@billyroh
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
But what about coding just for fun,
with no clear end goal in mind?
Slide 5
Slide 5 text
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)
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
http://www.albersfoundation.org/artists/biographies/
Slide 9
Slide 9 text
Homage to
the Square
Josef Albers
Slide 10
Slide 10 text
Homage to the Square is
not a single work.
Slide 11
Slide 11 text
Homage to the Square is
not a single work.
It’s a body of work, with
hundreds of pieces.
Slide 12
Slide 12 text
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.
Slide 13
Slide 13 text
Most obviously, they’re a
series of three or four
nested squares.
Slide 14
Slide 14 text
And less obviously, they
tend to come in two
flavours:
Slide 15
Slide 15 text
And less obviously, they
tend to come in two
flavours:
• Similar colour palette
Slide 16
Slide 16 text
And less obviously, they
tend to come in two
flavours:
• Similar colour palette
• Contrasting colour
palette
Slide 17
Slide 17 text
Let’s take these two
things and try to
generate our own
images.
L a
y o u
t
&
Slide 18
Slide 18 text
Sizes of the squares
The smallest square is
40% of the size of the
canvas.
40%
Slide 19
Slide 19 text
Sizes of the squares
The following squares
grow by 20% until they
reach 100%.
40%
60%
80%
100%
Slide 20
Slide 20 text
Positions of the squares
The second largest
square is positioned 5%
from the bottom of the
canvas.
Slide 21
Slide 21 text
Positions of the squares
The succeeding squares
are positions in
increments of 5% after
that. (e.g. 10%, 15%)
Colour Theory Break!
Slide 22
Slide 22 text
Colour palette
Hues can be represented
as this wheel.
Slide 23
Slide 23 text
Colour palette
Analogous colours are
hues that are close to
one another on a colour
wheel.
Slide 24
Slide 24 text
Colour palette
Triads are hues that are
roughly a third of the
way away from one
another on a colour
wheel.
Slide 25
Slide 25 text
Colour palette
These works would be
called analogous.
Slide 26
Slide 26 text
Colour palette
These works would be
called triads(ish)
because some of these
hues are further away
than others.
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
H S L
346 12% 74%
First create a random
colour.
Set the colour’s lightness
to be on the higher side.
(60–90%)
Slide 29
Slide 29 text
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.
Slide 30
Slide 30 text
H S L
346 12% 74%
334 13% 57%
323 14% 42%
312 15% 27%
Then calculate the steps
between these two
colours.
Slide 31
Slide 31 text
H S L
346 12% 74%
334 13% 57%
323 14% 42%
312 15% 27%
These four colours are
now your analogous
palette.
Slide 32
Slide 32 text
H S L
325 41% 84%
333 41% 45%
First create two random
colours of analogous
hues.
Slide 33
Slide 33 text
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.
Slide 34
Slide 34 text
H S L
325 41% 84%
333 41% 45%
73 58% 56%
72 52% 66%
We now have a triadic
palette.
Slide 35
Slide 35 text
But wait there’s more!
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
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?
Slide 38
Slide 38 text
Josef Albers explored this question with
his medium: canvas and paint.
Slide 39
Slide 39 text
Josef Albers explored this question with
his medium: canvas and paint.
How can we explore this further in our
medium: JavaScript?
Slide 40
Slide 40 text
Rotate
TranslateX
TranslateY
Slide 41
Slide 41 text
The smaller the square, the bigger the effect.
Slide 42
Slide 42 text
Get Coordinates
Recalculate
Redraw
Slide 43
Slide 43 text
0 50 100
50
100
Slide 44
Slide 44 text
0 50 100
50
100
-1 0 +1
0
+1
75, 13
0.5, -0.25
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
Get Coordinates
Recalculate
Redraw
Output: scaled x, y
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
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.
Slide 49
Slide 49 text
95
The same principles apply to these translation functions here.
Slide 50
Slide 50 text
Get Coordinates
Recalculate
Redraw
Output: scaled x, y Output: new x, y,
rotation
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
Fox II
Anni Albers
Slide 56
Slide 56 text
If you look at this pattern
closely, you’ll see it’s a
random grid of triangles.
Grid Pattern
Slide 57
Slide 57 text
If you look at this pattern
closely, you’ll see it’s a
random grid of triangles.
Grid Pattern
Slide 58
Slide 58 text
If you look at this pattern
closely, you’ll see it’s a
random grid of triangles.
Grid Pattern
1 2 3 4
Slide 59
Slide 59 text
Random Number Triangle
4
2
1
3
Slide 60
Slide 60 text
Random Number Triangle
4
2
1
3
Slide 61
Slide 61 text
If we create one svg polygon for each
triangle, we’d end up with 900 polygons.
Slide 62
Slide 62 text
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.
Slide 63
Slide 63 text
Move To
Line
Arc
Curve
Z (Close Pathz?)
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
`M 19 342` means start at the x
coordinate of 19 and y coordinate of 342.
Slide 66
Slide 66 text
`L 38 342` means draw a line from the
current point to 38, 342.
Slide 67
Slide 67 text
`L 19 361` means draw a line from the
current point to 19, 361.
Slide 68
Slide 68 text
`Z` means you’re finished drawing this
shape, which closes it.
Slide 69
Slide 69 text
We repeat this and append it to a single
string to create a single path.
Slide 70
Slide 70 text
The colour palette here
is analogous too.
Palette & Layers
Slide 71
Slide 71 text
She also had many works
with bright,
complementary colours.
Palette & Layers
Slide 72
Slide 72 text
But wait there’s more!
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Shadows move in the opposite
direction of the light source.
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
The window and the shadow
translate in opposite directions.
Slide 78
Slide 78 text
Because it’s closer, the effect is
more pronounced for the window.
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
Recalculate
Redraw
Get Coordinates
Slide 81
Slide 81 text
Alpha Beta Gamma
[0, 360] [-180, 180] [-90, 90]
Slide 82
Slide 82 text
Beta will handle translateY.
Slide 83
Slide 83 text
Gamma will handle translateX.
Slide 84
Slide 84 text
Beta Gamma
[-180, 180] [-90, 90]
Slide 85
Slide 85 text
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.
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
First record the initial beta and gamma
values. This will be the base for our range.
Slide 88
Slide 88 text
We then use these initial values to create a
scale that maps to the width of the element.
Slide 89
Slide 89 text
We use the scales to calculate values for
the animation function, which expects a
value between 0 and the width of the
element.
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
Orchestra
Anni Albers
Slide 92
Slide 92 text
When you look at this
piece, you can see that
it’s a grid of 23 by 25.
Grid Layout
23
25
Slide 93
Slide 93 text
23
25
For each point in the
grid, there are 4 different
configurations of lines.
Grid Layout
1 2 3 4
Slide 94
Slide 94 text
Random Number Line
3
1
2
4
Slide 95
Slide 95 text
Random Number Line
3
1
2
4
Slide 96
Slide 96 text
The colour palette in this
piece is simple and high
contrast.
Palette
Slide 97
Slide 97 text
H S L
0 0% 2%
60 14% 91%
Slide 98
Slide 98 text
Other similar pieces have
low contrast, with
analogous colours.
Palette
Slide 99
Slide 99 text
H S L
24 21% 72%
31 31% 48%
251 15% 36%
Slide 100
Slide 100 text
But wait there’s more!
Slide 101
Slide 101 text
Palette
We can achieve a sense
of depth by putting each
line type in its own
group.
Slide 102
Slide 102 text
Palette
Horizontal lines in a
single group.
Slide 103
Slide 103 text
Palette
The top-right to bottom-
left lines in a group.
Slide 104
Slide 104 text
Palette
The top-left to bottom-
right lines in a group.
Slide 105
Slide 105 text
Foreground
Midground
Background
Slide 106
Slide 106 text
Foreground
Midground
Background
Slide 107
Slide 107 text
Foreground
Midground
Background
Slide 108
Slide 108 text
Foreground
Midground
Background
Slide 109
Slide 109 text
The closer the layer, the bigger the
3D rotation and translation.
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
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).
Slide 112
Slide 112 text
Apply a simple linear scale for each layer.
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
The application of colour theory with HSL.
The creation of generative compositions with SVG paths.
The deepening of depth with translations and rotations.
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
billyroh.com/albers
Demo & Source Twitter
@billyroh