1. Introduction à Processing

Voila vos premiers pas dans l'univers de la programmation...cela va vous demander de la rigueur, de la réflexion et beaucoup de documentation...mais le codage, c'est l'avenir, pas vrai ???

A travers l’utilisation des "jeux sérieux" LightBot et BLocky Games, vous avez découvert les notions fondamentales de la programmation :

En connaissant ça, vous connaissez tout sur la programmation !

Ensuite, il faut quand même apprendre la syntaxe d'un langage de programmation, c'est à dire la manière de rédiger correctement ces instructions de façon à ce que l'ordinateur comprenne ce que vous voulez faire.
Vous utiliserez, pour commencer, un langage de programmation "simple" pour vous habituer aux concepts du codage.

1.1. Les bases de Processing

Que peut-on faire en Processing ?

Processing a été créé à l'origine à destination des artistes, pour leur offrir un moyen simple de création numérique sans entrer trop profondément dans les subtilités d'un "vrai" langage de programmation.

Ce langage permet donc principalement de dessiner des formes variées, des images, exécuter des animations, mais également de gérer les interactions avec un utilisateur ( clavier, souris,..).
Il permet également de jouer du son et des vidéos.

Déplacer le compte-gouttes à l'aide de la souris pour dessiner...

Outil utilisé

Pour programmer en Processing, vous utiliserez un site web dédié, qui permet d'écrire du code en Processing mais également de l’exécuter pour observer son fonctionnement.

Accès à l'espace de travail

Pour accéder à votre espace de travail ( appelé "Classe" sur le site ) ( clic-droit > Ouvrir dans un nouvel onglet) :


Cherchez votre prénom dans la liste d'icônes à droite de la page, et cliquer sur cette icône.


Pour vous identifier, cliquez sur le menu OpenProcessing en haut à gauche de la page, puis sélectionnez Get Started > Sign In.


Utilisez pour cela votre adresse email et le mot de passe donné par le professeur ( et que vous devrez modifier à la première connexion )

Vous revenez alors à la page d’accueil de la classe; pour modifier votre mot de passe, recliquer sur votre icône, puis sur le menu Edit en haut à droite; modifier votre mot de passe ( Password > Click to change ) puis validez par Save.
A partir de cette page, vous pouvez également éditer votre profil et voir les programmes que vous avez déjà écrits.

Pour revenir ensuite à la page d'accueil, aller dans le menu OpenProcessing en haut à gauche et sélectionnez Classes > Nom de votre classe

En bas de de la page d'accueil de la classe, vous trouverez une liste une liste de programmes ( leur nom s'affiche en passant la souris sur les images ) que vous aurez à modifier pendant ces séances; le signe "+" ( Add Sketch ) vous permet également de créer un nouveau programme en partant de zéro.

Pour l'instant, cliquez sur l'image du programme nommé "Base"

Interface

Le programme s'ouvre en mode "exécution" ( celui-ci ne fait pas grand-chose...); pour basculer en mode "écriture du code", utiliser les boutons de navigation en haut de la page.

  1. informations sur le programme
  2. mode exécution du programme
  3. mode écriture du code

Dans les réglages, vérifiez que le Mode est bien réglé sur Processing.js.

Quand vous aurez commencé à modifier un programme, vous aurez alors la possibilité de sauvegarder votre copie modifiée en cliquant sur Save as Fork.

Documentation

Plutôt qu'un cours présentant toutes les possibilités du langage, vous pourrez vous référer à un manuel en ligne très bien fait, qui présente progressivement les différents concepts du langage.
Ne lisez pas tout d'un trait, mais vous "piocherez" plutôt dans ce manuel les informations qu'il vous faut...

1.2. Structure générale d'un programme en Processing

En jargon Processing, un programme s'appelle un sketch. Un sketch est constitué d'une suite d'instructions indiquant au programme ce que l'on veut faire.

La structure d'un sketch Processing contient toujours deux parties principales ( ce sont des fonctions exécutées automatiquement ) :

  1. la fonction setup(), dans laquelle on place des instructions qui ne seront exécutées qu'une seule fois au démarrage du programme.
  2. la fonction draw(), qui exécute en boucle toutes les instructions qu'elle contient sans jamais s'arrêter.
	void setup(){
	
		// Instructions exécutées une seule fois au démarrage du programme	
	}	
	
	void draw() {
	
		// Corps principal du programme; instructions exécutées en boucle	
	}		
			
			

Vous remarquerez que chaque fonction est délimitée par des accolades : "{" et "}".

Contenu de la fonction setup()

La fonction setup() va recevoir toutes les instructions qui ne doivent être exécutées qu'une seule fois au lancement du programme, comme par exemple :

La fonction draw()

Elle correspond à la partie principale d'un sketch Processing : on y met toutes les instructions constituant le corps du programme.

La fonction draw() est par principe exécutée un certain nombre de fois par seconde.

La valeur de ce nombre est paramétrable dans la fonction setup(), à l'aide de l'instruction frameRate() :

	void setup(){
		
		frameRate(XX);
				
	}
				

...où XX représente le nombre de fois où la fonction draw() est exécutée par seconde; par défaut cette valeur est de 30, et on peut donc la diminuer pour ralentir le sketch ou l'augmenter pour l'accélérer...

Remarque générale concernant l'écriture du code Processing

Quelques indications :

1.3. Mon premier sketch...

Enfin, on y vient...

En vous aidant du manuel, vous allez écrire un sketch dont les caractéristiques sont les suivantes :