diff --git a/chantier-readme.html b/chantier-readme.html
index 0b70318ba3e8ac8ee93c3d07b86923cf622e164e..3db1017256dff619c5a3feaa891dc51632e44d21 100644
--- a/chantier-readme.html
+++ b/chantier-readme.html
@@ -88,16 +88,19 @@
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.
+ <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.
+ <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
@@ -165,24 +168,26 @@
</p>
<article class="panel" id="one">
- <h2 id="dot">.</h2>
- <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 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>
-
-
+ <section class="content">
+ <h2 id="dot">.</h2>
+ <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
+ 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>
+ </section>
</article>
<article class="panel" id="two">
- <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>
- <code data-lang="hpgl">
+ <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>
+ <code data-lang="hpgl">
IN; SP1; PA1,1; PD3,5; PU;
</code>
- <code data-lang="logo">
+ <code data-lang="logo">
RT26.57;FD4.47;
</code>
- <code data-lang="mp">
+ <code data-lang="mp">
beginfig(1);
z1=(1,1);
z2=(3,5);
@@ -190,128 +195,154 @@ draw z1--z2;
endfig;
end
</code>
+ </section>
</article>
<article class="panel" id="three">
- <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>2
+ <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>
</article>
<article class="panel" id="four">
- <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 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>
</article>
<article class="panel" id="five">
<h2 id="ductus">Ductus</h2>
- <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 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>
+ <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" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+ <p>
+ <a href="https://vimeo.com/255353606">page6-curve</a> from
+ <a href="https://vimeo.com/user80784832">OSP</a> on
+ <a href="https://vimeo.com">Vimeo</a>.</p>
+ </section>
</article>
- <iframe src="https://player.vimeo.com/video/255353606" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
- <p><a href="https://vimeo.com/255353606">page6-curve</a> from <a href="https://vimeo.com/user80784832">OSP</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
<article class="panel" id="seven">
- <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 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>
<article class="panel" id="eight">
<h2 id="grid">Grid</h2>
-
- <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><a href="#note1">[1]</a></sup> or measured movements,
- rolled developed for the occasion. In the background we listen to Laurie Anderson - O Superman.</p>
+ <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>
+ <a href="#note1">[1]</a>
+ </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, <a href="https://www.youtube.com/watch?v=S6KflUAhQXI">Le chemin se fait en marchant</a></li>
+ <li id="note1">Esther Ferrer,
+ <a href="https://www.youtube.com/watch?v=S6KflUAhQXI">Le chemin se fait en marchant</a>
+ </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>
-
+ <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>
</article>
<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-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;
+ 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;
- }
+ body {
+ margin: 21px;
+ }
#project-detail #project-detail-readme article img {
@@ -326,88 +357,90 @@ end
#project-detail-readme article h3,
#project-detail-readme article h4 {
- color: #9900ff;
- text-decoration: none !important;
+ color: #9900ff;
+ text-decoration: none !important;
}
#project-detail-readme article h4 {
- font-size: 18pt !important;
- line-height: 21pt !important;
- margin-top: 21pt !important;
- margin-bottom: 9pt !important;
+ font-size: 18pt !important;
+ line-height: 21pt !important;
+ margin-top: 21pt !important;
+ margin-bottom: 9pt !important;
}
#dialogue {
- font-family: "Ume";
- font-size: 1em;
- line-height: 1.4em;
- font-family: "Ume";
- max-width: 25em;
- letter-spacing: 0.03em;
- font-size: 1em;
- letter-spacing: 0.03em;
- color:forestgreen;
- float: right;
- width: 20em;
- margin-right:5 1em;
- margin-left: 1em;
+ font-family: "Ume";
+ font-size: 1em;
+ line-height: 1.4em;
+ font-family: "Ume";
+ max-width: 25em;
+ letter-spacing: 0.03em;
+ font-size: 1em;
+ letter-spacing: 0.03em;
+ color: forestgreen;
+ float: right;
+ width: 20em;
+ margin-right: 5 1em;
+ margin-left: 1em;
}
code {
- font-family: "Ume";
- font-size: 1em;
- line-height: 1.4em;
- letter-spacing: 0.03em;
- color:navy ;
- margin-right: 1em;
- margin-left: 1em;
+ font-family: "Ume";
+ font-size: 1em;
+ line-height: 1.4em;
+ letter-spacing: 0.03em;
+ color: navy;
+ margin-right: 1em;
+ margin-left: 1em;
}
#dialogue .name {
- margin-right: 2em;
+ margin-right: 2em;
}
#dialogue p:nth-child(odd) {
- margin-left: 30px;
- margin-top: 10em;
+ margin-left: 30px;
+ margin-top: 10em;
}
+
#dialogue p:nth-child(even) {
- margin-right: 30px;
+ margin-right: 30px;
}
+
#dialogue p:nth-child(3n+1):nth-child(even) {
- margin-top: 80px;
+ margin-top: 80px;
}
.introduction {
- font-family: "Nell";
- color:navy;
- font-size: 1.3em;
- line-height: 1.3em;
- vertical-align: top;
- display: inline-block;
- width: 30%;
- min-width: 300px;
+ font-family: "Nell";
+ color: navy;
+ font-size: 1.3em;
+ line-height: 1.3em;
+ vertical-align: top;
+ display: inline-block;
+ width: 30%;
+ min-width: 300px;
}
.narrative {
- font-family: "Ume";
- max-width: 25em;
- letter-spacing: 0.03em;
- font-family: "Ume";
- max-width: 25em;
- letter-spacing: 0.03em;
- font-size: 1em;
- font-size: 1em;
- line-height: 1.4em;
- color:black;
+ font-family: "Ume";
+ max-width: 25em;
+ letter-spacing: 0.03em;
+ font-family: "Ume";
+ max-width: 25em;
+ letter-spacing: 0.03em;
+ font-size: 1em;
+ font-size: 1em;
+ line-height: 1.4em;
+ color: black;
}
- .documentation{
- font-family: "Ume";
- max-width: 25em;
- letter-spacing: 0.03em;
- font-size: 1em;
- color: forestgreen;
+ .documentation {
+ font-family: "Ume";
+ max-width: 25em;
+ letter-spacing: 0.03em;
+ font-size: 1em;
+ color: forestgreen;
}
.introduction:nth-child(n+2) {
@@ -420,6 +453,9 @@ end
width: calc(90% - 20em);
float: left;
padding: 0px 9px 0px 9px;
+ }
+
+ .panel .content {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
@@ -427,44 +463,55 @@ end
}
.panel h2 {
- position: sticky;
- top: 1em;
- font-family: ume;
- text-transform: uppercase;
- font-weight: normal;
+ position: sticky;
+ top: 1em;
+ font-family: ume;
+ text-transform: uppercase;
+ font-weight: normal;
+ color: #ff0000;
+ text-shadow: 0px 0px 3px #fff;
+ font-size: 120%;
+ margin-left: 1em;
}
iframe {
- width: calc(90vw - 20em);
- height: calc((9 / 16) * (90vw - 20em));
+ width: calc(90vw - 20em);
+ height: calc((9 / 16) * (90vw - 20em));
}
- #one {
- background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/1.svg");
+ #one .content {
+ background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/1.svg");
}
- #two {
- background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/2.svg");
- }
- #three {
- background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/3.svg");
+
+ #two .content {
+ background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/2.svg");
}
- #four {
- background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/4.svg");12em
+
+ #three .content {
+ background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/3.svg");
}
- #five {
- background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/5-exploded.svg");
+
+ #four .content {
+ background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/4.svg");
}
- #six {
- background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/6.svg");
+
+ #five .content {
+ background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/5-exploded.svg");
}
- #seven {
- background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/7.svg");
+
+ #six .content {
+ background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/6.svg");
}
- #eight {
- background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/8.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>
+
</body>
-</html>
+</html>
\ No newline at end of file