Upload files to ''

3 years ago · d1ef1b3e24
3 changed files with 474 additions and 0 deletions
--- a/digitalselves-scripts.js
+++ b/digitalselves-scripts.js
@ -0,0 +1,303 @@
+//-------------------------------------------------------------------------- 
+// CHOREOGRAPHIC CODE by Joana Chicau 
+//--------------------------------------------------------------------------
+
+
+// errors we live by
+
+// trial and error
+// margin of error
+// https://upload.wikimedia.org/wikipedia/commons/a/a9/Empirical_Rule.PNG
+// printing error messages;
+
+// creating a loop for changing text in all headings
+
+
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
+
+var delay="1";
+var count='0';
+var tempo="500";
+var elements = document.getElementsByTagName("a")
+
+var textarray = [
+"ヽ(´∇´)ノ (∇´ノ)　ヽ(　　　)ノ　(ヽ´∇) ヽ(´∇`)ﾉ ＼ (^_^ ) ノ",
+"(｡･･｡) 401 Unauthorized",
+" 402 Payment Required 💸 💱  (゜゜)",
+" (ﾟρﾟ; 403 Forbidden",
+" 404 Not Found ヾ(´･ ･｀｡)ノ”  ",
+" 406 Not Acceptable ⊙ ﹏ ⊙",
+" what error? ʍɥɐʇ ǝɹɹoɹ¿ what error? ʍɥɐʇ ǝɹɹoɹ¿",
+" 408 Request Timeout ☼☼¸.•*",
+"(─‿─) (─‿‿─)  (─‿─) (─‿‿─) 409 Conflict (─‿─) (─‿‿─) (─‿─) (─‿‿─)",
+"ˏ 𓏧 𓏲 𓏲 𓏲 𓋒   410 Gone  𓏲 𓏲 𓏲 𓏲 𓏧 ˎ",
+"415 Unsupported Media Type  (◔_◔)",
+" ━━━━━━━ 416 Range ▼△▼△▼△▼ Not ▼△▼△▼△▼ Satisfiable ━━━━━━━  ",
+" 417 Expectation ٩( ∩_∩ )۶  Failed  (¸.꒳.¸) ",
+" 418 I'm a teapot ☕ the server refuses the attempt to brew coffee with a teapot.",
+"425 ⏰ ⌛ ⏱️  Too Early  ⏱️ ⌛ ⏰ ・.⋆｡⋆☂˚｡⋆｡˚☽˚｡⋆",
+"【☆】★【☆】★【426 Upgrade Required】★【☆】★【☆】",
+"。°。°。°。°。°。°。°。°。°。°。°　429 Too Many Requests　。°。°。°。°。°。°。°。°。°。°。°",
+"⤹⋆⸙͎۪۫｡˚۰˚ 451 Unavailable For Legal Reasons˚⁀➷｡˚⸙͎۪۫⋆ ༄ ",
+"■ □ ■ □ ■ □ ■ □ 502 Bad Gateway ■ □ ■ □ ■ □ ■",
+"‿︵‿︵‿︵‿ 508 Loop Detected ︵‿︵‿︵‿︵",
+"○ꊞ○ꊞ○ꊞ○ꊞ○ꊞ 507 Insufficient Storage ꊞ○ꊞ○ꊞ○ꊞ○ꊞ○",
+" 100 Continue  ♪ ● ☽ ♩ ○ ♬ ☆ ༝̩̩̥͙ ",
+"٩(✿∂‿∂✿)۶ 200 OK ✿ ✿ ✿ ✿ ✿ "
+];
+
+//textarray.push(" ♪ ♪ ♪ ┌(・ 。・)┘ ♩♪ ♫ ♬");
+
+
+function wonder02() {
+    var rannum= Math.floor(Math.random()*textarray.length);
+    for (var i = 0; i < elements.length; i++) {
+        elements[i].innerHTML = textarray[rannum];
+    }
+    timer = setTimeout("wonder()", delay*tempo);
+}
+// clearTimeout(timer);
+
+function wonder() {
+      document.querySelector('#stage02').innerHTML = textarray[count]; 
+      count++;
+      if(count==textarray.length){count='0';}
+      setTimeout("wonder()",6000); 
+}
+wonder()
+
+// - - - - - - - - INPUT Errors - - - - - - - -
+
+// <p>Please input a number between 5 and 10:</p>
+// <input id="demo" type="text">
+// <button type="button" onclick="myFunction()">Test Input</button>
+// <p id="p01"></p>
+
+function myFunction() {
+  const message = document.getElementById("p01");
+  message.innerHTML = "";
+  let x = document.getElementById("demo").value;
+  try {
+    if(x == "") throw "empty";
+    if(isNaN(x)) throw "not a number";
+    x = Number(x);
+    if(x < 5) throw "too low";
+    if(x > 10) throw "too high";
+  }
+  catch(err) {
+    message.innerHTML = "Input is " + err;
+  }
+}
+
+// - - - - - - - - JavaScript Errors - - - - - - - -
+
+$(document).ready(function(){
+if (typeof console  != "undefined") 
+    if (typeof console.log != 'undefined')
+        console.olog = console.log;
+    else
+        console.olog = function() {};
+
+console.log = function(message) {
+    console.olog(message);
+    $('#err').append(message);
+  //   $('#err').append('<span>' + message + '</span>');
+};
+console.error = console.debug = console.info =  console.log
+});
+
+
+window.onerror = function (msg, url, lineNo, columnNo, error) {
+  var string = msg.toLowerCase();
+  var substring = 'script error';
+  if (string.indexOf(substring) > -1){
+    alert('Script Error: See Browser Console for Detail');
+  } else {
+    var message = [
+      'Message: ' + msg,
+      'URL: ' + url,
+      'Line: ' + lineNo,
+      'Column: ' + columnNo,
+      'Error object: ' + JSON.stringify(error)
+    ].join(' - ');
+
+    alert(message);
+    console.log(message);
+  }
+
+  return false;
+};
+/*
+
+  let num = 1;
+  a = y + 1; 
+  let ran = 1;
+
+try {
+    // Type Error
+    num.toUpperCase(); 
+    // Reference Error
+    a = y + 1;
+    // Syntax Error  
+    eval("alert('Hello)"); 
+    // Range Error 
+    ran.toPrecision(500); 
+} catch (error) {
+
+  switch (true) {
+    case (error instanceof ForbiddenError): {
+    document.getElementById("err").innerHTML = error.name + "<br>" + error.message;
+    console.log(); 
+      break;
+    }
+    case (error instanceof SyntaxError): {
+    document.getElementById("err").innerHTML = error.name + "<br>" + error.message;
+    console.log();  
+      break;
+    }
+    case (error instanceof RangeError): {
+    document.getElementById("err").innerHTML = error.name + "<br>" + error.message;
+    console.log();  
+      break;
+    }
+    default: {
+    document.getElementById("err").innerHTML = error.name + "<br>" + error.message;
+    console.log(); 
+    }
+  }
+
+}
+
+
+// Reference Error
+
+
+let a = 5;
+try {
+  a = y + 1; // thrown if you use (reference) a variable that has not been declared
+}
+catch(err) {
+  document.getElementById("err").innerHTML = err.name;
+}
+
+// Syntax Error
+try {
+  eval("alert('Hello)");   // Missing ' will produce an error
+}
+catch(err) {
+  document.getElementById("err").innerHTML = err.name;
+} 
+
+// 
+try {
+  hello("world(s)!");
+}
+catch(err) {
+  document.getElementById("err").innerHTML =
+  err.name + "<br>" + err.message;
+} 
+
+// URI (Uniform Resource Identifier) Error
+try {
+  decodeURI("%%%");   // You cannot URI decode percent signs
+}
+catch(err) {
+  document.getElementById("err").innerHTML = err.name;
+}
+
+// Type Error
+let num = 1;
+try {
+  num.toUpperCase();   // You cannot convert a number to upper case
+}
+catch(err) {
+  document.getElementById("err").innerHTML = err.name;
+}
+
+// Range Error
+let ran = 1;
+try {
+  ran.toPrecision(500);   // A number cannot have 500 significant digits
+}
+catch(err) {
+  document.getElementById("err").innerHTML = err.name;
+}
+*/
+
+function Breathing() {
+    var zooming = document.querySelector("body");
+    currentScale = 1;
+    currenttime = setInterval(function() {
+    zooming.style.transform="scale(" + currentScale + ")";
+    currentScale = Math.random() * 5
+    }, 800); 
+} 
+
+function No_Breathing() { 
+    clearInterval(currenttime); 
+} 
+
+
+// background: radial-gradient(ellipse at center, #0000FF, #E6E6FA 10%, #0000FF);
+// background: linear-gradient(#fff, #0000FF 100%, #fff 10%)
+// transform: matrix3d(1, 1, 0, 0, 10, 1, 0, 10, 10, 0, 1, 0, 200, 10, 0, 1);
+
+
+function Breathing02() {
+    var zooming = document.querySelector("body");
+    numb = 1;
+    currenttime = setInterval(function() {
+    zooming.style.backgroundSize = numb + "%";
+    numb = Math.random() * 500;
+    }, 800); 
+} 
+
+
+
+  var x = document.getElementsByTagName("div");
+  var counter = 1000;
+  var i;
+  function Breathing03 () {
+      for (i = 0; i < x.length; i++) {
+//      x[i].style.opacity = Math.random() * 2;
+        x[i].style.transform = "scaleY(" + Math.random() * 5 + ")"; 
+        x[i].style.transition = "all 1s ease-in-out"; 
+        window.setTimeout(Breathing03, counter);
+      }
+  }; 
+setTimeout(Breathing03, 1000);
+
+
+
+
+function Breathing(){
+  var x = document.getElementsByTagName("div");
+  var i;
+    for (i = 0; i < x.length; i++) {
+        x[i].style.transform = "scaleY(" + Math.random() * 5 + ")"; 
+        x[i].style.transition = "all 1s ease-in-out"; 
+    }
+}
+//  clearInterval(timer);
+// timer = setInterval(Breathing, 2000);
+
+
+function noBreathing() {
+    clearInterval(currenttime);
+    clearInterval(thistime);
+}
+
+
+
+
+// document.querySelector("body").style.border="solid #000 0rem" 
+// document.querySelector("body").style.borderRadius="30rem"
+// document.querySelector("body").style.background="linear-gradient(70deg, Aquamarine, MistyRose, Blue, Plum, WhiteSmoke, LightYellow)" 
+// document.querySelector("html").style.backgroundColor="black" 
+
+function skin () {
+    currenttime = setInterval(function() {
+        document.querySelector("body").style.background = "linear-gradient(" + Math.floor(Math.random() * 1000) + "deg, var(--color-pink), var(--color-yel), var(--color-blue), var(--color-gray))";
+ }, 800); 
+}
+
--- a/digitalselves-test.html
+++ b/digitalselves-test.html
@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <title>Choreo-Graphic Coding</title>
+    <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="Live Coding Choreographies on Web Environments">
+    <meta name="keywords" content="design, media design, graphic design, choreography, physical, digital, web, live, creative coding, choreographic thinking, performance, Joana Chicau">
+    <meta name="author" content="Joana Chicau">
+
+    <link rel="stylesheet" href="rythm.css" media="screen" charset="utf-8">
+    <link rel="stylesheet" href="digitalselves.css" media="screen" title="style by Joana Chicau" charset="utf-8">
+
+    <script type="text/javascript" src="https://unpkg.com/rythm.js/"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rythm.js/2.2.5/rythm.min.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
+
+</head>
+
+
+<body>
+
+<!-- STAGE 01 -->
+
+<h1 class="rythm blur2" id="stage02"></h1>
+
+<!-- STAGE 03 -->
+
+<iframe class="rythm vanish"  id="stage03" src="https://en.wikipedia.org/wiki/Error"></iframe>
+
+
+<span class="rythm tilt" id="oval"> </span>
+
+<span class="rythm size" id="dia"> </span>
+
+
+<marquee id="err" scrolldelay="92">  * ◝ ₊· errors on air ♫♪. ♪ . * ◝ ₊· </marquee>
+
+<script type="text/javascript">
+  var rythm = new Rythm()
+  rythm.setMusic('digitalselves_track2mix22_01_22.mp3')
+  rythm.addRythm('blur2', 'blur', 0, 10, { reverse: true })
+  rythm.addRythm('tilt', 'tilt', 0, 10, { reverse: true })
+  rythm.addRythm('size', 'size', 0, 10, { reverse: true })
+  rythm.addRythm('vanish', 'vanish', 0, 10, { reverse: true })
+  rythm.start()
+</script>
+
+<script type="text/javascript" src="rythm.js"></script>
+<script type="text/javascript" src="example.js"></script>
+
+<script type="text/javascript" src="digitalselves-scripts.js"></script>
+
+
+</body>
+</html>
--- a/digitalselves.css
+++ b/digitalselves.css
@ -0,0 +1,114 @@
+@font-face {
+font-family: 'Combine';
+src: url('Combine.otf') format('opentype');
+font-weight: normal;
+}
+
+@font-face {
+font-family: 'Sinistre';
+src: url('Sinistre-S†Caroline.otf') format('opentype');
+font-weight: normal;
+}
+
+:root {
+    --color-blue: #0000FF; 
+    --color-gray: #edecec;
+    --color-pink: #f8a8ff;
+    --color-yel:  #FDFFF0;
+    --color-aqua:  #7FFFD4;
+    --special-font: 'Sinistre';
+}
+
+html {
+    box-sizing: border-box;
+    height: 100%
+}
+*, *:before, *:after { 
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit; 
+}
+
+body{
+  margin:0px;
+  /*animation: bodymove 60s infinite; 
+  -webkit-animation: bodymove 60s infinite; */
+}
+
+@keyframes bodymove {
+      0%   { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-blue));
+            background-size: 100% 100%;}
+      20%   { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 100%);
+              background-size: 10% 10%; }
+      30%   { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 40%);
+              background-size: 10% 100%;}
+      35%   { background: radial-gradient(ellipse at top, var(--color-yel), var(--color-blue) 40%, var(--color-pink));
+              background-size: 10% 100%;}
+      45%   { background: radial-gradient(ellipse at center, var(--color-yel), var(--color-blue) 10%, var(--color-yel)  100%);}
+      65%   { background: radial-gradient(ellipse at center, var(--color-blue), var(--color-yel) 10%, var(--color-blue) 100%);
+              background-size: 10% 999%;
+              background-position: left;}
+      70%   { background: radial-gradient(ellipse at center, var(--color-pink), var(--color-yel) 10%, #f8a8ff 100%);
+              background-size: 10% 999%;}
+      85%   { background: linear-gradient(var(--color-pink), var(--color-blue) 10%, var(--color-pink) 100%);
+              background-size: 10% 10%;}
+      90%   { background: linear-gradient(var(--color-blue) 50%, var(--color-pink) 10% 10%);
+              background-size: 100% 1%;}
+      100%   { background: linear-gradient(var(--color-pink) 10%, var(--color-blue) 100%);}        
+}
+
+marquee{
+  color: var(--color-pink);
+  font-family: var(--special-font);
+}
+
+#stage01{
+  width: 100%;
+  height: 100vh;
+}
+#stage02{
+  color: var(--color-blue);
+  font-size: 14vmax;
+  line-height: 18vmax;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  font-family: var(--special-font);
+  font-weight: bold;
+  word-spacing: 1vw;
+  filter: opacity(0.9);
+  text-shadow: 2px 2px 2px var(--color-pink);
+}
+
+#stage03{
+  filter: opacity(0.8);
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: 0;
+  margin: 2vmax;
+  width: 130vmin;
+  height: 90vmin;
+  border: 0px;
+  box-shadow: 1px 1px 8px 2px var(--color-pink);
+  border-radius: 0 50% 50% 50%;
+  filter: grayscale(1);
+}
+
+span {
+  box-shadow: 1px 1px 8px 2px var(--color-pink);
+  position: absolute;
+  z-index: 1;
+}
+
+span#oval {
+      width: 50%;
+      height: 80%;
+      border-radius: 100% / 50%;
+}
+
+span#dia {
+      width: 90%;
+      height: 90%;
+      transform: rotate(45deg);
+}