Tutoriel – Une carte de vœux avec Processing

Olyves Duracuire

Public

Enfants

Participants

3 à 10

Nombre d'animateurs

Niveau

Débutant

Préparation

1 heure et 30 minutes

Activité

1 heure

Description

Objectifs

Compétences travaillées

Concentration
Précision
Curiosité

Pré-requis pour le public

Avoir suivi le début des séquences « Programmer avec Processing »

Matériel

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

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

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.

Pour aller plus loin

Conseil médiation 

Pour aller plus plus loin sur le sujet, nous vous conseillons de vous référer à la fiche outil « Algorithmes et langages de programmation«