L'animation Newschool en HTML5

Sommaire

● Oldschool / Newschool● Canvas● SVG● WebGL

Qui... est Christophe Villeneuve ?

Newschool

Old school

Canvas

● HTML : Graphics– Canvas 2D

– Canvas 3D (WebGL)

– SVG

Canvas

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

Exemple HTML5

3b

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>

Scrolltext simple... demo

4

2

Newschool : Scrolltext horizontalvar 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++;

}

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

Résultat amélioré

5

3

Les objets en HTML5

● Cercle● Carré● Ligne

Utilisation– BeginPath();

– arc(x, y, radius, startAngle, endAngle, counterClockwise);

– LineWidth = 15;

– strokeStyle = couleur;

– stroke();

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

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

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-over";

ex.fillStyle="blue";

ex.fillRect(180,50,75,50); Résultat

Element : globalCompositeOperation

Exemple globalCompositeOperation

8

4

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

Amélioré le résultat par les fonctions

<audio src="zik.mp3" autoplay>

Navigateur non compatible pour l'audio

</audio>

Musique

ScrollText

Animation + musique

10c

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

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>

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

Animer le SVG

50

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>

On bouge avec le SVG

51

WebGL

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

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>

Shader en 3D

62

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>

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>

Cube

64

Explication Cube

Pas de commentaires

Merci● Code source inspiré du web

Questions

@hellosct1

@neuro_paris