|
|
@ -1,167 +1,222 @@
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<html lang="en">
|
|
|
|
<style>
|
|
|
|
|
|
|
|
body {
|
|
|
|
<head>
|
|
|
|
font-family: "Courier New", monospace;
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
font-size: x-large;
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
}
|
|
|
|
<title>SI23</title>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
.wrapper {
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
width: 100vw;
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>
|
|
|
|
height: 100vh;
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
|
|
|
|
display: grid;
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/addons/p5.sound.min.js"></script>
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
<script src="https://unpkg.com/matter-js@0.14.2/build/matter.min.js"></script>
|
|
|
|
}
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
.wrapper div {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
justify-self: center;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media (min-width: 1200px) {
|
|
|
|
|
|
|
|
.wrapper {
|
|
|
|
|
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.wrapper div:first-child {
|
|
|
|
|
|
|
|
justify-self: start;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.wrapper div:last-child {
|
|
|
|
|
|
|
|
justify-self: end;
|
|
|
|
|
|
|
|
margin-top: 10%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#flyer {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#animated-header {
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
font-size: xx-large;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#filestructure ul {
|
|
|
|
|
|
|
|
display: table;
|
|
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#filestructure ul li {
|
|
|
|
|
|
|
|
padding: 5%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
|
|
<div class="sidebar">
|
|
|
|
|
|
|
|
<div class="tab" data-content="about">About</div>
|
|
|
|
|
|
|
|
<div class="tab" data-content="event">Event</div>
|
|
|
|
|
|
|
|
<div class="tab" data-content="projects">Projects</div>
|
|
|
|
|
|
|
|
<div class="projects-submenu" id="projects-submenu">
|
|
|
|
|
|
|
|
<div class="subtab" data-content="project1">How did we get here?</div>
|
|
|
|
|
|
|
|
<div class="subtab" data-content="project2">loading: feminist server...</div>
|
|
|
|
|
|
|
|
<div class="subtab" data-content="project3">The Greasy Chip</div>
|
|
|
|
|
|
|
|
<div class="subtab" data-content="project4">TL;DR</div>
|
|
|
|
|
|
|
|
<div class="subtab" data-content="project5">Aquarium</div>
|
|
|
|
|
|
|
|
<div class="subtab" data-content="project6">data centers on fire</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="tab" data-content="process">Process</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="resizer" id="resizer"></div>
|
|
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
|
|
<div id="about" class="content-tab">
|
|
|
|
|
|
|
|
<div id="matter-container" class="matter-container"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h1>About</h1>
|
|
|
|
|
|
|
|
<p>Peripheral centers and feminist servers investigate multiple approaches to the conditions of serving. It
|
|
|
|
|
|
|
|
interrupts the endless flow of data that fuels the economy, exposing the cracks and gaps of the
|
|
|
|
|
|
|
|
techno-scientific paradigm imposed on society. Where commands are executed, connections made, trust exchanged,
|
|
|
|
|
|
|
|
and resources shared.</p>
|
|
|
|
|
|
|
|
<p>This feminist data center brings to light the physical infrastructure and actual labour which enable the
|
|
|
|
|
|
|
|
processes we perform every day. In this exploration, we think through feminist approaches that reveal the
|
|
|
|
|
|
|
|
concealed layers of our on(off)line interactions. We broaden our understanding of how this tangible,
|
|
|
|
|
|
|
|
energy-intensive infrastructure truly operates behind the seemingly innocent notion of the ‘cloud’.</p>
|
|
|
|
|
|
|
|
<p>The various projects within Peripheral centers and feminist servers expose their infrastructure, emphasizing
|
|
|
|
|
|
|
|
the material conditions of their production. We advocate that the fairy tale of immateriality has real
|
|
|
|
|
|
|
|
socio-economic-environmental consequences.</p>
|
|
|
|
|
|
|
|
<img src="about.png" alt="Peripheral centers and feminist servers">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="wrapper">
|
|
|
|
<div id="event" class="content-tab">
|
|
|
|
<!-- the flyer svg -->
|
|
|
|
<h1>Event</h1>
|
|
|
|
<object id="flyer" type="image/svg+xml" data="flyer.svg" ></object>
|
|
|
|
<p>THURSDAY 28 MAR 2024<br>
|
|
|
|
|
|
|
|
19:00-21:30<br>
|
|
|
|
<div>
|
|
|
|
VARIA (Gouwstraat 3)<br></p>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="filestructure">
|
|
|
|
<img src="img/presentation.jpg" alt="presentation">
|
|
|
|
<!-- <h1 id="animated-header">BROWSE THE FILESTRUCTURE >>></h1> -->
|
|
|
|
<p>Listen to the presentation at the launch day</p>
|
|
|
|
<div id="animated-header"></div>
|
|
|
|
<audio controls>
|
|
|
|
<ul>
|
|
|
|
<source src="assets/20240328_presentation.mp3" type="audio/mp3">
|
|
|
|
<li>/Door: <a href="https://hub.xpub.nl/chopchop/~v/hdwgh/index.html">How did we get here?</a></li>
|
|
|
|
<default kind="captions" srclang="en" src="archive 12.2.vtt">
|
|
|
|
<li>/Table: <a href="https://hub.xpub.nl/chopchop/si-23-website-table/">loading: feminist server...</a></li>
|
|
|
|
Listen to the presentation at the launch day
|
|
|
|
<li>/Kitchen: <a href="https://hub.xpub.nl/chopchop/~chef/kitchen/intropage.html">The Greasy Chip</a></li>
|
|
|
|
</audio>
|
|
|
|
<li>/Shelves: <a href="https://hub.xpub.nl/chopchop/tl-dr/quilt.html">TL;DR</a></li>
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6466.JPG" alt="event picture">
|
|
|
|
<li>/Aquarium: <a href="https://hub.xpub.nl/chopchop/~zz1/Entrance/entrance.html">Aquarium</a></li>
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6464.JPG" alt="event picture">
|
|
|
|
</ul>
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6484.JPG" alt="event picture">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="projects" class="content-tab">
|
|
|
|
|
|
|
|
<h1>Projects</h1>
|
|
|
|
|
|
|
|
<p>After examining Varia's on-site structure, we decided to integrate the project's content with the actual
|
|
|
|
|
|
|
|
functional layout of the site, resulting in the following groups: <br>
|
|
|
|
|
|
|
|
door<br> table<br>shelves<br> aquarium<br>
|
|
|
|
|
|
|
|
kitchen<br></p>
|
|
|
|
|
|
|
|
<p>Floorplan of project locations in Varia for the SI23 launch</p>
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
|
|
|
src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/6/63/SI23_floorplan_varia.jpg/1200px-SI23_floorplan_varia.jpg"
|
|
|
|
|
|
|
|
alt="process picture">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="project1" class="content-tab">
|
|
|
|
|
|
|
|
<h1>How did we get here?</h1>
|
|
|
|
|
|
|
|
<p>The door is a point of access. Walking through the door, guests have a chance to see the processes that take
|
|
|
|
|
|
|
|
place here to ensure the flow of information that enables our everyday interactions on(off)line. This all
|
|
|
|
|
|
|
|
happens behind an invisible infrastructure that we want to reveal.</p>
|
|
|
|
|
|
|
|
<p>How did we get here? invites you to interact with a website that takes you on a journey through the streets
|
|
|
|
|
|
|
|
of our city, and welcomes you to our reimagined data center. Aiming for seamfulness by revealing and sharing
|
|
|
|
|
|
|
|
processes, (re)sources, and tools. </p>
|
|
|
|
|
|
|
|
<p>This data center challenges the conditions of serving, by regulating the amount of connections. Thus you need
|
|
|
|
|
|
|
|
an access token, which will be handed to you by someone who trusts you, to embark on the web journey. These
|
|
|
|
|
|
|
|
tokens are limited to ensure that the resources are not depleted.</p>
|
|
|
|
|
|
|
|
<a href="https://hub.xpub.nl/chopchop/~v/hdwgh/index.html" target="_blank" class="button">Visit the website -->
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
|
|
|
src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/d/da/Access-token-webjourney.jpg/900px-Access-token-webjourney.jpg?20240330175040"
|
|
|
|
|
|
|
|
alt="door picture">
|
|
|
|
|
|
|
|
<img src="img/IMG_6447.jpg" alt="door picture">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="project2" class="content-tab">
|
|
|
|
|
|
|
|
<h1>loading: feminist server...</h1>
|
|
|
|
|
|
|
|
<p>A card-browser game: get a card, type the command in the browser. Receive an interpretation of its function,
|
|
|
|
|
|
|
|
a connected feminist concept and instructions to execute. Serve and be served as you turn into a feminist
|
|
|
|
|
|
|
|
server yourself by playing and interacting with the cards both online or one-on-one in the space.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>Central to the project is the analogy between software and the material world. This allows for an exploration
|
|
|
|
|
|
|
|
of the interaction between online and offline environments, and making conscious how this interaction shapes
|
|
|
|
|
|
|
|
us. </p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>The performative and educational elements are the means of this exploration, as the game invites actions in
|
|
|
|
|
|
|
|
the physical space. Through self-reflective and relational qualities, it calls upon the feminist method and
|
|
|
|
|
|
|
|
literature. A reconsideration of words with a set meaning will occur while playing.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>The player(s) will get acquainted with important computational terms and commands, which enable associations
|
|
|
|
|
|
|
|
extending beyond the terminal, into the social and eventually the personal spheres.</p>
|
|
|
|
|
|
|
|
<a href="https://hub.xpub.nl/chopchop/si-23-website-table/" target="_blank" class="button">Visit the website -->
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6433.JPG" alt="loading picture">
|
|
|
|
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6435.JPG" alt="loading picture">
|
|
|
|
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6432.JPG" alt="loading picture">
|
|
|
|
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6475.JPG" alt="loading picture">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="project3" class="content-tab">
|
|
|
|
|
|
|
|
<h1>The Greasy Chip</h1>
|
|
|
|
|
|
|
|
<p>A card-browser game: get a card, type the command in the browser. Receive an interpretation of its function,
|
|
|
|
|
|
|
|
a connected feminist concept and instructions to execute. Serve and be served as you turn into a feminist
|
|
|
|
|
|
|
|
server yourself by playing and interacting with the cards both online or one-on-one in the space.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>Central to the project is the analogy between software and the material world. This allows for an exploration
|
|
|
|
|
|
|
|
of the interaction between online and offline environments, and making conscious how this interaction shapes
|
|
|
|
|
|
|
|
us. </p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>The performative and educational elements are the means of this exploration, as the game invites actions in
|
|
|
|
|
|
|
|
the physical space. Through self-reflective and relational qualities, it calls upon the feminist method and
|
|
|
|
|
|
|
|
literature. A reconsideration of words with a set meaning will occur while playing.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>The player(s) will get acquainted with important computational terms and commands, which enable associations
|
|
|
|
|
|
|
|
extending beyond the terminal, into the social and eventually the personal spheres.</p>
|
|
|
|
|
|
|
|
<a href="https://hub.xpub.nl/chopchop/~chef/kitchen/intropage.html" target="_blank" class="button">Visit the
|
|
|
|
|
|
|
|
website -->
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
|
|
|
src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/5/5f/Varkitchen-1.png/1552px-Varkitchen-1.png?20240330163329"
|
|
|
|
|
|
|
|
alt="Greasy Chip picture">
|
|
|
|
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6438.JPG" alt="Greasy Chip picture">
|
|
|
|
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6439.JPG" alt="Greasy Chip picture">
|
|
|
|
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6479.JPG" alt="Greasy Chip picture">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="project4" class="content-tab">
|
|
|
|
|
|
|
|
<h1>TL;DR</h1>
|
|
|
|
|
|
|
|
<p>In a seamless world, awareness of techno-social infrastructure surfaces only when it's not working. But when
|
|
|
|
|
|
|
|
you upload a photo, install an application, move a file, a technology serves, works, labours to execute what
|
|
|
|
|
|
|
|
you've asked of it.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>Inaccessible files track this work as data. These files are inaccessible in two ways: they're hard to
|
|
|
|
|
|
|
|
retrieve and even harder to decipher. While these hidden files contain the not so hidden infrastructures of a
|
|
|
|
|
|
|
|
server, they only manage to show a portion of it. After all, log files have a bias towards the technological
|
|
|
|
|
|
|
|
ecology, prioritizing the labour of machines. </p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>The actual infrastructure consists of much more: the people maintaining for the tech to work. A feminist data
|
|
|
|
|
|
|
|
center acknowledges and fosters the infrastructure surrounding this technology; the physical labour, the
|
|
|
|
|
|
|
|
decisions about shared spaces, the different knowledges that depend on each other for the network to exist.
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p>tl;dr researches ways to make sense of these hidden labour that goes on in a feminist server through logged
|
|
|
|
|
|
|
|
and unlogged effort.</p>
|
|
|
|
|
|
|
|
<a href="https://hub.xpub.nl/chopchop/tl-dr/quilt.html" target="_blank" class="button">Visit the website -->
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6452.JPG" alt="tl-dr picture">
|
|
|
|
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6459.JPG" alt="tl-dr picture">
|
|
|
|
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6454.JPG" alt="tl-dr picture">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="project5" class="content-tab">
|
|
|
|
|
|
|
|
<h1>Aquarium</h1>
|
|
|
|
|
|
|
|
<p>Welcome. From now on imagine yourself as a goldfish, you are a digital goldfish living in a virtual aquarium.
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<p>The Aquarium is a sci-fi concept: wherever there are servers, there exists a virtual aquarium. Within this
|
|
|
|
|
|
|
|
aquarium reside digital fish—embodiments of consciousness—observing human behavior. Each fish possesses
|
|
|
|
|
|
|
|
autonomy. As users navigate the labyrinthine activities of the servers, these digital fish reflect their
|
|
|
|
|
|
|
|
actions. The ecosystem of the aquarium extends beyond mere observation. It embodies the subtle interplay
|
|
|
|
|
|
|
|
between users and the digital infrastructure they inhabit. In this text-based game, players assume the roles
|
|
|
|
|
|
|
|
of these digital fish, each representing a unique perspective within the server ecosystem.</p>
|
|
|
|
|
|
|
|
<a href="https://hub.xpub.nl/chopchop/~zz1/aquarium/index.html" target="_blank" class="button">Visit the website
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6462.JPG" alt="Aquarium picture">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="project6" class="content-tab">
|
|
|
|
|
|
|
|
<h1>Data centers on fire</h1>
|
|
|
|
|
|
|
|
<p>Your data is burning<br>
|
|
|
|
|
|
|
|
Data centers like to autocombust<br>
|
|
|
|
|
|
|
|
Don’t put all your internet infrastructure in one basket<br>
|
|
|
|
|
|
|
|
The internet infrastructure is fragile<br>
|
|
|
|
|
|
|
|
Data center sector is shockingly bad at reporting transparently<br>
|
|
|
|
|
|
|
|
There is no black box for data centers<br>
|
|
|
|
|
|
|
|
If your data didn’t burn it will drown<br>
|
|
|
|
|
|
|
|
Data centers don’t like people! >:( things always happen when people are around<br>
|
|
|
|
|
|
|
|
People actually die during fires >:(<br></p>
|
|
|
|
|
|
|
|
<a href="https://hub.xpub.nl/chopchop/~aleevadh/" target="_blank" class="button">Visit the website -->
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6490.JPG">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="process" class="content-tab">
|
|
|
|
|
|
|
|
<h1>Process</h1>
|
|
|
|
|
|
|
|
<a href="https://pzwiki.wdka.nl/mediadesign/Quilting_infrastructures" target="_blank" class="button">Visit the
|
|
|
|
|
|
|
|
wiki -->
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<p>Chopchop's reign </p>
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
|
|
|
src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/2/21/Blackboard_network.png/1600px-Blackboard_network.png?20240120095259"
|
|
|
|
|
|
|
|
alt="process picture">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script src="script.js"></script>
|
|
|
|
|
|
|
|
<!-- <script src="sketch.js"></script>
|
|
|
|
|
|
|
|
<script src="box.js"></script>
|
|
|
|
|
|
|
|
<script src="word.js"></script> -->
|
|
|
|
</body>
|
|
|
|
</body>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// function to get a random polarity, returns 1 or -1
|
|
|
|
|
|
|
|
function get_r_polarity() {
|
|
|
|
|
|
|
|
var r = Math.floor(Math.random() * 2);;
|
|
|
|
|
|
|
|
if (r==0) return 1;
|
|
|
|
|
|
|
|
return -1;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// get the svg element in the DOM
|
|
|
|
|
|
|
|
var flyer_obj = document.getElementById("flyer");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// start animation once the svg element is loaded
|
|
|
|
|
|
|
|
flyer_obj.addEventListener("load",function(){
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// fetch the svg structure and find all elements belonging to the class 'moveable'
|
|
|
|
|
|
|
|
var svg_doc = flyer_obj.contentDocument;
|
|
|
|
|
|
|
|
var moveables = svg_doc.getElementsByClassName("moveable");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// function to move one random element of the class 'moveable'
|
|
|
|
|
|
|
|
function move_svg_el() {
|
|
|
|
|
|
|
|
// generate a random id
|
|
|
|
|
|
|
|
var r_id = Math.floor(Math.random() * moveables.length);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// generate random translations (unbounded, minimum of 10px)
|
|
|
|
|
|
|
|
var r_x = get_r_polarity() * (Math.random(50) + 10);
|
|
|
|
|
|
|
|
var r_y = get_r_polarity() * (Math.random(50) + 10);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// translate the selected element with the generated distances
|
|
|
|
|
|
|
|
var s = 'translate(' + r_x.toString() + ',' + r_y.toString() + ')';
|
|
|
|
|
|
|
|
moveables[r_id].setAttribute('transform',s);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// eveny 100ms, call the function that animates one element
|
|
|
|
|
|
|
|
var timer = setInterval(move_svg_el, 200);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// inspired by: https://codepen.io/alan8r/
|
|
|
|
|
|
|
|
function ASCIIAnimation(animArray, DOMtarget, speed, looping = true) {
|
|
|
|
|
|
|
|
var currentFrame = 0;
|
|
|
|
|
|
|
|
for(var i = 0; i < animArray.length; i++) {
|
|
|
|
|
|
|
|
animArray[i] = animArray[i].replace(/ /g," ");
|
|
|
|
|
|
|
|
animArray[i] = "<pre>" + animArray[i] + "</pre>";
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
DOMtarget.innerHTML = animArray[0];
|
|
|
|
|
|
|
|
currentFrame++;
|
|
|
|
|
|
|
|
this.animation = setInterval(function() {
|
|
|
|
|
|
|
|
DOMtarget.innerHTML = animArray[currentFrame];
|
|
|
|
|
|
|
|
currentFrame++;
|
|
|
|
|
|
|
|
if(currentFrame >= animArray.length && looping) currentFrame = 0;
|
|
|
|
|
|
|
|
if (currentFrame >= animArray.length && !looping) currentFrame = animArray.length - 1;
|
|
|
|
|
|
|
|
}, speed);
|
|
|
|
|
|
|
|
this.getCurrentFrame = function() {
|
|
|
|
|
|
|
|
return currentFrame;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ASCIIAnimation.prototype.stopAnimation = function() {
|
|
|
|
|
|
|
|
clearInterval(this.animation);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var header_anim_array = [
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [ ]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [> ]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [>> ]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [>>> ]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [ >>> ]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [ >>> ]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [ >>> ]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [ >>> ]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [ >>> ]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [ >>> ]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [ >>> ]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [ >>> ]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [ >>>]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [ >>]",
|
|
|
|
|
|
|
|
"BROWSE THE FILESTRUCTURE [ >]",
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var header_div = document.getElementById("animated-header");
|
|
|
|
|
|
|
|
var loading_anim = new ASCIIAnimation(header_anim_array, header_div, 300);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://issue.xpub.nl/23/quilt/quilt.js" data-cutFileName="false" data-cutFileName="false"></script>
|
|
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://issue.xpub.nl/23/quilt/quilt.css">
|
|
|
|
|
|
|
|
</html>
|
|
|
|
</html>
|