Présentation de mes objectifs pour mon projet de recherche pour l’Épreuve Synthèse du Programme en TIM
Animer avec des SVG et la bibliothèque Three js, dans un contexte de site WordPress
Dans le but de créer un thème WordPress pour renouveler mon site web personnel présentant mes projets et recherches en arts visuels et multimédia, je souhaite me familiariser avec la création d’animations utilisant des SVG et la bibliothèque Three.js. Ces deux technologies, mêlant art et code, correspondent à mes intérêts artistiques et professionnels et permettent de dynamiser un site.
Démarche
Je prévois de commencer par suivre des tutoriels et lire les documentations respectives pour acquérir les bases nécessaires à la création d’animations avec ces outils. Parallèlement, je mènerai une recherche visuelle afin de concevoir une esthétique pour un thème répondant aux besoins de mon site, ce qui me permettra de conceptualiser les animations que je souhaite développer.
Esthétique recherchée
Étant donné que mes pratiques artistiques s’appuient principalement sur la photographie, aussi bien analogique que numérique, je souhaite créer des animations inspirées par les notions de grain et de pixels, d’ombres et de lumières, ainsi que du spectre électromagnétique. Je souhaite également explorer des effets de réfraction similaires à du verre, voire évoquant l’utilisation d’une loupe ou d’un objectif, en utilisant des shaders dans Three.js. En parallèle, je vais examiner la possibilité de reproduire ces effets avec SVG et CSS, mais aussi d’autres types d’esthétiques, en explorant les filtres pour SVG.
Performance, écologie et accessibilité
Au cours de mes recherches préliminaires, j’ai remarqué que les SVG offrent des performances rapides et légères, tandis que les animations réalisées avec Three.js sont plus exigeantes en termes de ressources matérielles (CPU, GPU) mais aussi de bande passante. Je prévois donc également de comparer les performances et la consommation énergétique de ces deux technologies afin de comprendre leur impact écologique et social, et ainsi prendre des décisions éclairées lors de la conceptualisation et de la réalisation des animations pour mon thème WordPress.
Apprendre à prototyper des sites et des animations avec Figma
Enfin, lors de la conceptualisation et de la maquette des animations et du thème, ainsi que des designs UX et UI, j’apprendrai et utiliserai Figma. Figma est l’outil de prototypage de site web le plus utilisé par les professionnels et je ne le connais pas. Il semble être particulièrement efficace pour le prototypage d’animations. Étant intéressée professionnellement par le design, l’animation et la conception de site web, cet outil me semble indispensable à maitriser. De plus, je suis particulièrement attiré par ses capacités à générer du code, notamment celui des dessins SVG, ce qui s’avère très pertinent dans le contexte de mes recherches actuelles.
Application multimédia
L’application multimédia sera un site web WordPress, destiné à présenter de manière exhaustive mes recherches et mes apprentissages dans la création d’animations SVG, Three.js et en prototypage avec Figma. Chaque semaine, je publierai des articles mettant en lumière mes découvertes, les animations réalisées ainsi que des comparaisons énergétiques et esthétiques entre SVG et Three.js De plus, si le temps le permet, je souhaite approfondir mes connaissances de WordPress en apprenant la programmation de blocs pour Gutenberg.
L’objectif ultime est bien de créer une application qui va au-delà d’un simple blog de recherche, mais plutôt un site présentant également mon portfolio. Par conséquent, un thème WordPress complet intégrant des animations originales et interactives réalisées en SVG et/ou Three.js. De plus, il permettra la migration de contenu actuellement dispersé sur trois sites différents (ndasilva.art, ndasilva.ca et Behance). À travers cette plateforme, je souhaite mettre en valeur mes compétences en animation, en design et en programmation, tout en présentant l’ensemble de mon portfolio en un seul endroit.
