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

1. L'animation Newschool en HTML5

2. Sommaire
● Oldschool / Newschool
● Canvas
● SVG
● WebGL

3. Qui... est Christophe Villeneuve ?

4. Newschool

5. Old school

7. Canvas
● HTML : Graphics
– Canvas 2D
– Canvas 3D (WebGL)
– SVG

8. Canvas
● Format Bitmap dynamique
● Gestion par pixels
● Permet de dessiner dans une résolution précise
● Unique nœud dans le DOM...

9. Exemple HTML5
3b

10. 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>

11. Scrolltext simple... demo
4
2

12. 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++;
}

13. 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

14. Résultat amélioré
5
3

15. Les objets en HTML5
● Cercle
● Carré
● Ligne
Utilisation
– BeginPath();
– arc(x, y, radius,
startAngle, endAngle,
counterClockwise);
– LineWidth = 15;
– strokeStyle = couleur;
– stroke();

16. 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();

17. 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();

18. 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

19. Exemple globalCompositeOperation
8
4

20. 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

21. Amélioré le résultat par les fonctions
<audio src="zik.mp3" autoplay>
Navigateur non compatible pour l'audio
</audio>
Musique
ScrollText

22. Animation + musique
10

24. 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

25. 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>

26. 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;" />

27. Animer le SVG
50

28. 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>

29. On bouge avec le SVG
51

31. WebGL
● Balise canvas
● Couplage avec Blender ou logiciel modelage
● 3D
● Sharders
●

32. 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>

33. Shader en 3D
62

34. 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>

35. 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>

36. Cube
64

37. Explication Cube
Pas de commentaires

38. Merci
● Code source inspiré du web
Questions
@hellosct1
@neuro_paris