L'animation newschool en html5
-
Upload
christophe-villeneuve -
Category
Internet
-
view
307 -
download
0
description
Transcript of L'animation newschool en html5
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