Jeu de dessin de mélodie dans Scratch

Nov 25 2022
Utilisons Scratch pour créer un jeu de dessin mélodique. Tout le monde peut apprendre à coder avec Scratch, qui a été développé par MIT Media Labs.

Utilisons Scratch pour créer un jeu de dessin mélodique. Tout le monde peut apprendre à coder avec Scratch, qui a été développé par MIT Media Labs. Il est assez simple de créer des jeux sympas, des animations, des œuvres d'art et d'autres choses sympas.

À propos du projet :

Créez de belles œuvres d'art en dessinant sur l'écran avec votre souris/index et différentes couleurs. La partie passionnante est que chaque couleur se voit attribuer une mélodie/note de musique différente. Une fois la conception terminée, appuyez simplement sur la barre d'espace pour commencer la chronologie. Le son est produit lorsque la barre entre en contact avec les couleurs du dessin. Cela créera des mélodies uniques avec une combinaison de différentes notes et mélodies.

M ê me le gribouillage produira une musique intéressante et plaisante. Cela les gardera curieux.

Il s'agit d'un projet pour le cours "Machine learning" enseigné par ANMOL SRIVASTAVA . Nous avons utilisé une version modifiée de scratch — Stretch (http://stretch3.github.io/). Cela nous a permis d'obtenir plus d'extensions avec lesquelles jouer.

Nous avons utilisé 4 extensions dans ce projet :

  1. Handpose2Scratch
  2. Stylo
  3. La musique
  4. TM2Scratch

Décomposons le jeu en les étapes suivantes : -

  1. Choisissez un sprite (stylo) et utilisez la souris pour contrôler son mouvement.
  2. Ajoutez des couleurs au canevas lorsque vous cliquez sur la souris.
  3. Changez les couleurs en utilisant différentes touches.
  4. Créez des blocs et attribuez-leur différentes couleurs et différents sons.
  5. Ajoutez le contrôle du mouvement des doigts au sprite (stylo) à l'aide de Handpose2Scratch (pour notre sortie finale)
  6. Ajoutez des machines enseignables pour le stylo de haut en bas pour faciliter le dessin avec votre index.
Exemple de jeu de dessin contrôlé par la souris

Étape 1 : Choisissez un sprite (stylo) et utilisez la souris pour contrôler son mouvement.

Sélectionnez n'importe quel sprite (crayon) qui peut être animé. Vous pouvez également lui donner un nom. Nous avons sélectionné Pencil et lui avons donné une couleur et un nom (bleu). Placez-le à la position X=0 et à la position Y=0, ce qui signifie qu'il reste au centre de la page.

Code initial du stylet pour définir sa position par défaut

Nous avons également ajouté de petites instructions pour que les utilisateurs soient informés du fonctionnement des choses lorsqu'ils démarrent le jeu, comme indiqué ci-dessus.

Étape 2 : Ajoutez des couleurs au canevas lorsque vous cliquez sur la souris.

Pour ajouter le contrôle du mouvement de la souris sur le sprite, nous avons écrit le code suivant.

Le bloc de code pour contrôler le sprite du stylet à l'aide de la souris

Les utilisateurs peuvent désormais dessiner en cliquant sur le bouton de la souris et en déplaçant le stylet avec le pointeur de la souris.

Étape 3 : Modifiez les couleurs à l'aide de différentes touches.

Nous avons créé différents costumes pour différentes couleurs de crayons afin de montrer un changement visible lorsque certaines touches sont enfoncées pour changer de couleur.

Le code pour échanger les couleurs en appuyant sur différentes touches

Étape 4 : Créez des blocs et attribuez-leur différentes couleurs et différents sons.

Nous avons créé un bloc et l'avons dupliqué pour créer une ligne et définir sa position à l'extrême gauche (x = -240) et l'avons fait bouger tous les 10 pas dans la direction X. Cela fait ressembler à la ligne

Code pour le mouvement des blocs à travers la toile. En raison du décalage, certains blocs ont un mouvement retardé

Étape 5 : ajoutez le contrôle du mouvement des doigts au sprite (stylo).

Remplacez le "pointeur de la souris" par "Aller à x et y" à partir des blocs de mouvement. En stretch, ajoutez l'extension Handpose2Scratch.

Faites glisser le "x de l'index" et le "y de l'index" vers le programme principal et placez-le dans l'espace.

Cela fait que le sprite colle à l'index et se déplace indéfiniment sur la toile.

Étape 6 : Ajoutez des machines d'apprentissage pour le stylet de haut en bas pour faciliter le dessin avec votre index.

Dans la machine pouvant être enseignée, sélectionnez l'option Projet d'image :

https://teachablemachine.withgoogle.com/train

Pour entraîner le mode, nous avons créé deux classes (Pen Up, Pen Down). Les étapes sont simples. Créez une classe et le modèle à l'aide de la caméra Web. La sortie de la formation ressemble à ceci :

Entraînement du modèle Image Project dans TM.

Ensuite, nous avons exporté le modèle et copié l'URL.

Dans Stretch, ajoutez l'extension Teachable Machine (TM2Scratch).

Faites glisser le bloc d' URL du modèle de classication d'image vers le programme principal (code) et remplacez "Mouse down?" avec le bloc "l'image est ___" .

Ajoutez le lien de la machine enseignable formée à l'URL du modèle. Définissez la prédiction sur Pen vers le bas.

Mise à jour du code des attributs du stylo avec TM

Après avoir tout suivi, voici ce que nous avons trouvé.

Téléchargez le code final ici :https://drive.google.com/drive/folders/1w4FAdF74Uw74eZG-Fia1GtEOUkHMYfJU?usp=sharing

Crédits

Codage : Ishaan Gupta & Anant Patrick

Idéation, conceptualisation, brainstorming et planification : Ishaan Gupta & Vedakshiaggarwal

Documentation du contenu : Ishaan Gupta & Vedakshi Aggarwal

Et c'est fait ! si simple, n'est-ce pas.

Merci d'avoir passé votre temps ici.❤