Clément
Sommaire
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
Détourner l'attention de l'utilisateur.rice
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
//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";
}
