Pour commencer la programmation nous avons besoin d'un environnement de développement, pour tous les exemples sur cette page nous utiliserons Processing. Processing nous permets de voir notre avancer en temps réel il est donc plus motivant pou des débutants.
Pour notre tout premier projets nous allons tout simplement dessiner une ellipse.
Les lignes de code a gauche et leur résultat à droite.
Notre seconde réalisation est une ellipse qui suis la souris et qui, lors d'un clic sur la souris change la couleur de l'ellipse.
Voici les lignes de code nécessaire ainsi que le résultat.
​
​
​
​
Pour notre troisième projets, nous avons réaliser un programme qui fait rebondir une balle contre les parois de la fenêtre.
Voila le troisieme programme, a gauche les lignes de code pour le réaliser et en dessous une image du résultat.
TP : Processing réalisation d'un jeu
​
Lorsque le programme est lancée on voit 10 balles qui rebondissent sur les limites de l’écran. Chaque balle est la superposition de 3 ellipses de transparence différentes. 10 rectangles indiquent les tirs restants. Un texte indique le score. L'utilisateur peut tirer (clic gauche) et recharger (clic droit). A chaque tir un rectangle disparaît.
On peut décomposer la programmation en plusieurs taches :
-Le viseur
-Les 10 rectangles
-Le score
-Gestion clic de la souris
int nombrederectangles = 10;
int x = 0;
int rad = 5;
int bull = 10;
int ball = 15;
float[] xpos,ypos;
int nbr =10;
float xspeed = 10.0;
float yspeed = 6.5;
int[] xdirection ;
int[] ydirection ;
int nombredetirsreussis =0;
void setup()
{
size(400,410);
// 4 tableaux de 10 cases chacun contiennent la position en x et en y du centre de chaque base et le sens de déplacement
xdirection = new int[10];
ydirection = new int[10];
xpos = new float[10];
ypos = new float[10];
noStroke();
noCursor();
frameRate(30);
ellipseMode(RADIUS);
for(int i=0; i<10;i++){
xpos[i] = random(25,350);
ypos[i] = random(25,350);
xdirection[i] = 1;
ydirection[i] = 1;
noCursor();
}
}
void draw()
{
background(20);
fill(255);
text("Your score is " + x, 15, 15);
if(nombredetirsreussis==10){
text("you win !!! " + x, 150, 200);}
if(millis()<5000) {
text("Press left mouse button to fire. Press right mouse button to reload.", 15, 40);
}
for (int r = 0; r <nombrederectangles; r++) {
fill(255);
noStroke();
rect(350,230+15*r,16,6);
}
noFill();
for(int i=0; i<10;i++){
xpos[i] = xpos[i] + ( xspeed * xdirection[i] );
ypos[i] = ypos[i] + ( yspeed * ydirection[i] );
if(mousePressed){
if (mouseButton == LEFT){
if(nombrederectangles >0){
if(xpos[i]-ball<mouseX && ypos[i]-ball<mouseY && mouseX<xpos[i]+ball && mouseY<ypos[i]+ball){
xpos[i] = 100000;
xdirection[i] = 0;
ydirection[i] =0;
x= x+10;
nombredetirsreussis = nombredetirsreussis +1;
}
}
}
}
if(xpos[i] > width-rad || xpos[i] < rad){
xdirection[i]*=-1;
}
if(ypos[i] > height-rad || ypos[i] < rad){
ydirection[i]*=-1;
}
fill(213,220,245);
ellipse(xpos[i],ypos[i],ball,ball);
fill(103,136,250);
ellipse(xpos[i],ypos[i],bull,bull);
fill(0,56,252);
ellipse(xpos[i],ypos[i],rad,rad);
}
if(mousePressed){
stroke(255,255,0);
}else{
stroke(255,0,0);
}
noFill();
ellipse(mouseX , mouseY,30,30 );
strokeWeight(2.2);
line(mouseX-30,mouseY,mouseX+30,mouseY);
line(mouseX,mouseY-30,mouseX,mouseY+30);
noStroke();
}
void mousePressed(){
if (mouseButton == LEFT) {
nombrederectangles = nombrederectangles - 1;
}
if (mouseButton == RIGHT) {
nombrederectangles = 10;
}
}
Dernière étape, transférer le code sur téléphone (en utilisant par exemple un brouillon d'un mail). Un fois le code dans processing sur mobile, il rencontrera divers problèmes. Tout d'abord il faudra supprimer les "noCursor" qui ne serve plus puisque sur mobile il n'y a plus de curseur ( pas de souris = pas de curseur) on ne peut pas supprimer quelque chose qui n'existe pas.
nombrederectangles = 10;
int x = 0;
int rad = 10;
int bull = 20;
int ball = 30;
float[] xpos, ypos;
int nbr =10;
float xspeed = 10.0;
float yspeed = 6.5;
int xposbouton, yposbouton;
int[] xdirection ;
int[] ydirection ;
int nombredetirsreussis =0;
void setup() {
size(1080,1848);
xdirection = new int[10];
ydirection = new int[10];
xpos = new float[10];
ypos = new float[10];
xposbouton = width-100;
yposbouton=20;
noStroke();
frameRate(30);
ellipseMode(RADIUS);
for (int i=0; i<10; i++) {
xpos[i] = random(25, 350);
ypos[i] = random(25, 350);
xdirection[i] = 1;
ydirection[i] = 1;
}
}
void draw()
{
background(20);
fill(255);
rect(xposbouton-50,yposbouton, 150, 150, 3);
textSize(25);
fill(0);
text("Recharger",width-128,100);
textSize(40);
fill(255);
text("Your score is " + x, 30, 100);
if (nombredetirsreussis==10) {
text("YOU WIN !!! " + x, 400, 800);
}
if (millis()<5000) {
textSize(30);
text("Press left mouse button to fire. Press right mouse button to reload.", 30, 40);
}
for (int r = 0; r <nombrederectangles; r++) {
fill(255);
noStroke();
rect(width-100, 1300+50*r, 250, 20);
}
noFill();
for (int i=0; i<10; i++) {
xpos[i] = xpos[i] + ( xspeed * xdirection[i] );
ypos[i] = ypos[i] + ( yspeed * ydirection[i] );
if (mousePressed) {
if (nombrederectangles >0) {
if (xpos[i]-ball<mouseX && ypos[i]-ball<mouseY && mouseX<xpos[i]+ball && mouseY<ypos[i]+ball) {
xpos[i] = 100000;
xdirection[i] = 0;
ydirection[i] =0;
x= x+10;
nombredetirsreussis = nombredetirsreussis +1;
}
}
}
if (xpos[i] > width-rad || xpos[i] < rad) {
xdirection[i]*=-1;
}
if (ypos[i] > height-rad || ypos[i] < rad) {
ydirection[i]*=-1;
}
fill(213, 220, 245);
ellipse(xpos[i], ypos[i], ball, ball);
fill(103, 136, 250);
ellipse(xpos[i], ypos[i], bull, bull);
fill(0, 56, 252);
ellipse(xpos[i], ypos[i], rad, rad);
}
if (mousePressed) {
stroke(255, 255, 0);
} else {
stroke(255, 0, 0);
}
noFill();
ellipse(mouseX, mouseY, 30, 30 );
strokeWeight(2.2);
line(mouseX-30, mouseY, mouseX+30, mouseY);
line(mouseX, mouseY-30, mouseX, mouseY+30);
noStroke();
}
void mousePressed() {
if (xposbouton<mouseX && xposbouton+150>mouseX && yposbouton<mouseY && yposbouton+150>mouseY) {
nombrederectangles = 10;
} else {
nombrederectangles = nombrederectangles - 1;
}
}