Clément

Présentation

Travaux disponibles sur le site.

Contrainte

Le terme contrainte peut être interprété par l'action d'obliger ou forcer quelqu'un à agir contre sa volonté. On peut la définir comme une obligation créée par les règles en usage dans un milieu. En ce sens, la contrainte peut être physique ou psychologique et être appliquée dans des environnements variés.

Dans le cadre de ces recherches, l'environnement choisi est celui de l'interface, c'est-à-dire une zone de partage et réciprocité entre deux milieux. Celle-ci permet un système d'échanges ou l'information se transforme en influx nerveux. Sur une page web, les informations transmises par l'écran sont tout d'abord captées grâce à l’œil et traitées par le cerveau. Afin de contraindre cette interaction, il est possible d’altérer l'image produite, tant dans son traitement que son organisation.

Premiers essais

Modification de la couleur

• Opacité du texte
• Inversion des couleurs du texte/background

Détourner l'attention de l'utilisateur.rice

• Apparition d'alertes toutes les 3 secondes

Définir les contraintes

Après ces premiers tests, je pense qu'il est nécessaire de sur des types de contraintes plus précis

Final

Code JS

ClementEhtem (discussion)

//INTRO var $conteneur = document.getElementById('hover');

var textBalise = $conteneur.textContent.replace(/\b(\w+)\b/g, "$1");

$conteneur.innerHTML = textBalise;

var $spans = $conteneur.querySelectorAll('span');

for(var $span of $spans){

   console.log($span);
   console.log(this);
   /*
   span.addEventListener('mouseover', function(){
       //console.log(this);
       //console.log(span);
       this.style.color = "black";
   });*/
   $span.addEventListener('mouseover', (e) => {
       console.log(e);
       console.log(e.target);
       e.target.style.color = "black";
   });

}

//SOCOND

function changeColor(){

   $body.style.color = ($body.style.color == "black")?"white":"black";

}

var $body = document.getElementById('second'); $body.style.color = "black";

window.setInterval(changeColor, 20);

//THIRD

const map = (value, x1, y1, x2, y2) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;

const article = document.querySelector('article') const initHeight = article.offsetHeight

let ratio = article.offsetHeightHeight / initHeight

const resizeObserver = new ResizeObserver((e) => {

   console.log(initHeight, article.offsetHeight)
   ratio = article.offsetHeight / initHeight

   document.querySelectorAll('.blur').forEach((p) => {

       // continue
       p.style.filter = `blur(${map(ratio, 0, 1, 0, 5)}px)`

       // discret
       // p.style.filter = `blur(${ratio < .1 ? 0 : 10}px)`
   })

})

resizeObserver.observe(article)

//fourth

var wordsHover = document.getElementById('changesize'); //mots var textBalise = wordsHover.textContent.replace(/\b(\w+)\b/g, "$1"); //lettres wordsHover.innerHTML= textBalise; console.log(textBalise)

//attribue un id à chaque span var tagId = wordsHover.querySelectorAll('span') //console.log(tagId); tagId.forEach((span, index) => { //utilisation de NodeList.forEach

 span.setAttribute('id', `${index}`);

//span.setAttribute('class', `${index}`); });

//donne le nombre de spans var long = tagId.length console.log(long);

//créait une list de valeurs comprise en 0 et le nb de spans const array = Array.from({length: long/3}, () => Math.floor(Math.random() * long)); console.log(array); console.log(array[0]);

for(var value of array){

 var rdmSelect = document.getElementById(value)
 console.log(rdmSelect)
 rdmSelect.style.fontFamily = "arial";
 rdmSelect.style.fontSize = "50px";

}

ClementEhtem (discussion)

• Application des différents effets afin de contraindre la lecture d'un article de Ken Knowlton.