27
nAcademy Le 12 février 2014 Neuros - Newschool Méthode HTML 5 (Partie 1) Christophe Villeneuve

Newschool partie1 methode HTML5

  • Upload
    neuros

  • View
    497

  • Download
    2

Embed Size (px)

DESCRIPTION

Présentation à la nAcademy (Février 2014) : Newschool partie 1 Méthode HTML 5 par Christophe Villeneuve

Citation preview

Page 1: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

NewschoolMéthode HTML 5 (Partie 1)

Christophe Villeneuve

Page 2: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Sommaire

• Oldschool

• Le creux de la vague

• Newschool

• ...

Page 3: Newschool partie1 methode HTML5

Oldschool

Page 4: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Lancement du début... Oldschool

• BOOM des 80

• Les ordinateurs deviennent accessible

• Ordinateur grand public

Page 5: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Les prouesses

• Exploitée la puissance de la machine– Disquette, limitation du nombre de pistes

• Programmation système (pas de 3D)

• Réalisation artistique

• Musique

© The Replicants

0

Page 6: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

L'univers de la démoscène

• Appelé scène démo• Sous culture informatique

• But• Création artistique sous forme

de programme

• 3 domaines• Musique Assistée par Ordinateur

• Infographie

• Programmation

Page 7: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Atari

© Sector One / Dune

1

Page 8: Newschool partie1 methode HTML5

Le creux de la vague

Page 9: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Détection des navigateurs

window.onerror=null;

n = (document.layers) ? 1:0;

ie = (document.all) ? 1:0;

if (n)

{

var doc = "document.";

var docleft = ".left";

var doctop = ".top";

var docstyle = "";

var hautfenetre = window.innerWidth;

var largfenetre = window.innerHeight;

var layerRef="document.layers";

var styleRef="";

}

else if (ie)

{

doc = "document.all.";

docleft = ".left";

doctop = ".top";

docstyle = ".style";

hautfenetre=screen.height;

largfenetre=screen.width;

}

Page 10: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Exemple javascript

3

Page 11: Newschool partie1 methode HTML5

Newschool

Page 12: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

La puissance de l'animation HTML 5

• HTML : Graphics– Canvas 2D

– Canvas 3D (WebGL)

– Inline SVG

Page 13: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Exemple HTML5

3b

Page 14: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

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>

Page 15: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Scrolltext simple... demo

4

Page 16: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Newschool : Scrolltext horizontal

var debut = 100;

var text = "(c) Christophe Villeneuve / Neuros - 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++;

}

Page 17: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

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

Page 18: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Résultat amélioré

5

Page 19: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Les objets en HTML5

• Cercle

• Carré

• Ligne

Utilisation– BeginPath();

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

– LineWidth = 15;

– strokeStyle = couleur;

– stroke();

Page 20: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

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

Page 21: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

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

Page 22: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

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

Page 23: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Exemple globalCompositeOperation

8

Page 24: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

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

Page 25: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Amélioré le résultat par les fonctions

<audio src="zik.mp3" autoplay>

Navigateur non compatible pour l'audio

</audio>

Musique

ScrollText

Page 26: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Animation + musique

10c

Page 27: Newschool partie1 methode HTML5

nAcademy Le 12 février 2014 Neuros -

Les autres parties possibilités

• SVG... le vectoriel

• WebGL... la 3D

Questions

@hellosct1

@neuro_paris

Prochainement