Nous allons maintenant nous intéresser à l'interaction avec l'utilisateur. Pour l'instant (Processing offre énormément de possibilités) nous allons nous contenter de la souris et du clavier. Commençons par la souris

Processing propose 4 fonctions qui devront être complétées par le programmeur :

Ces 4 fonctions ne prennent aucun paramètre et ne retournent aucune valeur.

À faire vous-même 6.1

Saisissez, analysez et testez ce code


def setup():
	global r
	size(400,400)
	noStroke()
	fill(0)
	r=10
def draw():
	background(255)
	ellipse(200,200,2*r,2*r)
def mousePressed():
	global r
	if r<200:
		r=r+5

Attention : le programme ci-dessus fonctionnera uniquement si le curseur de la souris se trouve sur la fenêtre Processing.

Attention : pour pouvoir utiliser les 4 fonctions que nous venons de voir, il faut que la fonction "draw" soit présente dans le programme (même si elle est vide)

À faire vous-même 6.2

Saisissez, analysez et testez ce code


def setup():
	global r
	size(400,400)
	noStroke()
	fill(0)
	r=10
def draw():
	background(255)
	ellipse(200,200,2*r,2*r)
def mousePressed():
	global r
	if r<200:
		r=r+100
def mouseReleased():
	global r
	r=r-100

À faire vous-même 6.3

Créez un programme permettant d'afficher un carré vert au centre de la fenêtre. En cas d'appui sur un bouton de la souris le carré devient rouge. Ce même carré redevient vert dès que le bouton de la souris est relâché.

Il est possible de connaitre les coordonnées du curseur de la souris grâce aux variables proposées par Processing : "mouseX" et "mouseY"

À faire vous-même 6.4

Saisissez, analysez et testez ce code


def setup():
	size(200,200)
	noStroke()
	fill(0)
def draw():
	background(255)
	ellipse(mouseX,mouseY,30,30)

À faire vous-même 6.5

Créez un programme qui permettra d'afficher un nouveau carré à chaque clic de souris (sans effacer les carrés déjà présents). Le centre du carré devra se trouver au niveau du pointeur de la souris au moment du clic. La couleur du carré devra être aléatoire.

À faire vous-même 6.6

Créez un programme qui permettra d'obtenir ceci :

À faire vous-même 6.7

Saisissez, analysez et testez ce code


def setup():
	global val
	size(200,200)
	background(255)
	val=0
def draw():
	fill(val)
	rect(75, 75, 50, 50)
def mouseMoved():
	global val
	val = val + 5
	if val > 255:
		val = 0

À faire vous-même 6.8

Saisissez, analysez et testez ce code


def setup():
	global val
	size(200,200)
	background(255)
	val=0
def draw():
	fill(val)
	rect(75, 75, 50, 50)
def mouseDragged():
	global val
	val = val + 5
	if val > 255:
		val = 0

Si "mouseX" et "mouseY" vous donnent la position de la souris à l'instant t, "pmouseX" et "pmouseY" vous permettent d'avoir les coordonnées de la souris à l'instant t-dt, avec dt le temps qui s'est écoulé entre 2 images.

À faire vous-même 6.9

Saisissez, analysez et testez ce code


def setup():
	size(300,300)
	background(255)
def draw():
	pass
def mouseDragged():
	line(pmouseX,pmouseY,mouseX,mouseY)

Après la souris, nous allons maintenant travailler sur le clavier.

Processing propose 2 fonctions qui devront être complétées par le programmeur :

Ces 2 fonctions ne prennent aucun paramètre et ne retournent aucune valeur.

À faire vous-même 6.10

Saisissez, analysez et testez ce code


def setup():
	size(200,200)
	fill(0)
def draw():
	background(255)
	ellipse(100,100,50,50)
def keyPressed():
	fill(255)
def keyReleased():
	fill(0)

Attention : Comme pour la souris, pour pouvoir utiliser les 2 fonctions que nous venons de voir, il faut que la fonction "draw" soit présente dans le programme (même si elle est vide)

Il est possible de détecter la touche qui a été frappée grâce à la variable "key".

À faire vous-même 6.11

Saisissez, analysez et testez ce code


def setup():
	size(200,200)
	fill(0)
  textAlign(CENTER)
  background(255)
	text ("Appuyez sur une touche ",100,100)
def draw():
	pass
def keyPressed():
	background(255)
	text ("touche : "+key,100,100)

À faire vous-même 6.12

Créez un programme permettant d'afficher un carré incolore au centre de la fenêtre. En cas d'appui sur la touche r, le carré devient rouge, en cas d'appui sur la touche v, le carré devient vert et en cas d'appui sur la touche b, le carré devient bleu. Ce même carré redevient incolore dès que la touche est relâchée.

Il faut cliquer dans la fenêtre ci-dessus pour que cet exemple fonctionne.

Il est aussi possible de détecter l'appui sur des touches qui ne sont pas des lettres ou des chiffres (par exemple, les "flèches",...).

Voici un exemple simple qui vous explique comment procéder :


def setup():
	size(200,200)
	fill(0)
	textAlign(CENTER)
	background(255)
def draw():
	pass
def keyPressed():
	background(255)
	if key==CODED:
		if keyCode==UP:
			text ("HAUT",100,100)
		if keyCode==DOWN:
			text ("BAS",100,100)
		if keyCode==LEFT:
			text ("GAUCHE",100,100)
		if keyCode==RIGHT:
			text ("DROIT",100,100)

Au moment de l'appui sur une touche, il faut de tester si "key" est égale à "CODED". Si c'est le cas, nous utilisons la variable "keyCode". En plus des "flèches" que nous venons de voir, voici quelques autres touches :

À faire vous-même 6.13

Créez un programme permettant d'afficher une "balle" noire (utilisation de la fonction "ellipse"). Cette balle pourra être déplacée à l'aide des flèches du clavier. La balle ne devra pas pouvoir sortir de la fenêtre.

Il faut cliquer dans la fenêtre ci-dessus pour que cet exemple fonctionne.