PROJET AUTOBLOG


le hollandais volant

Site original : le hollandais volant

⇐ retour index

Dessiner avec de la lumière

lundi 11 janvier 2016 à 19:16
Ce post est un peu différent du reste de mes articles, mais si vous voulez bricoler ou vous amuser (y compris avec des enfants) avec de la peinture et des lasers continuez la lecture.

Ça fait un moment que j’ai fait mon bricolage, mais l’article est écrit suite à la lecture ce cet article de SlowBrain sur le Light Painting : il s’agit d’utiliser un appareil photo en exposition longue devant un mur et d’utiliser un pointeur laser sur ce mur.
L’exposition allongée dans le temps va capter le trait fait par le point du laser. Le dessin qui arrive sur la photo n’est donc pas visible à l’œil nu.

Ce que j’ai fait, c’est un moyen pour justement voir ce trait à l’œil, en utilisant une peinture phosphorescente et un laser. Le dessin fait au laser sera éphémère, mais on pourra le voir à l’œil nu et s’amuser avec.
C’est assez amusant et il y a même quelques remarques scientifiques à tirer de tout ça aussi, notamment en physique quantique.

Matériel


le matériel pour faire du lightpainting phosphorescent avec un laser
Il vous faut un peu de matériel :


Il vous faut aussi un évier et de l’eau pour laver le pinceau à la fin.

Le pointeur laser bleu est trouvable sur le net (eBay, 2 $, FdPIn). Peu importe sa puissante, du moment qu’il soit bleu ou violet.
La peinture phosphorescente est trouvable dans une boutique de maquillage ou de déguisements (Halloween…). Mon produit est acheté sur le net (Amazon, ~7 €, FdPEx) et c’est à la base prévu comme teinture phosphorescente temporaire pour les cheveux (si si : ça brille bien sous la lumière noire en boîte).

Préparation


Il s’agit ici de peindre entièrement et uniformément la feuille avec la peinture phosphorescente.

Ma peinture étant transparente à l’état normale, il est difficile de voir où on en a mis et où il n’y en a pas : l’astuce est de mettre la peinture sous la lumière et de peindre dans le noir.

peinture phosphorescente
N’hésitez pas à en mettre beaucoup : il vous faudra probablement mettre 2 ou 3 couches sur la feuille blanche (avec un séchage de quelques heures entre chaque couche).

Pour tout dire, j’ai presque mis la totalité de mon tube de 100 mL sur une feuille de dimension A4.
Pour aller plus vite, il existe probablement aussi des bombes de peinture phosphorescentes et du papier peint directement phosphorescent, mais c’est moins amusant.

Jouer avec !


Une fois que la peinture est sèche, il suffit de jouer au laser bleu dessus :

light painting with a laser light painting with a laser
Selon la qualité (et la quantité) de peinture, le dessin s’estompera plus ou moins rapidement et même à vu d’œil. N’oubliez pas d’éteindre la lumière : une lueur estompée dans une pièce éclairée et encore parfaitement visible dans une pièce sombre.

Comment ça marche ? Pourquoi il faut un laser bleu ?


La phosphorescence n’est pas à confondre avec la fluorescence.
Un gilet de sécurité jaune qui brille quand on l’éclaire ou vos chaussettes blanches qui brillent sous la lumière noire, c’est la fluorescent : ils arrêtent de briller aussitôt qu’on éteint la lumière.

La phosphorescence, c’est quand l’objet continue de briller plusieurs minutes voire plusieurs heures dans le noir après avoir « absorbé » de la lumière.

Le principe complet est expliqué en détail dans mon article : La différence entre phosphorescence et fluorescence.
Pour faire vite, disons que la matière absorbe la lumière et la réémet. Dans le cas de la phosphorescence, la matière — les électrons en fait — s’excitent et stockent de l’énergie lumineuse qu’elles libèrent un peu plus tard, sous la forme de lumière (verte ici).

Si un laser bleu fonctionne et non un laser vert ou rouge, c’est une question d’énergie : la lumière bleue est plus énergétique que la lumière verte ou rouge. En fait, la lumière bleue est la seule des trois qui soit suffisamment énergétique pour exciter la peinture phosphorescente : seule la lumière bleue peut-être emmagasinée par la peinture et réémise plus tard.

C’est la même raison qui fait que le verre est transparent, mais que l’acier ou le papier sont opaques : la lumière visible n’est pas assez énergétique pour être absorbée par le verre et elle passe donc au travers. L’acier et le papier sont en constitués (chimiquement) de telle sorte que la lumière visible est absorbée : elle ne peut pas les traverser et ces deux matériaux ne sont donc pas transparents.


Note : si vous faites ceci avec des enfants (ce que je conseille : c’est amusant), prenez soin de ne pas les laisser regarder dans le faisceau laser directement (c’est dangereux, surtout la lumière bleue très énergétique).
Dans ce cas, il est conseillé de porter des lunettes qui filtrent la lumière bleue (comme celle là, filtrant le domaine spectral qui inclut la longueur d’onde de votre laser, typiquement de 405 nm pour le bleu).

Youtube lent en HTML5 avec Firefox 42+ ?

dimanche 3 janvier 2016 à 16:30
J’avais fait un tuto pour mettre Flash à jour, mais finalement je me suis totalement passé de Flash. Depuis j’utilise les vidéos web en HTML5, quitte à utiliser des codec proprio comme H264. Ça marchait bien… jusqu’à Firefox v42.

Depuis quelques semaines, le lecteur Youtube HTML5 est incroyablement lent dans Firefox : la vidéo marche bien, mais dès que je veux changer le son, mettre en pause, mettre en plein écran ou changer la résolution, alors ça laaague et c’est lent.

La solution :


Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/47.0.2526.73 Chrome/47.0.2526.73 Safari/537.36

Validez, allez sur Youtube et tout est de nouveau super fluide.

Super hein ?

Vous savez ce que fait la manip ci-dessus ?
Elle fait croire à Youtube que vous utilisez Chromium, le navigateur qui sert de base à Google Chrome (et qui est développé par Google aussi).
Pour le dire autrement, Youtube fonctionne bien dans n’importe quel navigateur. Si c’est si lent dans Firefox, c’est juste que Google veut que ce soit lent dans Firefox. Google : vous êtes des enfoirés.


Modifier l’User-Agent de Firefox fonctionne pour Youtube, mais ça risque néanmoins de provoquer des bugs sur d’autres sites. Je conseille donc d’utiliser une extension comme UA Control qui va pouvoir dire à Firefox de s’identifier comme Chrome(ium) uniquement sur Youtube et normalement partout ailleurs.
Pour vérifier votre User-Agent et voir si l’extension fonctionne, allez sur mon détecteur de navigateur.


ÉDIT : apparemment, je suis ne suis pas le seul chez qui cette manip fonctionne (le post date d’hier).

ÉDIT : je continue mes investigations. J’utilise aussi le module uBlock Origin, pour bloquer les pub et les scripts tiers. Chose intéressante : si je bloque tous les scripts du domaine "Google.com" sur la page youtube, alors ça marche. Plus besoin de changer l’UA.
Il s’agit de bloquer ce script en particulier :
https://apis.google.com/_/scs/abc-static/_/js/k=gapi.gapi.en.aCET_C1s-Ek.O/m=card,gapi_iframes/rt=j/sv=1/d=1/ed=1/am=AAQ/rs=AItRSTOKextu3QAZfV0s_SKuW3vYp-SZuA/cb=gapi.loaded_0
C’est ce script qui fait un test sur la chaîne "Gecko", "Webkit" et d’autres — autrement dit, la détection de navigateur. Bloquez ce script et Youtube marche nickel.

Youtube lent en HTML5 avec Firefox 42+ ?

dimanche 3 janvier 2016 à 16:30
J’avais fait un tuto pour mettre Flash à jour, mais finalement je me suis totalement passé de Flash. Depuis j’utilise les vidéos web en HTML5, quitte à utiliser des codec proprio comme H264. Ça marchait bien… jusqu’à Firefox v42.

Depuis quelques semaines, le lecteur Youtube HTML5 est incroyablement lent dans Firefox : la vidéo marche bien, mais dès que je veux changer le son, mettre en pause, mettre en plein écran ou changer la résolution, alors ça laaague et c’est lent.

La solution :


Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/47.0.2526.73 Chrome/47.0.2526.73 Safari/537.36

Validez, allez sur Youtube et tout est de nouveau super fluide.

Super hein ?

Vous savez ce que fait la manip ci-dessus ?
Elle fait croire à Youtube que vous utilisez Chromium, le navigateur qui sert de base à Google Chrome (et qui est développé par Google aussi).
Pour le dire autrement, Youtube fonctionne bien dans n’importe quel navigateur. Si c’est si lent dans Firefox, c’est juste que Google veut que ce soit lent dans Firefox. Google : vous êtes des enfoirés.


Modifier l’User-Agent de Firefox fonctionne pour Youtube, mais ça risque néanmoins de provoquer des bugs sur d’autres sites. Je conseille donc d’utiliser une extension comme UA Control qui va pouvoir dire à Firefox de s’identifier comme Chrome(ium) uniquement sur Youtube et normalement partout ailleurs.
Pour vérifier votre User-Agent et voir si l’extension fonctionne, allez sur mon détecteur de navigateur.


ÉDIT : apparemment, je suis ne suis pas le seul chez qui cette manip fonctionne (le post date d’hier).

ÉDIT : je continue mes investigations. J’utilise aussi le module uBlock Origin, pour bloquer les pub et les scripts tiers. Chose intéressante : si je bloque tous les scripts du domaine "Google.com" sur la page youtube, alors ça marche. Plus besoin de changer l’UA.
Il s’agit de bloquer ce script en particulier :
https://apis.google.com/_/scs/abc-static/_/js/k=gapi.gapi.en.aCET_C1s-Ek.O/m=card,gapi_iframes/rt=j/sv=1/d=1/ed=1/am=AAQ/rs=AItRSTOKextu3QAZfV0s_SKuW3vYp-SZuA/cb=gapi.loaded_0
C’est ce script qui fait un test sur la chaîne "Gecko", "Webkit" et d’autres — autrement dit, la détection de navigateur. Bloquez ce script et Youtube marche nickel.

[CSS] Utiliser des couleurs relatives

mardi 15 décembre 2015 à 16:53
Le titre n’est pas très clair, je sais.
Vous vous souvenez qu’il faut utiliser des tailles de polices relatives (em, %, en…) plutôt qu’absolues (px, pt, pc…) ? Ceci permet de conserver les échelles de taille de police quand on zoom (deux polices de taille différentes conserveront leur différence de taille quelque soit le zoom).

Ici il s’agit de faire pareil pour les couleurs. Cette astuce va permettre de modifier la couleur principale d’un thème beaucoup plus rapidement.

Imaginons que l’on ait un menu au fond blanc et au texte gris foncé, avec un effet de survol. Au survol, un élément devient gris. Le problème, c’est que le gris rend le texte (déjà grisé) moins lisible :

the font is barely readable on hover
#menu {
	background: white;
}
#menu li {
	color: #888;
}

#menu li:hover {
	background-color: #aaa;
}

Vous me direz qu’on n’a qu’à ajouter une couleur de texte au survol, aussi, ça résoudrait le problème :

#menu li:hover {
	background-color: #aaa;
	color: #333;
}

Oui, ça marche bien.
Mais que se passe t-il si je veux changer la couleur du menu, par exemple passer d’un thème blanc et clair à quelque chose de plus coloré comme du bleu :

changing the background alone is not enough
Ici, je n’ai modifié que la couleur de fond du menu, mais le hover reste gris et ça fait moche. Pour bien faire, il faudrait modifier 4 couleurs : la couleur de fond du menu, la couleur de fond lors du survol, la couleur de la police et la couleur de la police lors du survol.
On a donc 4 choses à modifier simplement pour changer la couleur principale du thème : ce n’est pas pratique.

Il y a pourtant un moyen de gagner du temps : on peut faire en sorte de modifier seulement la couleur de fond pour répercuter le changement de couleur et de contraste sur toute la chaîne des couleurs.
L’idée c’est d’utiliser des polices et des couleurs non pas grises, mais noires semi-transparentes. Comme ça, si le fond change et devient plus foncé, alors une partie de ce changement sera également répercuté sur la couleur de la police, qui deviendra également plus foncée :

hover enhanced lisibility
#menu {
	background: white;
}
#menu li {
	color: rgba(0, 0, 0, .4);
}

#menu li:hover {
	background-color: rgba(0, 0, 0, .3);
}

Et maintenant, il ne suffit de changer que la couleur de fond du menu, et l’ensemble restera toujours lisible et la couleur du hover sera toujours la même que celle du fond, mais en plus foncée. L’ensemble reste donc cohérent :

hover with good colors
On a donc des couleurs qui ne font que changer de luminosité, en conservant la teinte ainsi que la différence de luminosité. Les couleurs de la police et du hover sont donc relatives à la couleur principale.
Tout ceci fonctionne très bien avec les couleurs pas trop saturées (typiques du material design ou du flat design) et claires.

Si vous préférez un thème sombre, et un effet de survol qui éclaircit au lieu d’assombrir, vous pouvez utiliser des non pas du noir semi-transparent, mais du blanc semi-opaque.

Le même principe peut être appliqué aux ombres portées, dégradés, bordures…

[CSS] Utiliser des couleurs relatives

mardi 15 décembre 2015 à 16:53
Le titre n’est pas très clair, je sais.
Vous vous souvenez qu’il faut utiliser des tailles de polices relatives (em, %, en…) plutôt qu’absolues (px, pt, pc…) ? Ceci permet de conserver les échelles de taille de police quand on zoom (deux polices de taille différentes conserveront leur différence de taille quelque soit le zoom).

Ici il s’agit de faire pareil pour les couleurs. Cette astuce va permettre de modifier la couleur principale d’un thème beaucoup plus rapidement.

Imaginons que l’on ait un menu au fond blanc et au texte gris foncé, avec un effet de survol. Au survol, un élément devient gris. Le problème, c’est que le gris rend le texte (déjà grisé) moins lisible :

the font is barely readable on hover
#menu {
	background: white;
}
#menu li {
	color: #888;
}

#menu li:hover {
	background-color: #aaa;
}

Vous me direz qu’on n’a qu’à ajouter une couleur de texte au survol, aussi, ça résoudrait le problème :

#menu li:hover {
	background-color: #aaa;
	color: #333;
}

Oui, ça marche bien.
Mais que se passe t-il si je veux changer la couleur du menu, par exemple passer d’un thème blanc et clair à quelque chose de plus coloré comme du bleu :

changing the background alone is not enough
Ici, je n’ai modifié que la couleur de fond du menu, mais le hover reste gris et ça fait moche. Pour bien faire, il faudrait modifier 4 couleurs : la couleur de fond du menu, la couleur de fond lors du survol, la couleur de la police et la couleur de la police lors du survol.
On a donc 4 choses à modifier simplement pour changer la couleur principale du thème : ce n’est pas pratique.

Il y a pourtant un moyen de gagner du temps : on peut faire en sorte de modifier seulement la couleur de fond pour répercuter le changement de couleur et de contraste sur toute la chaîne des couleurs.
L’idée c’est d’utiliser des polices et des couleurs non pas grises, mais noires semi-transparentes. Comme ça, si le fond change et devient plus foncé, alors une partie de ce changement sera également répercuté sur la couleur de la police, qui deviendra également plus foncée :

hover enhanced lisibility
#menu {
	background: white;
}
#menu li {
	color: rgba(0, 0, 0, .4);
}

#menu li:hover {
	background-color: rgba(0, 0, 0, .3);
}

Et maintenant, il ne suffit de changer que la couleur de fond du menu, et l’ensemble restera toujours lisible et la couleur du hover sera toujours la même que celle du fond, mais en plus foncée. L’ensemble reste donc cohérent :

hover with good colors
On a donc des couleurs qui ne font que changer de luminosité, en conservant la teinte ainsi que la différence de luminosité. Les couleurs de la police et du hover sont donc relatives à la couleur principale.
Tout ceci fonctionne très bien avec les couleurs pas trop saturées (typiques du material design ou du flat design) et claires.

Si vous préférez un thème sombre, et un effet de survol qui éclaircit au lieu d’assombrir, vous pouvez utiliser des non pas du noir semi-transparent, mais du blanc semi-opaque.

Le même principe peut être appliqué aux ombres portées, dégradés, bordures…