Archives du mot-clé web

Wikifémia : La réseau des computer grrrls

Voir la version en ligne de l’application.

« Wikifémia, projet de Roberte la Rousse, regroupe une série de performances et d’installations basées sur des biographies de femmes remarquables telles qu’elles figurent dans Wikipédia. « 

Une application web de visualisation de donnée pour le collectif Roberte la Rousse. Manipulée en direct lors des performance du collectif et exposée dans le centre documentation de la Gaîté Lyrique pendant l’exposition « Computer Grrrls« , elle permet de naviguer entres les pages Wikipédia de femmes remarquables concernant un sujet ou une thématique choisie.

Introduction au code créatif avec p5js

Trois jours de découverte du code créatif avec des étudiants de l’École Supérieure des Beaux Arts d’Angers.

Les esquisses

Ces applications de dessin ont été codées par les étudiants pendant l’atelier :

Les ressources

Chronophotographie animée, version web

L’effet de chronophotographie animé repose sur un principe simple, même si ça peut être un peu délicat à mettre en œuvre avec une source vidéo en direct.

Cet article présente une astuce pour l’appliquer à une animation de type gif, c’est à dire sur une petite série d’image, et l’animer avec javascript.

Voici le principe : on place les images dans une liste d’objets disposés en ligne. À chaque fois qu’on souhaite faire avancer l’animation, il suffit de prendre le premier élément de la liste et de le placer après le dernier.

En utilisant jQuery, ça tient en trois lignes :

var first = $('.container').find('.anim-item).first();
var last = $('.container').find('.anim-item).last();
last.after(first);

Où ‘.container’ est la classe du div qui contient les div ‘.anim-item’ qui contiennent chacun une image.

Pour animer en continu, on peut utiliser la fonction suivante :

function anim(delay) {
  setTimeout(function(){
    var first = $('.container').find('.img-item).first();
    var last = $('.container').find('.img-item).last();
    last.after(first);
    anim(delay);
  }, delay);
}

Il suffit d’appeler une fois cette fonction anim() après avoir chargé les images. Le paramètre -delay- correspond au temps de rafraîchissement de l’image en ms.