<!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 -->
< div id = "stage01" >
< input class = "rythm size" id = "type" type = "text" placeholder = " ¿ ? " >
< button class = "rythm size" id = "clck" type = "button" onclick = "click()" > < / button >
< p id = "result" > < / p >
< / div >
<!-- STAGE 02 -->
< h1 class = "blur2" id = "stage02" > < / h1 >
<!-- STAGE 03 -->
<!-- https://en.wikipedia.org/wiki/Margin_of_error -->
<!-- https://es.wikipedia.org/wiki/Del_rigor_en_la_ciencia -->
<!-- https://es.wikipedia.org/wiki/Relaci%C3%B3n_mapa - territorio -->
< iframe class = "" id = "stage03" src = "https://www.openstreetmap.org/#map=17/51.49444/-0.09680" > < / iframe >
< / div >
<!-- ++++ STAGES -->
< span class = "oval rythm-bass size" > < / span >
< span class = "oval rythm vanish" > < / span >
< span class = "oval rythm vanish" > < / span >
< span class = "oval rythm-bass size" > < / span >
< span class = "oval rythm-bass vanish" > < / span >
< span class = "oval rythm size" > < / span >
<!-- sampling error ₊ observational error ₊ stretching ₊ margins •f err•r ǝɹɹ•ɹ¿ ₊ ◝ -->
<!-- .. las Generaciones siguientes entendieron que ese dilatado Mapa era Inútil y no sin Impiedad lo entregaron a las Inclemencias del Sol y de los Inviernos.. -->
< div class = "all" >
< marquee id = "err" scrolldelay = "" > ♫ ♪ • noite de festa … ◝ • ~ celebrating 10* years Algorave • ◝ < / marquee >
< / div >
< script type = "text/javascript" >
var rythm = new Rythm()
rythm.analyser.analyser.frequencyBinCount = 32;
var audio = document.getElementById('audio')
// rythm.connectExternalAudioElement(audio)
// rythm.setMusic('digitalselves_track2mix22_01_22.mp3')
rythm.addRythm('blur2', 'blur', 0, 5, { max: 10 })
rythm.addRythm('tilt', 'tilt', 0, 10, { reverse: true })
rythm.addRythm('size', 'size', 0, 5, { reverse: true })
rythm.addRythm('vanish', 'vanish', 0, 10, { reverse: true })
rythm.setGain(0.1)
// rythm.start()
function mic () {
if (rythm.stopped === false) {
rythm.stop()
}
rythm.plugMicrophone().then(function() {
// rythm.connectExternalAudioElement(audio)
rythm.start()
})
}
mic ()
< / script >
< script type = "text/javascript" src = "rythm.js" > < / script >
<!-- <script type="text/javascript" src="example.js"></script>
-->
< script type = "text/javascript" src = "scripts.js" > < / script >
< / body >
< / html >
