noStroke()
fill(50)

const MIDDLE = width / 2
const BASE_SIZE = 8

for (let i = 0; i < 500; i++) {

    const radius = MIDDLE * 0.75 * sqrt(random())
    const theta = random() * TWO_PI

    const side = ceil(random() * 4) * BASE_SIZE
    const is_horizontal = random() > 0.5

    const x = MIDDLE + cos(theta) * radius
    const y = MIDDLE + sin(theta) * radius

    rect(
        x,
        y,
        is_horizontal ? side : BASE_SIZE,
        is_horizontal ? BASE_SIZE : side
    )
}
                    
                

Computer composition with lines

Créée à l'origine par A. Michael Noll en 1964, aux Bell Labs, à Murray Hill, dans le New Jersey. L'artiste a déclaré que « cette œuvre imite étroitement le tableau « Composition avec lignes » de Piet Mondrian. Lorsque des reproductions des deux œuvres ont été présentées à 100 personnes, la majorité a préféré la version informatique et a cru qu'elle avait été réalisée par Mondrian.

L'aléatoire et quelques contraintes

Dans ce programme, on a deux constantes const MIDDLE = width / 2 qui correspond à la distance du centre (à la fois verticale et horizontale, puisqu'il s'agit d'un carré).

La deuxième constante, const BASE_SIZE = 8 est une échelle de grandeurs.

  for (let i = 0; i < 500; i++) { }

Ici, la boucle est assez simple, on va additionner 1 à i 500 fois, dans le reste du code, on ne va pas se servir de i, donc, cette boucle nous sert uniquement à répéter une suite d'instructions 500 fois : créer 500 rectangles.

Le programme va positionner des points, non pas à l'aide d'une grille, comme dans le premier exemple, mais à l'aide d'angles, cela va nous permettre de contraindre nos éléments dans un cercle.

  const radius = MIDDLE * 0.75 * sqrt(random()) 

Comme son nom l'indique radius est une distance, un rayon. On l'obtient en multipliant le centre de la composition par 0.75 puis par un nombre aléatoire (compris entre 0 et 1) donc cette distance peut mesurer entre 0 et les 3/4 de la distance entre le bord de la composition et son centre.

  const theta = random() * TWO_PI 

La deuxième variable theta est un angle, il est calculé en multipliant un nombre aléatoire (compris entre 0 et 1) et 2 * PI, TWO_PI donc il peut être compris entre 0 et 2 PI, entre 0 et 6.28318530718.

const side = ceil(random() * 4) * BASE_SIZE

La variable side détermine la longueur d'un de côtes de notre élément. random() * 4 permet d'obtenir un nombre aléatoire entre 0 et 4 (0.568998, 2.56468...), il y a plus de chance d'obtenir avec la fonction random() des chiffres avec des décimales que des nombre entiers. Si on veut les transformer en nombre entier, on peut utiliser trois fonctions round() qui crée un arrondi au plus juste, floor() qui arrondit vers le nombre entier le plus bas (par exemple floor(1.6) renverra 1) et ceil() qui arrondit à l'entier le plus grand. C'est celui que nous avons choisi d'utiliser. Cela revient à créer un nombre aléatoire entier compris entre 1 et 4. Ce nombre sera multiplié par la valeur de BASE_SIZE.

const is_horizontal = random() > 0.5

Voici une variable d'un autre genre, ce n'est pas un chiffre, mais un booléen. Un booléen ne peut être égal qu'à TRUE ou FALSE, on l'utilise pour répondre à des questions (et il est d'usage de préfixer le nom de ce type de variable avec un verbe pour énoncer la question à laquelle il répond). Est-qu'il est horizontal ? Il le sera si le nombre aléatoire choisi/renvoyé par la fonction random() sera supérieur à 0.5, > 0.5. Étant donné que cette fonction renvoie un chiffre compris entre 0 et 1, il y a autant de chance que cette variable soit vrai que fausse.

  const x = MIDDLE + cos(theta) * radius
  const y = MIDDLE + sin(theta) * radius

Ces deux variables servent à déterminer la position de notre élément sur un cercle. Imaginez un compas, la pointe sera située au centre de votre feuille ou MIDDLE, l'écartement entre les deux bras de votre compas sera défini par le rayon radius et pour finir la position de votre point sur le cercle sera déterminer par l'angle theta.

À ce stade, nous avons toutes les valeurs pour déterminer la position et la taille de notre élément : un rectangle.

  rect(
      x, 
      y,
      is_horizontal ? side : BASE_SIZE,
      is_horizontal ? BASE_SIZE : side
  )

La fonction rect({1}, {2}, {3}, {4}) prend quatre arguments :

1. la position horizontale
2. la position verticale
3. la longueur
4. la hauteur

Pour les deux premiers arguments, le calcul est déjà fait, mais pour les deux suivants on va utiliser le booléen is_horizontal pour déterminer la longueur et la hauteur. Cette syntaxe (appelée opérateur ternaire) permet de donner deux valeurs à une variable en fonction d'un booléen, selon si la réponse est vraie ou fausse. On mettra en premier la valeur que l'on souhaite assigner quand la condition est vraie puis lorsqu'elle est fausse.

Voici un petit cas pratique :

const is_raining = true
const item_to_pick = is_raining ? 'umbrella' : 'sunglasses'

La condition initiale — est-ce qu'il pleut ? — est vraie. L'objet à prendre sera un parapluie et non les lunettes de soleil parce que la condition est vraie. L'exemple ci-dessus pourrait également être écrit comme ceci :

let item_to_pick = '';
const is_raining = true;
if (is_raining) {
  item_to_pick = 'umbrella'
} else {
  item_to_pick = 'sunglasses'
}

Dans notre programme, on détermine la longueur en fonction de is_horizontal si l'élément est horizontale, la longueur équivaudra à side (qui sera aléatoirement égale à une fois, deux fois, trois fois ou quatre fois BASE_SIZE), si ce n'est pas le cas la longueur vaudra BASE_SIZE.

Pour la largeur, c'est l'inverse, on a échangé les positions des deux variables, ainsi en fonction de is_horizontal, on a une barre horizontale ou une barre verticale.

Ce qu'il faut retenir