Apéro creative coding + dev playgrounds

Une introduction de Maïa & JB de l'association WdStr (Webdesigner Strasbourg).
L'objectif était de lancer les discussions autours des plateformes de creative coding en préambule de démonstrations en live.

⏱20min

---
WdStr #68
20/11/2019
Strasbourg

---
CC BY-NC 4.0
https://twitter.com/cookingmaia
https://twitter.com/justinbasile
https://twitter.com/WdStr

Transcript

1. CREATIVE CODING .helloworld Présenté par @cookingmaia & @justinbasile
2. WDSTR, WTF ? FACEBOOK TWITTER
4. 1968 1968 “Mother of All Demos” by SRI’s Doug Engelbart and Team
5. THE NIGHTWATCH VS. THE WILDLINGS TOOLS
6. CODEPEN ➡ https://codepen.io/ • Large choix de langages, préprocesseurs, etc. • Communauté active, c’est un réseau social • Challenges • Newsletter pleine de beaux exemples
7. JSFIDDLE ➡ https://jsfiddle.net/ • Uniquement pour le partage et l’intégration (page, article de blog, etc.) • Pas de communauté ?
8. CODESANDBOX ➡ https://codesandbox.io/ • Avantages : pouvoir utiliser React, VueJS, etc. • Permet le partage de composants back-end • Node.js & npm y sont installés, vous pouvez donc y ajouter n’importe quel package npm !
9. SHADERTOY ➡ https://www.shadertoy.com/ • Orienté 3D
10. REGARDE TOUT CE QU’ON PEUT FAIRE
11. PARTAGE DE SNIPPETS Démo des icônes “duotone” par FontAwesome : - https://codepen.io/fontawesome/pen/LKbQrw - https://codepen.io/fontawesome/pen/EBNQRr
12. UN MEDIUM POUR ... Réaliser des animations par exemple un loader original : https://codepen.io/nikhil8krishnan/pen/rVoXJa Animation de texte : https://codepen.io/flyingfisch/pen/exBKVJ Spinning circles : https://codepen.io/Costik/pen/GXxqdO Un bouton : https://codepen.io/kathykato/pen/gOOjgmP
13. Réaliser des mise en page inédite : https://codepen.io/andybarefoot/full/PBPrex/ UN MEDIUM POUR ...
14. ET LE FUN DANS TOUT ÇA ? Custom Scrollbar Example : https://codepen.io/chriscoyier/pen/wQgXPV The div that looks different in every browser : https://codepen.io/MartijnCuppens/pen/MXojmw Paw Clap Button : https://codepen.io/aaroniker/pen/VwwxopM Candy Clicker : https://codepen.io/team/keyframers/pen/wvvoBQW Eyes Follow Cursor : https://codepen.io/electricgarden/pen/YzzWMyM Chibi Character Generator : https://codepen.io/michaelsboost/pen/VwwvgXB
15. CREATIVE BAC-À-SABLING
16. PURE CSS CSS Grid: Floor Plan : https://codepen.io/oliviale/pen/moLrBq Pure CSS Only Portrait - Isla : https://codepen.io/ivorjetski/pen/dBYWWZ Pure CSS Still Life - Water : https://codepen.io/ivorjetski/pen/xMJoYO Hover, I dare you! : https://codepen.io/ivorjetski/pen/gOOXbLP Pure CSS Lace par Diana Smith : https://diana-adrianne.com/purecss-lace/ Moustached Nanny : https://codepen.io/gabriel-ortiz/pen/QWWqxaP
17. DES CANVAS Food fling : https://codepen.io/rachsmith/pen/wVeRKQ Worms : https://codepen.io/jlong/pen/pKENpM Shapes in a grid : https://codepen.io/sergiulucutar/pen/MWWrdoP Curtain creeper : https://codepen.io/Gthibaud/pen/WNNozaB
18. - WebGL Fluid animation : https://codepen.io/valgaze/pen/OYvaBM (https://paveldogreat.github.io/WebGL-Fluid-Simulation/) - Strange Tubes #2 : https://codepen.io/soju22/pen/JzzvbR - Steam spooky house : https://codepen.io/desandro/pen/OJLYxEB 3D & WEBGL
19. ⌨ ET VOUS ET VOUS ⌨
20. - p5js-3d-orbit : https://glitch.com/~p5js-3d-orbit - cursor-gravity : https://glitch.com/~cursor-gravity ANTOINE
21. - Codepen avec plusieurs projets : https://codepen.io/titouanmathis/ TITOUAN
22. - Exemple de ce que l’on peut faire avec P5LIVE : https://teddavis.org/p5live/ SÉBASTIEN
23. MERCI