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

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