Nous parcourons ensemble les différentes possibiltés offertes par le code, et en particulier Javascript à travers une série d'outils, d'artistes et de pratiques représentatives. Avant de commencer, nous allons également mettre en place un environnement de développement agréable, pratique et flexible.

Programme

• Objectifs / attentes
• Spécificités de différents langages: Processing, P5js, Python, etc.
• Contenu du workshop
• Editeurs (Atom, Brackets, Sublime, VSCode...)
• De l'éditeur de P5js à VSCode
• A/R P5*js et JS Natif
• SOus le capot (avant-goût)
• Architecture du projet / Articulation de JS avec HTML et CSS
• Articulation avec B1 et B2 (workshop, web..)
• Mise en ligne sur Netlify
• Variables et types
• Fonctions

Notes sur les technos et bibliothèques JS

• Data: JSON colors
• WebGL (Mario)
• https://codepen.io/
• Paper.js
• https://codepen.io/sbuellet/pen/JqqKMp
• Paged.js
• A Frame
• Teachable Machine
• SASS/SCSS
• Git / Github
• SEO/OG
• Node.js
• WebMidi.js
• Génération de sites statiques (+ frameworks JS)
• Domaines
• On parcourt les travaux au début du cours
• https://www.fxhash.xyz/generative/241/collection

Liens

• Le site de la bibliothèque P5js
• Processing.org
• Netlify
• Visual Studio Code
• VSCode themes + theme par workspace
• 15 astuces utiles pour VSCode
• Le langage Markdown
• Nicolas Sassoon + sur le site de la Galerie Charlot (Paris)
• Git + page wikipedia
• Github
• Le repo P5js
• Fira Code (font)
• Three.js + this
• JS for artists
• https://www.fxhash.xyz/generative/slug/ripped
• https://jsoncrack.com/
• https://codepen.io/askd/pen/jZZEeG
• https://icones.js.org/collection/ic
• https://www.metmuseum.org/art/collection
• https://schwittlick.medium.com/feeling-data-conversation-with-marcel-schwittlick-and-julius-voigt-7b876ac05f31

En pratique

• Créer un projet HTML/CSS/JS
• Créer un sketch de 800x800
• Créer un outil de dessin avec au moins une variable aléatoire.
• Mise en ligne sur Netlify

Exemples

• http://www.generative-gestaltung.de/2/
• Open Processing
• Typo: http://parametric.esac-cambrai.net/ + http://www.esac-cambrai.net/wordpress/?page_id=1003
• https://otherside.otherti.me/
• Sketch en background d'une page web
• Programming posters + P5studio > Lien
• https://p5studio.timrodenbroeker.now.sh/
• https://puckey.studio/ + https://puckey.studio/projects/radio-garden
• Exemples P5js (Lauren McCarthy): https://github.com/lmccart/gswp5.js-code
• Morellet: https://www.youtube.com/watch?v=OrlBGi2px1Q
• https://www.courses.tegabrain.com/cc18/artists/
• Capture video
• ml5.org
• Teachable machine
• Data: https://dream.netizen.org/events.html#t