Commit 9006a573 authored by ludi's avatar ludi

annexes styles

parent 15cb2ec5
......@@ -330,6 +330,186 @@ Donald Knuth, "Mathematical typography", p. 355, in the Bulletin of the American
</section>
</article>
<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" />
<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" />
<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>
<p>For this 2 day workshop OSP invited artist / dancer / choreographer Adva Zakai to reinterpret a workshop originially organised at xxxx Valence. 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>
<h3 id="metahoguet-2016">2016 - Workshop Metahoguet at La Maison du Livre in the frame of the Saison numériques.</h3>
<figure>
<img src="https://cloud.osp.kitchen/s/ZNGNY9mJ0RoxKrd/download" />
<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>
<p>Hosted by [La Maison du Livre a digital](http://www.lamaisondulivre.be/) 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>
<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="http://drawingcurved.osp.kitchen/"> Drawing Curved</a></li>
<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>
<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>
<h3 id="research">Search</h3>
<ul>
<li><a href="http://possiblebodies.constantvzw.org/inventory/">Possible bodies</a></li>
</ul>
<h3 id="dance-draw">Dance, draw</h3>
<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>
<h3 id="write">Write</h3>
<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>
<h3 id="measure">Measure</h3>
<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>
</article>black
<style type="text/css">
@font-face {
font-family: 'Ume';
......@@ -351,29 +531,34 @@ margin: 21px;
/** Hiding default visual culture elements */
.left-2 {
width: 100% !important;
margin-right: 0;
}
.right-1 {
display: none;
}
/** Page styles */
#project-detail #project-detail-readme article img {
/* #project-detail #project-detail-readme */ article img {
max-width: 40%;
}
#project-detail-readme article figure {
/* #project-detail-readme */ article figure {
text-align: left !important;
color: #9900ff;
outline: none !important;
}
#project-detail-readme article h3,
#project-detail-readme article h4 {
/* #project-detail-readme */ article h3,
/* #project-detail-readme */ article h4 {
color: #9900ff;
text-decoration: none !important;
}
#project-detail-readme article h4 {
/* #project-detail-readme */ article h4 {
font-size: 18pt !important;
line-height: 21pt !important;
margin-top: 21pt !important;
......@@ -381,7 +566,13 @@ margin-bottom: 9pt !important;
}
#project-detail #project-detail-readme article #dialogue p {
/* #project-detail #project-detail-readme article */ #dialogue {
float: right;
width: 20em;
}
/* #project-detail #project-detail-readme article */ #dialogue p {
line-height: 1.4em;
font-family: "Ume";
max-width: 25em;
......@@ -395,7 +586,7 @@ margin-left: 1em;
}
#project-detail #project-detail-readme article code {
/* #project-detail #project-detail-readme */ article code {
font-family: "Ume";
font-size: 1em;
line-height: 1.4em;
......@@ -405,31 +596,31 @@ margin-right: 1em;
margin-left: 1em;
}
#project-detail #project-detail-readme article #dialogue p .name {
/* #project-detail /* #project-detail-readme */ article #dialogue p .name {
margin-right: 2em;
}
#project-detail #project-detail-readme article #dialogue p:nth-child(odd) {
/* #project-detail #project-detail-readme */ article #dialogue p:nth-child(odd) {
margin-left: 30px;
margin-top: 10em;
}
#project-detail #project-detail-readme article #dialogue p:nth-child(even) {
/* #project-detail #project-detail-readme */ article #dialogue p:nth-child(even) {
margin-right: 30px;
}
#project-detail #project-detail-readme article #dialogue p:nth-child(3n+1):nth-child(even) {
/* #project-detail #project-detail-readme */ article #dialogue p:nth-child(3n+1):nth-child(even) {
margin-top: 80px;
}
#project-detail #project-detail-readme article .introduction {
/* #project-detail #project-detail-readme article */ .introduction {
vertical-align: top;
display: inline-block;
width: 30%;
min-width: 300px;
}
#project-detail #project-detail-readme article .introduction p {
/* #project-detail #project-detail-readme article */ .introduction p {
font-family: "Nell";
color: navy;
font-size: 1.3em;
......@@ -438,7 +629,7 @@ vertical-align: top;
}
#project-detail #project-detail-readme article .narrative {
/* #project-detail #project-detail-readme */ article .narrative {
float: left;
font-family: "Ume";
max-width: 25em;
......@@ -448,7 +639,7 @@ line-height: 1.4em;
color: black;
}
#project-detail #project-detail-readme article .documentation {
/* #project-detail #project-detail-readme article */ .documentation {
float: left;
margin-left: 2em;
font-family: "Ume";
......@@ -458,11 +649,75 @@ font-size: 1em;
color: forestgreen;
}
#project-detail #project-detail-readme article .introduction:nth-child(n+2) {
margin-left: 3%;#project-detail #project-detail-readme pp
/* #project-detail #project-detail-readme article */ .introduction:nth-child(n+2) {
margin-left: 3%;/* #project-detail /* #project-detail-readme */ */ pp
}
#annexes {
font-family: "Ume";
letter-spacing: 0.03em;
font-size: 1em;
color: black;
}
#annexes a, #annexes a.visited, #annexes figcaption {
color: navy;
text-decoration: none;
}
/* #project-detail #project-detail-readme article */ .process, .inventory{
/*float: left;*/
float: left;
max-width: 45%;
}
/* #project-detail #project-detail-readme article */ .inventory{
/*float: left;*/
margin-left: 2em;
}
/* #project-detail #project-detail-readme article */ .process h2, .inventory h2, .inventory h3{
font-family: "Ume";
font-weight: normal;
}
#project-detail #project-detail-readme article .panel {
/* #project-detail #project-detail-readme article */ .process h2, .inventory h2 {
font-size: 200%;
margin-left: 1em;
color:#ff0000;
}
/* #project-detail #project-detail-readme article */ .inventory h3 {
font-size: 200%;
/*text-transform: uppercase;*/
letter-spacing: 0.05em;
margin-left: 1.5em;
color:black;
}
/* #project-detail #project-detail-readme article */ .inventory h4 {
border-top: 2px solid black;
font-size: 1em;
color:black;
}
.process h3, .inventory h3, .inventory h4 {
font-family: "Ume";
font-weight: normal;
color: black;
}
#annexes img {
max-height: 70px;
}
/* #project-detail #project-detail-readme article */ .panel {
margin-top: 10em;
position: relative;
width: calc(90% - 20em);
......@@ -470,14 +725,14 @@ float: left;
padding: 0px 9px 0px 9px;
}
#project-detail #project-detail-readme article .panel .content {
/* #project-detail #project-detail-readme article */ .panel .content {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
min-height: 50vh;
}
#project-detail #project-detail-readme article .panel h2 {
/* #project-detail #project-detail-readme article */ .panel h2 {
position: sticky;
top: 1em;
font-family: ume;
......@@ -489,9 +744,9 @@ font-size: 200%;
margin-left: 1em;
}
#project-detail #project-detail-readme article iframe {
width: calc(90vw - 20em);
height: calc((9 / 16) * (90vw - 20em));
/* #project-detail #project-detail-readme */ article iframe {
width: calc(90vw - 25em);
height: calc((9 / 16) * (90vw - 25em));
}
......@@ -532,7 +787,7 @@ background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/8.
<script>
function autoStartPlayer(selector) {
var video = document.querySelector(selector);
var player = new Vimeo.Player(video);
var player = new Vimeo.Player(video);calc((9 / 16) * (90vw - 30em))
var windowHeight = window.innerHeight;
var auto = true;
var disableAuto = function () { auto = false };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment