Your SlideShare is downloading. ×
Newschool partie1 methode HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Newschool partie1 methode HTML5

460
views

Published on

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

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
460
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. nAcademy Le 12 février 2014 Neuros - Newschool Méthode HTML 5 (Partie 1) Christophe Villeneuve
  • 2. nAcademy Le 12 février 2014 Neuros - Sommaire • Oldschool • Le creux de la vague • Newschool • ...
  • 3. Oldschool
  • 4. nAcademy Le 12 février 2014 Neuros - Lancement du début... Oldschool • BOOM des 80 • Les ordinateurs deviennent accessible • Ordinateur grand public
  • 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. 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. nAcademy Le 12 février 2014 Neuros - Atari © Sector One / Dune 1
  • 8. Le creux de la vague
  • 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. nAcademy Le 12 février 2014 Neuros - Exemple javascript 3
  • 11. Newschool
  • 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. nAcademy Le 12 février 2014 Neuros - Exemple HTML5 3b
  • 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. nAcademy Le 12 février 2014 Neuros - Scrolltext simple... demo 4
  • 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. 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. nAcademy Le 12 février 2014 Neuros - Résultat amélioré 5
  • 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. 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. 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. 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. nAcademy Le 12 février 2014 Neuros - Exemple globalCompositeOperation 8
  • 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. 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. nAcademy Le 12 février 2014 Neuros - Animation + musique 10c
  • 27. nAcademy Le 12 février 2014 Neuros - Les autres parties possibilités • SVG... le vectoriel • WebGL... la 3D Questions @hellosct1 @neuro_paris Prochainement