Mondher
Id serveur filezilla :
hôte : designnumerique.be / student.work / t0ct0ct0c
travail autour du scroll
Focus sur un élément d'interface très particulier par sa longévité (il existe depuis les années 70), son rapport à l'écran (on déplace du contenu à l'intérieur d'un cadre ou on déplace un cadre par rapport à un contenu); le scroll. Lancement d'un premier exercice autour du scroll; comment détourner / utiliser le scroll au sein d'une expérimentation sur une page web.
Pour cet exercice, j'ai choisi de travailler sur un labyrinthe. Dans ce labyrinthe, on ne se déplace pas dans les espaces vides mais dans les barres de scroll. Chaque barre est reliée à une autre barre au moins, qu'elle active et rend visible ou désactive et rend invisible, en fonction du déplacement du curseur de la barre. Il n'y a qu'un seul chemin qui amène au bout du labyrinthe. Une fois arrivé au bout du labyrinthe, la première barre de scroll du jeu et rendue visible, comme à l'état initial du jeu. Il n'y qu'un seul chemin qui amène au bout du labyrinthe mais il y a parfois des options sans issues. Dans ces cas-là, il faut faire demi tour et retrouver les barres de scrolls qui ont étés masquées pour prendre le bon chemin. Il y a 70 barres de scroll, dont 20 pour le bon chemin.
HTML, CSS, JavaScript
Code HTML :
Le code HTML contient un div général, le div labyrinthe, dans lequel il y a les div de chaque box du labyrinthe, chacune avec son propre id (de 1 à 70) et toutes avec la même classe chemin. Dans chaque div de chaque box, il y a un div vide pour permettre le débordement du div et donc le scroll. Ici, il n'y a pas de contenu, alors on voit seulement le scroll. À la fin du code, il y a un bout de texte car j'ai essayé de faire en sorte que des textes s'affichent et disparaissent en fonction des mouvements des scrolls. Pour finir, le résultat ne m'intéressait pas. J'ai laissé le bout de texte dans le code parce qu'il est beau.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>labyrinthe scroll</title>
<link rel="stylesheet" href="styles2.css">
</head>
<body>
<div id="labyrinth">
<div id="box1" class="chemin">
<div></div>
</div>
<div id="box2" class="chemin active">
<div></div>
</div>
<div id="box3" class="chemin">
<div></div>
</div>
<div id="box4" class="chemin">
<div></div>
</div>
<div id="box5" class="chemin">
<div></div>
</div>
<div id="box6" class="chemin">
<div></div>
</div>
<div id="box7" class="chemin">
<div></div>
</div>
<div id="box8" class="chemin">
<div></div>
</div>
<div id="box9" class="chemin">
<div></div>
</div>
<div id="box10" class="chemin">
<div></div>
</div>
<div id="box11" class="chemin">
<div></div>
</div>
<div id="box12" class="chemin">
<div></div>
</div>
<div id="box13" class="chemin">
<div></div>
</div>
<div id="box14" class="chemin">
<div></div>
</div>
<div id="box15" class="chemin">
<div></div>
</div>
<div id="box16" class="chemin">
<div></div>
</div>
<div id="box17" class="chemin">
<div></div>
</div>
<div id="box18" class="chemin">
<div></div>
</div>
<div id="box19" class="chemin">
<div></div>
</div>
<div id="box20" class="chemin">
<div></div>
</div>
<div id="box21" class="chemin">
<div></div>
</div>
<div id="box22" class="chemin">
<div></div>
</div>
<div id="box23" class="chemin">
<div></div>
</div>
<div id="box24" class="chemin">
<div></div>
</div>
<div id="box25" class="chemin">
<div></div>
</div>
<div id="box26" class="chemin">
<div></div>
</div>
<div id="box27" class="chemin">
<div></div>
</div>
<div id="box28" class="chemin">
<div></div>
</div>
<div id="box29" class="chemin">
<div></div>
</div>
<div id="box30" class="chemin">
<div></div>
</div>
<div id="box31" class="chemin">
<div></div>
</div>
<div id="box32" class="chemin">
<div></div>
</div>
<div id="box33" class="chemin">
<div></div>
</div>
<div id="box34" class="chemin">
<div></div>
</div>
<div id="box35" class="chemin">
<div></div>
</div>
<div id="box36" class="chemin">
<div></div>
</div>
<div id="box37" class="chemin">
<div></div>
</div>
<div id="box38" class="chemin">
<div></div>
</div>
<div id="box39" class="chemin">
<div></div>
</div>
<div id="box40" class="chemin">
<div></div>
</div>
<div id="box41" class="chemin">
<div></div>
</div>
<div id="box42" class="chemin">
<div></div>
</div>
<div id="box43" class="chemin">
<div></div>
</div>
<div id="box44" class="chemin">
<div></div>
</div>
<div id="box45" class="chemin">
<div></div>
</div>
<div id="box46" class="chemin">
<div></div>
</div>
<div id="box47" class="chemin">
<div></div>
</div>
<div id="box48" class="chemin">
<div></div>
</div>
<div id="box49" class="chemin">
<div></div>
</div>
<div id="box50" class="chemin">
<div></div>
</div>
<div id="box51" class="chemin">
<div></div>
</div>
<div id="box52" class="chemin">
<div></div>
</div>
<div id="box53" class="chemin">
<div></div>
</div>
<div id="box54" class="chemin">
<div></div>
</div>
<div id="box55" class="chemin">
<div></div>
</div>
<div id="box56" class="chemin">
<div></div>
</div>
<div id="box57" class="chemin">
<div></div>
</div>
<div id="box58" class="chemin">
<div></div>
</div>
<div id="box59" class="chemin">
<div></div>
</div>
<div id="box60" class="chemin">
<div></div>
</div>
<div id="box61" class="chemin">
<div></div>
</div>
<div id="box62" class="chemin">
<div></div>
</div>
<div id="box63" class="chemin">
<div></div>
</div>
<div id="box64" class="chemin">
<div></div>
</div>
<div id="box65" class="chemin">
<div></div>
</div>
<div id="box66" class="chemin">
<div></div>
</div>
<div id="box67" class="chemin">
<div></div>
</div>
<div id="box68" class="chemin">
<div></div>
</div>
<div id="box69" class="chemin">
<div></div>
</div>
<div id="box70" class="chemin">
<div></div>
</div>
</div>
<!-- <div id="box1" class="text">
<h1>
J’envie — sans bien savoir si je les envie vraiment — ces gens dont on peut écrire la biographie, ou qui peuvent l’écrire eux-mêmes. Dans ces impressions décousues, sans lien entre elles et ne souhaitant pas en avoir, je raconte avec indifférence mon autobiographie sans faits, mon histoire sans vie. Ce sont mes confidences, et si je n’y dis rien, c’est que je n’ai rien à dire. J’envie — sans bien savoir si je les envie vraiment — ces gens dont on peut écrire la biographie, ou qui peuvent l’écrire eux-mêmes. Dans ces impressions décousues, sans lien entre elles et ne souhaitant pas en avoir, je raconte avec indifférence mon autobiographie sans faits, mon histoire sans vie. Ce sont mes confidences, et si je n’y dis rien, c’est que je n’ai rien à dire. J’envie — sans bien savoir si je les envie vraiment — ces gens dont on peut écrire la biographie, ou qui peuvent l’écrire eux-mêmes. Dans ces impressions décousues, sans lien entre elles et ne souhaitant pas en avoir, je raconte avec indifférence mon autobiographie sans faits, mon histoire sans vie. Ce sont mes confidences, et si je n’y dis rien, c’est que je n’ai rien à dire.
</h1>
</div> -->
<script src="script2.js"></script>
</body>
</html>
Code CSS :
Pour chaque box, il y a deux blocs de codes, un pour le scroll en soi, ses dimensions et sa position sur la page, l'autre pour le contenu invisible qui définit la taille du contenu qui déborde et donc du curseur du scroll dans la barre de scroll.
html, body{
width:100%;
height:100%;
margin:0;
}
#labyrinth{
width:900px;
height:900px;
border:1px solid lightgray;
margin-top:10px;
margin-left:10px;
position:fixed;
/*position : relative;*/
}
.chemin.active{
display:block;
}
.chemin{
overflow:auto;
position:absolute;
display:none;
}
#box1{
height:500px;
width:20px;
top:79px;
left:0px;
}
#box1 div{
background-color: #f000;
height:150000%;
width:1px;
}
/*#box1 h1{
font-size: 8rem;
position: absolute;
display : inline;
margin-top:10px;
margin-left:950px;
color: black;
overflow: inherit;
opacity: 20%;
}*/
#box2{
height:20px;
width:270px;
position:absolute;
top:0px;
left:0px;
}
#box2 div{
background-color: #00f0;
width:900%;
height:1px;
}
}
#box3{
height:100px;
width:10px;
position:absolute;
top:40px;
left:40px;
}
#box3 div{
background-color: #f000;
height:200%;
width:1px;
}
#box4{
height:20px;
width:100px;
position:absolute;
top:79px;
left:24px;
}
#box4 div{
background-color: #00f0;
width:300%;
height:1px;
}
#box5{
height:90px;
width:20px;
position:absolute;
top:20px;
left:220px;
}
#box5 div{
background-color: #00f0;
height:200%;
width:1px;
}
#box6{
height:20px;
width:120px;
position:absolute;
top:105px;
left:190px;
}
#box6 div{
background-color: #00f0;
width:300%;
height:1px;
}
#box7{
height:150px;
width:20px;
position:absolute;
top:0px;
left:314px;
}
#box7 div{
background-color: #00f0;
height:3300%;
width:1px;
}
#box8{
height:20px;
width:433px;
position:absolute;
top:274px;
left:257px;
}
#box8 div{
background-color: #00f0;
width:900%;
height:1px;
}
#box9{
height:200px;
width:20px;
position:absolute;
top:223px;
left:234px;
}
#box9 div{
background-color: #00f0;
height:250%;
width:1px;
}
#box10{
height:290px;
width:20px;
position:absolute;
top:79px;
left:128px;
}
#box10 div{
background-color: #00f0;
height:700%;
width:1px;
}
#box11{
height:200px;
width:20px;
position:absolute;
top:20px;
left:415px;
}
#box11 div{
background-color: #00f0;
height:200%;
width:1px;
}
#box12{
height:20px;
width:150px;
position:absolute;
top:67px;
left:438px;
}
#box12 div{
background-color: #00f0;
width:300%;
height:1px;
}
#box13{
height:20px;
width:102px;
position:absolute;
top:200px;
left:152px;
}
#box13 div{
background-color: #00f0;
width:200%;
height:1px;
}
#box14{
height:20px;
width:150px;
position:absolute;
top:373px;
left:80px;
}
#box14 div{
background-color: #00f0;
width:400%;
height:1px;
}
#box15{
height:120px;
width:20px;
position:absolute;
top:460px;
left:221px;
}
#box15 div{
background-color: #00f0;
height:400%;
width:1px;
}
#box16{
height:20px;
width:250px;
position:absolute;
top:508px;
left:320px;
}
#box16 div{
background-color: #00f0;
width:500%;
height:1px;
}
#box17{
height:180px;
width:20px;
position:absolute;
top:90px;
left:507px;
}
#box17 div{
background-color: #00f0;
height:400%;
width:1px;
}
#box18{
height:180px;
width:20px;
position:absolute;
top:0px;
left:592px;
}
#box18 div{
background-color: #00f0;
height:200%;
width:1px;
}
#box19{
height:20px;
width:75px;
position:absolute;
top:45px;
left:337px;
}
#box19 div{
background-color: #00f0;
width:200%;
height:1px;
}
#box20{
height:20px;
width:190px;
position:absolute;
top:250px;
left:530px;
}
#box20 div{
background-color: #00f0;
width:300%;
height:1px;
}
#box21{
height:210px;
width:20px;
position:absolute;
top:40px;
left:670px;
}
#box21 div{
background-color: #00f0;
height:350%;
width:1px;
}
#box22{
height:20px;
width:205px;
position:absolute;
top:67px;
left:693px;
}
#box22 div{
background-color: #00f0;
width:500%;
height:1px;
}
#box23{
height:135px;
width:20px;
position:absolute;
top:90px;
left:880px;
}
#box23 div{
background-color: #00f0;
height:300%;
width:1px;
}
#box24{
height:18px;
width:140px;
position:absolute;
top:177px;
left:738px;
}
#box24 div{
background-color: #00f0;
width:400%;
height:1px;
}
#box25{
height:160px;
width:20px;
position:absolute;
top:200px;
left:758px;
}
#box25 div{
background-color: #00f0;
height:300%;
width:1px;
}
#box26{
height:20px;
width:300px;
position:absolute;
top:363px;
left:500px;
}
#box26 div{
background-color: #00f0;
width:2000%;
height:1px;
}
#box27{
height:140px;
width:20px;
position:absolute;
top:365px;
left:348px;
}
#box27 div{
background-color: #00f0;
height:600%;
width:1px;
}
#box28{
height:120px;
width:20px;
position:absolute;
top:385px;
left:528px;
}
#box28 div{
background-color: #00f0;
height:300%;
width:1px;
}
#box29{
height:180px;
width:20px;
position:absolute;
top:67px;
left:1100px;
display: none;
}
#box29 div{
background-color: blue;
height:200%;
width:1px;
}
#box30{
height:115px;
width:20px;
position:absolute;
top:157px;
left:60px;
}
#box30 div{
background-color: #00f0;
height:250%;
width:1px;
}
#box31{
height:140px;
width:20px;
position:absolute;
top:297px;
left:435px;
}
#box31 div{
background-color: #00f0;
height:400%;
width:1px;
}
#box32{
height:205px;
width:20px;
position:absolute;
top:531px;
left:450px;
}
#box32 div{
background-color: #00f0;
height:300%;
width:1px;
}
#box33{
height:20px;
width:100px;
position:absolute;
top:460px;
left:244px;
}
#box33 div{
background-color: #00f0;
width:300%;
height:1px;
}
#box34{
height:20px;
width:300px;
position:absolute;
top:582px;
left:0px;
}
#box34 div{
background-color: #00f0;
width:700%;
height:1px;
}
#box35{
height:140px;
width:20px;
position:absolute;
top:440px;
left:100px;
}
#box35 div{
background-color: #00f0;
height:400%;
width:1px;
}
#box36{
height:20px;
width:200px;
position:absolute;
top:660px;
left:247px;
}
#box36 div{
background-color: #00f0;
width:500%;
height:1px;
}
#box37{
height:20px;
width:75px;
position:absolute;
top:460px;
left:22px;
}
#box37 div{
background-color: #00f0;
width:200%;
height:1px;
}
#box38{
height:255px;
width:20px;
position:absolute;
top:645px;
left:225px;
}
#box38 div{
background-color: #00f0;
height:600%;
width:1px;
}
#box39{
height:175px;
width:20px;
position:absolute;
top:605px;
left:130px;
}
#box39 div{
background-color: #00f0;
height:400%;
width:1px;
}
#box40{
height:20px;
width:70px;
position:absolute;
top:650px;
left:57px;
}
#box40 div{
background-color: #00f0;
width:200%;
height:1px;
}
#box41{
height:20px;
width:165px;
position:absolute;
top:783px;
left:20px;
}
#box41 div{
background-color: #00f0;
width:400%;
height:1px;
}
#box42{
height:95px;
width:20px;
position:absolute;
top:805px;
left:65px;
}
#box42 div{
background-color: #00f0;
height:200%;
width:1px;
}
#box43{
height:20px;
width:100px;
position:absolute;
top:850px;
left:247px;
}
#box43 div{
background-color: #00f0;
width:200%;
height:1px;
}
#box44{
height:145px;
width:20px;
position:absolute;
top:755px;
left:350px;
}
#box44 div{
background-color: #00f0;
height:400%;
width:1px;
}
#box45{
height:20px;
width:200px;
position:absolute;
top:783px;
left:372px;
}
#box45 div{
background-color: #00f0;
width:300%;
height:1px;
}
#box46{
height:160px;
width:20px;
position:absolute;
top:620px;
left:530px;
}
#box46 div{
background-color: #00f0;
height:400%;
width:1px;
}
#box47{
height:20px;
width:200px;
position:absolute;
top:598px;
left:472px;
}
#box47 div{
background-color: #00f0;
width:500%;
height:1px;
}
#box48{
height:120px;
width:20px;
position:absolute;
top:475px;
left:620px;
}
#box48 div{
background-color: #00f0;
height:200%;
width:1px;
}
#box49{
height:20px;
width:230px;
position:absolute;
top:453px;
left:600px;
}
#box49 div{
background-color: #00f0;
width:500%;
height:1px;
}
#box50{
height:60px;
width:20px;
position:absolute;
top:475px;
left:725px;
}
#box50 div{
background-color: #00f0;
height:200%;
width:1px;
}
#box51{
height:500px;
width:20px;
position:absolute;
top:280px;
left:833px;
}
#box51 div{
background-color: #00f0;
height:1200%;
width:1px;
}
#box52{
height:20px;
width:120px;
position:absolute;
top:538px;
left:680px;
}
#box52 div{
background-color: #00f0;
width:800%;
height:1px;
}
#box53{
height:150px;
width:20px;
position:absolute;
top:560px;
left:760px;
}
#box53 div{
background-color: #00f0;
height:400%;
width:1px;
}
#box54{
height:20px;
width:150px;
position:absolute;
top:675px;
left:607px;
}
#box54 div{
background-color: #00f0;
width:400%;
height:1px;
}
#box55{
height:20px;
width:180px;
position:absolute;
top:740px;
left:650px;
}
#box55 div{
background-color: #00f0;
width:400%;
height:1px;
}
#box56{
height:20px;
width:475px;
position:absolute;
top:845px;
left:425px;
}
#box56 div{
background-color: #00f0;
width:1000%;
height:1px;
}
#box57{
height:80px;
width:20px;
position:absolute;
top:763px;
left:750px;
}
#box57 div{
background-color: #00f0;
height:200%;
width:1px;
}
#box58{
height:30px;
width:20px;
position:absolute;
top:867px;
left:825px;
}
#box58 div{
background-color: #00f0;
height:200%;
width:1px;
}
#box59{
height:20px;
width:130px;
position:absolute;
top:180px;
left:282px;
}
#box59 div{
background-color: #00f0;
width:200%;
height:1px;
}
#box60{
height:45px;
width:20px;
position:absolute;
top:20px;
left:800px;
}
#box60 div{
background-color: #00f0;
height:200%;
width:1px;
}
#box61{
height:80px;
width:20px;
position:absolute;
top:530px;
left:375px;
}
#box61 div{
background-color: #00f0;
height:200%;
width:1px;
}
#box62{
height:60px;
width:20px;
position:absolute;
top:720px;
left:35px;
}
#box62 div{
background-color: #00f0;
height:200%;
width:1px;
}
#box63{
height:90px;
width:20px;
position:absolute;
top:682px;
left:285px;
}
#box63 div{
background-color: #00f0;
height:200%;
width:1px;
}
#box64{
height:30px;
width:20px;
position:absolute;
top:400px;
left:1000px;
display: none;
}
#box64 div{
background-color: blue;
height:200%;
width:1px;
}
#box65{
height:40px;
width:20px;
position:absolute;
top:762px;
left:660px;
}
#box65 div{
background-color: #00f0;
height:200%;
width:1px;
}
#box66{
height:20px;
width:110px;
position:absolute;
top:125px;
left:692px;
}
#box66 div{
background-color: #00f0;
width:200%;
height:1px;
}
#box67{
height:20px;
width:85px;
position:absolute;
top:275px;
left:40px;
}
#box67 div{
background-color: #00f0;
width:300%;
height:1px;
}
#box68{
height:20px;
width:130px;
position:absolute;
top:500px;
left:1000px;
display: none;
}
#box68 div{
background-color: blue;
width:200%;
height:1px;
}
#box69{
height:20px;
width:130px;
position:absolute;
top:500px;
left:1000px;
display: none;
}
#box69 div{
background-color: blue;
width:200%;
height:1px;
}
#box70{
height:20px;
width:130px;
position:absolute;
top:500px;
left:1000px;
display: none;
}
#box70 div{
background-color: blue;
width:200%;
height:1px;
}
Code JavaScript :
J'ai de la peine avec JavaScript. Je comprends plus ou moins le code mais j'ai de la peine à l'expliquer. Je comprends que dans ce code il y a des fonctions qui permettent de surveiller et détecter des événements pour déterminer si une action en particulier doit être lancée. En l'occurrence, afficher ou masquer des scrolls en fonction du scroll qui est manipulé dans le jeu. Pour chaque scroll, on repère la position du curseur dans la console sur la page web grâce à la fonction de target et on attache à cette position la barre de scroll avoisinante qu'on veut activer quand le curseur se trouve à un endroit précis de la barre de scroll.
function regarderlaboite(boite){
//console.log(boite);
boite.addEventListener('scroll', quandonscroll);
}
function quandonscroll(evenement){
//console.log(evenement.target);
boite = evenement.target;
if(boite.clientHeight > boite.clientWidth){
scroll = boite.scrollTop;
}else{
scroll = boite.scrollLeft;
}
//console.log(boite);
console.log(scroll);
//console.log(evenement.target);
boiteconnections = connections[boite.id];
console.log(boiteconnections);
if(boiteconnections != undefined){
boiteconnections.forEach(function(connection){
boiteconnectee = document.getElementById(connection['id']);
if(scroll >= connection['positionStart'] && scroll <= connection['positionEnd']){
//on affiche l'élément qui a comme id connection['id']
boiteconnectee.classList.add('active');
}else{
//on cache l'élément qui a comme id connection['id']
boiteconnectee.classList.remove('active');
}
});
}
}
// 0 1 2 3
//[jaune|vert|bleu|rouge]
// teinte saturation luminosité
//[jaune | 50% |50%]
var connections = {
'box2' : [
{'id':'box5','positionStart':1474, 'positionEnd':1484},
{'id':'box1','positionStart':1803, 'positionEnd':2160}
],
'box5':[
{'id':'box6','positionStart':90, 'positionEnd':90},
{'id':'box2','positionStart':0, 'positionEnd':0}
],
'box6' : [
{'id':'box7','positionStart':144, 'positionEnd':168},
{'id':'box5','positionStart':0, 'positionEnd':0},
],
'box7' : [
{'id':'box6','positionStart':0, 'positionEnd':0},
{'id':'box19','positionStart':3185, 'positionEnd':3273},
],
'box19' : [
{'id':'box7','positionStart':0, 'positionEnd':0},
{'id':'box11','positionStart':73, 'positionEnd':75},
],
'box11' : [
{'id':'box19','positionStart':0, 'positionEnd':0},
{'id':'box59','positionStart':141, 'positionEnd':148},
{'id':'box12','positionStart':186, 'positionEnd':191},
],
'box59' : [
{'id':'box11','positionStart':94, 'positionEnd':99},
],
'box12' : [
{'id':'box11','positionStart':0, 'positionEnd':0},
// {'id':'box17','positionStart':141, 'positionEnd':148},
{'id':'box18','positionStart':186, 'positionEnd':191},
],
'box18' : [
{'id':'box12','positionStart':110, 'positionEnd':117},
],
'box1' : [
{'id':'box4','positionStart':490434, 'positionEnd':495322},
{'id':'box37','positionStart':280248, 'positionEnd':285136}
],
'box1' : [
{'id':'box4','positionStart':490434, 'positionEnd':495322},
{'id':'box37','positionStart':280248, 'positionEnd':285136}
],
'box37' : [
{'id':'box1','positionStart':69, 'positionEnd':75},
{'id':'box35','positionStart':41, 'positionEnd':47}
],
'box35' : [
{'id':'box37','positionStart':420, 'positionEnd':420},
],
'box4' : [
{'id':'box1','positionStart':0, 'positionEnd':0},
{'id':'box10','positionStart':189, 'positionEnd':201}
],
'box10' : [
{'id':'box4','positionStart':0, 'positionEnd':0},
{'id':'box67','positionStart':612, 'positionEnd':654},
{'id':'box13','positionStart':1615, 'positionEnd':1650},
{'id':'box14','positionStart':1615, 'positionEnd':1650},
],
'box67' : [
{'id':'box10','positionStart':0, 'positionEnd':0},
{'id':'box30','positionStart':170, 'positionEnd':170}
],
'box30' : [
{'id':'box67','positionStart':0, 'positionEnd':0},
],
'box13' : [
{'id':'box10','positionStart':0, 'positionEnd':0},
{'id':'box9','positionStart':98, 'positionEnd':102}
],
'box14' : [
{'id':'box10','positionStart':0, 'positionEnd':0},
{'id':'box9','positionStart':438, 'positionEnd':450}
],
'box9' : [
{'id':'box13','positionStart':0, 'positionEnd':0},
{'id':'box14','positionStart':0, 'positionEnd':0},
{'id':'box8','positionStart':265, 'positionEnd':286}
],
'box8' : [
{'id':'box9','positionStart':0, 'positionEnd':0},
{'id':'box31','positionStart':3429, 'positionEnd':3464},
{'id':'box17','positionStart':1067, 'positionEnd':1208},
{'id':'box20','positionStart':952, 'positionEnd':987},
],
'box31' : [
{'id':'box8','positionStart':0, 'positionEnd':0},
],
'box17' : [
{'id':'box8','positionStart':0, 'positionEnd':0},
{'id':'box12','positionStart':390, 'positionEnd':432}
],
'box12' : [
{'id':'box17','positionStart':0, 'positionEnd':0},
{'id':'box18','positionStart':286, 'positionEnd':300}
],
'box20' : [
{'id':'box8','positionStart':0, 'positionEnd':0},
{'id':'box21','positionStart':274, 'positionEnd':288}
],
'box21' : [
{'id':'box20','positionStart':0, 'positionEnd':0},
{'id':'box66','positionStart':426, 'positionEnd':439},
{'id':'box22','positionStart':522, 'positionEnd':525}
],
'box66' : [
{'id':'box21','positionStart':0, 'positionEnd':0}
],
'box22' : [
{'id':'box21','positionStart':0, 'positionEnd':0},
{'id':'box23','positionStart':426, 'positionEnd':439},
{'id':'box60','positionStart':810, 'positionEnd':820}
],
'box60' : [
{'id':'box22','positionStart':0, 'positionEnd':0}
],
'box23' : [
{'id':'box22','positionStart':0, 'positionEnd':0},
{'id':'box24','positionStart':259, 'positionEnd':270}
],
'box24' : [
{'id':'box23','positionStart':0, 'positionEnd':0},
{'id':'box25','positionStart':391, 'positionEnd':407}
],
'box25' : [
{'id':'box24','positionStart':0, 'positionEnd':0},
{'id':'box26','positionStart':314, 'positionEnd':320}
],
'box26' : [
{'id':'box25','positionStart':0, 'positionEnd':0},
{'id':'box28','positionStart':3990, 'positionEnd':4100}
],
'box28' : [
{'id':'box26','positionStart':0, 'positionEnd':0},
{'id':'box16','positionStart':132, 'positionEnd':147}
],
'box16' : [
{'id':'box28','positionStart':0, 'positionEnd':0},
{'id':'box61','positionStart':144, 'positionEnd':159},
{'id':'box27','positionStart':779, 'positionEnd':803},
{'id':'box32','positionStart':995, 'positionEnd':1000}
],
'box61' : [
{'id':'box16','positionStart':0, 'positionEnd':0}
],
'box27' : [
{'id':'box16','positionStart':0, 'positionEnd':0},
{'id':'box33','positionStart':693, 'positionEnd':700},
],
'box33' : [
{'id':'box27','positionStart':0, 'positionEnd':0},
{'id':'box15','positionStart':187, 'positionEnd':200},
],
'box15' : [
{'id':'box33','positionStart':0, 'positionEnd':0},
{'id':'box34','positionStart':297, 'positionEnd':311},
],
'box34' : [
{'id':'box15','positionStart':0, 'positionEnd':0},
{'id':'box35','positionStart':144, 'positionEnd':159},
{'id':'box39','positionStart':990, 'positionEnd':1011}
],
'box39' : [
{'id':'box34','positionStart':0, 'positionEnd':0},
{'id':'box40','positionStart':226, 'positionEnd':241},
{'id':'box41','positionStart':513, 'positionEnd':525}
],
'box40' : [
{'id':'box39','positionStart':0, 'positionEnd':0}
],
'box41' : [
{'id':'box39','positionStart':0, 'positionEnd':0},
{'id':'box42','positionStart':491, 'positionEnd':495},
{'id':'box62','positionStart':491, 'positionEnd':495}
],
'box42' : [
{'id':'box41','positionStart':0, 'positionEnd':0}
],
'box62' : [
{'id':'box41','positionStart':0, 'positionEnd':0}
],
'box32' : [
{'id':'box16','positionStart':0, 'positionEnd':0},
{'id':'box36','positionStart':169, 'positionEnd':180},
{'id':'box47','positionStart':404, 'positionEnd':410}
],
'box36' : [
{'id':'box32','positionStart':0, 'positionEnd':0},
{'id':'box63','positionStart':76, 'positionEnd':90},
{'id':'box38','positionStart':76, 'positionEnd':90}
],
'box38' : [
{'id':'box36','positionStart':0, 'positionEnd':0},
],
'box63' : [
{'id':'box36','positionStart':0, 'positionEnd':0},
],
'box47' : [
{'id':'box32','positionStart':0, 'positionEnd':0},
{'id':'box46','positionStart':305, 'positionEnd':320},
{'id':'box48','positionStart':595, 'positionEnd':605}
],
'box48' : [
{'id':'box47','positionStart':0, 'positionEnd':0},
{'id':'box49','positionStart':116, 'positionEnd':120}
],
'box49' : [
{'id':'box48','positionStart':0, 'positionEnd':0},
{'id':'box50','positionStart':901, 'positionEnd':920},
{'id':'box51','positionStart':901, 'positionEnd':920}
],
'box51' : [
{'id':'box49','positionStart':0, 'positionEnd':0},
{'id':'box55','positionStart':5464, 'positionEnd':5500}
],
'box55' : [
{'id':'box51','positionStart':0, 'positionEnd':0},
{'id':'box57','positionStart':521, 'positionEnd':540},
{'id':'box65','positionStart':521, 'positionEnd':540}
],
'box65' : [
{'id':'box55','positionStart':0, 'positionEnd':0}
],
'box57' : [
{'id':'box55','positionStart':0, 'positionEnd':0},
{'id':'box56','positionStart':70, 'positionEnd':80}
],
'box56' : [
{'id':'box57','positionStart':0, 'positionEnd':0}
],
'box50' : [
{'id':'box49','positionStart':0, 'positionEnd':0},
{'id':'box52','positionStart':51, 'positionEnd':60}
],
'box52' : [
{'id':'box50','positionStart':0, 'positionEnd':0},
{'id':'box53','positionStart':672, 'positionEnd':725}
],
'box53' : [
{'id':'box52','positionStart':0, 'positionEnd':0},
{'id':'box54','positionStart':442, 'positionEnd':450}
],
'box54' : [
{'id':'box53','positionStart':0, 'positionEnd':0}
],
'box46' : [
{'id':'box47','positionStart':0, 'positionEnd':0},
{'id':'box45','positionStart':472, 'positionEnd':480}
],
'box45' : [
{'id':'box46','positionStart':0, 'positionEnd':0},
{'id':'box44','positionStart':375, 'positionEnd':400}
],
'box44' : [
{'id':'box2','positionStart':423, 'positionEnd':435}
],
};
//attacher un listener sur le scroll qui renvoie la position du scroll sur toutes les boites
var boxes = document.querySelectorAll('.chemin');
//console.log(boxes);
boxes.forEach(regarderlaboite);
Session de fin de quadri :
Texte :
On rétorquera que tous les textes ne sont pas nécessairement engagés. C'est vrai, et tant mieux, d'ailleurs; ce qui vaut pour le journalisme ne vaut pas pour la littérature. À quelques exceptions près, la littérature engagée est excessivement prévisible, transparente et somme toute pénible. Personne ne demande honnêtement à la littérature de militer. La littérature ne change pas le monde, elle l'habite. Elle conduit la conscience à travers cette part du réel qui échappe à la conscience. La littérature augmente le volume de l'indicible. Personne n'attend donc d'une machine à écrire littéraire qu'elle fasse preuve d'une velléité messianique. Il suffit bel et bien qu'elle s'inspire de millions de textes existants. Elle produira alors une œuvre chargée de l'inconscient collectif déposé dans ces textes. Mais cet inconscient sera muet; muet jusqu'à l'arrivée de quelqu'un de très important en littérature; quelqu'un de nécessaire aussi à la signification d'un collage de Max Ernst ou d'une composition numérique de l'automate de Robbie Barrat. Ce quelqu'un, cette composante vivante et irréductible du sens d'un texte n'est autre que son interprète.
Déjà au début du 20ᵉ s., la philosophie de l'interprétation nous débarrassa de l'obsession de l'intention première, c’est-à-dire de cette idée selon laquelle il serait possible et nécessaire de savoir ce qu'un auteur voulait dire en écrivant. Nous savons ainsi déjà que l'interprète détermine une part essentielle du sens d'une œuvre. Mais la machine à écrire intelligente nous montre aujourd'hui qu'il peut le déterminer entièrement. Car lorsqu'une machine compose un texte, elle est dénuée d'émotion, dépourvue de corps, privée de toute expérience où pourrait s'ancrer le sens de ses propos. Elle est tout aussi pauvre en sens lorsqu'elle peint ou lorsqu'elle compose de la musique. Pourtant nous ressentons en observant ses productions. Nous voyons quelque chose. Nous entendons quelqu'un s'adresser à nous. L'auteur au creux de la machine, le Ghost in the Shell, naît de nos émotions et de nos imaginaires. Le sens de l'œuvre robotique nous appartient. L'interprète d'une œuvre créée par une intelligence artificielle lui donne un sens imprévu par les constructeurs de cette intelligence. Notre interprétation est la part impensée de leur projet; elle libère le robot créateur de son asservissement aux raisonnements de ses concepteurs. Nous jouons un rôle essentiel dans la robopoïèse ! Tout comme nous avons joué un rôle dans l'autopoïèse de la nature depuis l'émergence de notre espèce : non seulement parce que nous émanons d'elle et que nous transformons notre environnement naturel, mais parce que nous faisons partie des créatures à qui cet environnement apparaît et qui lui donnent un sens.
Que la création d'une machine soit interprétable semble cependant signifier quelque chose de nouveau. Cela signifie que la totalité du sens d'une œuvre peut se trouver dans le regard de l'interprète! Même si nous décelons une intention artistique à l'origine de l'œuvre d'un automate, nous admettrons facilement que cette dernière n'est qu'une synthèse mécanique. Mais dirons-nous alors que notre regard seul fait naître l'intention du créateur humain de l'art, et que cette intention n'est qu'une synthèse de la nature? Une telle manière de voir semble extrême de prime abord; après tout, l'idée de l'intention humaine nous aide à comprendre une œuvre. Moi, humain, je présuppose le vécu d'un autre humain — son intention de parler de ce vécu — en interprétant ses peintures ou ses textes. Mais est-ce bien plus qu'une béquille cognitive? Les artistes parlent-ils vraiment de leur vécu individuel et isolé? Ce vécu n’englobe-t-il pas l'ensemble du monde qu'ils traversèrent? Le concept d'intention convient si l'on estime que les artistes « créent ». Mais qu'en est-il si l'on considère qu'ils facilitent seulement l'émergence d'une chose? L'œuvre d'un plasticien demeure-t-elle distincte d'une formation végétale ou géologique? Ne s'agit-il pas toujours d'un processus de synthèse et de transformation de la nature par la nature? Distinguer l'art humain de la nature, c’est-à-dire différencier le produit intentionnel du produit émergeant, ne semble possible que si l'on persiste à considérer l'art comme un artifice. Quant à la différence entre une synthèse mécanique de milliards d'observations et une synthèse naturelle, jusqu'à quand pourrons-nous la tenir?
L'art et l'artifice, André Ourednik, dans Robopoïèses, 2021, p.145-148
Le travail autour de ce texte tente une mise en abîme de ses propos autour de l'interprtétation. Pour certains mots de mon choix et en fonction de mes interprétations, j'ai retenu une liste de synonymes trouvés sur cnrtl.fr et classés par pertinence. Le texte est automatisé dans le sens ou il choisit pour chacun de ces mots, le mot en question ou un synonyme à afficher, toutes les trois secondes. Toutes les trois secondes, le texte change de sens, selon les "choix" "aléatoires" de la machine, tout en maintenant un rapport, parfois fragile, avec le sens de base du texte.
http://work.pratiquesnumeriques.be/2021-2022/texts/mondher/extext/
travail autour de bna-bbot
Quelques pistes :
QUARTIER IMAGINAIRE (c'est quoi comme projet ?)
1633---04---BNA-BBOT (hum, réflexions, perdu)
1633---01---BNA-BBOT (craquements, bruits, volume, violence sonore, perceptions sonores)
1633---03---BNA-BBOT (bruciel)
1633---16---BNA-BBOT (des "euuuh..")
1633---18---BNA-BBOT (des "euuuh..")
1633---19---BNA-BBOT (bcp de "euuuh..", "que dire d'autre?", ...)
Termes :
1633---04---BNA-BBOT :
Euh, nous, nous nous situons, (existe) pas encore, je sais plus, et…, j’essaie de revenir à l’année euh.., attendez on se trouve où ?, ici je crois, attendez j’essaie de retrouver (l’église), je suis complètement perdu là, je crois que c’est ici, ah non c’est ici, n’est pas encore tracé mais euh, ne peut pas aller plus loin, ah oui voilà, mmmh, ma maison se trouve euh.., pas ça, c’est une de celle-ci, je crois que c’est celle-là, voilà, attendez oui oui c’est ça, mais oui c’est ça et voilà, ah non non c’est celle-là pardon, là je ne reconnais pas ça c’est ça.
1633---19---BNA-BBOT :
Euh..je.., et puis euh.., que dire d’autre, pas une piste suggérée, mpf, les aberrations de la vie, on va essayer de faire bouger les choses c’est pas évident, c’est plus subtil que ça sans doute dans la réalité.
Mots-clés :
doute, évocation, mémoire, impression, impermanence, savoir, oubli, trace, incertitude, interprétation, pensée, sens
Playlist :
https://bna-bbot.be/fr/database/albums/?favorites=ee4b00d94735b38ca30b985680faac68
Dimensions de ce travail :
Divagations autour du doute comme départ. Mise en place d’un système de pensées à la fois de surface et absolu. Ne pas définir le sujet mais l’enrichir, l’accompagner de matière à penser, ouvrir des pistes, favoriser la pluralité d’état des choses et le non-aboutissement d’une pensée, par les prismes de mes perceptions et de ce que je ne sais pas. Ne pas prendre position mais restituer un cheminement de pensées instantané, quotidien. Une enquête errante, à vide, sans volonté de résultat ou de trouvaille, une cartographie éclatée sans territoire.
Tourner autour du pot, dessiner des contours, remplir le pot, en positif et en négatif ; pas de manichéisme, un positif et un négatif imagé pour approcher une forme (de pensée) et ce qu’elle peut exprimer, la révéler par ce qui peut l’approcher, sans la définir, sans la finir, sans début et sans fin.
Forme de ce travail :
Un système protéiforme de contenus qui empêche que les choses ne soient contenues.
-
Interjections réflexions/souvenirs
https://fr.wikipedia.org/wiki/Interjection
Zététique
https://fr.wikipedia.org/wiki/Z%C3%A9t%C3%A9tique
La zététique est définie par son créateur Henri Broch, comme « l'art du doute », le terme d'art devant être compris au sens médiéval d’habileté, de métier ou de connaissance technique, en clair, de « savoir-faire » didactique qui, sans être une fin en soi, est un moyen pour la réflexion et l’enquête critiques1,2.
Pyrrhon d'Élis
https://fr.wikipedia.org/wiki/Pyrrhon_d%27%C3%89lis
On suppose qu'il était devenu agnostique et s'abstenait de donner son opinion sur tout sujet. Il niait qu'une chose fût bonne ou mauvaise, vraie ou fausse en soi. Il doutait de l'existence de toute chose, disait que nos actions étaient dictées par les habitudes et les conventions et n'admettait pas qu'une chose soit, en elle-même, plutôt ceci que cela. Son attitude semblait ainsi résignée et pessimiste ; il répétait souvent le vers d'Homère : « Les hommes sont semblables aux feuilles des arbres. »
Il est à ce titre considéré comme le créateur du scepticisme (ou plus exactement du pyrrhonisme), mais il ne semble pas avoir eu l'intention de créer un courant de pensée philosophique.
Pyrrhon n'a rien écrit, mais son disciple Timon de Phlionte, les sceptiques tardifs comme Énésidème, et surtout Sextus Empiricus, nous ont laissé des textes dans lesquels ils discutaient de la méthode pour parvenir à l'état d'incompréhension (acatalepsie) et au bonheur de ne savoir absolument rien, c'est-à-dire de n'avoir aucune certitude sur sa propre existence, celle d'autre chose, ou encore la possibilité d'une existence.
Le Livre de l'intranquillité
https://fr.wikipedia.org/wiki/Le_Livre_de_l%27intranquillit%C3%A9
« Le Livre de l’intranquillité est le récit du désenchantement du monde, la chronique suprême de la dérision et de la sagesse mais aussi de l’affirmation que la vie n’est rien si l’art ne vient lui donner un sens. L’art, ici même, est poussé à son paroxysme. » (François Busnel, Le Magazine littéraire, mars 2000)
Henri Michaux :
https://fr.wikipedia.org/wiki/Henri_Michaux
« Procédé : Prenez une large superficie de papier, demeurez assis plutôt que debout, plutôt couché qu'assis, plutôt encore ensommeillé, indifférent à tout, à tout sujet, à tout but, sauf à mettre en mots immédiatement le contenu apparent de votre imagination20. »
L'utilisation de l'aphorisme est expliqué ainsi par Alice Yao Adjoua N’Guessan :
Seuls, ils constituent une unité syntaxique et sémantique. Cette forme met en exergue la fonction cognitive de la poésie. Ces paragraphes condensent une pensée dans la brièveté d’énoncés fortement rythmés pour en faciliter la mémorisation. Cette forme d’écriture est inspirée par l’influence de la culture chinoise et indienne qui a souvent utilisé ces formules pour faire jaillir des réflexions philosophiques avec une portée didactique et mnémotechnique32.
L'aphorisme est donc une façon de « faire jaillir [la] réflexion », il a une portée « didactique et mnémotechnique » : il relève donc de la « langue mimique », puisqu'il est constitutif d'une langue simple, d'une énonciation brève, qui dit les choses de manière efficace, c'est-à-dire simple et facile à retenir. Ainsi, Michaux écrit, dans Les Rêves et la Jambe : « J'ai essayé de dire quelques choses »33. La langue de Michaux veut "dire" les choses, non les représenter, non en donner une impression.
Le perpétuel retour au « panorama dans votre tête »
Bernard Noël explique que Michaux divise la réalité en deux réalités distinctes : celle qui relève du « panorama autour de votre tête » et celle qui relève du « panorama dans votre tête »37. Le panorama autour de la tête, la réalité lui paraît déjà trop exploré et convenu, tout le monde semble le partager. C'est donc au deuxième « panorama » que semble se vouer l'auteur, panorama auquel son œuvre ramène sans cesse. Cette intériorité est le lieu du merveilleux, du fantastique et du conte : c'est son imagination que Michaux donne à voir, avertissant son lecteur de son caractère merveilleux et fantastique (prévenant de ce fait « le lecteur de son aspect le plus superficiel » 38), mais essayant tout de même de l'expliquer dans une langue « mimique ». Ainsi l'œuvre de Michaux, en constante exploration de l'intériorité de son auteur, tourne vite à la quête de soi, à la recherche du « je » qui anime ce corps conçu comme accident (« L'homme n'est qu'une âme à qui il est arrivé un accident »38).
Francis Ponge
Ponge s'évertue, dans Le Parti pris des choses, à accroître cette part irrationnelle au moyen de calembours, d'allitérations, de permutations de lettres, d'analogies, d'associations d'idées (à propos de l'orange, il évoque la « lanterne vénitienne des saveurs »), tout en restant, en apparence, sur une description "à froid". Cette tension extrême des textes diffuse un humour très subtil, lequel couvre d'apparences débonnaires ou futiles un message bien plus tragique et subversif : le "compte tenu des mots" s'avérant impérieux pour tout discours (pas seulement pour les textes du Parti pris), et la forme de ces mots relevant en partie de l'arbitraire linguistique, alors il existe nécessairement une part irrationnelle dans tout discours. Dans une telle perspective, truffer une description en apparence objective et rigoureuse d'éléments irrationnels ressemble, à bien des égards, à un travail de sape systématique de la langue. Commentant son propre travail, Ponge évoque un "anarchiste" en train de construire une "bombe" dont la "poudre" serait l'irrationnel (Entretiens avec Philippe Sollers). Par ailleurs, cette dimension irrationnelle inhérente à tout discours renvoie l'individu à l'absurdité de sa condition. Cependant, Ponge écrit contre le pessimisme existentiel, l’incertitude et l’angoisse métaphysique, le "silence déraisonné du monde" auquel Camus fait référence dans Le Mythe de Sisyphe (« L’absurde naît de cette confrontation entre l’être humain et le silence déraisonné du monde »13), ou encore Pascal (« Le silence éternel des espaces infinis m’effraie14 »). Ponge entend au contraire faire parler les choses : « le monde muet est notre seule patrie » déclare-t-il. Il choisit délibérément des objets finis, modestes, circonscrits, « rien qui flatte ce masochisme humain, rien de désespérant ». En 1954, dans Pratique d’écriture ou l’inachèvement perpétuel15, il déclare :
« À partir du moment où l’on considère les mots comme une matière, il est très agréable de s’en occuper. Tout autant que peut l’être pour un peintre de s’occuper des couleurs et des formes. Très plaisant d’en jouer. (…) Par ailleurs, c’est seulement à partir des propriétés particulières de la matière verbale que peuvent être exprimées certaines choses — ou plutôt les choses. (…) S’agissant de rendre le rapport de l’homme au monde, c’est seulement de cette façon qu’on peut espérer réussir à sortir du manège ennuyeux des sentiments, des idées, des théories, etc. »
Cratylisme
https://fr.wikipedia.org/wiki/Cratylisme
Le cratylisme est une théorie du langage selon laquelle les noms ont un lien direct avec leur signification, comme c'est le cas pour les onomatopées, qui miment les sons produits par tel ou tel être, animal ou objet, mais aussi dans certains mots comme serpent ou souffle. Il s'agit par conséquent d'une théorie naturaliste. Elle s'oppose à la thèse de l'arbitraire du signe de Saussure.
