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