Processing est un outil de programmation java/javascript/python pour les personnes qui veulent créer des images, des animations et interactions, des applications web et non web. Il permet également de créer des vidéos au format .mov.
Processing fonctionne sous Slitaz également.
C'est un outil étonnant qui vous permettra d'utiliser vos compétences dans les langages java, javascript,python, html, css, xml et vidéo.
Il est également possible d'exporter vos productions au format Html5 en utilisant la librairie javascript et/ou python
processing.js Ainsi, si vous désirez utiliser cette librairie, vous pouvez utiliser une des méthodes suivantes
A) Utiliser le mode Javascript et le bouton EXPORT FOR WEB
et téléchargez les fichiers .pde, .js et .html créés dans votre espace de téléchargement
Notez que vous pouvez répéter cette activité plus d'une fois en réalisant un tutoriel différent pour chacun des travaux.
Cette activité vous permettra d'intégrer les compétences des modules HTML, CSS, JAVASCRIPT, JAVA, 2D, 3D, Vrml et VIDÉO.
Un minimum de 5 points sera alloué pour la réalisation d'une activité.
Certaines activités pourront valoir plus de 5 points en fonction de leur complexité et du temps requis pour leurs réalisations.
Lancez processing en tapant dans le terminal :
~/processing-3.0.2/processing
Notez que vous pouvez également utiliser l'environnement de développement eclipse en suivant cette procédure (facultatif) ou en affichant ce guide vidéo
Utilisez le menu FILE + EXAMPLES afin de consulter quelques fichiers en exemple.
Ces fichiers se trouvent dans le répertoire
pcmanfm ~/processing-3.0.2/modes/java/examples
ou thunar ~/processing-3.0.2/modes/java/examples
Réalisez chacun des défis suivants:
Défi 1 : Hello Processing , lien 1, lien 2, lien 3
Définir une fenêtre de dimension 500x500
Dessiner un rectangle de dimension/position/couleur de votre choix
Dessiner une ellipse de dimension/position/couleur de votre choix
Défi 4 : Le système de coordonnées En utilisant les points, lignes,rectangles et ellipses, dessinez un personnage de votre choix autre que celui présenté dans le tutoriel
Défi 5 : Les boucles et les couleurs : lien 1, lien 2lien 3 En utilisant les boucles dessinez un zone en dégradé de couleurs
size(500,500);
int x=0;
for (int i = 0; i < 255; i = i+1) {
x=i+1 ;
stroke(x,255,255);
line(30, i, 80, i);
}
saveFrame("prodefi5.png");
Défi 6 : lien En utilisant la notion d'objet (OOP : object-oriented programming ou POO : programmation orientée objet ), construisez 3 objets ronds de couleur différentes qui se déplaceront à des vitesses différentes horizontalement dans la scène avec un retour en position x=0 lorsque le bord droit de la scène est touchée
Car myCar1;
Car myCar2;
Car myCar3;
void setup() {
size(200,200);
// Parameters go inside the parentheses when the object is constructed.
myCar1 = new Car(color(255,0,0),0,100,2);
myCar2 = new Car(color(0,0,255),0,10,1);
myCar3 = new Car(color(255,0,255),0,50,3);
}
void draw() {
background(255);
myCar1.drive();
myCar1.display();
myCar2.drive();
myCar2.display();
myCar3.drive();
myCar3.display();
saveFrame("prodefi6.png");
}
// Even though there are multiple objects, we still only need one class.
// No matter how many cookies we make, only one cookie cutter is needed.
class Car {
color c;
float xpos;
float ypos;
float xspeed;
// The Constructor is defined with arguments.
Car(color tempC, float tempXpos, float tempYpos, float tempXspeed) {
c = tempC;
xpos = tempXpos;
ypos = tempYpos;
xspeed = tempXspeed;
}
void display() {
stroke(0);
fill(c);
rectMode(CENTER);
ellipse(xpos,ypos,20,20);
}
void drive() {
xpos = xpos + xspeed;
if (xpos > width) {
xpos = 0;
}
}
}
Défi 7 : En utilisant la notion de variable à deux dimensions (2 dimensional array), dessinez un damier de 8x8 en utilisant les couleurs noires et blanches : lien 1
Cell[][] grid;
int cols = 8;
int rows = 8;
int xx=0;
int c=0;
void setup() {
size(200,200);
grid = new Cell[cols][rows];
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
c=c+1;
if( (i+j)%2 == 0){
xx=255;
}
else
{
xx=0;
}
grid[i][j] = new Cell(i*20,j*20,20,20,i+j,xx);
}
}
saveFrame("prodefi7.png");
}
void draw() {
background(0);
// The counter variables i and j are also the column and row numbers and
// are used as arguments to the constructor for each object in the grid.
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
grid[i][j].display();
}
}
}
class Cell {
float x,y;
float w,h;
float angle;
float xx;
Cell(float tempX, float tempY, float tempW, float tempH, float tempAngle,float tempxx) {
x = tempX;
y = tempY;
w = tempW;
h = tempH;
angle = tempAngle;
xx=tempxx;
}
void display() {
stroke(255);
fill(xx);
rect(x,y,w,h);
fill(125,125,0);
}
}
Effectuez un rendu IMAGE au format .png en insérant dans votre code la ligne saveFrame("output.png"); ou effectuez une capture-écran-image du rendu de votre programme
Téléchargez votre image dans votre espace de téléchargement.
Ajoutez une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 96645
Inscrivez dans le champ titre : Processing
Sélectionnez la section : MODULE Mathématique et sciences
Sélectionnez la matière : informatique
Inscrivez dans le champ no de la directive : 96645
Inscrivez dans votre page le titre de niveau 1 : Processing
Inscrivez le titre de votre DÉFI
Ajoutez votre image au format .png générée ou capturée
Copiez-collez le code de votre programme entre les balises <pre>
</pre>
Si votre programme génère une animation, utilisez le menu TOOL + MOVIE MAKER afin de produire un vidéo de votre animation et ajoutez un LIEN vers cette vidéo dans votre page (5 points additionnels)
Si vous avez configuré et utilisé ECLIPSE, 5 points additionnels vous seront attribués (indiquez-le dans votre page)
Si vous avez utilisé Eclipse, exportez votre travail au format .jar et ajoutez un LIEN vers le fichier .jar
Visualisez votre page et apportez des modifications au besoin.
