diff --git a/README.md b/README.md index 6022729..9650337 100644 --- a/README.md +++ b/README.md @@ -179,6 +179,123 @@ On reçoit une réponse en JSON comme suit: L'url de la photo est, dans ce cas [https://francoispelletier.org/lutim/Ux46pjrt/rauu3q7P](https://francoispelletier.org/lutim/Ux46pjrt/rauu3q7P) +## Scénario 2 +Dans ce scénario, nous allons animer une séquence d'images vectorielles, ajouter un logo et la joindre à un court extrait vidéo. +Nous avons 9 images qui épellent le mot **Bienvenue** +```bash +for i in animation_bienvenue/*.svg; do echo "$i"; done +``` + +``` +animation_bienvenue/bienvenue001.svg +animation_bienvenue/bienvenue002.svg +animation_bienvenue/bienvenue003.svg +animation_bienvenue/bienvenue004.svg +animation_bienvenue/bienvenue005.svg +animation_bienvenue/bienvenue006.svg +animation_bienvenue/bienvenue007.svg +animation_bienvenue/bienvenue008.svg +animation_bienvenue/bienvenue009.svg +``` + +Voici la 5e image + +![](animation_bienvenue/bienvenue005.svg) + +### Conversion + +Pour convertir les les images vectorielles en images matricielles, nous allons utiliser l'interface en ligne de commandes de Inkscape + +```bash +for i in animation_bienvenue/*.svg +do +inkscape -f "$i" -e "${i%.*}.png" +done +``` + +Voici la 5e image au format png + +![](animation_bienvenue/bienvenue005.png) + +### Ajout du logo + +Nous ajouterons le logo de LinuQ aux images + +![](animation_bienvenue/logo-linuq.png) + +Pour ce faire, nous utiliserons l'option `-draw` de `convert` pour ajouter une image à la position désirée. Notez que pour nos besoins, l'image du logo est déjà redimensionnée à la largeur désirée. + +``` +for i in animation_bienvenue/bienvenue*.png +do +convert "$i" -gravity south -draw "image over 0,0 0,0 animation_bienvenue/logo-linuq.png" "${i%.*}-aveclogo.png" +done +``` +Les paramètres suivants permettent de définir la transformation + +- `-gravity south`: aligne les transformations au bas de l'image +- `image over 0,0 0,0`: Positionne l'image ajoutée au coin inférieur gauche + +Nous obtenons alors, pour la 5e image: + +![](animation_bienvenue/bienvenue005-aveclogo.png) + +### Animation + +Nous avons maintenant des images au format `png` pour faire notre animation. Nous utiliserons ImageMagick pour créer une animation au format `gif`. + +```bash +convert -delay 50 -loop 0 animation_bienvenue/bienvenue*-aveclogo.png animation_bienvenue/animation.gif +``` + +Les paramètres suivants permettent de définir l'animation + +- `-delay 50`: Ajoute un délai de 50/100 secondes entre les images +- `-loop 0`: Crée une boucle d'animation + +Nous obtenons alors cette animation + +![](animation_bienvenue/animation.gif) + +### Téléchargement du vidéo + +Nous allons ajouter un vidéo en arrière plan à notre animation + +Téléchargement du vidéo +```bash +wget https://videos.pond5.com/automatic-data-processing-machine-footage-044586354_main_xl.mp4 -O video/automatic-data-processing-machine-footage-044586354_main_xl.mp4 +``` + +### Animation en MP4 + +Création de l'animation **Bienvenue** avec le logo de LinuQ au format MP4 + +```bash +ffmpeg -framerate 3 -i animation_bienvenue/bienvenue%03d-aveclogo.png -vcodec png video/animation-linuq.mov +``` + +Les paramètres suivants permettent de définir l'animation + +- `-framerate 3`: 3 images par seconde +- `-vcodec png`: codec utilisé: png (pour grader la transparence) + +### Superposition de l'animation au vidéo + +Superposition des deux vidéos avec FFmpeg: + +```bash +ffmpeg -i video/automatic-data-processing-machine-footage-044586354_main_xl.mp4 -i video/animation-linuq.mov -filter_complex "overlay=(W-w)/2:(H-h)/2" -pix_fmt rgba -vcodec h264 video/animation-final.mp4 +``` + +Les paramètres suivants permettent de définir l'animation + +- `-filter_complex "overlay=(W-w)/2:(H-h)/2"`: permet d'aligner les deux vidéos au centre du plus grand des deux +- `-pix_fmt rgba`: permet de garder le profil de couleur transparent +- `-vcodec h264`: Encoder avec le codec `h264` qui est très performant + +Le résultat: + +[video/animation-final.mp4](video/animation-final.mp4) \ No newline at end of file diff --git a/animation_bienvenue/animation.gif b/animation_bienvenue/animation.gif new file mode 100644 index 0000000..da136b5 Binary files /dev/null and b/animation_bienvenue/animation.gif differ diff --git a/animation_bienvenue/bienvenue001.svg b/animation_bienvenue/bienvenue001.svg new file mode 100644 index 0000000..6bc3c48 --- /dev/null +++ b/animation_bienvenue/bienvenue001.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + + B + + diff --git a/animation_bienvenue/bienvenue002.svg b/animation_bienvenue/bienvenue002.svg new file mode 100644 index 0000000..68d464c --- /dev/null +++ b/animation_bienvenue/bienvenue002.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + + Bi + + diff --git a/animation_bienvenue/bienvenue003.svg b/animation_bienvenue/bienvenue003.svg new file mode 100644 index 0000000..50ecb89 --- /dev/null +++ b/animation_bienvenue/bienvenue003.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + + Bie + + diff --git a/animation_bienvenue/bienvenue004.svg b/animation_bienvenue/bienvenue004.svg new file mode 100644 index 0000000..c6d5f76 --- /dev/null +++ b/animation_bienvenue/bienvenue004.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + + Bien + + diff --git a/animation_bienvenue/bienvenue005-aveclogo.png b/animation_bienvenue/bienvenue005-aveclogo.png new file mode 100644 index 0000000..1cb0af7 Binary files /dev/null and b/animation_bienvenue/bienvenue005-aveclogo.png differ diff --git a/animation_bienvenue/bienvenue005.png b/animation_bienvenue/bienvenue005.png new file mode 100644 index 0000000..ef13291 Binary files /dev/null and b/animation_bienvenue/bienvenue005.png differ diff --git a/animation_bienvenue/bienvenue005.svg b/animation_bienvenue/bienvenue005.svg new file mode 100644 index 0000000..68dc9f6 --- /dev/null +++ b/animation_bienvenue/bienvenue005.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + + Bienv + + diff --git a/animation_bienvenue/bienvenue006.svg b/animation_bienvenue/bienvenue006.svg new file mode 100644 index 0000000..e752245 --- /dev/null +++ b/animation_bienvenue/bienvenue006.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + + Bienve + + diff --git a/animation_bienvenue/bienvenue007.svg b/animation_bienvenue/bienvenue007.svg new file mode 100644 index 0000000..fe0ef68 --- /dev/null +++ b/animation_bienvenue/bienvenue007.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + + Bienven + + diff --git a/animation_bienvenue/bienvenue008.svg b/animation_bienvenue/bienvenue008.svg new file mode 100644 index 0000000..0b2625f --- /dev/null +++ b/animation_bienvenue/bienvenue008.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + + Bienvenu + + diff --git a/animation_bienvenue/bienvenue009.svg b/animation_bienvenue/bienvenue009.svg new file mode 100644 index 0000000..f0cd538 --- /dev/null +++ b/animation_bienvenue/bienvenue009.svg @@ -0,0 +1,69 @@ + + + + + + + + + + image/svg+xml + + + + + + + Bienvenue + + diff --git a/animation_bienvenue/logo-linuq.png b/animation_bienvenue/logo-linuq.png new file mode 100644 index 0000000..f5361da Binary files /dev/null and b/animation_bienvenue/logo-linuq.png differ diff --git a/video/animation-final.mp4 b/video/animation-final.mp4 new file mode 100644 index 0000000..f8f53a1 Binary files /dev/null and b/video/animation-final.mp4 differ