-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (126 loc) · 8.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Generative Design Workshop | Musings with Code</title>
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
.number-left {
left: -72px;
top: 32px;
font-size: 8rem;
}
.number-right {
right: -72px;
top: 32px;
font-size: 8rem;
}
</style>
</head>
<body class="garamond mw7 ml-auto mr-auto">
<header class="mt4">
<h1 class="f-subheadline lh-title measure mb2">Making the Thing that Makes the Thing</h1>
<h2 class="f3 lh-title measure mb5">Exploring Generative Art + Design with p5.js</h1>
<p class="f3 lh-copy mb5">Welcome to the workshop! In the next hour and half, we'll explore Generative Art and Design and recreate some classical works with p5.js. You'll find links to the individual sketches below and an <a class="pointer dim gray" href="./explainers" target="_blank">explorable guide</a> covering some p5.js concepts we'll use.</p>
</header>
<section class="flex justify-between mb5">
<div class="relative w-50">
<div class="absolute f-headline number-right">01</div>
<img class="ba b--gray br2" src="./images/01.png">
</div>
<div class="mr3">
<div class="f2 lh-title mt5">Vera Molnár</div>
<div class="f3 lh-copy"><em>Untitled 1974 (Squares)</em></div>
<a class="f5 link dim ba pa3 mb2 dib near-black w4 mv4 tc br2" href="https://editor.p5js.org/ajithranka/sketches/z3y1EU8p" target="_blank">Go to sketch</a>
</div>
</section>
<section class="flex justify-between mb5">
<div class="ml3">
<div class="f2 lh-title mt5">Vera Molnár</div>
<div class="f3 lh-copy"><em>Des Ordres 1974 (Grid)</em></div>
<a class="f5 link dim ba pa3 mb2 dib near-black w4 mv4 tc br2" href="https://editor.p5js.org/ajithranka/sketches/0ZbaioKl" target="_blank">Go to sketch</a>
</div>
<div class="relative w-50">
<div class="absolute f-headline number-left">02</div>
<img class="ba b--gray br2" src="./images/02.png">
</div>
</section>
<section class="flex justify-between mb5">
<div class="relative w-50">
<div class="absolute f-headline number-right">03</div>
<img class="ba b--gray br2" src="./images/03.png">
</div>
<div class="mr3">
<div class="f2 lh-title mt5">Georg Nees</div>
<div class="f3 lh-copy"><em>Schotter (Gravel), 1968</em></div>
<a class="f5 link dim ba pa3 mb2 dib near-black w4 mv4 tc br2" href="https://editor.p5js.org/ajithranka/sketches/ytv9uRao" target="_blank">Go to sketch</a>
</div>
</section>
<section class="flex justify-between mb5">
<div class="ml3">
<div class="f2 lh-title mt5">10PRNT( );</div>
<a class="f5 link dim ba pa3 mb2 dib near-black w4 mv4 tc br2" href="https://editor.p5js.org/ajithranka/sketches/rsP-2yRF" target="_blank">Go to sketch</a>
</div>
<div class="relative w-50">
<div class="absolute f-headline number-left">04</div>
<img class="ba b--gray br2" src="./images/04.png">
</div>
</section>
<section class="flex justify-between mb5">
<div class="relative w-50">
<div class="absolute f-headline number-right">05</div>
<img class="ba b--gray br2" src="./images/05.png">
</div>
<div class="mr3">
<div class="f2 lh-title mt5">Sébastien Truchet</div>
<div class="f3 lh-copy"><em>Tiling (Triangles)</em></div>
<a class="f5 link dim ba pa3 mb2 dib near-black w4 mv4 tc br2" href="https://editor.p5js.org/ajithranka/sketches/RlsWKxth" target="_blank">Go to sketch</a>
</div>
</section>
<section class="flex justify-between mb5">
<div class="ml3">
<div class="f2 lh-title mt5">C S Smith</div>
<div class="f3 lh-copy"><em>Tiling (Waves)</em></div>
<a class="f5 link dim ba pa3 mb2 dib near-black w4 mv4 tc br2" href="https://editor.p5js.org/ajithranka/sketches/hO4_eUqG" target="_blank">Go to sketch</a>
</div>
<div class="relative w-50">
<div class="absolute f-headline number-left">06</div>
<img class="ba b--gray br2" src="./images/06.png">
</div>
</section>
<section class="flex justify-between mb5">
<div class="relative w-50">
<div class="absolute f-headline number-right">07</div>
<img class="ba b--gray br2" src="./images/07.png">
</div>
<div class="mr3">
<div class="f2 lh-title mt5">Piet Mondrian</div>
<div class="f3 lh-copy"><em>Mondrian Grid</em></div>
<a class="f5 link dim ba pa3 mb2 dib near-black w4 mv4 tc br2" href="https://editor.p5js.org/ajithranka/sketches/C5XWANwx" target="_blank">Go to sketch</a>
</div>
</section>
<section class="flex justify-between mb5">
<div class="ml3">
<div class="f2 lh-title mt5">Anni Albers</div>
<div class="f3 lh-copy"><em>Generative Weave</em></div>
<a class="f5 link dim ba pa3 mb2 dib near-black w4 mv4 tc br2" href="https://editor.p5js.org/ajithranka/sketches/4RIeKOf8" target="_blank">Go to sketch</a>
</div>
<div class="relative w-50">
<div class="absolute f-headline number-left">08</div>
<img class="ba b--gray br2" src="./images/08.png">
</div>
</section>
<footer class="flex items-center justify-between bt pv3">
<p class="f5">Musings with Code</p>
<div>
<a class="dib w1 h1 link pointer dim mr2" href="https://twitter.com/musingswithcode" target="_blank">
<svg aria-labelledby="simpleicons-twitter-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-twitter-icon">Twitter icon</title><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"></path></svg>
</a>
<a class="dib w1 h1 link pointer dim" href="https://instagram.com/musingswithcode" target="_blank">
<svg aria-labelledby="simpleicons-instagram-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-instagram-icon">Instagram icon</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"></path></svg>
</a>
</div>
</footer>
</body>
</html>