L'animation newschool en html5

425 views

Published on

Présentation effectuée par Christophe Villeneuve (Hello / Sector One) à la Very Important Party (VIP) 2014 organisé par Popsy Team

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
425
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

L'animation newschool en html5

  1. 1. L'animation Newschool en HTML5
  2. 2. Sommaire ● Oldschool / Newschool ● Canvas ● SVG ● WebGL
  3. 3. Qui... est Christophe Villeneuve ?
  4. 4. Newschool
  5. 5. Old school
  6. 6. Canvas ● HTML : Graphics – Canvas 2D – Canvas 3D (WebGL) – SVG
  7. 7. Canvas ● Format Bitmap dynamique ● Gestion par pixels ● Permet de dessiner dans une résolution précise ● Unique nœud dans le DOM...
  8. 8. Exemple HTML5 3b
  9. 9. Elément : Canvas <canvas id='animation' width='320' height='200'> Navigateur non compatible </canvas> <script type="text/javascript"> var canvas = document.getElementById('animation'); var demo = canvas.getContext('2d'); </script>
  10. 10. Scrolltext simple... demo 4 2
  11. 11. Newschool : Scrolltext horizontal var debut = 100; var text = "(c) Hello / Sector One – VIP 2014"; function boucle() { demo.fillRect(0,0,640,480); i = 0; demo.font = "30px arial"; demo.fillStyle = "rgb(255,255,255)"; <!-- Boucle while ici --> debut++; demo.fillStyle = "rgb(0,0,0)"; } setInterval(boucle, 40); ● while(i < text.length) { var left = (800 - (debut * 2)) + (i * 25); demo.fillText( text.charAt(i), left , 100 ); if (i == text.length-1 && left < 0) debut = 0 ; i++; }
  12. 12. Amélioré le résultat par les fonctions grd=demo.createLinearGradient(100,100,100,250); grd.addColorStop(0,'rgba(0,128,255,128)'); grd.addColorStop(1,"#770000" ); demo.fillStyle = grd; Dégradés linéaires demo.fillText( text.charAt(i), left , 150 + (Math.sin(((pas + i ) / 60) * Math.PI) * 50) ); pas++; Effet sur le texte... par exemple... Une vague en Y
  13. 13. Résultat amélioré 5 3
  14. 14. Les objets en HTML5 ● Cercle ● Carré ● Ligne Utilisation – BeginPath(); – arc(x, y, radius, startAngle, endAngle, counterClockwise); – LineWidth = 15; – strokeStyle = couleur; – stroke();
  15. 15. Objets : Cercle var ex = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; ex.beginPath(); ex.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); ex.fillStyle = '#00FFFF'; ex.fill(); ex.lineWidth = 10; ex.strokeStyle = '#000000'; ex.stroke();
  16. 16. Objets : Arc de cercle var ex = canvas.getContext('2d'); var x = canvas.width / 2; var y = canvas.height / 2; var radius = 75; var startAngle = 1.1 * Math.PI; var endAngle = 1.9 * Math.PI; var counterClockwise = false; ex.beginPath(); ex.arc(x, y, radius, startAngle, endAngle, counterClockwise); ex.lineWidth = 15; ex.strokeStyle = 'black'; ex.stroke();
  17. 17. Avec plusieurs objets... mode superposé ex.fillStyle="red"; ex.fillRect(20,20,75,50); ex.globalCompositeOperation="source-over"; ex.fillStyle="blue"; ex.fillRect(50,50,75,50); ex.fillStyle="red"; ex.fillRect(150,20,75,50); ex.globalCompositeOperation="destination-o ver"; ex.fillStyle="blue"; ex.fillRect(180,50,75,50); Résultat Element : globalCompositeOperation
  18. 18. Exemple globalCompositeOperation 8 4
  19. 19. Explications with (graphics) { ratio = width / height; globalCompositeOperation = 'xor'; scale(width / 2 / ratio, height / 2); translate(ratio, 1); lineWidthFactor = 45 / height; Lignes mélangés mode additif For (position ligne par ligne) { Begin nouveau point For (point par point) { Calcul de forme par rapport à la sphere (x,y,z) Enlever le contour x,y,z Transition, superposition en x,y,z Affiche du point 2D en x,y Définit la couleur et luminosité des points: (r,g,b) (w,l) If (point en 1er plan) { If (point visible par rapport aux autre lignes) { Affiche le segment en x,y } } else { Cache le point } Position du point départ ligne x,y } } Calcul position par rapport au canvas
  20. 20. Amélioré le résultat par les fonctions <audio src="zik.mp3" autoplay> Navigateur non compatible pour l'audio </audio> Musique ScrollText
  21. 21. Animation + musique 10
  22. 22. SVG ● Signifie Scalable Vector Graphics ● Gère les images au format léger ● Format vectoriel en XML ● Mémorise le 'graph' objet en mémoire dans le DOM ● Couplage à CSS
  23. 23. Les bases du SVG <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text x="5" y="190" transform="translate(40) rotate(-45 10 50)" >Very Important Party</text> </svg> Texte Habillage <rect x="40" y="5" height="110" width="110" style="stroke:#ff0000; fill: #CFCFCF;" transform="translate(30) rotate(28 50 35)"> </rect>
  24. 24. Habiller le SVG <defs> <linearGradient id="effetgradient" x1="0%" y1="20%" x2="10%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#FF44AA" stop-opacity="1"/> <stop offset="100%" stop-color="#000066" stop-opacity="1"/> </linearGradient> </defs> <rect x="10" y="10" width="75" height="100" rx="10" ry="10" style="fill:url(#effetgradient); stroke: #005000; stroke-width: 2;" />
  25. 25. Animer le SVG 50
  26. 26. Le code de l'animation SVG <svg> <rect width="100" height="50"> <animate attributeName="width" attributeType="XML" fill="freeze" from="0" to="300" begin="0s" dur="3s"/> </rect> </svg>
  27. 27. On bouge avec le SVG 51
  28. 28. WebGL ● Balise canvas ● Couplage avec Blender ou logiciel modelage ● 3D ● Sharders ●
  29. 29. WebGL façon simple <canvas id='balisewebgl'></canvas> <script> var balisewebgl = document.getElementById('balisewebgl'); var webGL = balisewebgl.getContext('experimental-webgl'); webGL.clearColor(0,1,0,1); webGL.clear(webGL.COLOR_BUFFER_BIT); </script>
  30. 30. Shader en 3D 62
  31. 31. Explication exemple : The vertex shader (1/2) <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 aVertexPosition; attribute vec4 aVertexColor; attribute vec2 aTextureCoord; shader execution. uniform mat4 uMVMatrix; uniform mat4 uPMatrix; uniform float fTime; //interpolation varying vec4 vColor; // Coordonnées de la texture varying vec2 vTextureCoord; ● void main(void) { ● vec3 pos=aVertexPosition; ● // -- définir les coordonnées X et Y et Z ● pos.x += cos(fTime + (aVertexPosition.z/4.0)); ● pos.y += sin(fTime + (aVertexPosition.z/4.0)); ● // -- transforme the vertex ● gl_Position = uPMatrix * uMVMatrix * vec4(pos, 1.0); ● ● vColor = aVertexColor; ● // Simule l'illusion de mouvemnt ● vec2 texcoord=aTextureCoord; ● texcoord.y = texcoord.y + (fTime); ● ● // -- copier la texture ● vTextureCoord = texcoord; ● } ● </script>
  32. 32. Explication exemple : Fragment shader (2/2) <script id="shader-fs" type="x-shader/x-fragment"> #ifdef GL_ES precision highp float; #endif uniform sampler2D uSampler; varying vec4 vColor; varying vec2 vTextureCoord; void main(void) { // -- récupère la valeur du pixel vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); // -- multiplie le pixel texture avec la couleur du vertex gl_FragColor = vColor * textureColor; } </script>
  33. 33. Cube 64
  34. 34. Explication Cube Pas de commentaires
  35. 35. Merci ● Code source inspiré du web Questions @hellosct1 @neuro_paris

×