Newschool partie1 methode HTML5

  • 439 views
Uploaded 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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
439
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
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