pages/
Simon Browne
6 years ago
@ -0,0 +1,48 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>b-e-e-t.r-o-o-t.net to ciao.urca.tv, richfolks.club</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial=scale=1.0">
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<object id="line" data="../archive/gps_drawings/beetroot_to_ciao.svg" type="image/svg+xml"></object>
|
||||||
|
<div class="text">
|
||||||
|
<h1>Unravelling knots</h1>
|
||||||
|
<p>The map I've been making by tracking myself over GPS does not display scale, or landmarks, or street names. It doesn't show which way is north, south, east or west.</p>
|
||||||
|
<p>When zoomed out, the line appears to be curved, jagged, definitely not straight. However, when zooming in there are many straight lines, and they only bend at anchor points where each snapshot is taken. The line becomes knotted at places, representing social interactions, financial transactions, backtracking, and places where the GPS signal was obscured, or confused by bouncing off buildings.</p>
|
||||||
|
<picture>
|
||||||
|
<source media="(max-width: 1280px)" srcset="img/knot_scale_times_four_640.jpg">
|
||||||
|
<!-- image for screens below 1280px wide -->
|
||||||
|
<img src="img/knot_scale_times_four.jpg" />
|
||||||
|
<!-- fallback: used in PDF-->
|
||||||
|
</picture>
|
||||||
|
<p>In a vector program I begin to simplify the file, sliding a scale that removes anchor points and unravels the knot.</p>
|
||||||
|
<div>
|
||||||
|
<picture>
|
||||||
|
<source media="(max-width: 1280px)" srcset="img/unravelled_knot_03_640.jpg">
|
||||||
|
<!-- image for screens below 1280px wide -->
|
||||||
|
<img src="img/unravelled_knot_03.jpg" />
|
||||||
|
<!-- fallback: used in PDF-->
|
||||||
|
</picture>
|
||||||
|
<br>
|
||||||
|
<picture>
|
||||||
|
<source media="(max-width: 1280px)" srcset="img/unravelled_knot_02_640.jpg">
|
||||||
|
<!-- image for screens below 1280px wide -->
|
||||||
|
<img src="img/unravelled_knot_02.jpg" />
|
||||||
|
<!-- fallback: used in PDF-->
|
||||||
|
</picture>
|
||||||
|
<br>
|
||||||
|
<picture>
|
||||||
|
<source media="(max-width: 1280px)" srcset="img/unravelled_knot_01_640.jpg">
|
||||||
|
<!-- image for screens below 1280px wide -->
|
||||||
|
<img src="img/unravelled_knot_01.jpg" />
|
||||||
|
<!-- fallback: used in PDF-->
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 4.0 MiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 987 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 992 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 1011 KiB |
|
After Width: | Height: | Size: 135 KiB |
|
After Width: | Height: | Size: 1021 KiB |
|
After Width: | Height: | Size: 140 KiB |
|
After Width: | Height: | Size: 3.9 MiB |
|
After Width: | Height: | Size: 128 KiB |
|
After Width: | Height: | Size: 3.9 MiB |
|
After Width: | Height: | Size: 116 KiB |
|
After Width: | Height: | Size: 4.0 MiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 4.2 MiB |
|
After Width: | Height: | Size: 128 KiB |
|
After Width: | Height: | Size: 4.1 MiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 4.2 MiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 137 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 905 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 818 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 266 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 261 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 279 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 277 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 610 KiB |
|
After Width: | Height: | Size: 574 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 3.9 MiB |
|
After Width: | Height: | Size: 103 KiB |
|
After Width: | Height: | Size: 213 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 764 KiB |
|
After Width: | Height: | Size: 2.9 MiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 3.9 MiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 4.0 MiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 583 KiB |
|
After Width: | Height: | Size: 148 KiB |
|
After Width: | Height: | Size: 3.9 MiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 200 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 4.0 MiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 4.1 MiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 4.0 MiB |
|
After Width: | Height: | Size: 107 KiB |
@ -0,0 +1,48 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>please.undo.undo.it to foshan-1992.pw</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial=scale=1.0">
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="text">
|
||||||
|
<h1>The AEther</h1>
|
||||||
|
<p>In early modern physics, the AEther (or Ether) was believed to be an invisible space-filling substance or field that was a transmission medium for electromagnetic or gravitational forces.</p>
|
||||||
|
<h1>Tait's Tabulature of Knots</h1>
|
||||||
|
<p>Peter Guthrie Tait (1837-1901) was a Scottish mathematical physicist, whose investigations in knot theory contributed to the field of topology as a mathematical discipline. while conducting experiments with a machine that blew smoke-rings. Tait observed that the rings had a regular donut-like form, which he hypothesised was the result of atoms within them bonding through the Ether.</p>
|
||||||
|
<p>1867, from a note Tait scribbled on an envelope: "Can't you come on Monday the present at the performance? An elliptical hole gives the rings in a state of vibration!!!"</p>
|
||||||
|
<p>In a room, thick with smoke, Tait and William Thomson (Lord Kelvin) are conducting an experiment to test the German scientist Helmholtz's theory, that closed vortex lines in a fluid remain stable forever. Tait is using a box that emits smoke made from a pungent mixture of ammonia solution, salt and sulfuric acid. He taps the back of his makeshift vortex cannon, and thick rings waft from a hole drilled in its front. Tait describes them "like solid rings of India rubber". His theory is that each smoke ring is structured around knots in the ether, a substance that was supposed to permeate all matter.</p>
|
||||||
|
<h1>Knots</h1>
|
||||||
|
<p>A knot is an entanglement, an intentional complication in cordage.</p>
|
||||||
|
<h1>Knot Theory</h1>
|
||||||
|
<p>Knot theory is a field of mathematics that studies the topology of knots.</p>
|
||||||
|
<h1>Unknot</h1>
|
||||||
|
<p>The unknot, or <i>torus</i>, is the first type of mathematical knot listed in knot theory. Intuitively, the unknot is a closed loop of rope without a knot in it.</p>
|
||||||
|
<picture class="drawing">
|
||||||
|
<source media="(max-width: 1280px)" srcset="img/Unknot_640.jpg">
|
||||||
|
<!-- image for screens below 1280px wide -->
|
||||||
|
<img class="drawing" src="img/Unknot.jpg" /><br>
|
||||||
|
<!-- fallback: used in PDF-->
|
||||||
|
</picture>
|
||||||
|
<h1>Mathematical knots</h1>
|
||||||
|
<p>Mathematical knots, or</p>
|
||||||
|
<h1>Knotworks</h1>
|
||||||
|
<p>Knotworks are visualisations of network topologies which use mathematical knots to represent a collapsing of the distinction between node and link. Just as a knot is a complication in which the tangle can conceal parts contained (as in <a href="http://b-e-e-t.r-o-o-t.net/readings/cybernetic_guerilla_warfare.html/" target="_blank">klein worm topologies</a>), unravelling the knot reveals that it is homeomorphic to a continuous link. The link and the node are the same, unravelled.</p>
|
||||||
|
<picture class="drawing">
|
||||||
|
<source media="(max-width: 1280px)" srcset="img/Knotwork_05_640.jpg">
|
||||||
|
<!-- image for screens below 1280px wide -->
|
||||||
|
<img class="drawing" src="img/Knotwork_05.jpg" /><br>
|
||||||
|
<!-- fallback: used in PDF-->
|
||||||
|
<source media="(max-width: 1280px)" srcset="img/Knotwork_07_640.jpg">
|
||||||
|
<!-- image for screens below 1280px wide -->
|
||||||
|
<img class="drawing" src="img/Knotwork_07.jpg" />
|
||||||
|
<!-- fallback: used in PDF-->
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
<img src="../archive/gps_drawings/please_to_foshan.svg"></img>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>please.undo.undo.it to foshan-1992.pw</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial=scale=1.0">
|
||||||
|
<link rel="stylesheet" type="text/css" href="style_01.css" media="screen"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<object id="line" data="../archive/gps_drawings/please_to_foshan.svg" type="image/svg+xml"></object>
|
||||||
|
<div class="text">
|
||||||
|
<div class="text">
|
||||||
|
<h1>The AEther</h1>
|
||||||
|
<p>In physics, the AEther (or Ether) was believed to be an invisible space-filling substance or field that was a transmission medium for electromagnetic or gravitational forces.</p>
|
||||||
|
<h1>Tait's Tabulature of Knots</h1>
|
||||||
|
<p>Peter Guthrie Tait (1837-1901) was a Scottish mathematical physicist, whose investigations in knot theory contributed to the field of topology as a mathematical discipline. while conducting experiments with a machine that blew smoke-rings. Tait observed that the rings had a regular donut-like form, which he hypothesised was the result of atoms within them bonding through the Ether.</p>
|
||||||
|
<p>1867, from a note Tait scribbled on an envelope: "Can't you come on Monday the present at the performance? An elliptical hole gives the rings in a state of vibration!!!"</p>
|
||||||
|
<p>In a room, thick with smoke, Tait and William Thomson (Lord Kelvin) are conducting an experiment to test the German scientist Helmholtz's theory, that closed vortex lines in a fluid remain stable forever. Tait is using a box that emits smoke made from a pungent mixture of ammonia solution, salt and sulfuric acid. He taps the back of his makeshift vortex cannon, and thick rings waft from a hole drilled in its front. Tait describes them "like solid rings of India rubber". His theory is that each smoke ring is structured around knots in the ether, a substance that was supposed to permeate all matter.</p>
|
||||||
|
<h1>Knots</h1>
|
||||||
|
<p>A knot is an entanglement, an intentional complication in cordage.</p>
|
||||||
|
<h1>Knot Theory</h1>
|
||||||
|
<p>Knot theory is a field of mathematics that studies the topology of knots.</p>
|
||||||
|
<h1>Unknot</h1>
|
||||||
|
<p>The unknot, or <i>torus</i>, is the first type of mathematical knot listed in knot theory. Intuitively, the unknot is a closed loop of rope without a knot in it.</p>
|
||||||
|
</div>
|
||||||
|
<div class="picture">
|
||||||
|
<picture>
|
||||||
|
<source media="(max-width: 1280px)" srcset="img/Unknot_640.jpg">
|
||||||
|
<!-- image for screens below 1280px wide -->
|
||||||
|
<img src="img/Unknot.jpg" /><br>
|
||||||
|
<!-- fallback: used in PDF-->
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<h1>Mathematical knots</h1>
|
||||||
|
<p>In mathematics, a knot is the embedding of a circle</p>
|
||||||
|
<h1>Knotworks</h1>
|
||||||
|
<p>Knotworks are visualisations of network topologies which use mathematical knots to represent a collapsing of the distinction between node and link. Just as a knot is a complication in which the tangle can conceal parts contained (as in <a href="http://b-e-e-t.r-o-o-t.net/readings/cybernetic_guerilla_warfare.html/" target="_blank">klein worm topologies</a>), unravelling the knot reveals that it is homeomorphically just a continuous link. The link and the node are the same, unravelled.</p>
|
||||||
|
</div>
|
||||||
|
<div class="picture">
|
||||||
|
<picture>
|
||||||
|
<source media="(max-width: 1280px)" srcset="img/Knotwork_05_640.jpg">
|
||||||
|
<!-- image for screens below 1280px wide -->
|
||||||
|
<img src="img/Knotwork_05.jpg" /><br>
|
||||||
|
<!-- fallback: used in PDF-->
|
||||||
|
<source media="(max-width: 1280px)" srcset="img/Knotwork_07_640.jpg">
|
||||||
|
<!-- image for screens below 1280px wide -->
|
||||||
|
<img src="img/Knotwork_07.jpg" />
|
||||||
|
<!-- fallback: used in PDF-->
|
||||||
|
</picture>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,168 @@
|
|||||||
|
/*@font-face {
|
||||||
|
font-family: 'courier_newbold_italic';
|
||||||
|
src: url('courier_new_bold_italic-webfont.woff2') format('woff2'),
|
||||||
|
url('courier_new_bold_italic-webfont.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'courier_newbold';
|
||||||
|
src: url('courier_new_bold-webfont.woff2') format('woff2'),
|
||||||
|
url('courier_new_bold-webfont.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'courier_newitalic';
|
||||||
|
src: url('courier_new_italic-webfont.woff2') format('woff2'),
|
||||||
|
url('courier_new_italic-webfont.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'courier_newregular';
|
||||||
|
src: url('courier_new-webfont.woff2') format('woff2'),
|
||||||
|
url('courier_new-webfont.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
@font-face {
|
||||||
|
font-family: Courier New;
|
||||||
|
src: url(fonts/);
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
body {
|
||||||
|
font-family: 'Courier New', 'Courier', monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 120%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin: 12px 12px auto 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
/* font-family: 'Courier New';*/
|
||||||
|
font-family: 'courier_newbold' 'Courier New', monospace;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
text-decoration: underline;
|
||||||
|
line-height: 120%;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: 'Times', 'Times New Roman', serif;
|
||||||
|
font-size: 36px;
|
||||||
|
line-height: 120%;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 720px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
display: block;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawing {
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
|
|
||||||
|
#left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link {
|
||||||
|
color: black;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: blue;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#line {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ciao_line {
|
||||||
|
position: inherit;
|
||||||
|
z-index: inherit;
|
||||||
|
left: 0px;
|
||||||
|
top: 0;
|
||||||
|
height: 3000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#photo {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 200px;
|
||||||
|
/*z-index: 1;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
#description {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,168 @@
|
|||||||
|
/*@font-face {
|
||||||
|
font-family: 'courier_newbold_italic';
|
||||||
|
src: url('courier_new_bold_italic-webfont.woff2') format('woff2'),
|
||||||
|
url('courier_new_bold_italic-webfont.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'courier_newbold';
|
||||||
|
src: url('courier_new_bold-webfont.woff2') format('woff2'),
|
||||||
|
url('courier_new_bold-webfont.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'courier_newitalic';
|
||||||
|
src: url('courier_new_italic-webfont.woff2') format('woff2'),
|
||||||
|
url('courier_new_italic-webfont.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'courier_newregular';
|
||||||
|
src: url('courier_new-webfont.woff2') format('woff2'),
|
||||||
|
url('courier_new-webfont.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
@font-face {
|
||||||
|
font-family: Courier New;
|
||||||
|
src: url(fonts/);
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
body {
|
||||||
|
font-family: 'Courier New', 'Courier', monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 120%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin: 12px 12px auto 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
/* font-family: 'Courier New';*/
|
||||||
|
font-family: 'courier_newbold' 'Courier New', monospace;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
text-decoration: underline;
|
||||||
|
line-height: 120%;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: 'Times', 'Times New Roman', serif;
|
||||||
|
font-size: 36px;
|
||||||
|
line-height: 120%;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 720px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indent {
|
||||||
|
display: block;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawing {
|
||||||
|
mix-blend-mode: multiply;
|
||||||
|
}
|
||||||
|
|
||||||
|
#left {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link {
|
||||||
|
color: black;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: blue;
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#line {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ciao_line {
|
||||||
|
position: inherit;
|
||||||
|
z-index: inherit;
|
||||||
|
left: 0px;
|
||||||
|
top: 0;
|
||||||
|
height: 3000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#photo {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 200px;
|
||||||
|
/*z-index: 1;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
#description {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>wijnhaven_to_foshan</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial=scale=1.0">
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<!-- <img id="photo" src="../archive/networkdrawings/bus_wht_topology.jpg"> -->
|
||||||
|
<!-- <img id="line" src="../archive/gps_drawings/wijnhaven_to_foshan_02.svg"> -->
|
||||||
|
<img id="line" src="../archive/gps_drawings/wijnhaven_to_foshan_01.svg">
|
||||||
|
<div class="text">
|
||||||
|
<h1>Taking a line for a walk</h1>
|
||||||
|
<p>I'm making drawings by walking and tracking myself over GPS using an app on my phone. I walk door-to-door between homes containing a homeserver in our network. The app I'm using displays my path as a jagged line, alongside information about the distance, altitude, speed, pace and time elapsed. When I reach my destination I save the walk, export it as a .gpx file to my computer, and then load it into software for plotting geospatial information. In the graphic interface of this software the track points are connected with a series of lines that link them together into a route.</p>
|
||||||
|
<p>This is a visualisation of my movements, abstracted into a line for quick and easy representation. Ask someone to draw a route from A to B and they'll probably draw a similar series of lines, bending where you should make a left or right turn. The most direct route is a completely straight line (as the crow flies) but this is hardly useful to the average pedestrian. Utility here is predicated by a delicate balance between a certain level of detail, and a certain level of abstraction.</p>
|
||||||
|
<div>
|
||||||
|
<picture>
|
||||||
|
<source media="(max-width: 1280px)" srcset="img/gps_trilateration_640.jpg">
|
||||||
|
<!-- image for screens below 1280px wide -->
|
||||||
|
<img src="img/gps_trilateration.jpg" />
|
||||||
|
<!-- fallback: used in PDF-->
|
||||||
|
</picture>
|
||||||
|
<p>Somewhere above me, satellites trilaterate my position and decide where I am on the globe. They take snapshots and these are intermittently uploaded to a remote server - I don't know where exactly - which serves this data to the software on my phone.</p>
|
||||||
|
<p>As I walk from homeserver to homeserver, I'm relying on a mental mind-map of Rotterdam, one formed over the past 7 months that I've been here. If I follow my nose, I can usually end up in the general vicinity of where I'm supposed to be. Eventually I need to use an actual map to pinpoint my targeted destination, but for the most part I enjoy the increasingly rare occurence of being lost for a moment.</p>
|
||||||
|
<p>If I walk enough routes, this will eventually form a map of Rotterdam, though one reduced down to just simple lines against a blank background. These represent areas that are accessible on foot, most likely the streets and footpaths.</p>
|
||||||
|
<p>The line here meanders slightly, perhaps this is where I crossed a road? I'm still in the habit of walking on the left side of the road, following the direction that traffic moves in Australia. I notice that oncoming pedestrians can't always tell which way I'm going to pass them on the pavement; even on foot we still follow the dominant flow of traffic.</p>
|
||||||
|
<p>If you know Rotterdam, perhaps you can identify what the straightest part of this path represents: the Erasmusbrug. It's easy to guess why the line is so straight, the bridge is a high traffic area, and it's not so easy to wander off the path here, or to cross the lanes of traffic going over it. There are also not many other ways to cross the Maas River. It could be crossed by boat, or there is also the subterranean Maastunnel further up the river. Another option that doesn't come to mind so easily is to swim. But any which way one crosses the river, the line represented by GPS tracking software would reveal itself as straight lines between the snapshots taken as the scale increased. On this day the bridge was raised; trams stopped mid-way, and their drivers stood outside, smoking in a huddle. Impatient joggers ran on the spot, cyclists stood astride their bikes, some of the rest of us shifted from foot to foot while we waited for the bridge to lower again.</p>
|
||||||
|
<div><img src="img/erasmusbrug_smoking.jpg"></div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||