Le FULL Vectoriel
Qui... est Christophe Villeneuve ?
<<
afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – php...
Sommaire
● Bitmap
● Vectoriel avec SVG
● Démo
● Le code de la démo
● Bitmap
Bitmap VS Vectoriel
● Vectoriel
= Pas de perte= pixelisé
Afficher une image 
<img src='atari.png'>
<img src='atari.png' width='100'>
SVG
● Signifie Scalable Vector Graphics
● Format vectoriel en XML
● Supporte 
– Image statique
– Animation et l'interactiv...
Image
1
Définir
● code
<svg 
     width="200px" height="200px" 
     viewBox="0 0 200 200"
     version="1.1"    
     xmlns="http...
Code SVG
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   Version="1.1"    width="1...
Résultat
Texte
Les bases du SVG
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x="5" y...
Carré
2
Définir
● Positionnement
Définir la forme
    <rect 
fill="#AFBCC7" 
stroke="#646464" 
stroke­width="5px" 
x="100px" y="100px"
width="100px" height...
Animer la forme
    <rect fill="#AFBCC7" stroke="#646464" 
stroke­width="5px" x="100px" y="100px"
     width="100px" heigh...
Script complet
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"
 Width="320" height="32...
Résultat… en live
3
Effet Gradient
5
Définir
● Courbe
<svg xmlns="http://www.w3.org/2000/svg">
<radialGradient id= "Grad" cx="80%" r="20%" spreadMethod="reflec...
Définir
● Bordure
<rect 
x="30" 
y="10" 
width="200" height="200" 
rx="10" ry="10" 
style="fill:url(#effet); stroke: #CCCC...
Définir
● Animation en Javascript
<svg xmlns="http://www.w3.org/2000/svg" onload = "startup()" >
…
</svg>
<script>
functio...
Résultat
● Après quelques modifications
– Dimensions
– Point de départ
6
Effet Curve
Courbe de bézier
7
Qu'est ce...
● Modifier la rotation d'un trait
<path
d="M50,50 Q50,100 100,100"
style="stroke: #006666; fill:none;"
/>
Réalisation
● En code
<svg
xmlns:svg="http://www.w3.org/2000/svg"
Version="1.1" width="400" height="450"
onload = "startup...
Définir
● Les formes
    f(t)=sin(at)+cos(bt+phi)
Définir
● Boucle
function Animate()
{
  def(alpha, beta, phi);
  phi += dphi;  
  phi %= 2.0*Math.PI;
  if(phi > 2.0*Math....
Résultat… en live
7
Effet de gouttes
8
Réalisation
● En code
<svg width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/19...
Définir la goutte
<defs>
 <radialGradient id="rg" cx="20%" cy="20%" r="100%" fx="30%" fy="30%" >
   <stop stop­color="whit...
Animation
● En code
function startUp()
{
resize();
var mybubble = document.getElementById("Bubble")
xm = nx/2;
ym = ny/2;
...
WebApps
WebApps
● Pas de pertes de qualités
● C'est un format léger et souple
● Mutli­devices / Multi­appareils
https://developer....
Merci
● Code source inspiré du web
Questions
@hellosct1
@neuro_paris
livre Drupal avancé ­ Editions Eyrolles ­ Christophe ...
Le Full vectoriel
Prochain SlideShare
Chargement dans…5
×

Le Full vectoriel

1 987 vues

Publié le

Présentation effectuée par Christophe Villeneuve (Hello / Sector One) à la Very Important Party (VIP) 2015 organisé par Popsy Team

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

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 987
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 194
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le Full vectoriel

  1. 1.     Le FULL Vectoriel
  2. 2. Qui... est Christophe Villeneuve ? << afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – demoinparis – Lire à toi – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – neuros ­ elephpant
  3. 3. Sommaire ● Bitmap ● Vectoriel avec SVG ● Démo ● Le code de la démo
  4. 4. ● Bitmap Bitmap VS Vectoriel ● Vectoriel = Pas de perte= pixelisé
  5. 5. Afficher une image  <img src='atari.png'> <img src='atari.png' width='100'>
  6. 6. SVG ● Signifie Scalable Vector Graphics ● Format vectoriel en XML ● Supporte  – Image statique – Animation et l'interactivité avec  Synchronized Multimedia Integration Language (SMIL) – Couleur RGB avec une option Alpha en plus ● Mémorise le 'graph' objet en mémoire dans le DOM ● Couplage à CSS
  7. 7. Image 1
  8. 8. Définir ● code <svg       width="200px" height="200px"       viewBox="0 0 200 200"      version="1.1"          xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink">        <img src='atari.svg'> </svg> 
  9. 9. Code SVG <svg    xmlns:svg="http://www.w3.org/2000/svg"    xmlns="http://www.w3.org/2000/svg"    Version="1.1"    width="120"   height="143"   id="svg2">   <rect      width="5.9977822"  height="37.701492"      x="111.20078"     y="102.76726"     id="rect3"     style="fill:#000000" />   <path      d="m 16.5,101.8125 c ­1.889001,0 ­3.50086,1.17072 ­4.125,2.84375 l 0,0.0312  ­10.6875,35.78125 6.40625,0 2.46875,­9.71875 11.90625,0 2.59375,9.71875 6.5625,0 ­10.96875,­ 35.8125 ­0.03125,0 C 19.994483,102.9913 18.390703,101.8125 16.5,101.8125 z m  ­0.0625,8.21875 4.125,15.6875 ­8.15625,0 4.03125,­15.6875 z"      id="path5"      style="fill:#000000" /> … </svg>
  10. 10. Résultat
  11. 11. Texte
  12. 12. Les bases du SVG <svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink">     <text x="5" y="190"           transform="translate(40) rotate(­45 10 50)"     >Very Important Party</text> </svg> Texte Habillage     <rect x="40" y="5" height="110" width="110"           style="stroke:#ff0000; fill: #CFCFCF;"           transform="translate(30) rotate(28 50 35)">     </rect>
  13. 13. Carré 2
  14. 14. Définir ● Positionnement
  15. 15. Définir la forme     <rect  fill="#AFBCC7"  stroke="#646464"  stroke­width="5px"  x="100px" y="100px" width="100px" height="100px">          </rect>
  16. 16. Animer la forme     <rect fill="#AFBCC7" stroke="#646464"  stroke­width="5px" x="100px" y="100px"      width="100px" height="100px">     <animateTransform         attributeType="XML"         attributeName="transform"         type="rotate"         from="0,150,150" to="360,150,150"         begin="0s" dur="5s"         repeatCount="indefinite"/>     </rect>
  17. 17. Script complet <svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"  Width="320" height="320">     <rect fill="#AFBCC7" stroke="#646464" stroke­width="5px"  x="100px" y="100px"  width="100px" height="100px">     <animateTransform         attributeType="XML"         attributeName="transform"         type="rotate"         from="0,150,150" to="360,150,150"         begin="0s" dur="5s"         repeatCount="indefinite"/>     </rect> </svg>
  18. 18. Résultat… en live 3
  19. 19. Effet Gradient 5
  20. 20. Définir ● Courbe <svg xmlns="http://www.w3.org/2000/svg"> <radialGradient id= "Grad" cx="80%" r="20%" spreadMethod="reflect">     <stop offset="5%" stop­color="red"/>     <stop offset="50%" stop­color="green" stop­opacity="1"/>     <stop offset="90%" stop­color="blue" stop­opacity="0.5"/> </radialGradient> <rect x="0" y="0" width="200" height="200"  style="fill:url(#Grad);" />  </svg>
  21. 21. Définir ● Bordure <rect  x="30"  y="10"  width="200" height="200"  rx="10" ry="10"  style="fill:url(#effet); stroke: #CCCCCC; stroke­width: 3;"  /> 
  22. 22. Définir ● Animation en Javascript <svg xmlns="http://www.w3.org/2000/svg" onload = "startup()" > … </svg> <script> function startup() {             radialGrad = document.getElementById("effet");   for (i=0; i<ngradient;i++) {     stops[i]=document.getElementById("stops"+i);   }  timer = setInterval("vary()",100); } </script>
  23. 23. Résultat ● Après quelques modifications – Dimensions – Point de départ 6
  24. 24. Effet Curve Courbe de bézier 7
  25. 25. Qu'est ce... ● Modifier la rotation d'un trait <path d="M50,50 Q50,100 100,100" style="stroke: #006666; fill:none;" />
  26. 26. Réalisation ● En code <svg xmlns:svg="http://www.w3.org/2000/svg" Version="1.1" width="400" height="450" onload = "startup()"> <script> <g> <path id="curve" stroke-width="3" stroke="red" fill="none" /> </g> </svg>
  27. 27. Définir ● Les formes     f(t)=sin(at)+cos(bt+phi)
  28. 28. Définir ● Boucle function Animate() {   def(alpha, beta, phi);   phi += dphi;     phi %= 2.0*Math.PI;   if(phi > 2.0*Math.PI ­ dphi &&                                     phi < 2.0*Math.PI + dphi)  {       if(alpha==11) {       if(beta==11) {alpha=1; beta=2;  }       else {        alpha=1; beta++      }     }     Else { alpha++;    }     modifyColor();   }   modifyEquation();  }
  29. 29. Résultat… en live 7
  30. 30. Effet de gouttes 8
  31. 31. Réalisation ● En code <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" onload="startUp()" onresize="resize()"> ... </svg>
  32. 32. Définir la goutte <defs>  <radialGradient id="rg" cx="20%" cy="20%" r="100%" fx="30%" fy="30%" >    <stop stop­color="white" offset="0" stop­opacity="0.5"/>    <stop stop­color="aqua" offset="20%" stop­opacity="0.5"/>    <stop stop­color="blue" offset="80%" stop­opacity="0.5"/>    <stop stop­color="blue" offset="100%" stop­opacity="0.5"/>  </radialGradient> </defs> <rect height="100%" width="100%" fill="black"/> <g id="GroupOfBubbles">  <circle id="Bubble" cx="­150" cy="­150" r="50" fill="url(#rg)" /> </g>
  33. 33. Animation ● En code function startUp() { resize(); var mybubble = document.getElementById("Bubble") xm = nx/2; ym = ny/2; for(i=0;i<NB;i++) { object[i] = new makeSphere(i); } setInterval("for (i in object)object[i].moveSphere()",16) }
  34. 34. WebApps
  35. 35. WebApps ● Pas de pertes de qualités ● C'est un format léger et souple ● Mutli­devices / Multi­appareils https://developer.mozilla.org/fr/docs/Web/SVG
  36. 36. Merci ● Code source inspiré du web Questions @hellosct1 @neuro_paris livre Drupal avancé ­ Editions Eyrolles ­ Christophe Villeneuve ­ Vanessa Kovalsky David

×