Skip to content

L
live.up-pen-down
Commit 9714823f authored by ludi's avatar ludi
Browse files
Options

merging

parents 9006a573 a46ff88a
Hide whitespace changes
Inline Side-by-side
Showing with 150 additions and 71 deletions
README.html
View file @ 9714823f
......@@ -151,7 +151,7 @@ of a place to be, than a well studied research question.
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?
</p>en fait
</p>
<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
......@@ -175,13 +175,13 @@ is still coming in. Equiped with different coloured technical tapes, each one co
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>
<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>
<a href="https://www.youtube.com/watch?v=S6KflUAhQXI">Le chemin se fait en marchant</a>
</li>
</ol>
......@@ -210,20 +210,20 @@ of the body.</p>
<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">
<code data-lang="hpgl"><pre>
IN; SP1; PA1,1; PD3,5; PU;
</code>
<code data-lang="logo">
</pre></code>
<code data-lang="logo"><pre>
RT26.57;FD4.47;
</code>
<code data-lang="mp">
</pre></code>
<code data-lang="mp"><pre>
beginfig(1);
z1=(1,1);
z2=(3,5);
draw z1--z2;
endfig;
end
</code>
</pre></code>
</section>
<section class="video">
<iframe src="https://player.vimeo.com/video/255353045?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen
......@@ -352,7 +352,7 @@ http://ospublish.constantvzw.org/images/var/albums/Up-pen-down--01/2015-10-25%20
<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/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" />
......@@ -361,7 +361,7 @@ http://ospublish.constantvzw.org/images/var/albums/Up-pen-down--01/2015-10-25%20
<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>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>
<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>
......@@ -403,7 +403,6 @@ http://ospublish.constantvzw.org/images/var/albums/Up-pen-down--01/2015-10-25%20
<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" />
......@@ -457,6 +456,7 @@ http://ospublish.constantvzw.org/images/var/albums/Up-pen-down--01/2015-10-25%20
<h4>Read</h4>
<ul>
<li><a href="http://drawingcurved.osp.kitchen/"> Drawing Curved</a></li>
<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>
......@@ -472,25 +472,25 @@ http://ospublish.constantvzw.org/images/var/albums/Up-pen-down--01/2015-10-25%20
</ul>
<h3 id="research">Search</h3>
<h4 id="research">Search</h4>
<ul>
<li><a href="http://possiblebodies.constantvzw.org/inventory/">Possible bodies</a></li>
</ul>
<h3 id="dance-draw">Dance, draw</h3>
<h4 id="dance-draw">Dance, draw</h4>
<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>
<h4 id="write">Write</h4>
<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>
<h4 id="measure">Measure</h4>
<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>
......@@ -505,7 +505,7 @@ http://ospublish.constantvzw.org/images/var/albums/Up-pen-down--01/2015-10-25%20
</article>black
</article>
......@@ -527,6 +527,7 @@ font-style: normal;
body {
margin: 21px;
padding-right: 25em;
}
/** Hiding default visual culture elements */
......@@ -537,28 +538,31 @@ margin: 21px;
}
.right-1 {
display: none;
display: none;
}
/** Page styles */
/* #project-detail #project-detail-readme */ article img {
#project-detail #project-detail-readme article img, img {
max-width: 40%;
}
/* #project-detail-readme */ article figure {
#project-detail-readme article figure, 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, h3,
#project-detail-readme article h4, h4 {
color: #9900ff;
text-decoration: none !important;
}
/* #project-detail-readme */ article h4 {
#project-detail-readme article h4, h4 {
font-size: 18pt !important;
line-height: 21pt !important;
margin-top: 21pt !important;
......@@ -566,13 +570,14 @@ margin-bottom: 9pt !important;
}
/* #project-detail #project-detail-readme article */ #dialogue {
float: right;
#project-detail #project-detail-readme article #dialogue, #dialogue {
position: fixed;
right: 2em;
top: 0;
width: 20em;
}
/* #project-detail #project-detail-readme article */ #dialogue p {
#project-detail #project-detail-readme article #dialogue p, #dialogue p {
line-height: 1.4em;
font-family: "Ume";
max-width: 25em;
......@@ -586,41 +591,48 @@ margin-left: 1em;
}
/* #project-detail #project-detail-readme */ article code {
#project-detail #project-detail-readme article code, code,
#project-detail #project-detail-readme article pre, pre {
font-family: "Ume";
font-size: 1em;
line-height: 1.4em;
letter-spacing: 0.03em;
color: navy;
}
#project-detail #project-detail-readme article code, code {
margin-right: 1em;
margin-left: 1em;
display: block;
}
/* #project-detail /* #project-detail-readme */ article #dialogue p .name {
#project-detail #project-detail-readme article #dialogue p .name, #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), #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), #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), #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, .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, .introduction p {
font-family: "Nell";
color: navy;
font-size: 1.3em;
......@@ -629,7 +641,7 @@ vertical-align: top;
}
/* #project-detail #project-detail-readme */ article .narrative {
#project-detail #project-detail-readme article .narrative, .narrative {
float: left;
font-family: "Ume";
max-width: 25em;
......@@ -639,7 +651,8 @@ line-height: 1.4em;
color: black;
}
/* #project-detail #project-detail-readme article */ .documentation {
#project-detail #project-detail-readme article .documentation, .documentation {
float: left;
margin-left: 2em;
font-family: "Ume";
......@@ -649,90 +662,109 @@ 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), .introduction:nth-child(n+2) {
margin-left: 3%;
}
#annexes {
#project-detail #project-detail-readme article #annexes, #annexes {
clear: both;
font-family: "Ume";
letter-spacing: 0.03em;
font-size: 1em;
color: black;
}
#annexes a, #annexes a.visited, #annexes figcaption {
#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 {
color: navy;
text-decoration: none;
}
/* #project-detail #project-detail-readme article */ .process, .inventory{
#project-detail #project-detail-readme article .process, .process,
#project-detail #project-detail-readme article .inventory, .inventory{
/*float: left;*/
float: left;
display: inline-block;
vertical-align: top;
max-width: 45%;
}
/* #project-detail #project-detail-readme article */ .inventory{
#project-detail #project-detail-readme article .inventory, .inventory{
/*float: left;*/
margin-left: 2em;
}
/* #project-detail #project-detail-readme article */ .process h2, .inventory h2, .inventory h3{
font-family: "Ume";
#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;
font-weight: normal;
color:#ff0000;
}
/* #project-detail #project-detail-readme article */ .process h2, .inventory h2 {
#project-detail #project-detail-readme article .inventory h3, .inventory h3 {
font-size: 200%;
/*text-transform: uppercase;*/
letter-spacing: 0.05em;
line-height: 1.3em;
margin-left: 1em;
color:#ff0000;
color:black;
}
/* #project-detail #project-detail-readme article */ .inventory h3 {
#project-detail #project-detail-readme article .process h3, .process h3 {
font-size: 200%;
/*text-transform: uppercase;*/
letter-spacing: 0.05em;
margin-left: 1.5em;
line-height: 1.3em;
margin-left: 1em;
color:black;
}
/* #project-detail #project-detail-readme article */ .inventory h4 {
#project-detail #project-detail-readme article .inventory h4, .inventory h4 {
border-top: 2px solid black;
font-size: 1em;
text-transform: uppercase;
font-size: 0.3em;
/*margin-left: 1em;*/
color:black;
}
font-size: 1em !important;
}
.process h3, .inventory h3, .inventory h4 {
/*#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 {
font-family: "Ume";
font-weight: normal;
color: black;
}
#annexes img {
#project-detail #project-detail-readme article #annexes img, #annexes img{
max-height: 70px;
}
/* #project-detail #project-detail-readme article */ .panel {
#project-detail #project-detail-readme article .panel, .panel {
margin-top: 10em;
position: relative;
width: calc(90% - 20em);
float: left;
padding: 0px 9px 0px 9px;
clear: both;
}
/* #project-detail #project-detail-readme article */ .panel .content {
#project-detail #project-detail-readme article .panel .content, .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, .panel h2 {
position: sticky;
top: 1em;
font-family: ume;
......@@ -744,12 +776,14 @@ font-size: 200%;
margin-left: 1em;
}
/* #project-detail #project-detail-readme */ article iframe {
#project-detail #project-detail-readme article iframe, iframe {
width: calc(90vw - 25em);
height: calc((9 / 16) * (90vw - 25em));
}
.video, .content {
display: block;
}
#one .content {
background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/1.svg");
......@@ -786,18 +820,19 @@ background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/8.
<script src="http://osp.kitchen/api/osp.live.up-pen-down/raw/player.js"></script>
<script>
function autoStartPlayer(selector) {
var video = document.querySelector(selector);
var player = new Vimeo.Player(video);calc((9 / 16) * (90vw - 30em))
var windowHeight = window.innerHeight;
var auto = true;
var disableAuto = function () { auto = false };
var minVisible = (1 / 3);
var video = document.querySelector(selector),
player = new Vimeo.Player(video),
auto = true,
disableAuto = function () { auto = false },
minVisible = (1 / 3);
player.on('play', disableAuto);
document.addEventListener('scroll', function () {
var rect = video.getBoundingClientRect();
var top = rect.top;
var visible = Math.min(1, ((top <= 0) ? rect.top + rect.height : windowHeight - top) / rect.height);
var windowHeight = window.innerHeight,
rect = video.getBoundingClientRect(),
top = rect.top,
visible = Math.min(1, ((top <= 0) ? rect.top + rect.height : windowHeight - top) / rect.height);
if (auto) {
if (visible < minVisible) {
......@@ -826,6 +861,50 @@ autoStartPlayer('#eight iframe');
autoStartPlayer('#two iframe');
autoStartPlayer('#six iframe');
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);
});
</script>
</body>
......
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