Art and Scratch : Mosaïque ! épisode 1

Mots-clés

art, art contemporain, art numérique, centre pompidou

Je viens de passer quelques jours à Paris et je n’ai pu faire autrement que de visiter les expositions du Centre Pompidou, consacré à l’art contemporain. Un véritable bonheur et surtout une source infinie d’idées. En effet, de nombreuses oeuvres peuvent être résumées par un algorithme. Ce n’est pas de l’art facile car les oeuvres sont monumentales et une bonne partie d’entre elles ont été réalisées à une époque où l’accès aux ordinateurs n’était pas si évident. Comme un clin d’oeil, le musée accueille en ce moment l’exposition « Coder le monde » au sujet de l’art numérique et deux installations visuelles et sonores de Ryoji Ikeda. L’exposition sur l’UAM (Union des Artistes Modernes) permet de se confronter à l’art radical du début du XXème siècle, entre autres les oeuvres de Sonia Delaunay que j’affectionne tout particulièrement. Bref, un régal pour les yeux et les oreilles…

Lors de ma visite, je n’ai cessé de prendre des photos et de songer à la méthode que j’utiliserais pour « coder » telle ou telle oeuvre. Attendez-vous donc à avoir de nombreux posts sur le sujet.

Commençons comme la photo l’indique par une simple mosaïque au travers d’un générateur. Première étape, créer une fonction « ajouter blocs » qui va permettre de dessiner un rectangle plein de 30 pixels de large sur 20 pixels de haut. J’aurais pu faire cela plus simplement qu’en traçant ligne par ligne en jouant par exemple avec la taille du stylo mais j’aime faire les choses proprement et, avec cette méthode, il n’y aura pas un pixel de plus que nécessaire.

On trace une ligne. On monte. On revient au point de départ et on monte de nouveau. Une sorte de tracé en S.

Venons-en maintenant à l’algorithme principal. La dimension de mes rectangles (30*20) me permet de créer 16 colonnes et 18 lignes, d’où l’utilisation de deux boucles supplémentaires. Je fais démarrer mon personnage en dehors de l’écran (-270) afin de simplifier mon code. Il aurait en effet fallu quelques commandes supplémentaires pour la première colonne.

Et voilà le résultat !

Pour obtenir des rectangles creux, le code aurait été le suivant.

Scratch : utiliser les boucles

Mots-clés

boucles, code, scratch

Les boucles sont au code ce que l’huile d’olive est à la cuisine italienne : indispensables. On finit lors des ateliers et formations par s’en amuser, tellement je donne l’impression de me répéter (c’est le cas de la dire) lorsque j’évoque les boucles. Une par ci, une par là. Impossible de faire sans… Scratch n’en manque pas avec des particularités que l’on ne retrouve dans aucun autre langage. Petit passage en revue.

Répéter indéfiniment

La boucle la plus célèbre de Scratch et celle qui revient le plus souvent. Proche d’un des premiers codes que j’ai tapé en BASIC.


10 Print "Bonjour"
20 Goto 10


Ou comment rendre l’ordinateur fou en lui faisant sans cesse répéter la même chose sans moyen d’en sortir. Dans Scratch, la boucle « répéter indéfiniment » est essentiellement utilisée pour vérifier des états et des conditions. Ainsi, dans l’exemple ci-dessous (1er script), elle permet de suivre l’évolution du volume sonore et de déclencher un événement si celui-ci dépasse la valeur 70. La boucle est souvent oubliée et renvoie à une erreur classique. Le deuxième script en effet ne vérifie le volume sonore qu’une seule fois au déclenchement du programme en cliquant sur le drapeau vert.

Il est possible d’arrêter une telle boucle en utilisant l’instruction « stop ». Par exemple :

Répéter x fois

La boucle la plus simple à comprendre. À utiliser quand vous savez exactement de combien de répétitions vous avez besoin. Par exemple :

Cette boucle peut aussi s’utiliser avec des variables quand on ne connaît pas le nombre de répétitions à la base. Par exemple pour épeler un prénom :

C’est un peu dans ce cas l’équivalent d’une boucle « for … next » qui permet d’utiliser une boucle en faisant évoluer une ou plusieurs valeurs. Cela m’a toujours étonné que Scratch ne possède pas de boucle de ce type mais on peut la simuler avec la boucle « répéter jusqu’à ».

Répéter jusqu’à

Cette boucle est particulièrement utile car elle permet des choses que peu de langages offriraient aussi facilement. Par exemple :

Mais je l’utilise principalement pour les boucles « for … next ». Une boucle de ce type possède une condition de départ, une condition de fin et une variation de la valeur suivant un « pas ». Ainsi, par exemple, la variable x vaut 0 en condition de départ ; on arrête la boucle lorsque x vaut 250 en condition de fin et on la fait varier de 10 en 10.

En Basic, cela ressemblerait à ceci :


FOR x = 0 TO 250 STEP 10
PRINT x
NEXT


Et avec Scratch :

Ces boucles sont fort utiles notamment dans le traitement des chaînes de caractère ou dans la génération de graphismes.

Bon amusement !

Tutoriel Scratch : le déformoscope

Ce soir, ce sont les vacances et c’est le bon moment pour faire une tête comme ça ↑ !

Prenez-vous en photo ou utilise une image de visage en veillant à ce que ce dernier soit bien au centre de l’image. L’image que j’ai choisie provient du site Open Clip Art.

On utilise ensuite le code suivant.

Il permet :

• d’annuler les effets graphiques, c’est-à-dire que l’image retrouve sa forme initiale lorsque tu lances le programme,
• de centrer l’image à l’écran,
• de créer une boucle qui va sans cesse ajouter un effet (ici, l’effet « tournoyer ») sur notre image en fonction d’un capteur (ici, la position y de la souris, c’est-à-dire de haut en bas ou verticale).

Afin que l’effet soit plus important, la valeur du capteur est multipliée par deux. Essayez d’autres valeurs (3, 4, 5…).

Testez les autres effets disponibles dans Scratch :

couleur : donne un effet arc-en-ciel à l’image

oeil de poisson : grossit l’image comme sur une boule en verre

tournoyer : « tord » l’image en la faisant tourner

pixeliser : grossit les pixels qui forment l’image en donnant un effet 8bit

mosaïque : multiplie l’image pour en faire une mosaïque

luminosité : rend l’image plus claire ou plus sombre

fantôme : fait disparaître progressivement l’image

 

Notez les effets les plus intéressants.

On peut aussi modifier le capteur en utilisant :

• la position x de la souris, de gauche à droite ou horizontale



• le volume sonore entrant



• les mouvements devant la caméra