Upload files to ''
This commit is contained in:
parent
f0970bdf50
commit
50ea35b4ff
BIN
CirrusCumulus.woff
Normal file
BIN
CirrusCumulus.woff
Normal file
Binary file not shown.
BIN
Movement-IndirectThin.woff2
Normal file
BIN
Movement-IndirectThin.woff2
Normal file
Binary file not shown.
253
everyday-choreographies.html
Normal file
253
everyday-choreographies.html
Normal file
@ -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>
|
||||
BIN
mouth-bass.mp3
Normal file
BIN
mouth-bass.mp3
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user