Arts numériques

1.Démarrer avec quelques variables, setup et draw

Pour ce script, il vous faudra 3 variables de texte et une variable image au moins.
Je propose ceci :

// les variables texte
String titre="Stay Home";
String auteur="Georges Dugenou";
String edition="C editions";

// variable image
PImage monimage;

// variables de typo
PFont mapolice1;
PFont mapolice2;

void setup(){
  size(800,1000);
}

void draw(){
}

Je propose d’utiliser trois variables de type String, qui permettent de stocker du texte, pour ne pas devoir cherche dans le corps du script l’endroit où se trouvent ces textes. C’est une pratique assez courante en programmation. On appelle ça des "variables de configuration".
On a aussi préparé une variable pour l’image, et deux variables pour charger deux typos différentes.

2) Charger image et typos

Il est maintenant temps de charger les deux typos et l’image dans le setup() :

void setup(){
  size(800,1000);
  monimage=loadImage("Funeral for the snail dad killed.jpg");
  mapolice1=createFont("Montserrat-Light",20);
  mapolice2=createFont("Montserrat-Bold",20);
}

Voir le tutorial sur les images et sur les typos sur ce site.

3) Afficher le texte
Dans le draw(), on va afficher l’image et les textes avec des tailles de typo différentes :

// les variables texte
String titre="Stay Home";
String auteur="Georges Dugenou";
String edition="Critical editions";

// variable image
PImage monimage;

// variables de typo
PFont mapolice1;
PFont mapolice2;

void setup() {
  size(800, 1000);
  monimage=loadImage("Funeral for the snail dad killed.jpg");
  mapolice1=createFont("Montserrat-Light", 20);
  mapolice2=createFont("Montserrat-Bold", 20);
}

void draw() {
  background(255);
  fill(0);
  
  image(monimage, 400, 500, monimage.width/2,monimage.height/2);
  
  textFont(mapolice2, 80);
  text(titre, 40, 300);
  
  textFont(mapolice1, 28);
  text(auteur, 44, 360);
  
  textFont(mapolice2, 16);
  text(edition, 46, height-40);
  
  saveFrame("couverture.jpg");
  noLoop();
}

Remarquez que l’image est réduite par deux, en utilisant monimage.width et monimage.height, qui donnent accès àsa taille.
Remarquez aussi que la maison d’édition est affichée àpartir du bas de la page en retirant 40 pixels àla hauteur de la page, avec height.

On termine le draw() avec la commande saveFrame(), qui enregistre une image matricielle, et un noLoop() qui empêche que le script n’enregistre en permanence cette image (le draw() n’est exécuté qu’une seule fois).

Un bon début. Un peu de random() peut rendre la chose plus aléatoire, c’est ce qu’on fera dans l’article suivant.