Programmation javascript avec p5.js

Débuter avec le javascript

Le javascript est un langage de programmation que l’on peut insérer dans une page web et qui est interprété par le navigateur internet.

Introduction

Pour commencer un utilisera, l’excellent site Silent Teacher (ne pas y consacrer plus qu’une heure).

Note : Si besoin, notamment si vous vous êtes interrompu, il est possible de faire apparaître le menu permettant de choisir le niveau de difficulté en tapant dans la console javascript (généralement accessible avec F12) le code suivant : (document.getElementById("show_menu")).click().

Variable, conditions et boucle

Pour apprendre les bases de la programmation, on utilisera le livre en ligne JavaScript Éloquent, Une introduction moderne à la programmation de Marijn Haverbeke (dont on pourra lire l’introduction à la maison).

Javascript Eloquent
Javascript Eloquent

Dans ce livre en ligne, les exemple de code peuvent être lancé en cliquant sur runcode (on peut aussi l’ouvrir pour l’éditer dans une console en cliquant sur loadcode).

Commencer par lire le chapitre :

Les bases du JavaScript : valeurs, variables et structures de contrôle

 

Créer des applications Android avec MIT App Inventor

Pour commencer

Se connecter à l’application MIT App Inventor :

Logo MIT App Inventor
MIT App Inventor

Première application avec MIT App Inventor

Application de dessin DigitalDoodle

Suivre le tutoriel de l’application de dessin DigitalDoodle :

AppInventor : Digital Doodle
AppInventor : Digital Doodle

 

Pour tester l’application, on peut utiliser un émulateur de téléphone. Pour cela, il faut :

  • Ouvrir un gestionnaire de fichier et lancer le programme :
    V:\AppInventor\AppInventor
Appinventor sur V:
  • Puis cliquer sur le bouton AI2 Starter dans la fenêtre qui s’ouvre.
AI2U Starter
  • Connecter l’émulateur depuis le site d’App Inventor :
    App Inventor : connect emulator
    App Inventor : connect emulator

    Autre solution : utiliser votre smartphone (à condition qu’il soit sous Android).

Améliorer l’application Digital Doodle

Une fois l’application Digital Doodle fonctionnelle, c’est le moment de la perfectionner. Voici quelques pistes d’amélioration :

  • Effacer le dessin en secouant le téléphone.
  • Permettre de changer la couleur de dessin, par exemple avec des boutons ou une liste déroulante.
  • Rajouter la possibilité de prendre une photo qui servira de fond pour de dessin.
  • … et tout ce qui vous passe par la tête.

Note : on pourra s’aider éventuellement du tutoriel de l’application PaintPot.

Pour aller plus loin

La documentation, en anglais, de MIT App Inventor :

Apprendre les langages du web

Deux langages sont à la base des sites web actuels : le HTML (pour HyperText Markup Language ou langage de balisage d’hypertexte) et le CSS (pour Cascading Style Sheets ou Feuilles de style en cascade).

Pour apprendre les bases de ces deux langages on utilisera les cours du site khanacademy.org (il n’est pas nécessaire d’y créer un compte mais vous pouvez le faire si vous voulez).

Suivre uniquement les deux cours d’introduction :

Application : créer une affiche avec Mozilla Thimble.

Ouvrir le projet :

Keep Calm and Carry On

  • Modifier le texte de l’affiche
  • Changer l’image utilisée
  • Changer la couleur du texte et celle du fond

Puis réaliser toutes les modifications que vous voulez jusqu’à aboutir à une affiche qui vous plaise.

Appeler le professeur pour lui montrer. Vous pouvez publier votre réalisation, mais il est nécessaire pour cela de créer un compte.

 

Robot suiveur de ligne avec freinage automatique

De plus en plus de constructeur automobile intègre dans leur voiture un système de freinage automatique.

https://www.youtube.com/watch?v=OnmU-H77w3I

 

 

 

 

Proposer une modification de votre programme robot suiveur de ligne pour freiner d’urgence votre robot s’il y a un robot juste devant le votre ou un obstacle.

Pour étoffer votre votre programmation on peut envisager une alerte sonore et si l’obstacle persiste un contournement, si vous avez des fonctionnalités que vous jugez pertinentes n’hésitez pas , lancez vous…