1 00:00:06,086 --> 00:00:08,923 Bonjour bienvenu dans cette vidéo d'introduction 2 00:00:08,923 --> 00:00:13,264 de la minilibX alors vous débuté la programmation 3 00:00:13,264 --> 00:00:16,261 et faire tout de suite des jolis dessins dans 4 00:00:16,261 --> 00:00:18,158 des fenêtres c'est pas forcément la chose 5 00:00:18,158 --> 00:00:21,199 la plus facile et la plus aisé avec les bases 6 00:00:21,199 --> 00:00:23,567 de C que vous avez actuellement. 7 00:00:23,567 --> 00:00:26,522 Donc nous vous fournissons une librairie 8 00:00:26,522 --> 00:00:28,303 faite maison qui s'appelle la minilibX et 9 00:00:28,303 --> 00:00:31,609 qui va vous permettre de commencer rapidement 10 00:00:31,609 --> 00:00:34,884 à faire des jolis dessins dans des fenêtres 11 00:00:34,884 --> 00:00:37,038 cette petite vidéo va vous expliquer les 12 00:00:37,038 --> 00:00:38,340 rudiments, les tous premiers pas qu'il 13 00:00:38,340 --> 00:00:41,166 vous faut connaitre pour pouvoir faire vos 14 00:00:41,166 --> 00:00:44,185 projets graphique, notamment le FdF qui 15 00:00:44,185 --> 00:00:45,720 sera surement le premier projet que vous 16 00:00:45,720 --> 00:00:49,347 allez rencontrer. Alors pour cela nous allons 17 00:00:49,347 --> 00:00:52,093 tout simplement prendre notre terminal 18 00:00:52,093 --> 00:00:53,497 et commencer à regarder un petit peu ce que 19 00:00:53,497 --> 00:00:57,144 nous avons à disposition. Alors nous avons donc 20 00:00:57,144 --> 00:00:59,170 à disposition bah tout d'abord les man de 21 00:00:59,170 --> 00:01:03,714 la minilibX, si je fais man mlx vous allez voir 22 00:01:03,714 --> 00:01:05,328 que vous avez un premier man qui est un 23 00:01:05,328 --> 00:01:07,916 man introductif de la minilibX et qui va vous 24 00:01:07,916 --> 00:01:10,594 permettre de faire une accroche, de commencer 25 00:01:10,594 --> 00:01:13,772 vos premiers projet en C et vos premiers projets 26 00:01:13,772 --> 00:01:17,857 graphiques. Alors la minilibX va décrire un petit 27 00:01:17,857 --> 00:01:21,249 peu le contexte, qu'est ce qu'elle fait, elle va 28 00:01:21,249 --> 00:01:23,659 vous parler de son mode de fonctionnement 29 00:01:23,659 --> 00:01:26,753 à la fois dans l'univers linux, bsd, avec 30 00:01:26,753 --> 00:01:29,478 l'environnement graphique Xwindow mais 31 00:01:29,478 --> 00:01:31,862 aussi et c'est le cas de la minilibX que vous avez 32 00:01:31,862 --> 00:01:34,293 d'installé sur les dump mac elle va vous 33 00:01:34,293 --> 00:01:36,523 expliquer de quelle façon globalement elle 34 00:01:36,523 --> 00:01:41,568 fonctionne sur macOS. Vous avez un include 35 00:01:41,568 --> 00:01:45,066 mlx.h qui va vous permettre d'accéder aux 36 00:01:45,066 --> 00:01:48,949 différentes fonctions de l'API de la minilibX 37 00:01:48,949 --> 00:01:52,010 La première fonction qui était tout au début 38 00:01:52,010 --> 00:01:56,905 de ce man s'appelle mlx_init vous l'avez ici 39 00:01:56,905 --> 00:01:59,028 au début et cette fonction là va permettre 40 00:01:59,028 --> 00:02:01,737 d'établir la connexion entre votre programme 41 00:02:01,737 --> 00:02:05,129 et le serveur graphique l'idée principale va 42 00:02:05,129 --> 00:02:08,403 être la suivante, vous allez au travers de 43 00:02:08,403 --> 00:02:10,121 cette connexion finalement envoyer des 44 00:02:10,121 --> 00:02:12,072 ordres pour dessiner des choses, pour 45 00:02:12,072 --> 00:02:14,856 ouvrir une fenêtre, pour faire des dessins 46 00:02:14,856 --> 00:02:16,488 à l'intérieur de cette fenêtre et vous allez 47 00:02:16,488 --> 00:02:18,365 récupérer des informations qui vont être 48 00:02:18,365 --> 00:02:20,797 ce qu'on appellera des évènements qui seront 49 00:02:20,797 --> 00:02:24,658 décris expliqué dans une seconde vidéo. 50 00:02:24,658 --> 00:02:26,557 On va commencer par la première étape 51 00:02:26,557 --> 00:02:28,210 ouvrir une première fenêtre à l'écran 52 00:02:28,210 --> 00:02:32,082 et puis ensuite créer un dessin, dessiner 53 00:02:32,082 --> 00:02:35,191 quelque chose à l'intérieur. 54 00:02:35,191 --> 00:02:37,106 Alors pour cela nous allons faire un premier 55 00:02:37,106 --> 00:02:43,644 projet, on va faire un main.c 56 00:02:48,017 --> 00:02:52,305 Alors dans ce main.c on a vu qu'on a 57 00:02:52,305 --> 00:02:58,342 besoin d'inclure mlx.h et ensuite on va 58 00:02:58,342 --> 00:03:05,030 faire un main, on ne s'occupe pas de argv, argc 59 00:03:05,030 --> 00:03:08,939 pour le moment et on a vu qu'il nous fallait 60 00:03:08,939 --> 00:03:14,181 appeler mlx_init() au début. Alors si vous 61 00:03:14,181 --> 00:03:17,461 avez remarqué, je reprends le man de mlx 62 00:03:17,461 --> 00:03:20,868 mlx_init renvoie un void* globalement 63 00:03:20,868 --> 00:03:22,884 mlx_init va vous renvoyer un pointeur 64 00:03:22,884 --> 00:03:25,721 et ce pointeur va servir d'identifiant 65 00:03:25,721 --> 00:03:29,273 pour la connexion avec le serveur graphique 66 00:03:29,273 --> 00:03:32,110 c'est une valeur dont vous n'avez globalement 67 00:03:32,110 --> 00:03:33,731 rien à faire mais qui vous sera redemandé 68 00:03:33,731 --> 00:03:35,171 pour tout les autres appels aux autres 69 00:03:35,171 --> 00:03:37,262 fonctions de la minilibX ça leurs permettra aux 70 00:03:37,262 --> 00:03:40,344 autres fonctions de réutiliser la même connexion 71 00:03:40,344 --> 00:03:45,016 vers le serveur. Donc on va sauvegarder le 72 00:03:45,016 --> 00:03:49,239 fameux void* qui est récupéré. 73 00:03:54,786 --> 00:03:58,135 On va l'appeler mlx 74 00:03:58,135 --> 00:04:01,111 et on va donc faire mlx=mlx_init() donc 75 00:04:01,111 --> 00:04:04,129 ça va nous permettre de créer la connexion 76 00:04:04,129 --> 00:04:05,495 mais notre programme il va s'arrêter là 77 00:04:05,495 --> 00:04:07,681 directement on va rapidement passer à 78 00:04:07,681 --> 00:04:10,412 l'étape suivante tout de même. 79 00:04:10,412 --> 00:04:13,036 Alors si vous avez regardé un petit peu 80 00:04:13,036 --> 00:04:16,779 déjà le man de mlx jusqu'au bout, vous 81 00:04:16,779 --> 00:04:19,798 avez en bas, un descriptif des principales 82 00:04:19,798 --> 00:04:21,440 fonctions qui sont disponible dans la 83 00:04:21,440 --> 00:04:23,584 librairie notamment mlx_new_window 84 00:04:23,584 --> 00:04:24,832 qui va vous permettre de créer une 85 00:04:24,832 --> 00:04:27,509 nouvelle fenêtre et mlx_pixel_put qui 86 00:04:27,509 --> 00:04:30,101 va permettre d'allumer un pixel de la 87 00:04:30,101 --> 00:04:32,426 couleur que vous voulez à l'intérieur de 88 00:04:32,426 --> 00:04:36,074 cette fenêtre. Vous les retrouvez bien 89 00:04:36,074 --> 00:04:39,189 évidement dans les autres man qui sont 90 00:04:39,189 --> 00:04:41,322 disponible notamment le fameux man 91 00:04:41,322 --> 00:04:45,823 de mlx_new_window 92 00:04:49,289 --> 00:04:51,657 Le man de mlx_new_window va nous indiquer 93 00:04:51,657 --> 00:04:53,074 les différents paramètres qu'il faut transmettre 94 00:04:53,074 --> 00:04:55,185 à cette fonction pour pouvoir créer une fenêtre 95 00:04:55,185 --> 00:04:58,985 le premier paramètre s'appelle mlx_ptr 96 00:04:58,985 --> 00:05:02,824 il est là, c'est tout simplement le void* 97 00:05:02,824 --> 00:05:06,579 qu'on a récupéré de mlx_init, la taille 98 00:05:06,579 --> 00:05:10,525 X et Y, sizeX, sizeY, les dimensions de la 99 00:05:10,525 --> 00:05:13,714 fenêtre et une chaine de caractères qui 100 00:05:13,714 --> 00:05:21,343 va être le titre de la fenêtre, on reprend notre emacs 101 00:05:22,322 --> 00:05:27,687 mlx_new_window on a vu que le premier 102 00:05:27,687 --> 00:05:29,895 paramètre c'était ce que nous avait renvoyé 103 00:05:29,895 --> 00:05:33,169 mlx_init on va créer une fenêtre qui va faire 104 00:05:33,169 --> 00:05:36,956 par exemple 400 pixels sur 400 pixels et 105 00:05:36,956 --> 00:05:40,411 on va l'appeler mlx_42 ça va être le titre 106 00:05:40,411 --> 00:05:44,614 de notre fenêtre. Alors vous pouvez voir que 107 00:05:44,614 --> 00:05:47,024 globalement là encore je récupère ce que me 108 00:05:47,024 --> 00:05:51,717 renvoit mlx_new_window un void* qui va être 109 00:05:51,717 --> 00:05:54,597 de la même façon un identifiant de la fenêtre 110 00:05:54,597 --> 00:05:56,218 la minilibX vous permet d'ouvrir simultanément 111 00:05:56,218 --> 00:05:59,077 plusieurs fenêtres et pour savoir dans quelle 112 00:05:59,077 --> 00:06:01,402 fenêtre vous voulez agir ou dans quelle fenêtre 113 00:06:01,402 --> 00:06:03,237 vous voulez récupérer ce qu'on verra plus tard 114 00:06:03,237 --> 00:06:06,319 c'est à dire les évènements clavier et souris 115 00:06:06,319 --> 00:06:08,324 qui vont pouvoir arriver, il faudra préciser 116 00:06:08,324 --> 00:06:09,615 l'identifiant de la fenêtre pour savoir sur 117 00:06:09,615 --> 00:06:12,665 quelle fenêtre vous travaillez. Alors très 118 00:06:12,665 --> 00:06:15,332 basiquement là voilà on a créé la connexion 119 00:06:15,332 --> 00:06:17,209 au serveur, on a ouvert une fenêtre, si on 120 00:06:17,209 --> 00:06:20,900 veut pouvoir déjà voir un petit peu ce que 121 00:06:20,900 --> 00:06:24,291 ça donne, on va compiler le tout. 122 00:06:25,198 --> 00:06:27,054 Au cas où vous l'auriez pas remarqué le man 123 00:06:27,054 --> 00:06:30,467 de la minilibX vous indique également comment 124 00:06:30,467 --> 00:06:33,581 compiler: linking minilibX soit en environnement 125 00:06:33,581 --> 00:06:36,045 X-Window avec les librairies qui sont nécessaire 126 00:06:36,045 --> 00:06:38,200 pour ça, soit en environnement macOS avec 127 00:06:38,200 --> 00:06:41,528 les framework qui sont nécessaire pour ça 128 00:06:41,528 --> 00:06:43,778 Donc là vous voyez que en étant en environnemnt 129 00:06:43,778 --> 00:06:47,533 macOS on va utilise -mlx -Framework OpenGL 130 00:06:47,533 --> 00:06:57,633 et AppKit. Compilons donc notre mail.c en lui 131 00:06:57,633 --> 00:07:04,321 transmettant mon lmlx la minilibX 132 00:07:05,697 --> 00:07:09,078 le framework OpenGL 133 00:07:11,520 --> 00:07:14,912 et le framework AppKit et donc là nous à créé 134 00:07:14,912 --> 00:07:19,744 notre binaire mlx que je vais m'apprêter à 135 00:07:19,744 --> 00:07:21,386 lancer et qui rend la main tout de suite 136 00:07:21,386 --> 00:07:23,616 parce qu'une fois qu'on a créé la fenêtre 137 00:07:23,616 --> 00:07:25,706 le programme s'arrête tout simplement. 138 00:07:25,706 --> 00:07:26,965 Alors vous allez me dire "oué alors si on 139 00:07:26,965 --> 00:07:28,407 veut voir la fenêtre, qu'est ce qu'on fait" 140 00:07:29,907 --> 00:07:33,053 On va pour ça, avoir plusieurs solutions 141 00:07:33,053 --> 00:07:35,551 la plus simple serait d'utiliser la fonction 142 00:07:35,551 --> 00:07:40,308 système sleep() ici, qui fait un délai qui 143 00:07:40,308 --> 00:07:42,708 vous ferait attendre je sais pas 5 sec, 10 sec 144 00:07:42,708 --> 00:07:45,097 pour voir la fenêtre apparaitre. 145 00:07:45,097 --> 00:07:47,742 C'est pas une solution qui est viable tout 146 00:07:47,742 --> 00:07:50,974 simplement parce que la fenêtre ne va pas 147 00:07:50,974 --> 00:07:52,894 apparaitre au moment ou vous appelez 148 00:07:52,894 --> 00:07:56,520 mlx_new_window elle va apparaitre une fois 149 00:07:56,520 --> 00:08:00,723 que l'ensemble du système graphique de macOS 150 00:08:00,723 --> 00:08:03,624 va prendre la main et pour faire cela il faut 151 00:08:03,624 --> 00:08:08,434 que appeliez la fonction mlx_loop qui elle 152 00:08:08,434 --> 00:08:11,698 prend comme paramètre l'identifiant de 153 00:08:11,698 --> 00:08:13,447 la connexion. 154 00:08:13,447 --> 00:08:16,295 mlx_loop va servir pour gérer les évènements 155 00:08:16,295 --> 00:08:18,343 ce sera l'objet de la vidéo suivante et elle 156 00:08:18,343 --> 00:08:20,689 va servir surtout pour donner la main à 157 00:08:20,689 --> 00:08:23,772 l'ensemble du système graphique mac 158 00:08:23,772 --> 00:08:26,652 j'ai créé la fenêtre, et maintenant je rends 159 00:08:26,652 --> 00:08:29,137 la main à mlx_loop, je rends la main au 160 00:08:29,137 --> 00:08:31,579 système graphique mac qui lui va se charger 161 00:08:31,579 --> 00:08:33,617 d'afficher la fenêtre, il va pas le faire de 162 00:08:33,617 --> 00:08:35,686 façon instantané, il va le faire de façon 163 00:08:35,686 --> 00:08:38,427 asynchrone et pour qu'il puisse le faire 164 00:08:38,427 --> 00:08:44,229 on a besoin de rentrer dans cette phase là. 165 00:08:44,229 --> 00:08:48,119 Donc cette fois si je compile à nouveau 166 00:08:48,119 --> 00:08:51,034 et que je lance, j'ai maintenant la fenêtre 167 00:08:51,034 --> 00:08:55,098 qui s'affiche, elle est là. mlx_loop est 168 00:08:55,098 --> 00:08:57,935 comme son nom l'indique, une boucle 169 00:08:57,935 --> 00:09:02,831 une loop, elle rend pas la main tout simplement 170 00:09:02,831 --> 00:09:05,156 donc si vous voulez sortir du programme 171 00:09:05,156 --> 00:09:06,756 il faudra que vous le prévoyiez d'une façon 172 00:09:06,756 --> 00:09:09,006 ou d'une autre, par exemple lorsque vous 173 00:09:09,006 --> 00:09:10,841 aurez appuyé sur une touche ce sera une 174 00:09:10,841 --> 00:09:12,995 façon d'appeler la fonction exit qui arrêtera 175 00:09:12,995 --> 00:09:15,534 votre programme mais mlx_loop elle ne va 176 00:09:15,534 --> 00:09:18,872 jamais vous rendre la main 177 00:09:18,872 --> 00:09:22,307 Alors on va rapidement regardé maintenant 178 00:09:22,307 --> 00:09:24,888 de quelle façon on va pouvoir effectuer 179 00:09:24,888 --> 00:09:28,184 différents dessins. Je vais utiliser pour 180 00:09:28,184 --> 00:09:32,034 l'instant la façon simple, de vous présenter 181 00:09:32,034 --> 00:09:37,869 mlx_pixel_put qui permet d'afficher un pixel 182 00:09:37,869 --> 00:09:42,188 à l'intérieur d'une fenêtre, les paramètres 183 00:09:42,188 --> 00:09:45,921 de mlx_pixel_put on va les retrouver dans 184 00:09:45,921 --> 00:09:53,332 le man en cas de doute; man mlx, mlx_pixel_put 185 00:09:53,332 --> 00:09:55,810 voilà il y a une man dédié à mlx_pixel_put 186 00:09:55,810 --> 00:09:57,857 c'est pas le cas de toutes les fonctions mais 187 00:09:57,857 --> 00:09:59,339 vous trouverez les fonctions similaires 188 00:09:59,339 --> 00:10:02,614 dans le même man. 189 00:10:05,568 --> 00:10:08,864 mlx_pixel_put qui prend l'identifiant de la 190 00:10:08,864 --> 00:10:10,069 connexion, l'identifiant de la fenêtre 191 00:10:10,069 --> 00:10:13,910 les coordonnées du pixel et la couleur 192 00:10:13,910 --> 00:10:19,218 la couleur qui est exprimée sur un int 193 00:10:19,218 --> 00:10:23,893 Alors on est sur fenêtre qui fait 400*400 194 00:10:23,893 --> 00:10:29,247 on va mettre un pixel en 200*200 et la couleur 195 00:10:29,247 --> 00:10:32,394 est codée en RGB sur l'int 196 00:10:34,901 --> 00:10:40,715 Alors les deux premiers zéros qui correspondent 197 00:10:40,715 --> 00:10:45,182 à l'octet de poids fort 198 00:10:45,182 --> 00:10:47,432 sont pour la transparence qui n'est dans le 199 00:10:47,432 --> 00:10:50,892 cas du pixel_put pas géré par la minilibX 200 00:10:50,892 --> 00:10:53,053 nous avons le rouge qui est codé sur le 201 00:10:53,053 --> 00:10:57,270 premier FF, le vert qui est ici sur le deuxième 202 00:10:57,270 --> 00:11:00,477 et le bleu sur le troisième on va donc avoir 203 00:11:00,477 --> 00:11:03,638 ici un pixel de couleur blanche 204 00:11:05,590 --> 00:11:07,518 on recompile 205 00:11:09,108 --> 00:11:11,068 alors, vous le voyez peut-être 206 00:11:11,068 --> 00:11:12,559 ou vous ne le voyez peut-être pas nous 207 00:11:12,559 --> 00:11:14,704 avons bien un pixel blanc ici au milieu 208 00:11:14,704 --> 00:11:17,798 de la fenêtre qui s'est affiché 209 00:11:19,420 --> 00:11:22,586 si on veut faire d'avantage de pixel on 210 00:11:22,586 --> 00:11:27,057 peut toujours s'amuser un petit peu 211 00:11:27,057 --> 00:11:28,531 prenons 212 00:11:32,121 --> 00:11:34,461 deux variables supplémentaires 213 00:11:40,602 --> 00:11:44,447 faisons une petite boucle 214 00:11:56,665 --> 00:11:59,780 faisons une deuxième boucle 215 00:12:19,768 --> 00:12:22,215 recompilons le tout 216 00:12:27,885 --> 00:12:29,335 et manque de bol 217 00:12:29,335 --> 00:12:32,040 ça fait pas ce qu'il faut, c'est un grand classique 218 00:12:36,860 --> 00:12:44,428 nous avons donc x et y 219 00:12:44,428 --> 00:12:48,516 qui vont remplacer le 200*200 220 00:12:48,516 --> 00:12:50,955 parce qu'afficher je ne sais combien de fois 221 00:12:50,955 --> 00:12:53,952 le même pixel au même endroit ça n'aura 222 00:12:53,952 --> 00:12:57,802 pas l'effet voulu, et nous avons cette fois ci 223 00:12:57,802 --> 00:13:02,954 notre carré entre 50 et 150 sur x et sur y 224 00:13:02,954 --> 00:13:04,725 donc ça vous donne ainsi un exemple 225 00:13:04,725 --> 00:13:09,685 d'utilisation de mlx_pixel_put ça vous 226 00:13:09,685 --> 00:13:15,380 donne un exemple de création de fenêtre 227 00:13:15,380 --> 00:13:18,068 alors gardez en tête la chose suivante 228 00:13:18,068 --> 00:13:19,444 les pixels ne sont pas dessinés à l'intérieur 229 00:13:19,444 --> 00:13:20,767 de la fenêtre au moment où vous appelez 230 00:13:20,767 --> 00:13:23,476 mlx_pixel_put c'est vraiment au moment où 231 00:13:23,476 --> 00:13:26,729 mlx_loop est appelé que l'affichage sera 232 00:13:26,729 --> 00:13:30,867 vraiment fait dans votre fenêtre, mlx_loop 233 00:13:30,867 --> 00:13:33,097 je vous en ai déjà fait part un petit peu 234 00:13:33,097 --> 00:13:35,368 va également s'occuper de la gestion des 235 00:13:35,368 --> 00:13:38,227 évènements et c'est quelque chose que nous 236 00:13:38,227 --> 00:13:40,733 allons voir dans la deuxième vidéo consacrée 237 00:13:40,733 --> 00:13:43,714 à la minilibX, à tout de suite.