README.html 38.7 KB
Newer Older
gijs's avatar
gijs committed
1 2 3
<html>

<head>
4 5
<meta charset="UTF-8">
<title>Up Pen Down</title>
gijs's avatar
gijs committed
6 7 8
</head>

<body>
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
<h1>UP PEN DOWN</h1>
<h3>
<a href="http://balsamine.be/saison-16-17/up-pen-down.html">Théâtre la Balsamine (9-10-2017 → 13-10-2017)</a>
</h3>
<nav>
<ul>
<li>
<a href="#dot">p.1 Dot</a>
</li>
<li>
<a href="#line">p.2 Line</a>
</li>
<li>
<a href="#corner">p.3 Corner</a>
</li>
<li>
<a href="#circle">p.4 Circle</a>
</li>
<li>
<a href="#ductus">p.5 Ductus</a>
</li>
<li>
<a href="#curve">p.6 Curve</a>
</li>
<li>
<a href="#improvisation">p.7 Improvisation</a>
</li>
<li>
<a href="#grid">p.8 Grid</a>
</li>
<li>
<a href="#process-path">Process path</a>
</li>
<li>
<a href="#inventory">Inventory</a>
</li>

</ul>
</nav>
<hr />
<section class="introductions">
<article lang="en" class="introduction">
<p>
This webpage is an interpretation and continuation of the printparty Up Pen Down, performed at Balsamine Theater as a part
ludi's avatar
ludi committed
53
of Saison des Cultures Numériques 2017. This performance was the first public moment of a research focused
54 55
on that which is between digital type design and bodies. Letters and movements, dance notation and programming,
digital codes and coded physical gestures, plotters and body parts interacted with each other and blured
ludi's avatar
ludi committed
56 57
the distinction between choreographic and digital practices.</p>
<p>During the performance a <a href="http://osp.kitchen/api/osp.live.up-pen-down/raw/facsimile.pdf">printed foldable</a> was plotted. On this page we reinterpret and document the performance using recorded fragments and material from the research.
58 59 60 61 62 63 64 65 66
</p>
</article>
<article lang="fr" class="introduction">
<p> Cette page web est une interprètation et un prolongement de la printparty Up Pen Down performée au théâtre de
la Balsamine dans le cadre de la Saison des Cultures Numériques 2017. Cette performance était le premier
moment public d'une recherche située à la rencontre entre typographie digitale et corps. Lettres et mouvements,
notation de danse et programmation, codes digitaux et gestes physiques codés, plotters et corps ont dialogués
jusqu’à rendre cen fait onfuse la distinction entre pratiques chorégraphiques et digitales.
</p>
ludi's avatar
ludi committed
67 68
<p>Pendant cette performance un <a href="http://osp.kitchen/api/osp.live.up-pen-down/raw/facsimile.pdf">dépliant</a> a été dessiné. Sur cete page nous réinterprétons et documentons la performance avec des fragments de l'événément et de notre matériel de recherche.
</p>
69 70 71 72 73 74 75 76
</article>
<article lang="nl" class="introduction">
<p> Deze website is een interpretatie en vervolg van de printparty Up Pen Down, opgevoerd in het Balsamine Theater
als onderdeel van Saison des Cultures Numériques 2017. Deze performance was het eerste publieke moment van
een onderzoek in dat wat zich bevindt tussen digitaal letterontwerp en lichamen. Letters en beweging, dansnotatie
en programmeren, digitale codes en fysieke bewegingen, plotters en lichaamsdelen gingen het gesprek aan en
vervaagden de grens tussen choreografie en digitale praktijken.
</p>
ludi's avatar
ludi committed
77 78
<p>Tijdens de performance werd <a href="http://osp.kitchen/api/osp.live.up-pen-down/raw/facsimile.pdf">een vouwvel</a> geplot. Op deze pagina gebruiken we video-fragmenten en materiaal uit ons onderzoek om het proces the documenteren.
</p>
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
</article>
</section>
<article id="dialogue">
<h2>Dialogue</h2>
<p>
<span class="name">Pierre</span> Maybe imagine a human having a perception of a vector for the first time: a pregnant woman walks
on the flat surface of a beach, to the background of the sunset. She hunts birds with a bow and an arrow. As
she bends the bow, she feels how its straight rope interacts with the sturdiness of the bones of her arm and
how the curved wood of the bow is in sync with the fibers of her muscles. All those straight and curved lines,
along with the soft arc of her thick belly, are also drawn by the sun as her shadow stretches on the sand. She
launches the arrow. The arrow itself could be seen as a vector-wave-movement. She also feels how rays of sun
project her transformed shape of her shadow on the sand, following another straight line. She looks more closely
at the border of the shadow, and sees the very moment where some grains of sand get lightened by the sun, like
many corpuscules-pixels-bitmap, envisioning in simultaneously the two main components of digital images, and
t two ways of describing tangible matter.
</p>
<p>
<span class="name">Pierre</span> There are two matters within the digital, the molecular, which we recognise as bitmap and know
very well, and the ondulatory – the vectors. I want to not only utilise vectors, but also to go anthropological
about them. From that perspective I can tackle what is important in the aesthetics vectors create, beyond what
things look like and into the way they operate and influence our own operations.
</p>
<p>
<span class="name">Ludi</span> I have the need to include the body in the investigation of digital typography, because through intimate
relations with vectors, we can trace back histories of writing that depended on the body and its movement.
</p>
<p>
<span class="name">Ludi The body has its own intelligence. When I put, for example, the tension of the curve into this awkward body,
some aspects of the digital practice become apparent in a way that I can't put the finger on, but I feel
that only the body can detect.
</p>
<p>
<span class="name">Ludi</span> OSPies like dancing. But we do end up sitting on a chair when ever we deal with type design. Its
maybe a fantasy to think that such different modes of being could come together in an interesting way, but here
we are, using one practice to reflect on and activate the other.
</p>
<p>
<span class="name">Gijs</span> With Metapost, the human becomes the choreographer and the machine is the dancer, interpreting and
improvising with the score.
</p>
<p>
<span class="name">Gijs</span> Actually, a vector is a meta picture. Only when rendered it becomes a shape.
</p>
<p>
<span class="name">Adva</span> So, could we say that vectors are like movements?
</p>
<p>
<span class="name">Gijs</span> Yes, in this case the movement is a rendering device.</p>
<p>
<span class="name">Adva</span> Maybe both movement and vectors are potential, actualised through rendering processes, by the body,
by the machine, by anything they activate?
</p>
<p>
<span class="name">Pierre</span> I find both dance and graphic design poetic practices, but sometimes I felt we killed their poetry
by forcing them to interact with each other.
</p>
<p>
<span class="name">Ludi</span> We slowed the rendering process down so much in order to look into the process it facilitates. Maybe
that's what killed the poetry?
</p>
<p>
<span class="name">Adva</span> I find poetry in the fact that we sometimes look at those technical processes through the perspective
of movement.
</p>
<p>
<span class="name">Gijs</span> If you think of programming from the perspective of movement, for exemple loops, the time it takes
to execute the code, the electrons jumping, freezing, flowing, interacting through the processor - all become
interesting in a different way.
</p>
<p>
<span class="name">Adva</span> I understood at a certain point that Up Pen Down is not a linear research, but rather an environment
we created for ourselves where methods, actions and questions we come up with can interact with pieces of art,
of knowledge, of completed or unfinished explorations of others within the field. Up Pen Down is for me more
of a place to be, than a well studied research question.
</p>
<p>
<span class="name">Adva</span> By allowing different body practices to infiltrate one another, contemporary dance went through various
exciting waves of new discoveries about movement. At a certain point the body withdrew and the conceptualisation
of movement entered the field. I ask myself if there is something new to find about movement through looking
for it within digital processes and if yes, can it maybe generate a new way of thinking body and of making dance?
gijs's avatar
gijs committed
159
</p>
160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182
<p>
<span class="name">Adva</span> I read once a Kabalah text about the letter . Sometimes this letter is used to indicate the name
of god. In that case, it should be written, but not pronounced. Its not because it represents god, but because
they believe that the letter itself, when written, contains divine power that is lost in the transformation through
the body from the written to the spoken. I like the idea of a letter carrying its own agency. This story is taken
from a mystical culture, but also on the more up-pen-downish level, we create texts, choreographies and technologies
that at a certain point become existing in themselves and start a relationship with us.
</p>
</article>

<p>
Five days preparation workshop : October 9 → 14 Commented performance : Saturday October 14, 8pm.
<a href="http://balsamine.be/">Balsamine theater, Félix Marchallaan 1, 1030 Schaarbeek</a>
</p>
<article class="panel" id="eight">
<h2 id="grid">Grid</h2>
<section class="content">

<p class="narrative">Drawing of the grid is the first element of the presentation. Developed as a group the scene start as the audience
is still coming in. Equiped with different coloured technical tapes, each one coordinates in solo or binomial
to place the different markers. The installation of the tape uses walking techniques inspired by the performance
of Esther Ferrer
<sup>
gijs's avatar
gijs committed
183
<a href="#note1">[1]</a>
184 185 186 187 188
</sup> or measured movements, rolled developed for the occasion. In the background we listen to Laurie Anderson
- O Superman.
</p>
<ol class="footnotes">
<li id="note1">Esther Ferrer,
gijs's avatar
gijs committed
189
<a href="https://www.youtube.com/watch?v=S6KflUAhQXI">Le chemin se fait en marchant</a>
190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206
</li>
</ol>

<p class="narrative">The grid has a proportion of 8 x 4 and allows us to overflow on the wall.</p>
<p class="narrative">After placement of the grid by the bodies, light focus on the plotter who starts 'marking the territory'. One's
filming next to it so that the audience can see the pen trajectory, plotter's dance projected on the side
wall. On page 8, the grid is drawn.
</p>
</section>
<section class="video">
<iframe src="https://player.vimeo.com/video/255352158?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
</section>
</article>
<article class="panel" id="one">
<section class="content">
<h2 id="dot">.</h2>
ludi's avatar
ludi committed
207 208
<p class="narrative">
Page 1 is the title page. This is where the plotter plot a simple dot. At the same time one person enters the
209 210 211
grid, marking a dot in the grid while announcing the coordinates and starting the introduction. This moment
marks the direct echo between the bodies and the machine. Space and language are transposed to the scale
of the body.</p>
ludi's avatar
ludi committed
212 213
<p class="clear">
<img src="http://osp.kitchen/api/osp.live.up-pen-down/raw/iceberg/page1-dot.png" /></p>
214 215 216 217 218 219 220
</section>
</article>
<article class="panel" id="two">
<section class="content">
<h2 id="line">Line</h2>
<p class="narrative">Page 2 draws a same line following the 3 languages in action : hpgl, Logo and Metapost. Alternately the body
is the pen, the instructor and the interpreter. </p>
ludi's avatar
merging  
ludi committed
221
<code data-lang="hpgl"><pre>
ludi's avatar
ludi committed
222
IN; SP1; PA1,1; PD3,5; PU;
ludi's avatar
merging  
ludi committed
223 224
</pre></code>
<code data-lang="logo"><pre>
ludi's avatar
ludi committed
225
RT26.57;FD4.47;
ludi's avatar
merging  
ludi committed
226 227
</pre></code>
<code data-lang="mp"><pre>
ludi's avatar
ludi committed
228 229 230 231 232 233
beginfig(1);
z1=(1,1);
z2=(3,5);
draw z1--z2;
endfig;
end
ludi's avatar
merging  
ludi committed
234
</pre></code>
235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255
</section>
<section class="video">
<iframe src="https://player.vimeo.com/video/255353045?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
</section>
</article>
<article class="panel" id="three">
<section class="content">
<h2 id="corner">Corner</h2>
<p class="narrative"> Page 3. The team gathers to fill boxes of the grid with chalk. Now the full body is a pen carried by a body that
plays the arm of the plotter. The hpgl plot of an angle appears in negative in the white space of the chalk.</p>
<!-- Hm, here on the page appear a text about Logo but the corner instructions are in hpgl. -->
<p class="documentation">
Logo a été écrit pour les enfants. Né en 1966, c'es2t une méthode pédagogique et un langage de programmation qui la met en
pratique. Inspirée des recherches de Jean Piaget, Logo a été développé par Seymour Papert comme une initiation
à la la programmation et aux logiques numériques. Il passe par le dessin pour expliquer les concept d’unité,
d'échelle et de récursivité. Ce qui nous intéresse en particulier avec Logo c’est sa “Tortue”; sorte de robot
traçant piloté par de simples commandes: Pen Up, Pen Down, Forward & Rotate. Avec cette spécificité que la
tortue se déplace dans un environnement relatif.
</p>
</section>
ludi's avatar
ludi committed
256 257 258 259
<section class="video">
<iframe src="https://player.vimeo.com/video/255587815?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
</section>
260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278
</article>
<article class="panel" id="four">
<section class="content">
<h2 id="circle">Circle</h2>
<p class="narrative"> Page 4 deals with curves and the simplest application of them : circles. Three circles are performed simultaneously
starting as a canon and continuing in a loop. Each body performs the circle in a different posture and rhythm.
The 3 languages come into confrontation, bodies have here to take into account collisions. Riding on the
wall the Metapost circle meets the three-dimensional space of the stage. The path bumps into the folds of
the page.</p>

<p class="documentation">
HPGL or Hewlett-Packard Graphics Language, is a drawing and programming language to command pen plotters. It developed into
the industry standard and is still supported by contemporary devices. There are commands to send the pen
to a coordinate, or position on the paper and commands to put the pen down on the paper: Pen Down, or to
lift it again: Pen Up. If the pen is moving while it is down or on the paper the machine draws. There are
commands to modify the pen and commands to modify the machine, as in return to default settings, to change
the size of the paper or to pick a new one.
</p>
</section>
ludi's avatar
ludi committed
279 280 281 282
<section class="video">
<iframe src="https://player.vimeo.com/video/255593456?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
</section>
283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348
</article>
<article class="panel" id="five">
<h2 id="ductus">Ductus</h2>
<section class="content">
<p class="narrative">Page 5 is the link with a more theoretical passage on the origin of our Latin ductus. The plotter superimposes
the evolution of the lines of the ampersand sign - from the capitales ET to the & - by following Jean Mallon's
documentary
<i>Ductus</i>.</p>
<p class="narrative"> We then retrace the historical relationships between E and ה.
</p>
</section>
</article>
<article class="panel" id="six">
<h2 id="curve">Curve</h2>
<section class="content">

<p class="narrative">Page 6 tells the specificities of the letter and bring us back to curves. Starting from a minimal straight plotted
version of the ה and the 3 points defining its upper right part, we play with curve tensions variations,
making legible the self initiative behaviour of Metapost dealing with curves. A dialogue between the indications
of Adva - only practitioner drawing this sign - the instructions and the projected drawing of Metapost is
played out.
</p>

<p class="documentation">
Linguists say that the E, fifth letter of the latin alphabet, is derived from the Greek Epsilon E, represented in egyptian
hieroglyph by the rotated , and rotated again from the Phoenician that is rooted in two cuneiform letters
from the semitic script aged from more than three millenaries, the fifth letter haw meaning the window and
the eight letter heth meaning fence . In syriac and arabic, it gave a near rounded shape, and in hebrew the
mix between the latinesque cornered letter and a rounded one, even more rounded in cursive .</p>
</section>
<section class="video">

<iframe src="https://player.vimeo.com/video/255353606?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
</section>
</article>
<article class="panel" id="seven">
<section class="content">
<h2 id="improvisation">Improvisations</h2>
<p class="narrative"> Page 7 introduces the Metafont "most pleasing curve" concept. That's when the programmer becomes a choreographer
and program itself is the 'dancer'. The plotter plot the ה with the rounded angle without direction, and
on top of it, with direction (intention).
</p>
<p class="documentation">
Metapost is a drawing language based on Metafont, the language developed by Donald Knuth to design fonts. In Metapost the
drawing is deduced from a collection of mathematical equations. It is not obligatory but often the drawing
is split in two parts in the first half the points of the drawing are defined. In the second part the connections
between those lines are described, straight lines or curves and in which direction do they leave or enter
the point.
</p>
<p class="documentation">
«Let's consider the following mathematical problem: Given n points z1, z2,..., zn in the plane, what is the most pleasing
closed curve that goes through them in the specified order [...] To avoid degenerate situations we may assume
that n is at least 4. This problem is essentially like the dot-to-dot puzzles that we give to young children.
Of course it is not a well-posed mathematical problem, since I didn't say what it means for a curve to be
"most pleasing". Let's first postulate soractice of the drawing of this sign,me axioms that the most pleasing
curve should satisfy. [... skipping mathematical properties 1 to 4 ...] Property 5 (smoothness) : There are
nothe hpgl plot of an angle appears in negative in the white space of the chalk. sharp corners in the most
pleasing curve. [...] In other words, there is a unique tangent at every point of the curve. Property 6 :
if z1, z2, z3, z4 are consecutive points of a circle, the most pleasing curve through them is that circle.»
Donald Knuth, "Mathematical typography", p. 355, in the Bulletin of the American Mathematical Society, Volume
1, Number 2, March 1979
</p>
</section>
</article>

ludi's avatar
ludi committed
349 350 351 352 353 354 355 356 357
<article id="annexes">
<section class="process">
<h2>Process path</h2>
<p>The research has developed itself in stages through several workshops over the the past two years. Reworking a workshop OSP organized to explore performative typography with graphic design students, OSP invited Adva Zakai as a professional performance artist, close to us.</p>

<h3 id="up-pen-down-2015">2015 - Workshop Up Pen Down at la Balsamine theater during the “Quinzaine numérique”</h3>

<figure>
<img src="http://www.ludi.be/up-pen-down/geometrie-hors-des-sentiers-battus-p42.jpg" />
358 359 360
<img src="http://ospublish.constantvzw.org/images/var/albums/Up-pen-down--01/11990592_1061281300551391_2757248643048128566_n%20%281%29.jpg" />
<img src="http://ospublish.constantvzw.org/images/var/albums/Up-pen-down--01/2015-10-25%2016_52_55.jpg?m=1492279203" />
<img src="http://ospublish.constantvzw.org/images/var/albums/Up-pen-down--01/2015-10-25%2016_44_47.jpg?m=1492279209" />
ludi's avatar
ludi committed
361 362 363
<img src="http://ospublish.constantvzw.org/images/var/albums/Up-pen-down--01/2015-10-25%2017_34_20.jpg?m=1448905825" />
<figcaption><p>Example of logo drawings code. Human grid as an excersice for collective drawing. Or the mapping of a path.</p></figcaption>
</figure>
364
<p>For this 2 day workshop OSP invited artist / dancer / choreographer Adva Zakai to reinterpret a workshop originially organised at Valence in 2012. And took as a starting point the relation between typographic movement and code. We started by executing simple commands or computer code ― walking on the lines a computer would have drawn. We quickly tried to develop movements through more abstract ways. In a exercice, movement rules were regulating the move of a groupe of people, in other each participant was inventing its own movement rules that other participants had to decode. Rapidly we developed a new game of coding and decoding.</p>
ludi's avatar
ludi committed
365 366 367

<h3 id="metahoguet-2016">2016 - Workshop Metahoguet at La Maison du Livre in the frame of the Saison numériques.</h3>
<figure>
ludi's avatar
merging  
ludi committed
368
  <img src="https://cloud.osp.kitchen/s/ZNGNY9mJ0RoxKrd/download" />
ludi's avatar
ludi committed
369 370 371 372 373 374 375 376
<img src="https://cloud.osp.kitchen/s/zYnjaGwfgrEjkDt/download" />
<img src="https://cloud.osp.kitchen/s/PspnyW0wlyujLNP/download" />
<img src="https://cloud.osp.kitchen/s/OsrHwMWDRDblUkZ/download" />
<img src="https://cloud.osp.kitchen/s/n1NpaLKyKaJAvrn/download" />
<img src="https://cloud.osp.kitchen/s/vqWaWKZi37uusSs/download" />
<img src="https://cloud.osp.kitchen/s/oWkTjAW2m8xJm9a/download" />
<figcaption><p></p></figcaption></figure>

ludi's avatar
merging  
ludi committed
377
<p>Hosted by <a href="http://www.lamaisondulivre.be/">La Maison du Livre a digital</a> a typeface was drawn collaboratively using Metapost in a two day workshop. Metapost is a specialized programming language developed for parametric drawing. As letters were drawn using code rather than manipulating a preview through a graphical interface we could draw together live and simultaneously through a collaborative text editor, Etherpad. During the workshop this shared pad was projected in parallel with its graphical interpretation. This way all the participants could contribute with their letter(s) being aware of the evolution of the letters drawn by the others.<p>
ludi's avatar
ludi committed
378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471
<p>Linked up with this common screen; a *plotter* (pen tracer) allowing live drawing of the designed steps. These snapshots where exhibited so that visitors could feel the collective font process. Next to these snapshots specimens of the final font were drawn with a mural plotter during the opening of the exhibition.<p>
<p>Drawing collaboratively through code asked for a different process in considering shape.</p>

<h3 id="buda-2016">2016 - Worksession at Buda (Courtrai), at OSP WTC and GC Ten Weyngaert (Forest)</h3>
<p>In order to analyze and further the research started at Balsamine we organized three working sessions.</p>
<p>In the two first sessions in Buda (October 2016) and at WTC (January 2017), we looked back on the experiment at la Balsamine theater. Throughout our discussions we developped a common vocabulary and tried to precise our research scope. We identified three programming languages, each being able to describe or encode a drawing but all coming with their own approaches on how to desribe shape and motion. These languages were linked to approaches of movement we had developed to arrive at strategies of interpretation.</p>
<p>During the last session at GC Ten Weyngaert (January 2017) we invited two external guests, Louise Baduel and Sarah van Lamsweerde, to reflect on the work we'd developed and to find new insigts and directions to continue This last session helped us to realise how each worksession was preceded by exchanges on practices of the participants and that these sessions are crucial to establish a shared vocabulary and shared base of knowledge. The "lecture performance" we're organizing in Balsamine in October 2017 is for us a logical next step.</p>

<figure>
<img src="https://cloud.osp.kitchen/s/z17JEW0gdceZLA8/download" />
<img src="https://cloud.osp.kitchen/s/917rXUNJ3YhGDqo/download" />
<img src="https://cloud.osp.kitchen/s/w53ISinor6Pl6Tz/download" />
<img src="https://cloud.osp.kitchen/s/gvAgxcwudNfmOUc/download" />
<figcaption><p>Session at Buda Kortrijk, with 3 Recipes for an 'R', drawn by the plotter, performed and exploration of the Bezier curve.</p></figcaption>
</figure>
<figure>
<img src="https://cloud.osp.kitchen/s/ITgM0mQJZAH1IEP/download" />
<img src="https://cloud.osp.kitchen/s/ux8sw1mhXtWaisC/download" />
<img src="https://cloud.osp.kitchen/s/RGSw6burIZYWD5w/download" style="clear: both;"/>
<img src="https://cloud.osp.kitchen/s/aAL0eGUXiyIvkiX/download" />
<figcaption><p>Session at WTC, excecuting the recipes in a grid.</p></figcaption>
</figure>
<figure>
<img src="https://cloud.osp.kitchen/s/L2U2833aDlyZZ8p/download" />
<img src="https://cloud.osp.kitchen/s/q0uYlm28kYlKSJr/download" />
<figcaption><p>Research session at GC Ten Weyngaret, with Sarah van Lamsweerde and Lousie Baduel.</p></figcaption>
</figure>
</section>

<section class="inventory">
<h2 id="inventory">Inventory</h2>
<h3 id="dance-notations">Dance notations</h3>
<p>Besides the two schools of Laban and Benesh, we can mention other notation systems.</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Eshkol-Wachman_movement_notation">Eshkol-Wachman movement notation</a></li>
<img src="https://upload.wikimedia.org/wikipedia/en/d/d1/Manuscript_page.png" />
<li><a href="http://notadanse.asso-web.com/uploaded/Notices/notice-du-danse-r.pdf">Le Danse.R, Raphael Bach</a></li>
</ul>

<h3 id="tools-languages">Tools, dictionaries, programming languages</h3>
<ul>
<li><a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">Understanding Bezier curves</a></li>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/B%C3%A9zier_2_big.gif/240px-B%C3%A9zier_2_big.gif" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/B%C3%A9zier_3_big.gif/240px-B%C3%A9zier_3_big.gif" />
</ul>

<h4>Logo</h4>
<ul>
<li>Seymour Papert, <em><a href="https://youtu.be/bOf4EMN6-XA?list=PLlUr-fJyB7_jbEOS0sgQ9HutBN3LUJLa7">Talking Turtle</a></em>, video documentary
<li><a href="http://derrel.net/ep/logo/logo_com.htm">Logo commands</a></li>
<li><a href="https://gitlab.com/pzi-prototyping/seymour">Logo Interpreter PZI</a></li>
<li><a href="https://github.com/inexorabletash/jslogo">Another Logo Interpreter</a></li>
</ul>

<h4>HPGL</h4>
<li><a href="http://music.columbia.edu/cmc/chiplotle/manual/chapters/tutorial/shapes.html/">HPGL Manuals</a></li>

<p>Some HPGL Command </p>
<p class="commandes">
  IN →initialize, start a plotting job
  IP → set the initial point (origin), in this case the default 0,0
  SC0,40,0,40  → allows scaling in millimeters since 1 mm = 40 plotter units. Each   user-unit is 1 millimeter, in both X and Y directions
  SP1 → select pen 1
  PU0,0 → lift Pen Up and move to starting point for next action
  PD100,0,100,100,0,100,0,0 →put Pen Down and move to the following locations (draw a box around the page)
  PU50,50 →Pen  Up and move to X,Y coordinates 50,50 (in this case mm, after the SC  command)
  CI25 → draw a circle with radius 25 (mm)
  SS → select the standard  font
  DT*,1 →set the text delimiter to the asterisk, and do not print them  (the 1, meaning "true")
  PU20,80 → lift the pen and move to 20,80
  LBHello  World* → draw a label
  LTlinetype,length → set line type and its repetition  length
  CSxx → set character set (e.g. 33 is German)
  DIx,y → set direction of  text given as the catheti
  SIww,hh →set character width and height
</p>

<h4>Metafont</h4>

<h4>Hektor</h4>
<img src="http://etat.augmenter-partager.ensad.fr/content/01-home/03-jurg_lehni/10-script.png" />

<h4>INkML</h4>
<li><a href="https://www.w3.org/TR/InkML/ ">InkML</a></li>
<img src="https://www.w3.org/TR/InkML/hello.png" />

<h4>GML</h4>
<li><a href="http://www.graffitimarkuplanguage.com/g-m-l-spec/">Graffiti Markup Language - GML</a></li>


<h3 id="resources">Mediagraphy, resources </h3>

<h4>Read</h4>
<ul>
ludi's avatar
merging  
ludi committed
472
<li><a href="http://drawingcurved.osp.kitchen/"> Drawing Curved</a></li>
ludi's avatar
ludi committed
473 474 475 476 477 478 479 480 481 482 483 484 485 486 487
<li>Fernand Baudin, <em>L’écriture au tableau noir</em>, Retz, 1984</li>
<li><a href="http://www.gutenberg.org/files/25290/25290-h/25290-h.htm">Walter Crane, <em>Line and Form</em>, 1900</a></li>
<li>Tim Ingold, <em>Une Brève histoire des lignes</em>, Zones Sensibles, 2011</li>
<li>Vilém Flusser, <em><a href="http://reader.lgru.net/texts/le-geste-decrire/">Le geste d’écrire</a></em>, in Flusser Studies, n°8, Mai 2009</li>
<li>Donald Knuth, <em>The Concept of a Meta-Font</em>, in Visible Language, issue 16.1, January 1982; traduction <em><a href="http://www.persee.fr/web/revues/home/prescript/article/colan_0336-1500_1983_num_55_1_1549">Le concept de métafonte</a></em>, in Communication et langages, n°55, 1983, pp. 40–53</li>
<li>Donald Knuth, <em>Lessons learned from MetaFont</em>, in Visible Language, issue 19.1, December 1985</li>
<li>Gerrit Noordzij, <em>The Stroke</em> — theory of writing, Hyphen Press, 2006</li>
<li>Femke Snelting, <em><a href="http://snelting.domainepublic.net/texts/pressure.txt">Scenes of Pressures and relief</a></em>, 2009</li>
<li>Seymour Papert, <em><a href="https://youtu.be/bOf4EMN6-XA?list=PLlUr-fJyB7_jbEOS0sgQ9HutBN3LUJLa7">Talking Turtle</a></em>, documentaire vidéo</li>
<li>François Chastanet, <em><a href="http://vimeo.com/album/1877116">Dishu: Ground Calligraphy in China</a></em></li>
<!-- <li>Typographic vocabulary relating to body(http://www.zigzaganimal.be/elements/zigzag_anatomie-typographique.pdf )</li> -->
<li><em><a href="http://www.zigzaganimal.be/elements/just_shaping_scan.pdf">Of the Just Shaping of Letters</a>, Albrecht Dürer</em>, traduction anglaise à partir de la version latine de Underweysung der Messung mit dem Zirckel und Richtscheyt, livre III</li>
</ul>


ludi's avatar
merging  
ludi committed
488
<h4 id="research">Search</h4>
ludi's avatar
ludi committed
489 490 491 492
<ul>
<li><a href="http://possiblebodies.constantvzw.org/inventory/">Possible bodies</a></li>
</ul>

ludi's avatar
merging  
ludi committed
493
<h4 id="dance-draw">Dance, draw</h4>
ludi's avatar
ludi committed
494 495 496 497 498 499
<ul>
<li><a href="http://www.rosas.be/fr/productions/355-drumming">Drumming</a>, Anne Teresa De Keersmaeker / Rosas & Ictus</li>
<li><a href="https://www.youtube.com/watch?v=U7DQVW6qRq8">Trisha Brown</a> Drawing/Performance</li>
<li><a href="https://www.youtube.com/watch?v=2UeuL5BUgBM">Penwald: 8: 12 by 12 on knees</a>, Tony Orrico</li>
</ul>

ludi's avatar
merging  
ludi committed
500
<h4 id="write">Write</h4>
ludi's avatar
ludi committed
501 502 503 504 505
<ul>
<li><a href="https://www.youtube.com/watch?v=6UK6_cp5Q6I">The Powers of Katsu</a></li>
<li><a href="https://www.youtube.com/watch?v=cY6vfJAxtH8#!">L.A.S.E.R. Tag </a>from Graffiti Research Lab</li>
</ul>

ludi's avatar
merging  
ludi committed
506
<h4 id="measure">Measure</h4>
ludi's avatar
ludi committed
507 508 509 510 511 512 513 514 515 516 517 518 519 520
<ul>
<li><p>Stanley Brouwn.</p>
  <p>In 1960, Stanley Brouwn started <em>This Way Brouwn</em> serie, sketches of itinerary sketched by passers-by to whom he asks his way and where he then imposes his stamp.</p></li>
<img src="https://walker-col.imgix.net/wac_7776.tif?fm=jpg&w=1440&h=1050&fit=max" />

<li><p>Esther Ferrer, <em><a href="https://www.youtube.com/watch?v=S6KflUAhQXI">Le chemin se fait en marchant</a></em></li>
</ul>

</section>





ludi's avatar
merging  
ludi committed
521
</article>
ludi's avatar
ludi committed
522 523 524 525




526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542
<style type="text/css">
@font-face {
font-family: 'Ume';
src: url('http://osp.kitchen/api/osp.live.up-pen-down/raw/fonts/ume-stroke180.ttf');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Nell';
src: url('http://osp.kitchen/api/osp.live.up-pen-down/raw/fonts/Nell-Regular.ttf');
font-weight: normal;
font-style: normal;
}

body {
margin: 21px;
ludi's avatar
merging  
ludi committed
543
padding-right: 25em;
544 545
}

ludi's avatar
ludi committed
546 547
/** Hiding default visual culture elements */

ludi's avatar
ludi committed
548 549 550 551 552
.left-2 {
  width: 100% !important;
  margin-right: 0;
}

ludi's avatar
ludi committed
553
.right-1 {
gijs's avatar
gijs committed
554
display: none;
ludi's avatar
ludi committed
555 556 557
}

/** Page styles */
558

ludi's avatar
ludi committed
559 560 561
p.clear {
  clear: both;
}
ludi's avatar
merging  
ludi committed
562

gijs's avatar
gijs committed
563
#project-detail #project-detail-readme article img, img {
564 565 566
max-width: 40%;
}

gijs's avatar
gijs committed
567
#project-detail-readme article figure, figure {
568 569 570 571 572
text-align: left !important;
color: #9900ff;
outline: none !important;
}

ludi's avatar
merging  
ludi committed
573

gijs's avatar
gijs committed
574 575
#project-detail-readme article h3, h3,
#project-detail-readme article h4, h4 {
576 577 578 579
color: #9900ff;
text-decoration: none !important;
}

ludi's avatar
merging  
ludi committed
580

gijs's avatar
gijs committed
581
#project-detail-readme article h4, h4 {
582 583 584 585 586 587
font-size: 18pt !important;
line-height: 21pt !important;
margin-top: 21pt !important;
margin-bottom: 9pt !important;
}

ludi's avatar
ludi committed
588

gijs's avatar
gijs committed
589
#project-detail #project-detail-readme article #dialogue, #dialogue {
gijs's avatar
gijs committed
590 591 592
position: fixed;
right: 2em;
top: 0;
ludi's avatar
ludi committed
593 594 595
width: 20em;
}

gijs's avatar
gijs committed
596
#project-detail #project-detail-readme article #dialogue p, #dialogue p {
597 598 599 600 601 602 603 604 605 606 607 608
line-height: 1.4em;
font-family: "Ume";
max-width: 25em;
font-size: 1em;
letter-spacing: 0.03em;
color: forestgreen;
float: right;
width: 20em;
margin-right: 5 1em;
margin-left: 1em;
}

ludi's avatar
ludi committed
609

ludi's avatar
merging  
ludi committed
610 611
#project-detail #project-detail-readme article code, code,
#project-detail #project-detail-readme article pre, pre {
612 613 614 615 616
font-family: "Ume";
font-size: 1em;
line-height: 1.4em;
letter-spacing: 0.03em;
color: navy;
ludi's avatar
merging  
ludi committed
617 618 619
}

#project-detail #project-detail-readme article code, code {
620 621
margin-right: 1em;
margin-left: 1em;
ludi's avatar
merging  
ludi committed
622
display: block;
623 624
}

ludi's avatar
merging  
ludi committed
625

gijs's avatar
gijs committed
626
#project-detail #project-detail-readme article #dialogue p .name, #dialogue p .name {
627 628 629
margin-right: 2em;
}

gijs's avatar
gijs committed
630
#project-detail #project-detail-readme article #dialogue p:nth-child(odd), #dialogue p:nth-child(odd) {
631 632 633 634
margin-left: 30px;
margin-top: 10em;
}

ludi's avatar
merging  
ludi committed
635

gijs's avatar
gijs committed
636
#project-detail #project-detail-readme article #dialogue p:nth-child(even), #dialogue p:nth-child(even) {
637 638 639
margin-right: 30px;
}

gijs's avatar
gijs committed
640
#project-detail #project-detail-readme article #dialogue p:nth-child(3n+1):nth-child(even), #dialogue p:nth-child(3n+1):nth-child(even) {
641 642 643
margin-top: 80px;
}

gijs's avatar
gijs committed
644
#project-detail #project-detail-readme article .introduction, .introduction {
ludi's avatar
ludi committed
645 646 647 648 649 650
vertical-align: top;
display: inline-block;
width: 30%;
min-width: 300px;
}

gijs's avatar
gijs committed
651
#project-detail #project-detail-readme article .introduction p, .introduction p {
652 653 654 655 656 657 658
font-family: "Nell";
color: navy;
font-size: 1.3em;
line-height: 1.3em;
vertical-align: top;
}

ludi's avatar
ludi committed
659

gijs's avatar
gijs committed
660
#project-detail #project-detail-readme article .narrative, .narrative {
661 662 663 664 665 666 667 668 669
float: left;
font-family: "Ume";
max-width: 25em;
letter-spacing: 0.03em;
font-size: 1em;
line-height: 1.4em;
color: black;
}

ludi's avatar
merging  
ludi committed
670

gijs's avatar
gijs committed
671
#project-detail #project-detail-readme article .documentation, .documentation {
672 673 674 675 676 677 678 679 680
float: left;
margin-left: 2em;
font-family: "Ume";
max-width: 25em;
letter-spacing: 0.03em;
font-size: 1em;
color: forestgreen;
}

gijs's avatar
gijs committed
681
#project-detail #project-detail-readme article .introduction:nth-child(n+2), .introduction:nth-child(n+2) {
gijs's avatar
gijs committed
682
margin-left: 3%;
ludi's avatar
ludi committed
683 684 685
}


ludi's avatar
merging  
ludi committed
686 687
#project-detail #project-detail-readme article #annexes, #annexes {
  clear: both;
ludi's avatar
ludi committed
688 689 690 691 692 693
  font-family: "Ume";
  letter-spacing: 0.03em;
  font-size: 1em;
  color: black;
}

ludi's avatar
merging  
ludi committed
694 695 696
#project-detail #project-detail-readme article #annexes a, #annexes a,
#project-detail #project-detail-readme article #annexes a.visited, #annexes a.visited,
#project-detail #project-detail-readme article #annexes figcaption, #annexes figcaption {
ludi's avatar
ludi committed
697 698 699 700
  color: navy;
  text-decoration: none;
}

ludi's avatar
merging  
ludi committed
701 702
#project-detail #project-detail-readme article .process, .process,
#project-detail #project-detail-readme article .inventory, .inventory{
ludi's avatar
ludi committed
703
/*float: left;*/
ludi's avatar
merging  
ludi committed
704 705
display: inline-block;
vertical-align: top;
ludi's avatar
ludi committed
706 707 708
max-width: 45%;
}

ludi's avatar
merging  
ludi committed
709
 #project-detail #project-detail-readme article .inventory, .inventory{
ludi's avatar
ludi committed
710 711 712 713 714
/*float: left;*/
margin-left: 2em;
}


ludi's avatar
merging  
ludi committed
715 716 717 718 719
#project-detail #project-detail-readme article .process h2, .process h2,
#project-detail #project-detail-readme article .inventory h2, .inventory h2 {
font-size: 200%;
margin-left: 1em;
line-height: 1.3em;
ludi's avatar
ludi committed
720
font-weight: normal;
ludi's avatar
merging  
ludi committed
721
color:#ff0000;
722 723
}

ludi's avatar
merging  
ludi committed
724
#project-detail #project-detail-readme article .inventory h3, .inventory h3 {
ludi's avatar
ludi committed
725
font-size: 200%;
ludi's avatar
merging  
ludi committed
726 727 728
/*text-transform: uppercase;*/
letter-spacing: 0.05em;
line-height: 1.3em;
ludi's avatar
ludi committed
729
margin-left: 1em;
ludi's avatar
merging  
ludi committed
730
color:black;
ludi's avatar
ludi committed
731 732
}

ludi's avatar
merging  
ludi committed
733
#project-detail #project-detail-readme article .process h3, .process h3 {
ludi's avatar
ludi committed
734 735 736
font-size: 200%;
/*text-transform: uppercase;*/
letter-spacing: 0.05em;
ludi's avatar
merging  
ludi committed
737 738
line-height: 1.3em;
margin-left: 1em;
ludi's avatar
ludi committed
739 740 741
color:black;
}

ludi's avatar
merging  
ludi committed
742
#project-detail #project-detail-readme article .inventory h4, .inventory h4 {
ludi's avatar
ludi committed
743
border-top: 2px solid black;
ludi's avatar
merging  
ludi committed
744 745 746
text-transform: uppercase;
font-size: 0.3em;
/*margin-left: 1em;*/
ludi's avatar
ludi committed
747
color:black;
ludi's avatar
merging  
ludi committed
748
font-size: 1em !important;
ludi's avatar
ludi committed
749

ludi's avatar
merging  
ludi committed
750
}
ludi's avatar
ludi committed
751 752


ludi's avatar
merging  
ludi committed
753 754 755 756 757 758
/*#project-detail #project-detail-readme article .process h2, .process h2,
#project-detail #project-detail-readme article .inventory h2, .inventory h2,*/
#project-detail #project-detail-readme article .process h3, .process h3,
#project-detail #project-detail-readme article .inventory h3, .inventory h3,
#project-detail #project-detail-readme article .process h4, .process h4,
#project-detail #project-detail-readme article .inventory h4, .inventory h4 {
ludi's avatar
ludi committed
759 760 761 762 763
font-family: "Ume";
font-weight: normal;
color: black;
}

ludi's avatar
merging  
ludi committed
764
#project-detail #project-detail-readme article #annexes img, #annexes img{
ludi's avatar
ludi committed
765 766 767
  max-height: 70px;
}

ludi's avatar
ludi committed
768 769 770 771
#project-detail #project-detail-readme article .content img, .content img{
  width: 25em;
}

ludi's avatar
ludi committed
772

gijs's avatar
gijs committed
773
#project-detail #project-detail-readme article .panel, .panel {
774 775 776
margin-top: 10em;
position: relative;
padding: 0px 9px 0px 9px;
ludi's avatar
merging  
ludi committed
777
clear: both;
778 779
}

gijs's avatar
gijs committed
780
#project-detail #project-detail-readme article .panel .content, .panel .content {
781 782 783 784 785 786
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
min-height: 50vh;
}

gijs's avatar
gijs committed
787
#project-detail #project-detail-readme article .panel h2, .panel h2 {
788 789 790 791 792 793 794 795 796 797 798
position: sticky;
top: 1em;
font-family: ume;
/*text-transform: uppercase;*/
font-weight: normal;
color: #ff0000;
/*text-shadow: 0px 0px 3px #fff;*/
font-size: 200%;
margin-left: 1em;
}

gijs's avatar
gijs committed
799
#project-detail #project-detail-readme article iframe, iframe {
ludi's avatar
ludi committed
800 801
width: calc(90vw - 25em);
height: calc((9 / 16) * (90vw - 25em));
802 803
}

gijs's avatar
gijs committed
804 805 806
.video, .content {
display: block;
}
807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839

#one .content {
background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/1.svg");
}

#two .content {
background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/2.svg");
}

#three .content {
background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/3.svg");
}

#four .content {
background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/4.svg");
}

#five .content {
background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/5-exploded.svg");
}

#six .content {
background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/6.svg");
}

#seven .content {
background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/7.svg");
}

#eight .content {
background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/8.svg");
}
</style>
ludi's avatar
ludi committed
840
<script src="http://osp.kitchen/api/osp.live.up-pen-down/raw/player.js"></script>
841 842
<script>
function autoStartPlayer(selector) {
gijs's avatar
gijs committed
843 844 845 846 847 848
var video = document.querySelector(selector),
player = new Vimeo.Player(video),
auto = true,
disableAuto = function () { auto = false },
minVisible = (1 / 3);

849 850 851
player.on('play', disableAuto);

document.addEventListener('scroll', function () {
gijs's avatar
gijs committed
852 853 854 855
var windowHeight = window.innerHeight,
rect = video.getBoundingClientRect(),
top = rect.top,
visible = Math.min(1, ((top <= 0) ? rect.top + rect.height : windowHeight - top) / rect.height);
856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881

if (auto) {
if (visible < minVisible) {
player.getPaused().then(function (paused) {
if (!paused) {
player.off('pause');
player.pause();
player.on('play', disableAuto);
}
})
} else {
player.getPaused().then(function (paused) {
if (paused) {
player.off('play');
player.play();
player.on('pause', disableAuto);
}
})
}
}

}, true);
}

autoStartPlayer('#eight iframe');
autoStartPlayer('#two iframe');
ludi's avatar
ludi committed
882 883
autoStartPlayer('#three iframe');
autoStartPlayer('#four iframe');
884 885
autoStartPlayer('#six iframe');

gijs's avatar
gijs committed
886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929
function parallax() {
var scrollY, element = document.querySelector('#dialogue');

var draw = function draw(force) {
if (window.scrollY != scrollY || force) {
scrollY = window.scrollY;
var speed = parseFloat(element.getAttribute('data-speed')),
distance = speed * scrollY;

element.style.transform = 'translate3d(0, -' + parseInt(distance) + 'px, 0)';
}
}

var drawer = function() {
    draw();
    requestAnimationFrame(drawer);
}

drawer();

return draw;
}

function updateScrollSpeed() {
var contentHeight = document.querySelector('html').getBoundingClientRect().height,
windowHeight = window.innerHeight,
windowScrollDistance = contentHeight - windowHeight,
element = document.querySelector('#dialogue'),
elementHeight = element.getBoundingClientRect().height,
elementScrollDistance = elementHeight - windowHeight,
elementScrollSpeed = elementScrollDistance / windowScrollDistance;

element.setAttribute('data-speed', elementScrollSpeed);
}

updateScrollSpeed();

var draw = parallax();

window.addEventListener('resize', function () {
updateScrollSpeed();
draw(true);
});

930
</script>
gijs's avatar
gijs committed
931 932
</body>

ludi's avatar
ludi committed
933
</html>