Comment dessiner avec Processing ?

Porteur(s) du projet : Fabienne Edern

Date : Mai 2017

Contexte : cours de “Culture & pratiques techniques”

Lien : Programme

Source : OpenProcessing

Le programme

Le but de ce projet est de dessiner avec Processing en utilisant la souris ou le touchpad tel un crayon à l'embout stylisé tel un pinceau Photoshop. De plus, la fonction “cp5.addColorWheel” permet de modifier la couleur du fond via une pression de la touche espace une fois la couleur désirée choisie sur la roue des couleurs (mode RVB). Enfin, l'enregistrement du dessin dans le dossier du fichier Processing s'effectue automatiquement lorsque la touche entrée est à son tour pressée.

Librairie à télécharger

ControlP5

ControlP5 est une librairie très riche permettant d'ajouter tous types de boutons sur la fenêtre d'affichage, tel que des sliders, des listes, des tableaux... Elle est fourni avec de nombreux exemples visant à connaître l'ensemble des possibilités qu'offre cette librairie. (plus de documentation ici)

Le code

Code principal

/*
Fabienne Edern
Programme "Fait moi un dessin avec Processing"
*/
//importation des librairies
import controlP5.*;
ControlP5 cp5;
//déclaration des variables
// variables des lignes
boolean miden, smoothFade;
SketchLine line0, line1, line2;
float x1, y1, x2, y2;
int stoixeia = 30, lineAlpha = 50; //épaisseur des lignes
// variables des couleurs des lignes
int colorL=255,strokeL, strokeValue = 20, strokeBackground = 5;
int paintCount = 0, alphaSform;
int r0,g0,b0,r1,g1,b1;
// variables de la création des lignes
float[] x = new float[stoixeia]; //définition de x
float[] y = new float[stoixeia]; //définition de y
float[] epitaxinsiX = new float[stoixeia]; //application de l'effet sur x
float[] epitaxinsiY = new float[stoixeia]; //application de l'effet sur y
float[] elastikotita = new float[stoixeia];
float[] aposbesi = new float[stoixeia];
float[] deltaX = new float[stoixeia];
float[] deltaY = new float[stoixeia];
float fxMouse, fyMouse; //calcul de l'emplacement de la souris
int c = color(0); //couleur pour controlP5
void setup() {
frameRate(300); //vitesse du dessin=nombre d'images par seconde
size(900,450); //taille de la fenêtre
//initialisation des variables globales
line0 = new SketchLine(30); //espacement des lignes permettant de dessiner
line1 = new SketchLine(stoixeia);
line2 = new SketchLine(stoixeia + 1);
line0.calcType( 0.2, 0.65 );// paramètres de la ligne 0
line1.calcType( 0.1, 0.65 );// paramètres de la ligne 1
line2.calcType( 0.3, 0.65 );// paramètres de la ligne 2
cp5 = new ControlP5( this ); //initialisation du controlP5
cp5.addColorWheel("c" , 25 , 10 , 150 ).setRGB(color(0,0,255)); //ajout de la roue de couleurs
noStroke(); //pas de contour
background(c); //couleur du fond, mode RVB
noFill(); //pas de remplissage
smooth(); //permet de "lisser" la forme dessinée
for (int i=0; i<stoixeia; i++){
elastikotita[i] = 0.2*(.07*(i+1));
aposbesi[i] = 0.55-(0.02*i);
}
}
void draw() {
myLine();
noFill(); //pas de remplissage
if (mousePressed == true) { //si la souris est pressée
line0.calcPoints(mouseX, mouseY); //calcul de l'emplacement de la souris
line0.render(255,255,255, lineAlpha); //couleur de la ligne 0
line1.calcPoints(mouseX, mouseY); //calcul de l'emplacement de la souris
line1.render(255,255,255, lineAlpha); //couleur de la ligne 1
}
}
void myLine(){ //décalage des deux lignes principales
if (mousePressed == true) { //si la souris est pressée
if(miden == true) {
for (int i=0; i<stoixeia; i++){ //pour i=0 et i inférieur à stoixeia, incrémenter de 1
x[i] = mouseX; //prise en compte du positionnement de x
y[i] = mouseY; //prise en compte du positionnement de y
miden = false;
}
}
strokeL = strokeValue; //couleur de la ligne
}
noFill(); //pas de remplissage
drawline(); //dessin des lignes
}
void drawline(){ //dessin des lignes
fxMouse = mouseX; //calcul du positionnement de x
fyMouse = mouseY; //calcul du positionnement de y
for (int i=0; i<5; i++){ //pour i=0 et i inférieur à 5, incrémenter de 1
if (i==0){ //si i=0
deltaX[i] = (fxMouse - x[i]);
deltaY[i] = (fyMouse - y[i]);
if (mousePressed) { //dessin mis en place uniquement si la souris est pressée
}
}
else { //mise en place du dessin en corrélation avec le mouvement de la souris (lent ou rapide)
deltaX[i] = (x[i-1]-x[i]);
deltaY[i] = (y[i-1]-y[i]);
}
deltaX[i] *= elastikotita[i]; // creation de l'effet
deltaY[i] *= elastikotita[i];
epitaxinsiX[i] += deltaX[i];
epitaxinsiY[i] += deltaY[i];
x[i] += epitaxinsiX[i]; // mouvement
y[i] += epitaxinsiY[i];
vertex(x[i],y[i]);
epitaxinsiX[i] *= aposbesi[i]; // ralentissement
epitaxinsiY[i] *= aposbesi[i];
}
}
void mouseReleased() { //relachement de la souris
line0.calcPointsStart(mouseX, mouseY); //calcul point de départ ligne 0
}
void mousePressed() {
line0.calcPointsStart(mouseX, mouseY); //calcul point de départ ligne 0
line1.calcPointsStart(mouseX, mouseY); //calcul point de départ ligne 1
line2.calcPointsStart(mouseX, mouseY); //calcul point de départ ligne 2
}
void keyPressed () {
if (key == ENTER)
saveFrame("####image.jpg"); //enregistrement de l'image dans le dossier quand on appuie sur "entrée"
if (key == ' ') {
background(c); //choix de la couleur du fond quand on appuie sur "entrée"
}
}
//fin du programme

Classe sketch

class SketchLine {
int stoixeia = 1000, colorR, colorG, colorB, lineAlpha = 25; //application des couleurs
float elast, aposv;
float[] x = new float[stoixeia]; //définition de x
float[] y = new float[stoixeia]; //définition de y
float[] epitaxinsiX = new float[stoixeia]; //application de l'effet sur x
float[] epitaxinsiY = new float[stoixeia]; //application de l'effet sur y
float[] elastikotita = new float[stoixeia];
float[] aposvesi = new float[stoixeia];
float[] deltaX = new float[stoixeia];
float[] deltaY = new float[stoixeia];
float pointX, pointY;
//constructeur
SketchLine(int stoixeiaVar) {
stoixeia = stoixeiaVar;
}
//méthodes
void calcType(float elastikotitaVar, float aposvesiVar) {
elast = elastikotitaVar;
aposv = aposvesiVar;
for (int i=0; i < stoixeia; i++){ //pour i=0 et i inférieur à stoixeia, incrémenter de 1
elastikotita[i] = elast*(.07*(i+1));
aposvesi[i] = aposv-(0.02*i);
}
}
void calcPoints(float pointXVar, float pointYVar) {
pointX = pointXVar;
pointY = pointYVar;
for (int i=0; i<stoixeia; i++){ //pour i=0 et i inférieur à stoixeia, incrémenter de 1
if (i==0){ //si i=0
deltaX[i] = (pointX - x[i]);
deltaY[i] = (pointY - y[i]);
}
else { //mise en place du dessin en corrélation avec le mouvement de la souris (lent ou rapide)
deltaX[i] = (x[i-1]-x[i]);
deltaY[i] = (y[i-1]-y[i]);
}
deltaX[i] *= elastikotita[i]; // creation de l'effet
deltaY[i] *= elastikotita[i];
epitaxinsiX[i] += deltaX[i];
epitaxinsiY[i] += deltaY[i];
x[i] += epitaxinsiX[i]; // mouvement
y[i] += epitaxinsiY[i];
epitaxinsiX[i] *= aposvesi[i]; // ralentissement
epitaxinsiY[i] *= aposvesi[i];
}
}
void calcPointsStart(float pointXVar, float pointYVar) { //calcul du point de départ du dessin
pointX = pointXVar;
pointY = pointYVar;
for (int i=0; i<stoixeia; i++){ //pour i=0 et i inférieur à stoixeia, incrémenter de 1
x[i] = mouseX; //prise en compte du positionnement de x
y[i] = mouseY; //prise en compte du positionnement de y
}
}
void render(int colorRVar, int colorGVar, int colorBVar, int lineAlphaVar) { //application de la couleur aux lignes du dessin
colorR = colorRVar; //couleur rouge (0-255)
colorG = colorGVar; //couleur verte (0-255)
colorB = colorBVar; //couleur bleu (0-255)
lineAlpha = lineAlphaVar; //transparence (0-255)
noFill(); //pas de remplissage
stroke(colorR, colorG, colorB, lineAlpha); //couleurs du contour
beginShape(); //début de la création de la forme personnalisée
for (int i = 0; i < stoixeia; i++) { //pour i=0 et i inférieur à stoixeia, incrémenter de 1
curveVertex(x[i], y[i]); //réalisation des courbes
}
endShape(); //fin de la création de la forme personnalisée
}
}

Photos