Scratch : Question de (point de) vu-mètre…

Mots-clefs

animation, gfx, musique, scratch, son, vumètre

Je crois que l’on a tous bloqué au moins une fois dans sa vie sur un vu-mètre. Vous savez : ce truc qui ressemble à une barre de téléchargement et qui à l’aide de leds ou d’une aiguille vous montre le volume d’entrée ou de sortie d’un son. Cela a un petit effet « discothèque » quand le vumètre gère en plus de manière distincte les graves, médiums et aigus.

Scratch ne permet pas cette distinction mais au moins de mesurer le volume sonore provenant du micro, ce qui nous offre de belles perspectives pour créer des vumètres en utilisant les propriétés graphiques de Scratch. Je m’en suis servi aussi pour faire disparaître le décor des jeux en Scratch ou créer des contrôles de jeu, forçant les enfants à utiliser le bruit ambiant de manière plutôt bizarre pour parvenir à leur but.

Pour l’instant, je vous livre deux vumètres réalisés récemment. La technique est simple et je ne la présenterai pas en détails. Vous pouvez consulter le code en cliquant sur les images. En résumé, il s’agit :

• de récupérer le volume d’entrée du son dans une variable
• de soustraire cette valeur à la hauteur de l’écran (360 pixels) que l’on divise par deux, afin de centrer le dessin
• ensuite, on dessine un premier trait, puis un deuxième de la valeur du volume (multipliée par un facteur X pour gérer la sensibilité du micro), enfin un troisième jusqu’en haut de l’écran et on recommence deux pixels plus loin à droite, en changeant la couleur du crayon
• une fois arrivé au bord droit de l’écran, on repart en arrière et ainsi de suite.

Le deuxième est plus simple et se contente de tracer un trait de la hauteur du volume.

Libre à vous d’y apporter toutes les modifications possibles et imaginables !

Scratch : Vendredi, c’est gribouillis !

Mots-clefs

code, dessin, scratch

Vendredi, tout est permis et notamment les gribouillis. Je mets en ligne une petite activité réalisée encore récemment avec des CPs et qui a cartonné. Les enfants adorent dessiner, colorier et, lorsqu’on leur donne l’occasion de le faire avec l’ordinateur et un peu de code, ils sont ravis. Cela m’a servi d’introduction à une série d’ateliers sur le dessin et la programmation en créant une petite interface dans Scratch permettant d’utiliser le chat comme outil de dessin.

Premièrement, utilisons la souris pour diriger le chat.

Puis, ajoutons deux touches pour abaisser ou relever le stylo.

Deux nouvelles touches pour gérer la taille du stylo.

Enfin, deux touches supplémentaires pour gérer la couleur (et ça, ils adorent !).

N’oublions pas enfin une touche pour tout effacer.

Petit bémol : je n’ai pas introduit de code pour vérifier que la taille du stylo ne dépasse pas une certaine valeur et ne devient pas négative, Scratch ne buguant heureusement pas dans ces situations. Avec des enfants de cet âge, il n’était pas dans mon souhait de faire des choses trop compliquées et d’introduire par exemple les variables et les conditions. Je le ferai plus tard en utilisant l’algorithme au chocolat.

Leurs créations peuvent être sauvegardées en faisant un clic droit sur la « scène » de Scratch. On pourrait même imaginer faire disparaître le chat par la suite avec « cacher » dans « Apparences ». On peut aussi créer une interface physique à l’aide d’une carte Makey Makey. Il y a peu de limites… Bon gribouillage !

Designer ses sprites (lutins) avec Scratch

Si comme moi vous êtes du genre un peu méticuleux (maniaque) dans le design de vos éléments de décors ou de lutins, le manque de précision de l’outil de dessin de Scratch a de quoi déconcerter quelque peu. J’ai parfois besoin pour des projets d’avoir un carré qui fait très exactement 20 pixels de coté et non 19 ou 21. Difficile d’obtenir cette précision dans l’interface de dessin des lutins.

On peut utiliser les instructions du stylo pour dessiner précisément mais il est ensuite impossible de manipuler le résultat comme un sprite ou lutin. Scratch recèle pourtant une petite astuce. Il vous suffit en effet d’effectuer un clic droit sur la scène pour choisir l’option « save picture of stage ».

Par exemple, avec ce code :

J’obtiens un carré gris de 100 pixels de coté. Comme vous pouvez le remarquer, j’ai indiqué comme coordonnées de départ -50 et 50. Cela me permet de centrer naturellement le carré sur l’écran sans avoir besoin de réitérer l’opération dans l’interface de dessin par la suite. Il ne me reste plus qu’à faire un clic droit sur la scène, à sauvegarder l’image et à l’importer ensuite en tant que lutin. Pour la terminer, dans la partie dessin, j’utilise alors le pot de peinture pour remplir l’intérieur de gris et remplacer le blanc du fond par la « couleur » transparente (carré blanc barré de rouge).