Modifié 5 fois par MichelBuffa
53 mots ajoutés, 1 mots supprimés
{{page.toc}}
Dans ce cours vous aurez une introduction à l'IA, focalisé surtout sur le Machine Learning. Vous découvrirez les principes de l'utilisation de réseaux de neurones pour l'apprentissage et la prédiction. En TP nous utiliserons Python et JavaScript/TypeScript. Les TPs porteront sur la mise en oeuvre de réseaux de neurones pour des tâches de classification (deux TPs) et sur l'utilisation d'APIs via JavaScript / NodeJS (deux TPs). Vous aurez un examen sous forme de QCM et un mini projet à rendre en binôme.
Les TPs commenceront dès la fin du premier cours et seront sur MOODLE!
On utilise le même support de cours....
Vidéo 1 introduisant les bases du traitement du langage naturel par réseaux de neurones :
{{media("https://www.youtube.com/watch?v=CsQNF9s78Nc")}}
Demo de Word2Vec avec tensorflow (visualiser la classification des mots par proximité): https://projector.tensorflow.org/
Vidéo présentant la manière dont les chat bot genre chatgpt fonctionnent :
{{media("https://www.youtube.com/watch?v=7ell8KEbhJo")}}
ff
Modifié une fois par MichelBuffa
236 mots ajoutés
{{page.toc}}
Je vous propose de pratiquer le(s) langage(s) JavaScript ou TypeScript à travers l'apprentissage de la 3D avec la librairie open source BabylonJS. On écrira ensemble un petit jeu vidéo qui tournera à 60 images/seconde dans vos navigateurs et qui pourra être un bon point de départ pour le concours Games on Web 2024 dont le thème est "Olympic Edition".
Supports de cours :
Projet "moderne" en TypeScript, avec la dernière version de BabylonJS + Webpack :
AUjourd'hui nous n'avancerons pas le cours, vous travaillerez sur votre projet de jeu afin d'avoir quelque chose à montrer à Sébastien Vandenbergue, l'architecte principal de BabylonJS, qui vient rencontrer les étudiants pour le regroupement du vendredi 29 Mars de 12h à 14h dans l'amphi A2.
Normalement un premier devoir noté est à rendre pour le 25 Mars, nous le repoussons de 10 jours, la nouvelle deadline est le 31 Mars au soir.
Modifié une fois par MichelBuffa
32 mots ajoutés
{{page.toc}}
In this course, we'll cover the basics of audio synthesis for music, in particular by studying how synthesizers work. We'll also look at Web Audio and Web Midi, two W3C standards that enable computer music applications to be designed and used in Web browsers. Finally, we'll look at recent advances in AIs for the automatic generation of music from text.
Course documents: see the powerpoint files on this mega link (2 gigabytes).
Videos:
Also worth reading: "La revanche des neurones", an article by Dominique Cardon (in french), an excellent introduction to the 2012 AI learning revolution. The first four pages tell the story of the 18-year-old who programmed classic deep learning algorithms into a GPU and improved the object recognition record by an incredible amount, sparking a new craze for Machine Learning.
To come (2024): multimodal text to XXX generators (video with voice, sound and music):
For installing AI apps locally (Mac M1-M2-M3 or gamer PC recommended) : https://pinokio.computer/
Constraints:
Due date: 25 Mars 2024, Jordan Sintes will send me the final content (URL)
Online Exam 25 Mars 2024 à 11h: a quizz about IA (second day course), to check what you understood / know from the course. Date to come, I'll send the URL and you will have to pass it all a the same time, with a limited time (40mns). You will have to read the whole course I gave this day.
Modifié 2 fois par MichelBuffa
236 mots ajoutés
{{page.toc}}
Je vous propose de pratiquer le(s) langage(s) JavaScript ou TypeScript à travers l'apprentissage de la 3D avec la librairie open source BabylonJS. On écrira ensemble un petit jeu vidéo qui tournera à 60 images/seconde dans vos navigateurs et qui pourra être un bon point de départ pour le concours Games on Web 2024 dont le thème est "Olympic Edition".
Supports de cours :
Projet "moderne" en TypeScript, avec la dernière version de BabylonJS + Webpack :
AUjourd'hui nous n'avancerons pas le cours, vous travaillerez sur votre projet de jeu afin d'avoir quelque chose à montrer à Sébastien Vandenbergue, l'architecte principal de BabylonJS, qui vient rencontrer les étudiants pour le regroupement du vendredi 29 Mars de 12h à 14h dans l'amphi A2.
Normalement un premier devoir noté est à rendre pour le 25 Mars, nous le repoussons de 10 jours, la nouvelle deadline est le 31 Mars au soir.
Modifié 4 fois par MichelBuffa
237 mots ajoutés, 1 mots supprimés
{{page.toc}}
Je vous propose de pratiquer le(s) langage(s) JavaScript ou TypeScript à travers l'apprentissage de la 3D avec la librairie open source BabylonJS. On écrira ensemble un petit jeu vidéo qui tournera à 60 images/seconde dans vos navigateurs et qui pourra être un bon point de départ pour le concours Games on Web 2024 dont le thème est "Olympic Edition".
Supports de cours :
Projet "moderne" en TypeScript, avec la dernière version de BabylonJS + Webpack :
AUjourd'hui nous n'avancerons pas le cours, vous travaillerez sur votre projet de jeu afin d'avoir quelque chose à montrer à Sébastien Vandenbergue, l'architecte principal de BabylonJS, qui vient rencontrer les étudiants pour le regroupement du vendredi 29 Mars de 12h à 14h dans l'amphi A2.
Normalement un premier devoir noté est à rendre pour le 25 Mars, nous le repoussons de 10 jours, la nouvelle deadline est le 31 Mars au soir.
Modifié 2 fois par MichelBuffa
236 mots ajoutés
{{page.toc}}
Je vous propose de pratiquer le(s) langage(s) JavaScript ou TypeScript à travers l'apprentissage de la 3D avec la librairie open source BabylonJS. On écrira ensemble un petit jeu vidéo qui tournera à 60 images/seconde dans vos navigateurs et qui pourra être un bon point de départ pour le concours Games on Web 2024 dont le thème est "Olympic Edition".
Supports de cours :
Projet "moderne" en TypeScript, avec la dernière version de BabylonJS + Webpack :
AUjourd'hui nous n'avancerons pas le cours, vous travaillerez sur votre projet de jeu afin d'avoir quelque chose à montrer à Sébastien Vandenbergue, l'architecte principal de BabylonJS, qui vient rencontrer les étudiants pour le regroupement du vendredi 29 Mars de 12h à 14h dans l'amphi A2.
Normalement un premier devoir noté est à rendre pour le 25 Mars, nous le repoussons de 10 jours, la nouvelle deadline est le 31 Mars au soir.
Modifié 6 fois par MichelBuffa
961 mots ajoutés
{{page.toc}}
Lien ZOOM valable toute la semaine
Dans ce cours, vous aurez une introduction à Angular, un framework front-end populaire. Nous utiliserons un back-end NodeJS/Mongoose/MongoDB et vous verrez également comment héberger le tout dans le cloud.
Notez que nous utiliserons Angular dans sa version 17, avec des composants standalone. Pour ceux qui veulent avoir une formation sur les précédentes versions d'Angular, allez voir le cours des années précédentes.
NOTE : si vous allez voir le cours de l'année dernière, il est accompagné de nombreuses vidéos complètes du cours (où je live code et j'explique tout. Je m'étais filmé durant les cours en visio pendant le COVID), mais il ne couvre pas les nouveautés d'Angular 17. Par contre, 95% de ce que je montre n'a pas changé.
Cette partie du cours propose une introduction au framework front-end Angular. Vous réaliserez une application complète incluant un back-end basé sur NodeJS, la base de données NoSQL MongoDB, et un hébergement du tout dans le cloud. Vous mettrez en oeuvre les principaux éléments proposés par Angular, dont la plupart sont également présents dans les frameworks concurrents.
On utilise le même support de cours et le même repository GitHub.
On est allé jusqu'au transparent Numéro 132.
On utilise le même support de cours et le même repository GitHub.
On est allé jusqu'au transparent Numéro 187.
On utilise le même support de cours et le même repository GitHub pour le front.
Repository GitHub du Back-End: https://github.com/micbuffa/AngularMBDSMadagascar2024
On est allé jusqu'au transparent Numéro 223.
On utilise le même support de cours et le même repository GitHub pour le front.
Repository GitHub du Back-End: https://github.com/micbuffa/AngularMBDSMadagascar2024
On est allé jusqu'au transparent Numéro 252.
Contraintes :
Vous apporterez les améliorations optionnelles suivantes à ce TP :
Modifié 3 fois par MichelBuffa
16 mots ajoutés, 3 mots supprimés
{{page.toc}}
Lien ZOOM valable toute la semaine
Dans ce cours, vous aurez une introduction à Angular, un framework front-end populaire. Nous utiliserons un back-end NodeJS/Mongoose/MongoDB et vous verrez également comment héberger le tout dans le cloud.
Notez que nous utiliserons Angular dans sa version 17, avec des composants standalone. Pour ceux qui veulent avoir une formation sur les précédentes versions d'Angular, allez voir le cours des années précédentes.
NOTE : si vous allez voir le cours de l'année dernière, il est accompagné de nombreuses vidéos complètes du cours (où je live code et j'explique tout. Je m'étais filmé durant les cours en visio pendant le COVID), mais il ne couvre pas les nouveautés d'Angular 17. Par contre, 95% de ce que je montre n'a pas changé.
Cette partie du cours propose une introduction au framework front-end Angular. Vous réaliserez une application complète incluant un back-end basé sur NodeJS, la base de données NoSQL MongoDB, et un hébergement du tout dans le cloud. Vous mettrez en oeuvre les principaux éléments proposés par Angular, dont la plupart sont également présents dans les frameworks concurrents.
On utilise le même support de cours et le même repository GitHub.
On est allé jusqu'au transparent Numéro 132.
On utilise le même support de cours et le même repository GitHub.
On est allé jusqu'au transparent Numéro 187.
On utilise le même support de cours et le même repository GitHub pour le front.
Repository GitHub du Back-End: https://github.com/micbuffa/AngularMBDSMadagascar2024
On est allé jusqu'au transparent Numéro 223.
On utilise le même support de cours et le même repository GitHub pour le front.
Repository GitHub du Back-End: https://github.com/micbuffa/AngularMBDSMadagascar2024
On est allé jusqu'au transparent Numéro 252.
Contraintes :
Vous apporterez les améliorations optionnelles suivantes à ce TP :
Modifié 2 fois par MichelBuffa
aucun mot modifié
{{page.toc}}
Stages de L3
Modifié 4 fois par MichelBuffa
237 mots ajoutés, 1 mots supprimés
{{page.toc}}
Je vous propose de pratiquer le(s) langage(s) JavaScript ou TypeScript à travers l'apprentissage de la 3D avec la librairie open source BabylonJS. On écrira ensemble un petit jeu vidéo qui tournera à 60 images/seconde dans vos navigateurs et qui pourra être un bon point de départ pour le concours Games on Web 2024 dont le thème est "Olympic Edition".
Supports de cours :
Projet "moderne" en TypeScript, avec la dernière version de BabylonJS + Webpack :
AUjourd'hui nous n'avancerons pas le cours, vous travaillerez sur votre projet de jeu afin d'avoir quelque chose à montrer à Sébastien Vandenbergue, l'architecte principal de BabylonJS, qui vient rencontrer les étudiants pour le regroupement du vendredi 29 Mars de 12h à 14h dans l'amphi A2.
Normalement un premier devoir noté est à rendre pour le 25 Mars, nous le repoussons de 10 jours, la nouvelle deadline est le 31 Mars au soir.
Modifié 5 fois par MichelBuffa
152 mots ajoutés, 3 mots supprimés
{{page.toc}}
Lien ZOOM valable toute la semaine
Dans ce cours, vous aurez une introduction à Angular, un framework front-end populaire. Nous utiliserons un back-end NodeJS/Mongoose/MongoDB et vous verrez également comment héberger le tout dans le cloud.
Notez que nous utiliserons Angular dans sa version 17, avec des composants standalone. Pour ceux qui veulent avoir une formation sur les précédentes versions d'Angular, allez voir le cours des années précédentes.
NOTE : si vous allez voir le cours de l'année dernière, il est accompagné de nombreuses vidéos complètes du cours (où je live code et j'explique tout. Je m'étais filmé durant les cours en visio pendant le COVID), mais il ne couvre pas les nouveautés d'Angular 17. Par contre, 95% de ce que je montre n'a pas changé.
Cette partie du cours propose une introduction au framework front-end Angular. Vous réaliserez une application complète incluant un back-end basé sur NodeJS, la base de données NoSQL MongoDB, et un hébergement du tout dans le cloud. Vous mettrez en oeuvre les principaux éléments proposés par Angular, dont la plupart sont également présents dans les frameworks concurrents.
On utilise le même support de cours et le même repository GitHub.
On est allé jusqu'au transparent Numéro 132.
On utilise le même support de cours et le même repository GitHub.
On est allé jusqu'au transparent Numéro 187.
On utilise le même support de cours et le même repository GitHub pour le front.
Repository GitHub du Back-End: https://github.com/micbuffa/AngularMBDSMadagascar2024
On est allé jusqu'au transparent Numéro 223.
On utilise le même support de cours et le même repository GitHub pour le front.
Repository GitHub du Back-End: https://github.com/micbuffa/AngularMBDSMadagascar2024
On est allé jusqu'au transparent Numéro 252.
Contraintes :
Vous apporterez les améliorations optionnelles suivantes à ce TP :
Modifié 6 fois par MichelBuffa
961 mots ajoutés
{{page.toc}}
Lien ZOOM valable toute la semaine
Dans ce cours, vous aurez une introduction à Angular, un framework front-end populaire. Nous utiliserons un back-end NodeJS/Mongoose/MongoDB et vous verrez également comment héberger le tout dans le cloud.
Notez que nous utiliserons Angular dans sa version 17, avec des composants standalone. Pour ceux qui veulent avoir une formation sur les précédentes versions d'Angular, allez voir le cours des années précédentes.
NOTE : si vous allez voir le cours de l'année dernière, il est accompagné de nombreuses vidéos complètes du cours (où je live code et j'explique tout. Je m'étais filmé durant les cours en visio pendant le COVID), mais il ne couvre pas les nouveautés d'Angular 17. Par contre, 95% de ce que je montre n'a pas changé.
Cette partie du cours propose une introduction au framework front-end Angular. Vous réaliserez une application complète incluant un back-end basé sur NodeJS, la base de données NoSQL MongoDB, et un hébergement du tout dans le cloud. Vous mettrez en oeuvre les principaux éléments proposés par Angular, dont la plupart sont également présents dans les frameworks concurrents.
On utilise le même support de cours et le même repository GitHub.
On est allé jusqu'au transparent Numéro 132.
On utilise le même support de cours et le même repository GitHub.
On est allé jusqu'au transparent Numéro 187.
On utilise le même support de cours et le même repository GitHub pour le front.
Repository GitHub du Back-End: https://github.com/micbuffa/AngularMBDSMadagascar2024
On est allé jusqu'au transparent Numéro 223.
On utilise le même support de cours et le même repository GitHub pour le front.
Repository GitHub du Back-End: https://github.com/micbuffa/AngularMBDSMadagascar2024
On est allé jusqu'au transparent Numéro 252.
Contraintes :
Vous apporterez les améliorations optionnelles suivantes à ce TP :
Modifié 2 fois par MichelBuffa
aucun mot modifié
{{page.toc}}
Dans ce cours vous aurez une introduction à l'IA, focalisé surtout sur le Machine Learning. Vous découvrirez les principes de l'utilisation de réseaux de neurones pour l'apprentissage et la prédiction. En TP nous utiliserons Python et JavaScript/TypeScript. Les TPs porteront sur la mise en oeuvre de réseaux de neurones pour des tâches de classification (deux TPs) et sur l'utilisation d'APIs via JavaScript / NodeJS (deux TPs). Vous aurez un examen sous forme de QCM et un mini projet à rendre en binôme.
Les TPs commenceront dès la fin du premier cours et seront sur MOODLE!
On utilise le même support de cours....
Vidéo 1 introduisant les bases du traitement du langage naturel par réseaux de neurones :
{{media("https://www.youtube.com/watch?v=CsQNF9s78Nc")}}
Demo de Word2Vec avec tensorflow (visualiser la classification des mots par proximité): https://projector.tensorflow.org/
Vidéo présentant la manière dont les chat bot genre chatgpt fonctionnent :
{{media("https://www.youtube.com/watch?v=7ell8KEbhJo")}}
ff
Modifié 2 fois par MichelBuffa
aucun mot modifié
{{page.toc}}
Stages de L3
Modifié 7 fois par MichelBuffa
85 mots ajoutés, 16 mots supprimés
{{page.toc}}
In this course, we'll cover the basics of audio synthesis for music, in particular by studying how synthesizers work. We'll also look at Web Audio and Web Midi, two W3C standards that enable computer music applications to be designed and used in Web browsers. Finally, we'll look at recent advances in AIs for the automatic generation of music from text.
Course documents: see the powerpoint files on this mega link (2 gigabytes).
Videos:
Also worth reading: "La revanche des neurones", an article by Dominique Cardon (in french), an excellent introduction to the 2012 AI learning revolution. The first four pages tell the story of the 18-year-old who programmed classic deep learning algorithms into a GPU and improved the object recognition record by an incredible amount, sparking a new craze for Machine Learning.
To come (2024): multimodal text to XXX generators (video with voice, sound and music):
For installing AI apps locally (Mac M1-M2-M3 or gamer PC recommended) : https://pinokio.computer/
Constraints:
Due date: 25 XXXMars 2024, Jordan Sintes will send me the final content (URL)
Online Exam 25 Mars 2024 à 11h: a quizz about IA, (second day course), to check what you understood from the previous courses (general culture, answers/ areknow infrom the course).. Date to come, I'll send the URL and you will have to pass it all a the same time, with a limited time (40mns). You will have to read the whole course I gave this day.
Modifié 2 fois par MichelBuffa
aucun mot modifié
{{page.toc}}
Stages de L3
Modifié une fois par MichelBuffa
12 mots ajoutés
{{page.toc}}
Lien ZOOM valable toute la semaine
Dans ce cours, vous aurez une introduction à Angular, un framework front-end populaire. Nous utiliserons un back-end NodeJS/Mongoose/MongoDB et vous verrez également comment héberger le tout dans le cloud.
Notez que nous utiliserons Angular dans sa version 17, avec des composants standalone. Pour ceux qui veulent avoir une formation sur les précédentes versions d'Angular, allez voir le cours des années précédentes.
NOTE : si vous allez voir le cours de l'année dernière, il est accompagné de nombreuses vidéos complètes du cours (où je live code et j'explique tout. Je m'étais filmé durant les cours en visio pendant le COVID), mais il ne couvre pas les nouveautés d'Angular 17. Par contre, 95% de ce que je montre n'a pas changé.
Cette partie du cours propose une introduction au framework front-end Angular. Vous réaliserez une application complète incluant un back-end basé sur NodeJS, la base de données NoSQL MongoDB, et un hébergement du tout dans le cloud. Vous mettrez en oeuvre les principaux éléments proposés par Angular, dont la plupart sont également présents dans les frameworks concurrents.
On utilise le même support de cours et le même repository GitHub.
On est allé jusqu'au transparent Numéro 132.
On utilise le même support de cours et le même repository GitHub.
On est allé jusqu'au transparent Numéro 187.
On utilise le même support de cours et le même repository GitHub pour le front.
Repository GitHub du Back-End: https://github.com/micbuffa/AngularMBDSMadagascar2024
On est allé jusqu'au transparent Numéro 223.
On utilise le même support de cours et le même repository GitHub pour le front.
Repository GitHub du Back-End: https://github.com/micbuffa/AngularMBDSMadagascar2024
On est allé jusqu'au transparent Numéro 252.
Contraintes :
Vous apporterez les améliorations optionnelles suivantes à ce TP :
Modifié 2 fois par MichelBuffa
aucun mot modifié
{{page.toc}}
Course documents: see the powerpoint files on this mega link (2 gigabytes).
Videos:
Also worth reading: "La revanche des neurones", an article by Dominique Cardon (in french), an excellent introduction to the 2012 AI learning revolution. The first four pages tell the story of the 18-year-old who programmed classic deep learning algorithms into a GPU and improved the object recognition record by an incredible amount, sparking a new craze for Machine Learning.
To come (2024): multimodal text to XXX generators (video with voice, sound and music):
For installing AI apps locally (Mac M1-M2-M3 or gamer PC recommended) : https://pinokio.computer/
Modifié une fois par MichelBuffa
aucun mot modifié
{{page.toc}}
Stages de L3
Modifié une fois par MichelBuffa
32 mots ajoutés
{{page.toc}}
In this course, we'll cover the basics of audio synthesis for music, in particular by studying how synthesizers work. We'll also look at Web Audio and Web Midi, two W3C standards that enable computer music applications to be designed and used in Web browsers. Finally, we'll look at recent advances in AIs for the automatic generation of music from text.
Course documents: see the powerpoint files on this mega link (2 gigabytes).
Videos:
Also worth reading: "La revanche des neurones", an article by Dominique Cardon (in french), an excellent introduction to the 2012 AI learning revolution. The first four pages tell the story of the 18-year-old who programmed classic deep learning algorithms into a GPU and improved the object recognition record by an incredible amount, sparking a new craze for Machine Learning.
To come (2024): multimodal text to XXX generators (video with voice, sound and music):
For installing AI apps locally (Mac M1-M2-M3 or gamer PC recommended) : https://pinokio.computer/
Constraints:
Due date: 25 Mars 2024, Jordan Sintes will send me the final content (URL)
Online Exam 25 Mars 2024 à 11h: a quizz about IA (second day course), to check what you understood / know from the course. Date to come, I'll send the URL and you will have to pass it all a the same time, with a limited time (40mns). You will have to read the whole course I gave this day.
Modifié une fois par MichelBuffa
32 mots ajoutés
{{page.toc}}
In this course, we'll cover the basics of audio synthesis for music, in particular by studying how synthesizers work. We'll also look at Web Audio and Web Midi, two W3C standards that enable computer music applications to be designed and used in Web browsers. Finally, we'll look at recent advances in AIs for the automatic generation of music from text.
Course documents: see the powerpoint files on this mega link (2 gigabytes).
Videos:
Also worth reading: "La revanche des neurones", an article by Dominique Cardon (in french), an excellent introduction to the 2012 AI learning revolution. The first four pages tell the story of the 18-year-old who programmed classic deep learning algorithms into a GPU and improved the object recognition record by an incredible amount, sparking a new craze for Machine Learning.
To come (2024): multimodal text to XXX generators (video with voice, sound and music):
For installing AI apps locally (Mac M1-M2-M3 or gamer PC recommended) : https://pinokio.computer/
Constraints:
Due date: 25 Mars 2024, Jordan Sintes will send me the final content (URL)
Online Exam 25 Mars 2024 à 11h: a quizz about IA (second day course), to check what you understood / know from the course. Date to come, I'll send the URL and you will have to pass it all a the same time, with a limited time (40mns). You will have to read the whole course I gave this day.
Modifié 2 fois par MichelBuffa
32 mots ajoutés
{{page.toc}}
In this course, we'll cover the basics of audio synthesis for music, in particular by studying how synthesizers work. We'll also look at Web Audio and Web Midi, two W3C standards that enable computer music applications to be designed and used in Web browsers. Finally, we'll look at recent advances in AIs for the automatic generation of music from text.
Course documents: see the powerpoint files on this mega link (2 gigabytes).
Videos:
Also worth reading: "La revanche des neurones", an article by Dominique Cardon (in french), an excellent introduction to the 2012 AI learning revolution. The first four pages tell the story of the 18-year-old who programmed classic deep learning algorithms into a GPU and improved the object recognition record by an incredible amount, sparking a new craze for Machine Learning.
To come (2024): multimodal text to XXX generators (video with voice, sound and music):
For installing AI apps locally (Mac M1-M2-M3 or gamer PC recommended) : https://pinokio.computer/
Constraints:
Due date: 25 Mars 2024, Jordan Sintes will send me the final content (URL)
Online Exam 25 Mars 2024 à 11h: a quizz about IA (second day course), to check what you understood / know from the course. Date to come, I'll send the URL and you will have to pass it all a the same time, with a limited time (40mns). You will have to read the whole course I gave this day.
Modifié 4 fois par MichelBuffa
40 mots ajoutés, 1 mots supprimés
{{page.toc}}
In this course, we'll cover the basics of audio synthesis for music, in particular by studying how synthesizers work. We'll also look at Web Audio and Web Midi, two W3C standards that enable computer music applications to be designed and used in Web browsers. Finally, we'll look at recent advances in AIs for the automatic generation of music from text.
Course documents: see the powerpoint files on this mega link (2 gigabytes).
Videos:
Also worth reading: "La revanche des neurones", an article by Dominique Cardon (in french), an excellent introduction to the 2012 AI learning revolution. The first four pages tell the story of the 18-year-old who programmed classic deep learning algorithms into a GPU and improved the object recognition record by an incredible amount, sparking a new craze for Machine Learning.
To come (2024): multimodal text to XXX generators (video with voice, sound and music):
For installing AI apps locally (Mac M1-M2-M3 or gamer PC recommended) : https://pinokio.computer/
Constraints:
Due date: 25 XXXMars 2024, Jordan Sintes will send me the final content (URL)
Online Exam 25 Mars 2024 à 11h: a quizz about IA (second day course), to check what you understood / know from the course. Date to come, I'll send the URL and you will have to pass it all a the same time, with a limited time (40mns). You will have to read the whole course I gave this day.
Modifié 5 fois par MichelBuffa
41 mots ajoutés, 2 mots supprimés
{{page.toc}}
In this course, we'll cover the basics of audio synthesis for music, in particular by studying how synthesizers work. We'll also look at Web Audio and Web Midi, two W3C standards that enable computer music applications to be designed and used in Web browsers. Finally, we'll look at recent advances in AIs for the automatic generation of music from text.
Course documents: see the powerpoint files on this mega link (2 gigabytes).
Videos:
Also worth reading: "La revanche des neurones", an article by Dominique Cardon (in french), an excellent introduction to the 2012 AI learning revolution. The first four pages tell the story of the 18-year-old who programmed classic deep learning algorithms into a GPU and improved the object recognition record by an incredible amount, sparking a new craze for Machine Learning.
To come (2024): multimodal text to XXX generators (video with voice, sound and music):
For installing AI apps locally (Mac M1-M2-M3 or gamer PC recommended) : https://pinokio.computer/
Constraints:
Due date: 25 XXXMars 2024, Jordan Sintes will send me the final content (URL)
Online Exam 25 Mars 2024 à 11h: a quizz about IA (second day course), to check what you understood / know from the course. Date to come, I'll send the URL and you will have to pass it all a the same time, with a limited time (40mns). You will have to read the whole course I gave this day.
Modifié une fois par MichelBuffa
32 mots ajoutés
{{page.toc}}
In this course, we'll cover the basics of audio synthesis for music, in particular by studying how synthesizers work. We'll also look at Web Audio and Web Midi, two W3C standards that enable computer music applications to be designed and used in Web browsers. Finally, we'll look at recent advances in AIs for the automatic generation of music from text.
Course documents: see the powerpoint files on this mega link (2 gigabytes).
Videos:
Also worth reading: "La revanche des neurones", an article by Dominique Cardon (in french), an excellent introduction to the 2012 AI learning revolution. The first four pages tell the story of the 18-year-old who programmed classic deep learning algorithms into a GPU and improved the object recognition record by an incredible amount, sparking a new craze for Machine Learning.
To come (2024): multimodal text to XXX generators (video with voice, sound and music):
For installing AI apps locally (Mac M1-M2-M3 or gamer PC recommended) : https://pinokio.computer/
Constraints:
Due date: 25 Mars 2024, Jordan Sintes will send me the final content (URL)
Online Exam 25 Mars 2024 à 11h: a quizz about IA (second day course), to check what you understood / know from the course. Date to come, I'll send the URL and you will have to pass it all a the same time, with a limited time (40mns). You will have to read the whole course I gave this day.
Modifié 3 fois par MichelBuffa
37 mots ajoutés
{{page.toc}}
In this course, we'll cover the basics of audio synthesis for music, in particular by studying how synthesizers work. We'll also look at Web Audio and Web Midi, two W3C standards that enable computer music applications to be designed and used in Web browsers. Finally, we'll look at recent advances in AIs for the automatic generation of music from text.
Course documents: see the powerpoint files on this mega link (2 gigabytes).
Videos:
Also worth reading: "La revanche des neurones", an article by Dominique Cardon (in french), an excellent introduction to the 2012 AI learning revolution. The first four pages tell the story of the 18-year-old who programmed classic deep learning algorithms into a GPU and improved the object recognition record by an incredible amount, sparking a new craze for Machine Learning.
To come (2024): multimodal text to XXX generators (video with voice, sound and music):
For installing AI apps locally (Mac M1-M2-M3 or gamer PC recommended) : https://pinokio.computer/
Constraints:
Due date: 25 Mars 2024, Jordan Sintes will send me the final content (URL)
Online Exam 25 Mars 2024 à 11h: a quizz about IA (second day course), to check what you understood / know from the course. Date to come, I'll send the URL and you will have to pass it all a the same time, with a limited time (40mns). You will have to read the whole course I gave this day.
Modifié 2 fois par MichelBuffa
1672 mots ajoutés
{{page.toc}}
Live coding : environnement de développement, rappel sur les fonctions, les objets, les classes, intro aux modules, le DOM, les événements... Voir le repo GutHub COURS/ExempleProjetJS
TRAVAIL A FAIRE POUR LA PROCHAINE SEANCE :
Support de cours :
Supports de cours dans les MOOCs :
Utilisation d'un canvas HTML5
Exemples vus en classe :
Exemples dont j'ai parlé en TP :
Exemples de Snakes (à re-écrire avec des classes, ce serait génial d'avoir plusieurs serpents etc.)
Le TP1 étant assez long, vous le continuerez dans cette séance, mais cette fois-ci vous essaierez d'implémenter les chutes. Je vous propose un algorithme que vous testerez initialement uniquement sur une seule colonne, puis que vous étendrez à toutes :
Une fois que vous aurez testé cela sur plusieurs configurations (groupe de trois en haut de l'écran, plusieurs groupes de trois, etc.), et donc que vous aurez validé votre algorithme de compactage sur une colonne, vous n'aurez plus qu'à appeler ce traitement sur toutes les colonnes.
Les chutes ayant sans doute créé des alignements, vous redetecterez les alignements, recompacterez les colonnes, re-detecterez les alignements, etc. jusqu'à ce qu'il n'y ait plus d'alignement.
Pensez à un score chaque fois que des groupes sont détectés...
Pour ceux qui veulent aller plus loin, voir mes cours sur les Promesses de JavaScript et sur fetch/async/await
Ces Web services consomment des données au format JSON, c'est assez courant, mais ce n'est pas la seule manière de faire. Dans une seconde partie nous verrons comment faire avec des données encodées avec l'API FormData.
L'API fetch est la manière standard la plus moderne pour utiliser des Web Services distants. Jusqu'à présent, nous avons vu comment récupérer des données, mais pas comment en envoyer, ou comment utiliser des services distants proposant l'insertion, modification, suppression de données.
Les bonnes pratiques lorsqu'on conçoit un Web Service permettant le CRUD sur les données (Création, Recherche, Update/mise à jour et Delete/suppression) consistent à implémenter ces opérations via une API fondée sur le protocole HTTP :
Nous avons vu jusqu'à présent de nombreux exemples de fetch effectuant des requêtes GET pour obtenir des données distantes à partir d'un URI.
fetch(URI).then(reponse => { ...});
Dans cette partie, nous allons voir comment utiliser les autres types de requêtes HTTP !
Nous utiliserons pour tester fetch avec les diverses requêtes HTTP, un des Web Service défini sur le site https://jsonplaceholder.typicode.com/, celui qui permet de manipuler des "todo" soit des "tâches à effectuer" comme "aller prendre le pain", "préparer le cours" etc.
Voici l'API qui permet de manipuler les todo à distance, les URI sont classés par type de requête :
GET :
POST :
PUT :
DELETE :
Note : le serveur distant que nous utilisons ne va pas réellement ajouter de données, mais il renvoie une réponse comme si cela avait été réellement effectué.
Explications : cette fois-ci nous avons passé deux paramètres supplémentaires lors de l'appel de fetch
Dans cet exemple, qui est très proche du précédent, on ne change que la valeur de la propriété method du second paramètre d'appel de fetch, et nous nous assurons que l'id du todo envoyé, passé dans la propriété body de ce même objet, est bien valide. Dans l'exemple, nous modifions le todo qui a un id égal à 1. Bien entendu, l'URI du Web Service n'est plus le même, on utilise cette fois-ci : https://jsonplaceholder.typicode.com/todos/1
On va supprimer le todo dont l'id est égal à 1.
Cette fois-ci, pas besoin d'envoyer de body, ni de préciser qu'on manipule du JSON avec un header. On envoie juste une requête DELETE sur le Web Service suivant : https://jsonplaceholder.typicode.com/todos/1
Dans cette section du cours, nous allons voir comment utiliser un Web Service RESTFUL (qui permet de faire les opérations CRUD sur des données distantes -en l'occurrence des restaurants-) et en utilisant des objets FormData pour les requêtes http POST , PUT et DELETE.
Pour tester les exercices de ce chapitre, vous allez devoir installer localement sur votre machine, un serveur NodeJS implémentant les Web Services dont nous aurons besoin.
NodeJS et Express : transparents de présentation de NodeJSet transparents de présentation de Express
Le reste se passe en live coding et explications données par le professeur. Voir la vidéo du cours.
Modifié 2 fois par MichelBuffa
1672 mots ajoutés
{{page.toc}}
Live coding : environnement de développement, rappel sur les fonctions, les objets, les classes, intro aux modules, le DOM, les événements... Voir le repo GutHub COURS/ExempleProjetJS
TRAVAIL A FAIRE POUR LA PROCHAINE SEANCE :
Support de cours :
Supports de cours dans les MOOCs :
Utilisation d'un canvas HTML5
Exemples vus en classe :
Exemples dont j'ai parlé en TP :
Exemples de Snakes (à re-écrire avec des classes, ce serait génial d'avoir plusieurs serpents etc.)
Le TP1 étant assez long, vous le continuerez dans cette séance, mais cette fois-ci vous essaierez d'implémenter les chutes. Je vous propose un algorithme que vous testerez initialement uniquement sur une seule colonne, puis que vous étendrez à toutes :
Une fois que vous aurez testé cela sur plusieurs configurations (groupe de trois en haut de l'écran, plusieurs groupes de trois, etc.), et donc que vous aurez validé votre algorithme de compactage sur une colonne, vous n'aurez plus qu'à appeler ce traitement sur toutes les colonnes.
Les chutes ayant sans doute créé des alignements, vous redetecterez les alignements, recompacterez les colonnes, re-detecterez les alignements, etc. jusqu'à ce qu'il n'y ait plus d'alignement.
Pensez à un score chaque fois que des groupes sont détectés...
Pour ceux qui veulent aller plus loin, voir mes cours sur les Promesses de JavaScript et sur fetch/async/await
Ces Web services consomment des données au format JSON, c'est assez courant, mais ce n'est pas la seule manière de faire. Dans une seconde partie nous verrons comment faire avec des données encodées avec l'API FormData.
L'API fetch est la manière standard la plus moderne pour utiliser des Web Services distants. Jusqu'à présent, nous avons vu comment récupérer des données, mais pas comment en envoyer, ou comment utiliser des services distants proposant l'insertion, modification, suppression de données.
Les bonnes pratiques lorsqu'on conçoit un Web Service permettant le CRUD sur les données (Création, Recherche, Update/mise à jour et Delete/suppression) consistent à implémenter ces opérations via une API fondée sur le protocole HTTP :
Nous avons vu jusqu'à présent de nombreux exemples de fetch effectuant des requêtes GET pour obtenir des données distantes à partir d'un URI.
fetch(URI).then(reponse => { ...});
Dans cette partie, nous allons voir comment utiliser les autres types de requêtes HTTP !
Nous utiliserons pour tester fetch avec les diverses requêtes HTTP, un des Web Service défini sur le site https://jsonplaceholder.typicode.com/, celui qui permet de manipuler des "todo" soit des "tâches à effectuer" comme "aller prendre le pain", "préparer le cours" etc.
Voici l'API qui permet de manipuler les todo à distance, les URI sont classés par type de requête :
GET :
POST :
PUT :
DELETE :
Note : le serveur distant que nous utilisons ne va pas réellement ajouter de données, mais il renvoie une réponse comme si cela avait été réellement effectué.
Explications : cette fois-ci nous avons passé deux paramètres supplémentaires lors de l'appel de fetch
Dans cet exemple, qui est très proche du précédent, on ne change que la valeur de la propriété method du second paramètre d'appel de fetch, et nous nous assurons que l'id du todo envoyé, passé dans la propriété body de ce même objet, est bien valide. Dans l'exemple, nous modifions le todo qui a un id égal à 1. Bien entendu, l'URI du Web Service n'est plus le même, on utilise cette fois-ci : https://jsonplaceholder.typicode.com/todos/1
On va supprimer le todo dont l'id est égal à 1.
Cette fois-ci, pas besoin d'envoyer de body, ni de préciser qu'on manipule du JSON avec un header. On envoie juste une requête DELETE sur le Web Service suivant : https://jsonplaceholder.typicode.com/todos/1
Dans cette section du cours, nous allons voir comment utiliser un Web Service RESTFUL (qui permet de faire les opérations CRUD sur des données distantes -en l'occurrence des restaurants-) et en utilisant des objets FormData pour les requêtes http POST , PUT et DELETE.
Pour tester les exercices de ce chapitre, vous allez devoir installer localement sur votre machine, un serveur NodeJS implémentant les Web Services dont nous aurons besoin.
NodeJS et Express : transparents de présentation de NodeJSet transparents de présentation de Express
Le reste se passe en live coding et explications données par le professeur. Voir la vidéo du cours.
Modifié une fois par MichelBuffa
1672 mots ajoutés
{{page.toc}}
Live coding : environnement de développement, rappel sur les fonctions, les objets, les classes, intro aux modules, le DOM, les événements... Voir le repo GutHub COURS/ExempleProjetJS
TRAVAIL A FAIRE POUR LA PROCHAINE SEANCE :
Support de cours :
Supports de cours dans les MOOCs :
Utilisation d'un canvas HTML5
Exemples vus en classe :
Exemples dont j'ai parlé en TP :
Exemples de Snakes (à re-écrire avec des classes, ce serait génial d'avoir plusieurs serpents etc.)
Le TP1 étant assez long, vous le continuerez dans cette séance, mais cette fois-ci vous essaierez d'implémenter les chutes. Je vous propose un algorithme que vous testerez initialement uniquement sur une seule colonne, puis que vous étendrez à toutes :
Une fois que vous aurez testé cela sur plusieurs configurations (groupe de trois en haut de l'écran, plusieurs groupes de trois, etc.), et donc que vous aurez validé votre algorithme de compactage sur une colonne, vous n'aurez plus qu'à appeler ce traitement sur toutes les colonnes.
Les chutes ayant sans doute créé des alignements, vous redetecterez les alignements, recompacterez les colonnes, re-detecterez les alignements, etc. jusqu'à ce qu'il n'y ait plus d'alignement.
Pensez à un score chaque fois que des groupes sont détectés...
Pour ceux qui veulent aller plus loin, voir mes cours sur les Promesses de JavaScript et sur fetch/async/await
Ces Web services consomment des données au format JSON, c'est assez courant, mais ce n'est pas la seule manière de faire. Dans une seconde partie nous verrons comment faire avec des données encodées avec l'API FormData.
L'API fetch est la manière standard la plus moderne pour utiliser des Web Services distants. Jusqu'à présent, nous avons vu comment récupérer des données, mais pas comment en envoyer, ou comment utiliser des services distants proposant l'insertion, modification, suppression de données.
Les bonnes pratiques lorsqu'on conçoit un Web Service permettant le CRUD sur les données (Création, Recherche, Update/mise à jour et Delete/suppression) consistent à implémenter ces opérations via une API fondée sur le protocole HTTP :
Nous avons vu jusqu'à présent de nombreux exemples de fetch effectuant des requêtes GET pour obtenir des données distantes à partir d'un URI.
fetch(URI).then(reponse => { ...});
Dans cette partie, nous allons voir comment utiliser les autres types de requêtes HTTP !
Nous utiliserons pour tester fetch avec les diverses requêtes HTTP, un des Web Service défini sur le site https://jsonplaceholder.typicode.com/, celui qui permet de manipuler des "todo" soit des "tâches à effectuer" comme "aller prendre le pain", "préparer le cours" etc.
Voici l'API qui permet de manipuler les todo à distance, les URI sont classés par type de requête :
GET :
POST :
PUT :
DELETE :
Note : le serveur distant que nous utilisons ne va pas réellement ajouter de données, mais il renvoie une réponse comme si cela avait été réellement effectué.
Explications : cette fois-ci nous avons passé deux paramètres supplémentaires lors de l'appel de fetch
Dans cet exemple, qui est très proche du précédent, on ne change que la valeur de la propriété method du second paramètre d'appel de fetch, et nous nous assurons que l'id du todo envoyé, passé dans la propriété body de ce même objet, est bien valide. Dans l'exemple, nous modifions le todo qui a un id égal à 1. Bien entendu, l'URI du Web Service n'est plus le même, on utilise cette fois-ci : https://jsonplaceholder.typicode.com/todos/1
On va supprimer le todo dont l'id est égal à 1.
Cette fois-ci, pas besoin d'envoyer de body, ni de préciser qu'on manipule du JSON avec un header. On envoie juste une requête DELETE sur le Web Service suivant : https://jsonplaceholder.typicode.com/todos/1
Dans cette section du cours, nous allons voir comment utiliser un Web Service RESTFUL (qui permet de faire les opérations CRUD sur des données distantes -en l'occurrence des restaurants-) et en utilisant des objets FormData pour les requêtes http POST , PUT et DELETE.
Pour tester les exercices de ce chapitre, vous allez devoir installer localement sur votre machine, un serveur NodeJS implémentant les Web Services dont nous aurons besoin.
NodeJS et Express : transparents de présentation de NodeJSet transparents de présentation de Express
Le reste se passe en live coding et explications données par le professeur. Voir la vidéo du cours.
Modifié 5 fois par MichelBuffa
2165 mots ajoutés
{{page.toc}}
Live coding : environnement de développement, rappel sur les fonctions, les objets, les classes, intro aux modules, le DOM, les événements... Voir le repo GutHub COURS/ExempleProjetJS
TRAVAIL A FAIRE POUR LA PROCHAINE SEANCE :
Support de cours :
Supports de cours dans les MOOCs :
Utilisation d'un canvas HTML5
Exemples vus en classe :
Exemples dont j'ai parlé en TP :
Exemples de Snakes (à re-écrire avec des classes, ce serait génial d'avoir plusieurs serpents etc.)
Le TP1 étant assez long, vous le continuerez dans cette séance, mais cette fois-ci vous essaierez d'implémenter les chutes. Je vous propose un algorithme que vous testerez initialement uniquement sur une seule colonne, puis que vous étendrez à toutes :
Une fois que vous aurez testé cela sur plusieurs configurations (groupe de trois en haut de l'écran, plusieurs groupes de trois, etc.), et donc que vous aurez validé votre algorithme de compactage sur une colonne, vous n'aurez plus qu'à appeler ce traitement sur toutes les colonnes.
Les chutes ayant sans doute créé des alignements, vous redetecterez les alignements, recompacterez les colonnes, re-detecterez les alignements, etc. jusqu'à ce qu'il n'y ait plus d'alignement.
Pensez à un score chaque fois que des groupes sont détectés...
Pour ceux qui veulent aller plus loin, voir mes cours sur les Promesses de JavaScript et sur fetch/async/await
Ces Web services consomment des données au format JSON, c'est assez courant, mais ce n'est pas la seule manière de faire. Dans une seconde partie nous verrons comment faire avec des données encodées avec l'API FormData.
L'API fetch est la manière standard la plus moderne pour utiliser des Web Services distants. Jusqu'à présent, nous avons vu comment récupérer des données, mais pas comment en envoyer, ou comment utiliser des services distants proposant l'insertion, modification, suppression de données.
Les bonnes pratiques lorsqu'on conçoit un Web Service permettant le CRUD sur les données (Création, Recherche, Update/mise à jour et Delete/suppression) consistent à implémenter ces opérations via une API fondée sur le protocole HTTP :
Nous avons vu jusqu'à présent de nombreux exemples de fetch effectuant des requêtes GET pour obtenir des données distantes à partir d'un URI.
fetch(URI).then(reponse => { ...});
Dans cette partie, nous allons voir comment utiliser les autres types de requêtes HTTP !
Nous utiliserons pour tester fetch avec les diverses requêtes HTTP, un des Web Service défini sur le site https://jsonplaceholder.typicode.com/, celui qui permet de manipuler des "todo" soit des "tâches à effectuer" comme "aller prendre le pain", "préparer le cours" etc.
Voici l'API qui permet de manipuler les todo à distance, les URI sont classés par type de requête :
GET :
POST :
PUT :
DELETE :
Note : le serveur distant que nous utilisons ne va pas réellement ajouter de données, mais il renvoie une réponse comme si cela avait été réellement effectué.
Explications : cette fois-ci nous avons passé deux paramètres supplémentaires lors de l'appel de fetch
Dans cet exemple, qui est très proche du précédent, on ne change que la valeur de la propriété method du second paramètre d'appel de fetch, et nous nous assurons que l'id du todo envoyé, passé dans la propriété body de ce même objet, est bien valide. Dans l'exemple, nous modifions le todo qui a un id égal à 1. Bien entendu, l'URI du Web Service n'est plus le même, on utilise cette fois-ci : https://jsonplaceholder.typicode.com/todos/1
On va supprimer le todo dont l'id est égal à 1.
Cette fois-ci, pas besoin d'envoyer de body, ni de préciser qu'on manipule du JSON avec un header. On envoie juste une requête DELETE sur le Web Service suivant : https://jsonplaceholder.typicode.com/todos/1
Dans cette section du cours, nous allons voir comment utiliser un Web Service RESTFUL (qui permet de faire les opérations CRUD sur des données distantes -en l'occurrence des restaurants-) et en utilisant des objets FormData pour les requêtes http POST , PUT et DELETE.
Pour tester les exercices de ce chapitre, vous allez devoir installer localement sur votre machine, un serveur NodeJS implémentant les Web Services dont nous aurons besoin.
NodeJS et Express : transparents de présentation de NodeJSet transparents de présentation de Express
Le reste se passe en live coding et explications données par le professeur. Voir la vidéo du cours.
Modifié une fois par MichelBuffa
27 mots ajoutés, 1120 mots supprimés
{{page.toc}}
Dans ce TP vous allez coder le squelette d'un jeu de type Mach-3 (à la Candy Crush). Nous verrons plus tard une autre implémentation qui utilisera le canvas HTML5 au lieu de divs pour représenter la grille.
<div>
et <img>
pour afficher les différentes pièces du jeu et interagir avec elles. C'est celle que je recommande aux débutants en JavaScript. On pourra déplacer les pièces (les "swapper") à l'aide de clicks souris ou du drag'n'drop.<canvas>
de HTML5 et de l'animation à 60 images secondes. C'est cette méthode que je recommande à ceux qui connaissent déjà JavaScript, elle est un peu plus challengeante :-) Mais permettra de faire des animations plus fluides, au pixel près, notamment lors des chutes de pièces, des animations d'explosions etc. Avant de vous attaquer à cette méthode, essayez de faire la première.Travail à faire :
L3Miage2021L3Miage2023-20222024/TPS/TP1/TP1_3match_squelette_divs_DOM/squelette/
" dans un dossier à vous et travaillerez sur votre propre version.On a six types de cookies (croissant, cupcake, danish, donut, macaroon, sugarCookie), chaque cookie a une position dans la grille (ligne, colonne), et deux images associées : une version normale et une version "surlignée" ("highlighted" en anglais).
Vous modifierez la classe Cookie dans le fichier cookie.js pour que le constructeur prenne en paramètre : type (entre 0 et 5), ligne, colonne. Dans la classe Cookie, on a mis deux tableaux statiques pour décrire les URLs des images (normales, surlignees).
Un tableau statique n'est pas accédé à travers une instance mais à travers le nom de la classe. Par exemple : Cookie.urlsImagesNormales[this.type]; renverra l'url de l'image "normale" correspondant au type this.type.
Pour this.type = 0 ça donnera l'image d'un croissant.
Travail à faire :
Ecrire un constructeur qui prend en paramètre type, ligne, colonne, Dans ce constructeur, initialiser les propriétés : Vous mettrez les paramètres type, ligne, colonne dans des propriétés (rappel : propriété/attributs c'est pareil) du même nom Vous créerez une propriété this.htmlImage qui sera crée à l'aide de l'API du DOM comme un élément HTML de type "img". Cette image aura comme source l'url de l'image correspondant au type de la cookie. Vous modifierez les attributs width et height de l'image pour indiquer une taille de 80x80 pixels, Vous ajouterez deux attributs via la dataset API. On veut stocker la ligne et la colonne dans l'objet DOM this.htmlImage.
Coder dans la classe Grille de quoi remplir la grille
Regardez la classe Grille (dans grille.js). Elle sert à décrire la grille affichée à l'écran.
Travail à faire :
Déclarer un tableau de Cookie dans cette classe. Par exemple, appelez-le tabCookies, Ajoutez un constructeur qui prend en paramètres le nombre de lignes et de colonnes de la Grille. Pour le moment on a codé en dur dans index.html les <div> qui composent la grille. Il y en a 9x9. Dans ce constructeur vous stockerez les paramètres passés dans des propriétés du même nom (nbLignes et nbColonnes) A la fin du constructeur vous appellerez la méthode this.remplirTableauDeCookies(6); // 6 = nombre de couleurs...5 ou 4 pour des difficultés moindres. Coder la méthode this.remplirTableauDeCookie(nbTypes) qui va remplir le tableau tabCookies par lignes et par colonnes: En JavaScript on ne sait pas déclarer et allouer un tableau à n dimensions. En effet, la déclaration let tab[9][9] n'est pas valide par exemple. Dans le fichier utils.jsquand on vous fournit une fonction create2DArray(nbLignes) qui prend en paramètre le nombre de lignes d'un tableau à deux dimensions. Utilisez-là pour allouer le tableau. Ensuite à l'aide de deux boucles for imbriquées (sur le nombre de lignes et sur le nombre de colonnes de la grille), pour chaque case (ligne, colonne) : générer un type au hasard, qui aura une valeur entre 0 et 5 créer un objet de type Cookie(type, ligne, colonne) le rajouter dans le tableau tabCookies à la case [ligne][colonne]
Coder dans la classe Grille la méthode showCookies() qui afficher les images dans la grille
Vous écrirez une méthode showCookies() dans la classe Grille, qui va :
Parcourir les <div> de la grille HTML à l'aide de document.querySelectorAll("#grille div"); Voir module 2 du MOOC sur le DOM et querySelector/querySelectorAll La liste des <div> obtenue est àclique une dimension, on utilisera l'itérateur forEach sur cette collection pour parcourir chaque élément avec son index : listeDivs.forEach((elem, index) => {.....}); Dans cet itérateur, utiliser des opérateurs mathématiques (/ et %) pour calculer la ligne et la colonne correspondant à l'index de l'itérateur (par ex, si index vaut 29, pour le 30ème div (on démarre l'index à zéro), quelle est la ligne/colonne de la cookie dans le 30ème div si on a 9 lignes et 9 colonnes ?) Une fois qu'on a la ligne et la colonne, récupérer la cookie correspondante dans le tableau tabCookies, Récupérer l'image qui est une propriété de la cookie, et l'ajouter dans le DOM comme fils du <div> courant. Vous regarderez dans le MOOC JavaScript Intro, partie DOM (chapitre 2) "comment ajouter un élément au DOM". Vous utiliserez la méthode append(elem) ou appendChild(elem) sur le div. Si tout va bien, on doit voir les cookies s'afficher àveut l'écran.
Detecterchanger le click souris sur les images
Regardez où les images sont créées. Cela se passe dans quelle classe ?
Mais dans quelle classe se trouvelook le& tableaufeel des cookies ? Bon, on va devoir commencer à réfléchir à la logique du jeu...
selectionnee()
et "deselectionnee()
" dans la classe Cookie
, qui vont changer les classes CSS d'une cookie. Quand on clique une image/cookie, on va devoir stoker la cookie cliquée dans un tableau cookiesCliquees
de la classe Grille. Si le tableau a déjà un cookie dedans c'est qu'on a déjà clické sur la cookie "de départ".
Quand on clique une seconde cookie, on va devoir :
static distance(x1, y1, x2, y2)
dans la classe Cookie).cookiesCliquees à zéro.
splice(pos, nbElements)
sur le tableau cookiesCliquees.swappe(cookie1, cookie2)
dans la classe Cookie
.On veut pouvoir aussi drag'n'dropper une image sur une autre et faire en sorte que les deux cookie soient swappés si ils sont à une distance de 1. Pendant le drag on veut voir un feedback visuel sur les cases survolées.
Support de cours pour le Drag'n'Drop : le module 3.3 du Mooc "HTML5 Apps and Games".
Vous devrez pour cela essayer de ré-utiliser au maximum le code écrit dans les étapes suivantes. On ré-utilisera par exemple le tableau cookiesCliquees
pour stocker la cookie source (celle qu'on dragge) et la cookie destination (celle sur laquelle on droppe), et les algorithmes pour tester si on peut swapper et ceux qui implémentent le swap sont les mêmes.
Travail à faire :
ondragstart
sur les images. Vous copierez dans le clipboard du drag'n'drop (voir cours) un objet contenant la ligne et la colonne de l'image cliquée, en l'encodant en JSON à l'aide de la méthode JSON.stringify.ondragenter
et ondragleave
qui ajouteront ou enlèveront la classe CSS "grilleDragOver" aux images survolées...event.target
), la cookie source (dans le clipboard, à partir de la ligne et la colonne) et qui swappera si possible (en appelant des méthodes existantes).detecterMatch3Lignes()
" et "detecterMatch3Colonnes()" qui vont marquer les cookies qui font partie d'un groupe de 3, 4, 5 ou 6 cookies de même type. this.tabCookies
les cookies qui doivent être supprimées visuellement de la grille sont ceux "marqués" (ajoutez un attribut dans la classe Cookie)
Modifié 5 fois par MichelBuffa
2165 mots ajoutés
{{page.toc}}
Live coding : environnement de développement, rappel sur les fonctions, les objets, les classes, intro aux modules, le DOM, les événements... Voir le repo GutHub COURS/ExempleProjetJS
TRAVAIL A FAIRE POUR LA PROCHAINE SEANCE :
Support de cours :
Supports de cours dans les MOOCs :
Utilisation d'un canvas HTML5
Exemples vus en classe :
Exemples dont j'ai parlé en TP :
Exemples de Snakes (à re-écrire avec des classes, ce serait génial d'avoir plusieurs serpents etc.)
Le TP1 étant assez long, vous le continuerez dans cette séance, mais cette fois-ci vous essaierez d'implémenter les chutes. Je vous propose un algorithme que vous testerez initialement uniquement sur une seule colonne, puis que vous étendrez à toutes :
Une fois que vous aurez testé cela sur plusieurs configurations (groupe de trois en haut de l'écran, plusieurs groupes de trois, etc.), et donc que vous aurez validé votre algorithme de compactage sur une colonne, vous n'aurez plus qu'à appeler ce traitement sur toutes les colonnes.
Les chutes ayant sans doute créé des alignements, vous redetecterez les alignements, recompacterez les colonnes, re-detecterez les alignements, etc. jusqu'à ce qu'il n'y ait plus d'alignement.
Pensez à un score chaque fois que des groupes sont détectés...
Pour ceux qui veulent aller plus loin, voir mes cours sur les Promesses de JavaScript et sur fetch/async/await
Ces Web services consomment des données au format JSON, c'est assez courant, mais ce n'est pas la seule manière de faire. Dans une seconde partie nous verrons comment faire avec des données encodées avec l'API FormData.
L'API fetch est la manière standard la plus moderne pour utiliser des Web Services distants. Jusqu'à présent, nous avons vu comment récupérer des données, mais pas comment en envoyer, ou comment utiliser des services distants proposant l'insertion, modification, suppression de données.
Les bonnes pratiques lorsqu'on conçoit un Web Service permettant le CRUD sur les données (Création, Recherche, Update/mise à jour et Delete/suppression) consistent à implémenter ces opérations via une API fondée sur le protocole HTTP :
Nous avons vu jusqu'à présent de nombreux exemples de fetch effectuant des requêtes GET pour obtenir des données distantes à partir d'un URI.
fetch(URI).then(reponse => { ...});
Dans cette partie, nous allons voir comment utiliser les autres types de requêtes HTTP !
Nous utiliserons pour tester fetch avec les diverses requêtes HTTP, un des Web Service défini sur le site https://jsonplaceholder.typicode.com/, celui qui permet de manipuler des "todo" soit des "tâches à effectuer" comme "aller prendre le pain", "préparer le cours" etc.
Voici l'API qui permet de manipuler les todo à distance, les URI sont classés par type de requête :
GET :
POST :
PUT :
DELETE :
Note : le serveur distant que nous utilisons ne va pas réellement ajouter de données, mais il renvoie une réponse comme si cela avait été réellement effectué.
Explications : cette fois-ci nous avons passé deux paramètres supplémentaires lors de l'appel de fetch
Dans cet exemple, qui est très proche du précédent, on ne change que la valeur de la propriété method du second paramètre d'appel de fetch, et nous nous assurons que l'id du todo envoyé, passé dans la propriété body de ce même objet, est bien valide. Dans l'exemple, nous modifions le todo qui a un id égal à 1. Bien entendu, l'URI du Web Service n'est plus le même, on utilise cette fois-ci : https://jsonplaceholder.typicode.com/todos/1
On va supprimer le todo dont l'id est égal à 1.
Cette fois-ci, pas besoin d'envoyer de body, ni de préciser qu'on manipule du JSON avec un header. On envoie juste une requête DELETE sur le Web Service suivant : https://jsonplaceholder.typicode.com/todos/1
Dans cette section du cours, nous allons voir comment utiliser un Web Service RESTFUL (qui permet de faire les opérations CRUD sur des données distantes -en l'occurrence des restaurants-) et en utilisant des objets FormData pour les requêtes http POST , PUT et DELETE.
Pour tester les exercices de ce chapitre, vous allez devoir installer localement sur votre machine, un serveur NodeJS implémentant les Web Services dont nous aurons besoin.
NodeJS et Express : transparents de présentation de NodeJSet transparents de présentation de Express
Le reste se passe en live coding et explications données par le professeur. Voir la vidéo du cours.
Modifié 2 fois par MichelBuffa
32 mots ajoutés
{{page.toc}}
In this course, we'll cover the basics of audio synthesis for music, in particular by studying how synthesizers work. We'll also look at Web Audio and Web Midi, two W3C standards that enable computer music applications to be designed and used in Web browsers. Finally, we'll look at recent advances in AIs for the automatic generation of music from text.
Course documents: see the powerpoint files on this mega link (2 gigabytes).
Videos:
Also worth reading: "La revanche des neurones", an article by Dominique Cardon (in french), an excellent introduction to the 2012 AI learning revolution. The first four pages tell the story of the 18-year-old who programmed classic deep learning algorithms into a GPU and improved the object recognition record by an incredible amount, sparking a new craze for Machine Learning.
To come (2024): multimodal text to XXX generators (video with voice, sound and music):
For installing AI apps locally (Mac M1-M2-M3 or gamer PC recommended) : https://pinokio.computer/
Constraints:
Due date: 25 Mars 2024, Jordan Sintes will send me the final content (URL)
Online Exam 25 Mars 2024 à 11h: a quizz about IA (second day course), to check what you understood / know from the course. Date to come, I'll send the URL and you will have to pass it all a the same time, with a limited time (40mns). You will have to read the whole course I gave this day.
Modifié 2 fois par MichelBuffa
aucun mot modifié
{{page.toc}}
Stages de L3
Modifié 2 fois par MichelBuffa
1672 mots ajoutés
{{page.toc}}
Live coding : environnement de développement, rappel sur les fonctions, les objets, les classes, intro aux modules, le DOM, les événements... Voir le repo GutHub COURS/ExempleProjetJS
TRAVAIL A FAIRE POUR LA PROCHAINE SEANCE :
Support de cours :
Supports de cours dans les MOOCs :
Utilisation d'un canvas HTML5
Exemples vus en classe :
Exemples dont j'ai parlé en TP :
Exemples de Snakes (à re-écrire avec des classes, ce serait génial d'avoir plusieurs serpents etc.)
Le TP1 étant assez long, vous le continuerez dans cette séance, mais cette fois-ci vous essaierez d'implémenter les chutes. Je vous propose un algorithme que vous testerez initialement uniquement sur une seule colonne, puis que vous étendrez à toutes :
Une fois que vous aurez testé cela sur plusieurs configurations (groupe de trois en haut de l'écran, plusieurs groupes de trois, etc.), et donc que vous aurez validé votre algorithme de compactage sur une colonne, vous n'aurez plus qu'à appeler ce traitement sur toutes les colonnes.
Les chutes ayant sans doute créé des alignements, vous redetecterez les alignements, recompacterez les colonnes, re-detecterez les alignements, etc. jusqu'à ce qu'il n'y ait plus d'alignement.
Pensez à un score chaque fois que des groupes sont détectés...
Pour ceux qui veulent aller plus loin, voir mes cours sur les Promesses de JavaScript et sur fetch/async/await
Ces Web services consomment des données au format JSON, c'est assez courant, mais ce n'est pas la seule manière de faire. Dans une seconde partie nous verrons comment faire avec des données encodées avec l'API FormData.
L'API fetch est la manière standard la plus moderne pour utiliser des Web Services distants. Jusqu'à présent, nous avons vu comment récupérer des données, mais pas comment en envoyer, ou comment utiliser des services distants proposant l'insertion, modification, suppression de données.
Les bonnes pratiques lorsqu'on conçoit un Web Service permettant le CRUD sur les données (Création, Recherche, Update/mise à jour et Delete/suppression) consistent à implémenter ces opérations via une API fondée sur le protocole HTTP :
Nous avons vu jusqu'à présent de nombreux exemples de fetch effectuant des requêtes GET pour obtenir des données distantes à partir d'un URI.
fetch(URI).then(reponse => { ...});
Dans cette partie, nous allons voir comment utiliser les autres types de requêtes HTTP !
Nous utiliserons pour tester fetch avec les diverses requêtes HTTP, un des Web Service défini sur le site https://jsonplaceholder.typicode.com/, celui qui permet de manipuler des "todo" soit des "tâches à effectuer" comme "aller prendre le pain", "préparer le cours" etc.
Voici l'API qui permet de manipuler les todo à distance, les URI sont classés par type de requête :
GET :
POST :
PUT :
DELETE :
Note : le serveur distant que nous utilisons ne va pas réellement ajouter de données, mais il renvoie une réponse comme si cela avait été réellement effectué.
Explications : cette fois-ci nous avons passé deux paramètres supplémentaires lors de l'appel de fetch
Dans cet exemple, qui est très proche du précédent, on ne change que la valeur de la propriété method du second paramètre d'appel de fetch, et nous nous assurons que l'id du todo envoyé, passé dans la propriété body de ce même objet, est bien valide. Dans l'exemple, nous modifions le todo qui a un id égal à 1. Bien entendu, l'URI du Web Service n'est plus le même, on utilise cette fois-ci : https://jsonplaceholder.typicode.com/todos/1
On va supprimer le todo dont l'id est égal à 1.
Cette fois-ci, pas besoin d'envoyer de body, ni de préciser qu'on manipule du JSON avec un header. On envoie juste une requête DELETE sur le Web Service suivant : https://jsonplaceholder.typicode.com/todos/1
Dans cette section du cours, nous allons voir comment utiliser un Web Service RESTFUL (qui permet de faire les opérations CRUD sur des données distantes -en l'occurrence des restaurants-) et en utilisant des objets FormData pour les requêtes http POST , PUT et DELETE.
Pour tester les exercices de ce chapitre, vous allez devoir installer localement sur votre machine, un serveur NodeJS implémentant les Web Services dont nous aurons besoin.
NodeJS et Express : transparents de présentation de NodeJSet transparents de présentation de Express
Le reste se passe en live coding et explications données par le professeur. Voir la vidéo du cours.
Modifié 2 fois par MichelBuffa
aucun mot modifié
{{page.toc}}
Stages de L3
Modifié une fois par MichelBuffa
29 mots ajoutés
{{page.toc}}
Dans ce cours, vous aurez une introduction à Angular, un framework front-end populaire. Nous utiliserons un back-end NodeJS/Mongoose/MongoDB et vous verrez également comment héberger le tout dans le cloud.
Notez que nous utiliserons Angular dans sa version 17, avec des composants standalone. Pour ceux qui veulent avoir une formation sur les précédentes versions d'Angular, allez voir le cours des années précédentes.
NOTE : si vous allez voir le cours de l'année dernière, il est accompagné de nombreuses vidéos complètes du cours (où je live code et j'explique tout. Je m'étais filmé durant les cours en visio pendant le COVID), mais il ne couvre pas les nouveautés d'Angular 17. Par contre, 95% de ce que je montre n'a pas changé.
Cette partie du cours propose une introduction au framework front-end Angular. Vous réaliserez une application complète incluant un back-end basé sur NodeJS, la base de données NoSQL MongoDB, et un hébergement du tout dans le cloud. Vous mettrez en oeuvre les principaux éléments proposés par Angular, dont la plupart sont également présents dans les frameworks concurrents.
On utilise le même support de cours et le même repository GitHub.
On est allé jusqu'au transparent Numéro 108.
On utilise le même support de cours et le même repository GitHub.
On est allé jusqu'au transparent Numéro 144.
Travail à faire : transparents 147 à 155 !
ICI REPOSITORY DU BACK-END : https://github.com/micbuffa/angularBackRabat20204