nAcademy Le 12 février 2014 Neuros -
Newschool
Méthode HTML 5 (Partie 1)
Christophe Villeneuve
nAcademy Le 12 février 2014 Neuros -
Sommaire
• Oldschool
• Le creux de la vague
• Newschool
• ...
Oldschool
nAcademy Le 12 février 2014 Neuros -
Lancement du début... Oldschool
• BOOM des 80
• Les ordinateurs
deviennent accessible...
nAcademy Le 12 février 2014 Neuros -
Les prouesses
• Exploitée la puissance de la machine
– Disquette, limitation du nombr...
nAcademy Le 12 février 2014 Neuros -
L'univers de la démoscène
• Appelé scène démo
• Sous culture informatique
• But
• Cré...
nAcademy Le 12 février 2014 Neuros -
Atari
© Sector One / Dune
1
Le creux de la vague
nAcademy Le 12 février 2014 Neuros -
Détection des navigateurs
window.onerror=null;
n = (document.layers) ? 1:0;
ie = (doc...
nAcademy Le 12 février 2014 Neuros -
Exemple javascript
3
Newschool
nAcademy Le 12 février 2014 Neuros -
La puissance de l'animation HTML 5
• HTML : Graphics
– Canvas 2D
– Canvas 3D (WebGL)
...
nAcademy Le 12 février 2014 Neuros -
Exemple HTML5
3b
nAcademy Le 12 février 2014 Neuros -
Elément : Canvas
<canvas id='animation' width='320' height='200'>
Navigateur non comp...
nAcademy Le 12 février 2014 Neuros -
Scrolltext simple... demo
4
nAcademy Le 12 février 2014 Neuros -
Newschool : Scrolltext horizontal
var debut = 100;
var text = "(c) Christophe Villene...
nAcademy Le 12 février 2014 Neuros -
Amélioré le résultat par les fonctions
grd=demo.createLinearGradient(100,100,100,250)...
nAcademy Le 12 février 2014 Neuros -
Résultat amélioré
5
nAcademy Le 12 février 2014 Neuros -
Les objets en HTML5
• Cercle
• Carré
• Ligne
Utilisation
– BeginPath();
– arc(x, y, r...
nAcademy Le 12 février 2014 Neuros -
Objets : Cercle
var ex = canvas.getContext('2d');
var centerX = canvas.width / 2;
var...
nAcademy Le 12 février 2014 Neuros -
Objets : Arc de cercle
var ex = canvas.getContext('2d');
var x = canvas.width / 2;
va...
nAcademy Le 12 février 2014 Neuros -
Avec plusieurs objets... mode superposé
ex.fillStyle="red";
ex.fillRect(20,20,75,50);...
nAcademy Le 12 février 2014 Neuros -
Exemple globalCompositeOperation
8
nAcademy Le 12 février 2014 Neuros -
Explications
with (graphics) {
ratio = width / height;
globalCompositeOperation = 'xo...
nAcademy Le 12 février 2014 Neuros -
Amélioré le résultat par les fonctions
<audio src="zik.mp3" autoplay>
Navigateur non ...
nAcademy Le 12 février 2014 Neuros -
Animation + musique
10c
nAcademy Le 12 février 2014 Neuros -
Les autres parties possibilités
• SVG... le vectoriel
• WebGL... la 3D
Questions
@hel...
Prochain SlideShare
Chargement dans…5
×

Newschool partie1 methode HTML5

992 vues

Publié le

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

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
992
Sur SlideShare
0
Issues des intégrations
0
Intégrations
132
Actions
Partages
0
Téléchargements
5
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Newschool partie1 methode HTML5

  1. 1. nAcademy Le 12 février 2014 Neuros - Newschool Méthode HTML 5 (Partie 1) Christophe Villeneuve
  2. 2. nAcademy Le 12 février 2014 Neuros - Sommaire • Oldschool • Le creux de la vague • Newschool • ...
  3. 3. Oldschool
  4. 4. nAcademy Le 12 février 2014 Neuros - Lancement du début... Oldschool • BOOM des 80 • Les ordinateurs deviennent accessible • Ordinateur grand public
  5. 5. 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
  6. 6. 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
  7. 7. nAcademy Le 12 février 2014 Neuros - Atari © Sector One / Dune 1
  8. 8. Le creux de la vague
  9. 9. 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; }
  10. 10. nAcademy Le 12 février 2014 Neuros - Exemple javascript 3
  11. 11. Newschool
  12. 12. nAcademy Le 12 février 2014 Neuros - La puissance de l'animation HTML 5 • HTML : Graphics – Canvas 2D – Canvas 3D (WebGL) – Inline SVG
  13. 13. nAcademy Le 12 février 2014 Neuros - Exemple HTML5 3b
  14. 14. 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>
  15. 15. nAcademy Le 12 février 2014 Neuros - Scrolltext simple... demo 4
  16. 16. 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++; }
  17. 17. 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
  18. 18. nAcademy Le 12 février 2014 Neuros - Résultat amélioré 5
  19. 19. 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();
  20. 20. 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();
  21. 21. 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();
  22. 22. 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
  23. 23. nAcademy Le 12 février 2014 Neuros - Exemple globalCompositeOperation 8
  24. 24. 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
  25. 25. 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
  26. 26. nAcademy Le 12 février 2014 Neuros - Animation + musique 10c
  27. 27. nAcademy Le 12 février 2014 Neuros - Les autres parties possibilités • SVG... le vectoriel • WebGL... la 3D Questions @hellosct1 @neuro_paris Prochainement

×