dancing panels

chantier-readme.html

@@ -89,7 +89,7 @@
         </p>
         <p>
             <span class="name">Pierre</span> We can say that there are two matters within the digital, the molecular, which we recognise as
-            bitmap and know very well, and the undulatory – the vectors.*I want to not only utilise vectors, but also to
+            bitmap and know very we Page 4 deals with curves and the simplest application of them : circles. Threell, and the undulatory – 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, go beyond the way things look and into the way they operate and influence our own operations.
         </p>
@@ -98,7 +98,7 @@
             relations with vectors, we can trace back histories of writing that depended on the body and its movement.
         </p>
         <p>
-            <span class="name">Ludi</span> The body has its own intelligence. When I put, for example, the tension of the curve into this awkward
+            <span class="name">Ludi Page 4 deals with curves and the simplest application of them : circles. Three</span> 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>
@@ -169,7 +169,6 @@
 
     <article class="panel" id="one">
         <h2 id="dot">.</h2>
-        <img src="http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/1.svg" />
         <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>
@@ -178,8 +177,7 @@
     </article>
     <article class="panel" id="two">
         <h2 id="line">Line</h2>
-        <img src="http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/2.svg" />
-        <p class="narrative">Page 2 draws a same line following the 3 langages in action : hpgl, Logo and Metapost. Alternately the body is the
+        <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;
@@ -198,29 +196,27 @@ end
     </article>
     <article class="panel" id="three">
         <h2 id="corner">Corner</h2>
-        <img src="http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/3.svg" />
         <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'est une méthode pédagogique et un langage de programmation qui la met en
+            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>
+        </p>2
     </article>
     <article class="panel" id="four">
         <h2 id="circle">Circle</h2>
-        <img src="http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/4.svg" />
         <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 Graphicclass="narrative"s Language, is a drawing and programming language to command pen plotters.
+            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
@@ -228,9 +224,8 @@ end
             size of the paper or to pick a new one.
         </p>
     </article>
-    <article class="panel" id="three">
+    <article class="panel" id="five">
         <h2 id="ductus">Ductus</h2>
-        <img src="http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/5-exploded.svg" />
         <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>
@@ -239,16 +234,12 @@ end
     </article>
     <article class="panel" id="six">
         <h2 id="curve">Curve</h2>
-        <img src="http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/6.svg" />
         <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.element {
+            out.</p>
 
-    margin: 21px;
-
-}
         <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
@@ -259,7 +250,6 @@ end
     </article>
     <article class="panel" id="seven">
         <h2 id="improvisation">Improvisations</h2>
-        <img src="http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/7.svg" />
         <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).
@@ -286,7 +276,6 @@ end
     </article>
     <article class="panel" id="eight">
         <h2 id="grid">Grid</h2>
-        <img src="http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/8.svg" />
 
         <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 cthe hpgl plot of an angle appears
@@ -296,7 +285,8 @@ end
         <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>
+            8, the grid is drawn.
+          </p>
     </article>
 
     <style type="text/css">
@@ -319,6 +309,7 @@ end
         margin: 21px;
       }
 
+
         #project-detail #project-detail-readme article img {
             max-width: 40%;
         }
@@ -334,10 +325,7 @@ end
           color: #9900ff;
           text-decoration: none !important;
         }
-          font-family: "Ume";
-          max-width: 25em;
-          letter-spacing: 0.03em;
-          font-size: 1em;
+
         #project-detail-readme article h4 {
           font-size: 18pt !important;
           line-height: 21pt !important;
@@ -348,15 +336,16 @@ end
         #dialogue {
           font-family: "Ume";
           font-size: 1em;
-          line-height: 1.4e          font-family: "Ume";
+          line-height: 1.4em;
+          font-family: "Ume";
           max-width: 25em;
           letter-spacing: 0.03em;
-          font-size: 1em;m;
+          font-size: 1em;
           letter-spacing: 0.03em;
-          color:forestgreen ;
+          color:forestgreen;
           float: right;
           width: 20em;
-          margin-right: 1em;
+          margin-right:5 1em;
           margin-left: 1em;
         }
 
@@ -371,8 +360,17 @@ end
         }
 
         #dialogue .name {
-          margin-right: 1em;
-          margin-left: 1em;
+          margin-right: 2em;
+        }
+
+        #dialogue p:nth-child(odd) {
+          margin-left: 30px;
+        }
+        #dialogue p:nth-child(even) {
+          margin-right: 30px;
+        }
+        #dialogue p:nth-child(3n+1):nth-child(even) {
+          margin-top: 80px;
         }
 
         .introduction {
@@ -389,7 +387,8 @@ end
         .narrative {
           font-family: "Ume";
           max-width: 25em;
-          letter-spacing: 0.03em;          font-family: "Ume";
+          letter-spacing: 0.03em;
+          font-family: "Ume";
           max-width: 25em;
           letter-spacing: 0.03em;
           font-size: 1em;
@@ -404,6 +403,8 @@ end
           letter-spacing: 0.03em;
           font-size: 1em;
           color: forestgreen;
+          position: absolute;
+          bottom: 9px;
         }
 
         .introduction:nth-child(n+2) {
@@ -417,8 +418,36 @@ end
             max-width: 600px;
             float: left;
             padding: 0px 9px 0px 9px;
+            background-size: contain;
+            background-repeat: no-repeat;
+        }
 
+
+        #one {
+          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");
+        }
+        #four {
+          background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/4.svg");
+        }
+        #five {
+          background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/5-exploded.svg");
+        }
+        #six {
+          background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/6.svg");
+        }
+        #seven {
+          background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/7.svg");
+        }
+        #eight {
+          background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/8.svg");
+        }
+
     </style>
 </body>