4 changed files with 253 additions and 0 deletions
Binary file not shown.
Binary file not shown.
@ -0,0 +1,253 @@ |
|||||
|
<!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> |
||||
Binary file not shown.
Loading…
Reference in new issue