-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsandbox.html
196 lines (167 loc) · 6.89 KB
/
sandbox.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="en">
<head>
<title>Code 2 | Projects</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="style.css" />
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<h3>Basic Attributes</h3>
<h4>loadFont()</h4>
<h4>textSize()</h4>
<h4>text()</h4>
<h3>textToPoints() Basics</h3>
<p>
textToPoints() is a great feature in p5 that converts any OpenType fonts
(OTF) into points.
</p>
<iframe src="https://editor.p5js.org/xinxin/embed/uznuyg8H"></iframe>
<h4>Adjust Vertecies</h4>
<iframe src="https://editor.p5js.org/xinxin/embed/4jQwsJvN"></iframe>
<p>↳ use UP / DOWN keys to adjust the number of vertecies.</p>
<h3>textToPoints() Morph</h3>
<iframe src="https://editor.p5js.org/xinxin/embed/pqrsbqcl"></iframe>
<p>↳ click to advance animation.</p>
<p>
What about combining nested For loops with 3D primitives?
</p>
<iframe src="https://editor.p5js.org/xinxin/embed/8nNVkyi1Q"></iframe>
<p>
<a href="https://editor.p5js.org/xinxin/sketches/Pyb76mxEJ"
>Source Code</a
>
</p>
<div class="full-width-box">
<img
src="https://i.pinimg.com/474x/92/b8/9e/92b89e526e520a32ea3d668a105224a4--school-of-architecture-font-design.jpg"
/>
</div>
<p>
Get Lectured: Yale, Spring '15
</p>
<iframe src="https://editor.p5js.org/xinxin/embed/e2ajPkZor"></iframe>
<p>
<a href="https://editor.p5js.org/xinxin/sketches/Pyb76mxEJ"
>Source Code</a
><br />
Tips: Changing the details value would change the polygon count on the
primitives.
</p>
<div class="full-width-box">
<img src="https://editor.p5js.org/xinxin/sketches/e2ajPkZor" />
</div>
<h2>Historical Overview</h2>
<h2>References</h2>
<a href="https://www.instagram.com/dia_studio/">DIA Studio</a>
<p>
Korean characters are also modular by design. Each character is created
from a comination of different Korean alphbets, separated into
consonants and vowels: <br /><br />
ㄱ ㄲ ㄴ ㄷ ㄸ ㄹ ㅁ ㅂ ㅃ ㅅ ㅆ ㅇ ㅈ ㅉ ㅊ ㅋ ㅌ ㅍ ㅎ<br />
ㅏ ㅐ ㅑ ㅒ ㅓ ㅔ ㅕ ㅖ ㅗ ㅘ ㅙ ㅚ ㅛ ㅜ ㅝ ㅞ ㅟ ㅠ ㅡ ㅢ ㅣ<br /><br />
By combining these alphabets into different configuration of "blocks",
writing and reading emerges:
</p>
<div class="full-width-box">
<img
style="height:150px"
src="https://www.howtostudykorean.com/wp-content/uploads/2012/04/2.png"
/>
</div>
<div class="full-width-box">
<img
style="height:150px"
src="https://www.howtostudykorean.com/wp-content/uploads/2012/04/7.png"
/>
</div>
<iframe
src="https://player.vimeo.com/video/197358478"
width="400"
height="225"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
></iframe>
<p>
<a href="https://www.moonjang.com/here-now-and-waiting"
>Here, Now, and Waiting</a
>
by <a href="https://www.moonjang.com/">Moon Jang</a> is wonderful
example that utilizes the modular nature of the Korean characers. The
clock contains a series of memorial signs that aim to commemorate
Jongno, a district in Seoul where young people held street
demonstrations and to reflect on the emancipatory time of Jongno. The
signs consist of several words made out of Hangeul vowels and consonants
– the Korean alphabet – that can be interpreted an aphoristic text, Now,
Here, and Waiting / Dream, Labor, Language, Life, and What. In order to
visualize the flow of time, the letters are attached to clock movements
behind the front panel of the sign. In the design outcome, the letters
constantly rotate on the front panel constructing and deconstructing the
words, Now, Here, and Waiting / Dream, Labor, Language, Life, and What.
It asks what we are waiting for to come here and now.
</p>
<p>
Full disclaimer: I do not speak Korean and I'm only presenting one
aspect of how Korean characters work after consulting with
Korean-speaking friends and doing some of my own research. If you're
curious, there is much more to the basic structure of the language that
you could learn about
<a href="https://www.howtostudykorean.com/unit0/unit0lesson1/">here</a>.
</p>
<h3>Two-dimensional</h3>
<!--
<div class="full-width-box">
<img src = "https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Frestoringpublicpossessions.files.wordpress.com%2F2011%2F08%2Fsollewitt_variationsonincompleteopencubes_1974.jpeg&f=1&nofb=1">
<p>
Incomplete Open Cubes by Sol Lewitt
</p>
</div> -->
<!-- One way to help you create strong compositions is by following the gestalt principles -->
<h3>Three-dimensional</h3>
<div class="full-width-box">
<img
src="https://i.pinimg.com/474x/66/e6/69/66e6690e06cd05821e90d746ebb8f50a.jpg"
/>
</div>
<div class="full-width-box">
<img
src="https://i.pinimg.com/474x/50/03/50/5003503eefcb4838ea7e8d0d6b267279--typographic-poster-typography-logo.jpg"
/>
<p>
Tuna Migration : review exhibition of tuna prize winner Poster Design,
Logotype Design, Exhibition Design | March 2012 <br />
Client : Academy of Visual Arts, Hong Kong Baptist University <br />
Graphic Designer : Somely So
</p>
</div>
<h3>Double-vision</h3>
<div class="full-width-box">
<img
src="https://i.pinimg.com/474x/25/5d/cd/255dcd2601fc0a2776f5554968d87f0c.jpg"
/>
</div>
<div class="full-width-box">
<img
src="https://i.pinimg.com/474x/57/7f/13/577f13d24860bdfc7f8c4431920e33ae--chinese-typography-typography-fonts.jpg"
/>
</div>
<h2>Tutorial</h2>
<h3>Nested for Loop</h3>
<div class="full-width-box">
<img
src="https://i.pinimg.com/474x/93/0c/e9/930ce9260e048e1693a8476867c4030c.jpg"
/>
</div>
<p>
CARAVANA Bed & Breakfast Identity by Panel Studio in Mexico.
</p>
<!-- <iframe src="https://editor.p5js.org/xinxin/embed/9bUX2-N0K"></iframe> -->
<iframe src="https://editor.p5js.org/xinxin/embed/7wiwgSBSW"></iframe>
<!-- <iframe src="https://editor.p5js.org/xinxin/embed/XSY-VONpQ"></iframe> -->
</body>
</html>