Upload files to ''

1 year ago · 50ea35b4ff
4 changed files with 253 additions and 0 deletions
--- a/CirrusCumulus.woff
+++ b/CirrusCumulus.woff
--- a/Movement-IndirectThin.woff2
+++ b/Movement-IndirectThin.woff2
--- a/everyday-choreographies.html
+++ b/everyday-choreographies.html
@ -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>
--- a/mouth-bass.mp3
+++ b/mouth-bass.mp3