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
253 lines
6.7 KiB
1 year ago
|
<!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>
|