‘Choreographing You’ displays a series of choreographic prompts bridging common metrics from online tracking algorithms with physical enactments.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

253 lines
6.7 KiB

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<meta name="description" content="Design and Code by Joana Chicau">
<meta name="keywords" content="design, choreography, physical, digital, web, creative coding, choreography">
<meta name="author" content="Joana Chicau">
<title>choreographing YOU</title>
<style>
@font-face {
font-family: 'CirrusCumulus', sans-serif;
src:
url('fonts/CirrusCumulus.woff') format('woff');
}
@font-face {
font-family: 'Movement-L';
src: url('fonts/Movement-IndirectThin.woff2') format('woff2');
font-weight: light;
}
:root {
--color-black: #00001a;
--color-graylight: #edecec ;
--color-graydark: #636363;
--color-blue: #4f1dff;
--color-lightpink: #e5c0ff;
--color-pink: #DA70D6D4;
--body-font-B: 'CirrusCumulus';
--body-font-L: 'Movement-L';
--title-fontsize: calc(32px + 1.5vw);
--body-fontsize: calc(14px + 6 * (100vw - 320px) / 1600);
--body-fontsize-s: calc(11px + 6 * (100vw - 320px) / 1600);
--bg-fontsize: 60vw;
}
body {
color: var(--color-bluedark);
background: var(--color-graylight);
}
div.prompts {
font-family: var(--body-font-B);
margin: 10%;
padding: 5%;
border-radius: 6rem;
background: var(--color-pink);
box-shadow: 5px 5px 5px var(--color-lightpink);
opacity: 0.9;
}
p#choreoPrompts {
font-size: var(--title-fontsize);
}
p.colophon {
font-family: var(--body-font-B);
font-size: var(--body-fontsize);
}
p.colophon a {
font-family: var(--body-font-B);
font-size: var(--body-fontsize);
color: var(--color-blue);
text-decoration: none;
}
p.colophon a:hover {
text-decoration:underline;
}
button {
font-family: var(--body-font-B);
font-size: var(--body-fontsize);
font-weight: bold;
padding: 1%;
border-radius: 6rem;
border: 1px solid var(--color-blue);
color: var(--color-blue);
background: transparent;
cursor: grab;
}
#choreoPromptsButton {
margin: 5% 5%;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
animation: blink 3s infinite alternate;
-webkit-animation: blink 3s infinite alternate;
}
@keyframes blink {
0% { box-shadow: 0.5px 0.5px 0.5px var(--color-pink) }
100% { box-shadow: 5px 5px 10px var(--color-pink); }
}
button#choreoPromptsButton:hover {
animation: none;
box-shadow: inset 5px 5px 5px var(--color-lightpink);
}
.clicks {
font-family: var(--body-font-B);
font-size: var(--bg-fontsize);
color: var(--color-lightpink);
text-justify: center;
position: absolute;
z-index: 0;
opacity: 0.35;
top: 0;
left: 0;
margin: 0% 5%;
}
#user {
display: flex;
width: 90%;
flex-direction: column ;
justify-content: flex-end;
flex-wrap: wrap-reverse;
padding: 5%;
}
#user p {
/* width: 50%;*/
font-family: var(--body-font-B);
font-size: var(--body-fontsize);
border-radius: 6rem;
}
#choreoUserButton {
width: 50%;
}
/***************** MOBILE ****************/
@media screen and (min-width:0px) and (max-width: 768px) {
}
</style>
</head>
<body>
<audio id="audio"> <source src="mouth-bass.mp3" type="audio/mpeg">
Your browser does not support the audio element. </audio>
<button id="choreoPromptsButton"> choreographing yøu = ( ) =></button>
<div class="prompts"><p id="choreoPrompts">dear User, are you ready to move?</p></div>
<p><a class="clicks">0</a></p>
<div id="user">
<p> this.performance = </p>
<p id="infoUser"></p>
</div>
<p class="colophon">concept, design and code by <a href="https://joanachicau.com/" target="_blank">Joana Chicau</a>;
code documentation <a href="https://git.vvvvvvaria.org/JoanaChicau/choreographing-you" target="_blank"> here</a>; typeface CirrusCumulus by Clara Sambot.</p>
<script>
var textarray = [
// action clicking
"Count the clicks you make today, for each click, make jump. Repeat tomorrow.",
"Shake your body every-time you encounter ads on your screen.",
"Pause for one second for each ad you see on your screen today.",
"Make a gesture. Repeat that gesture every-time you click a new link.",
"Accumulation: perform a new gesture for each new link clicked.",
"Count how many webpages you will return to tomorrow. Breathe deeply.",
"Stretch a body part of your choice every-time you click play.",
"Freeze your pose every-time you click pause. Stay there.",
"Today, untick all boxes you encounter.",
"Unclick every click.",
"Substitute 'clicking' for a different movement of your choice.",
"Trace back your click history from the last two days.",
// action scrolling
"Take a deep breath every-time you scroll over 50% of a webpage.",
"Reverse the infinite scroll.",
"From now perform any online gestures at 50% intensity.",
// action cursor movement
"Recreate your X and Y position on the screen in the room you are in.",
"Predict your next movement. Then, don't do it.",
"Slow down your cursor movement until it's almost paused.",
// general
"Stay on a webpage for as long as you stay where you are and then leave.",
"Increase the idle time in every website you visit today.",
"Substitute your average engagement time.",
"Scale down your online activity over the next hour.",
"Retrain your muscle memory."
];
var promptEl = document.querySelector("#choreoPrompts");
var buttonEl = document.querySelector("#choreoPromptsButton");
function chanceOperations () {
var rand = Math.floor(Math.random()*textarray.length);
promptEl.innerHTML= textarray[rand];
};
function choreoPrompt () {
buttonEl.addEventListener("click", function() {
chanceOperations()
/*
if (promptEl.style.display=="none"){
promptEl.style.display="inline";
}
else {
promptEl.style.display="none";
}
*/
document.querySelector("#audio").play();
})
}
choreoPrompt ()
/* CLICK */
buttonEl.onclick = count;
const clicks = document.querySelector('.clicks');
var a = 0;
function count() {
a += 1;
clicks.innerHTML = a;
}
/* USER DATA */
function show(infoUser){
var e = document.getElementById("infoUser");
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
document.querySelector("#infoUser").innerHTML = '{ date: ' + new Date() + ', </br> browser default language: ' + navigator.language + ', </br> location: ' + navigator.platform + ', </br> screen dimensions: ' + screen.width + ' x ' + screen.height + ', </br> screen orientation: ' + screen.orientation.type + ', </br> screen pixel depth: ' + screen.pixelDepth + ', </br> cookies enabled? ' + navigator.cookieEnabled + ' </br> ... };';
</script>
</body>
</html>