3 changed files with 474 additions and 0 deletions
@ -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); |
||||
|
} |
||||
|
|
||||
@ -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> |
||||
@ -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); |
||||
|
} |
||||
Loading…
Reference in new issue