Le NewSchool en web

305 vues

Publié le

Présentation effectuée au Festival de la création numérique par Christophe Villeneuve (Hello / Sector One) à la Very Important Party (VIP) 2016 organisé par Popsy Team
sur le framework d'animation CODEF

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
305
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le NewSchool en web

  1. 1. Le 10 juin 2016Very Important Party (VIP) Le NewSchool en Web Christophe Villeneuve @hellosct1
  2. 2. Le 10 juin 2016Very Important Party (VIP) Sommaire ● Approche ● Mutation ● Le NewSchool : CODEF ●
  3. 3. Le 10 juin 2016Very Important Party (VIP) Approche
  4. 4. Le 10 juin 2016Very Important Party (VIP) OldSchool
  5. 5. Le 10 juin 2016Very Important Party (VIP) CrackTro
  6. 6. Le 10 juin 2016Very Important Party (VIP) Mutation
  7. 7. Le 10 juin 2016Very Important Party (VIP) La mutation : Le Web ● HTML / HTML 5 ● Javascript ● Flash ● CSS ● Canvas / WebGL
  8. 8. Le 10 juin 2016Very Important Party (VIP) NewSchool
  9. 9. Le 10 juin 2016Very Important Party (VIP) CODEF ● Canvas Oldshool Demo Effect Framework ● © Antoine “NONAMENO” Santo ● Framework Open Source ● Réaliser des animations facilement ● Spécifique animation ● Plateforme de réalisation – WAB (We Are Back)
  10. 10. Le 10 juin 2016Very Important Party (VIP) We Are Back url : http://wab.com
  11. 11. Le 10 juin 2016Very Important Party (VIP) Animation Simple Script : tutorials05_core.html
  12. 12. Le 10 juin 2016Very Important Party (VIP) Code source function go(){ mycanvas.fill('#000000'); myimage.draw(mycanvas,myimageX,200); myimageX+=myimageMove; if(myimageX>640-myimage.img.width) myimageMove=-1; if(myimageX<0) myimageMove=1; requestAnimFrame( go ); }
  13. 13. Le 10 juin 2016Very Important Party (VIP) 3d Script : tutorials67_3d.html
  14. 14. Le 10 juin 2016Very Important Party (VIP) Code myobjvert=[ {x:-100, y:0, z: 100}, {x: 100, y:0, z: 100}, {x: 100, y:0, z: -100}, {x:-100, y:0, z: -100}, {x:0, y: 200, z: 0}, {x:0, y:-200, z: 0}, ]; var myimage=new image('vip2016.png'); myobj=[ {p1:1, p2:4, p3:0, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1, params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })}, {p1:2, p2:4, p3:1, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1, params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })}, {p1:3, p2:4, p3:2, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1, params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })}, {p1:0, p2:4, p3:3, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1, params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })}, {p1:0, p2:5, p3:1, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1, params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })}, {p1:1, p2:5, p3:2, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1, params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })}, {p1:2, p2:5, p3:3, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1, params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })}, {p1:3, p2:5, p3:0, u1:1,v1:1, u2:0.5,v2:0, u3:0,v3:1, params:new MeshBasicMaterial({ map: new Texture( myimage.img ), opacity:0.4 })}, ];
  15. 15. Le 10 juin 2016Very Important Party (VIP) Code (2/2) function go(){ mycanvas.fill('#000000'); my3d.group.rotation.x+=0.01; my3d.group.rotation.y+=0.03; my3d.group.rotation.z+=0.06; my3d.draw(); requestAnimFrame( go ); }
  16. 16. Le 10 juin 2016Very Important Party (VIP) FAST COMPO
  17. 17. Le 10 juin 2016Very Important Party (VIP) Insertion en HTML <!DOCTYPE HTML> <html> <head> </head> <body onLoad="init();"> <center> <div id="main"></div> </center> </body> </html> Emplacement de votre code JS <script></script>
  18. 18. Le 10 juin 2016Very Important Party (VIP) Code
  19. 19. Le 10 juin 2016Very Important Party (VIP) Coder (1/3) ● Format compatible – HTML – JS – CSS
  20. 20. Le 10 juin 2016Very Important Party (VIP) Coder (2/3) <script> var myfont = new image('media/font2.png'); var mycanvas; var myscrolltext; var myscrollparam=[ {myvalue: 0, amp: 125, inc:0.2, offset: -0.04},]; function init(){ mycanvas=new canvas(640,480,"main"); myfont.initTile(32,32,32); myscrolltext = new scrolltext_horizontal(); myscrolltext.scrtxt="VERY IMPORTANT PARTY 2016 "; myscrolltext.init(mycanvas,myfont,1,myscrollparam); go(); }
  21. 21. Le 10 juin 2016Very Important Party (VIP) Coder (3/3) function go(){ mycanvas.fill('#000000'); myscrolltext.draw(240-16); requestAnimFrame( go ); } </script>
  22. 22. Le 10 juin 2016Very Important Party (VIP) Résultat Script : tutorials31_scrolltext.html
  23. 23. Le 10 juin 2016Very Important Party (VIP) Graphisme
  24. 24. Le 10 juin 2016Very Important Party (VIP) Afficher un Graph (1/2) ● Format compatible – JPEG – PNG – GIF
  25. 25. Le 10 juin 2016Very Important Party (VIP) Afficher un Graph (2/2) <script src="codef/codef_core.js"></script> <script> var myimage=new image('vip2016.png'); var mycanvas; function init() { mycanvas=new canvas(640,480,"main"); myimage.setmidhandle(); go(); } function go() { mycanvas.fill('#000000'); myimage.draw(mycanvas,150,250); requestAnimFrame( go ); } </script>
  26. 26. Le 10 juin 2016Very Important Party (VIP) Résultat Script : tutorials20_fx.html
  27. 27. Le 10 juin 2016Very Important Party (VIP) Musique
  28. 28. Le 10 juin 2016Very Important Party (VIP) Jouer une musique (1/2) ● Format compatible – YM – MOD – XM
  29. 29. Le 10 juin 2016Very Important Party (VIP) Jouer une musique <script src=" http://codef.santo.fr/codef/codef_music.js"> </script> <script> var player = new music("MK"); //player.stereo(true); player.LoadAndRun('../media/hmd3.mod'); </script>
  30. 30. Le 10 juin 2016Very Important Party (VIP) Résultat Script : tutorials81_music.html
  31. 31. Qui ??? Christophe Villeneuve mozilla reps - firefox os - afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – Libre@toi – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – ausy - elephpant
  32. 32. Le 10 juin 2016Very Important Party (VIP) Liens ● Site Officiel – http://codef.santo.fr/ ● Code source – https://github.com/N0NameN0/CODEF ● Production – http://wab.com/

×