Newschool partie1 methode HTML5
-
Upload
neuros -
Category
Technology
-
view
498 -
download
2
description
Transcript of Newschool partie1 methode HTML5
nAcademy Le 12 février 2014 Neuros -
NewschoolMé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
• Ordinateur grand public
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
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
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 = (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;
}
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)
– Inline SVG
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 compatible
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('animation');
var demo = canvas.getContext('2d');
</script>
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 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++;
}
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
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, radius, startAngle, endAngle, counterClockwise);
– LineWidth = 15;
– strokeStyle = couleur;
– stroke();
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();
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();
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
nAcademy Le 12 février 2014 Neuros -
Exemple globalCompositeOperation
8
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
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
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
@hellosct1
@neuro_paris
Prochainement