Une carte de vœux avec Processing

Apprendre à programmer

Public : ados, adultes
Durée de préparation : 1/2 heure
Durée de l'activité : 1 heure
Nombre de participants : 3 à 10
Taux d'encadrement :
Matériel utilisé :
1 vidéo projecteur et 1 ordinateur maître
Accès internet non indispensable, Processing doit alors être téléchargé et/ou installé au préalable
1 ordinateur par participant ou groupe de 2

Contenus utilisés :

 

Objectifs pédagogiques :


 
Compétences travaillées :
Concentration
Précision
Curiosité
Pré-requis :
Avoir suivi le début des séquences "Programmer avec Processing"


Objectif

Le programme permet de construire une grille de carrés de 4 par 6 dont la couleur est fixée aléatoirement. Dans chaque carré une lettre est dessinée dans la couleur complémentaire.

A chaque exécution du programme vous obtiendrez une carte différente !

Choix de la police de caractères

Pour choisir une police de votre système il est nécessaire de recourir à un petit programme qui liste les polices.

Code du programme :

// Liste des polices
void setup() {
String[] fontList = PFont.list();
println(fontList);
}

Choisissez la police qui vous convient dans la liste, je vous suggère à la ligne 5 :

[5] "Arial Black Normal"

Le nom à retenir est celui qui est entre les apostrophes, il doit être écrit à l’identique : Arial Black Normal

Carte de vœux

Déclaration des variables

Définition des carrés :

int vert = 4;      // nombre de carrés à la verticale
int hori = 6;      // nombre de carrés à l'horizontale
int cote = 200;    // taille des carrés en pixels
int demi = cote/2; // taille de la moitié du carré
size(1200, 800);   // taille de la fenêtre (cote*hori, cote*vert)
rectMode(CENTER);  // le point d'origine des carrés est fixé à leur centre
noStroke();        // les carrés n'ont pas de cadre

Définition de la police :

PFont myFont;                           // initialisation de la classe "Font"
int tpol = 170;                         // taille de la police
int dpol = cote/4;                      // décalage des caractères au centre de leur carré
myFont = createFont("Arial Black Normal", tpol); // initialisation de la police choisie
String cars="Joyeux Noël Bonne  Année"; // texte de la carte
String car;                             // lecture du texte caractère par caractère
textFont(myFont);                       // activation de la police
textAlign(CENTER, CENTER);              // le point d'origine des caractères est fixé à leur centre
smooth();                               // antialiasing sur les caractères

Autres variables :

float r1,g1,b1; // couleurs au format RGB (voir w3schools)
int i=0;        // index pour le parcours du texte

Affichage de la grille et du texte

for (int y=demi; y<height; y+=cote) {
  for (int x=demi; x<width; x+=cote) {
    r1=random(0,255);            // valeur de la composante rouge
    g1=random(0,255);            // valeur de la composante verte
    b1=random(0,255);            // valeur de la composante bleue
    fill(r1,g1,b1);              // couleur du carré
    rect(x,y,cote,cote);         // dessin du carré
    fill(255-r1,255-g1,255-b1);  // couleur du texte (calcul de la complémentaire)
    car = cars.substring(i,i+1); // extraction du caractère d'index i
    text(car,x,y-dpol);          // dessin du caractère
    i = i+1;                     // incrémentation de l'index
  }
}

Les carrés sont affichés ligne par ligne. Les couleurs sont définies aléatoirement à l’aide de la fonction random(). La couleur des caractères est inversée par rapport à la couleur des carrés.

Code complet

A vous de compléter ce programme, et quand vous aurez fini de le personnaliser n’oubliez pas d’ajouter à la fin la ligne :

save("carte.jpg");

Cette commande permet d’enregistrer l’image dans le répertoire du projet sous le nom “carte” au format JPG.


Cette contribution a été rédigée par un membre de la communauté des Voyageurs du Numérique.
Afin d'inciter la créativité des participants, l'équipe de Voyageurs du Numérique publie ce contenu sans validation préalable.
Bibliothèques sans Frontières n'engage pas sa responsabilité sur le contenu de ces fiches.
Si un contenu vous semble inapprorié, merci de nous le signaler depuis la page Ecrivez-nous.
L'équipe des Voyageurs du Numérique.

Laisser un commentaire