Игра «Нарисуй мелодию» в Scratch

Nov 25 2022
Давайте воспользуемся Scratch, чтобы создать игру с мелодиями рисования. Каждый может научиться программировать с помощью Scratch, разработанного MIT Media Labs.

Давайте воспользуемся Scratch, чтобы создать игру с мелодиями рисования. Каждый может научиться программировать с помощью Scratch, разработанного MIT Media Labs. Создавать крутые игры, анимации, произведения искусства и другие крутые вещи довольно просто.

О проекте:

Создавайте красивые произведения искусства , рисуя на экране мышью/указательным пальцем и используя разные цвета. Захватывающая часть заключается в том, что каждому цвету назначается своя мелодия/нота музыки. Как только дизайн будет завершен, просто нажмите клавишу пробела, чтобы начать временную шкалу. Звук создается, когда полоса соприкасается с цветами рисунка. Это позволит создавать уникальные мелодии с комбинацией различных нот и мелодий.

Даже каракули приведут к интересной и приятной музыке. Это будет поддерживать их любопытство.

Это проект для курса «Машинное обучение», который преподает АНМОЛ СРИВАСТАВА . Мы использовали модифицированную версию скретча — Stretch (http://stretch3.github.io/). Это позволило нам получить больше расширений для игры.

В этом проекте мы использовали 4 расширения:

  1. Handpose2Scratch
  2. Ручка
  3. Музыка
  4. TM2Скретч

Разобьем игру на следующие этапы:

  1. Выберите спрайт (перо) и с помощью мыши управляйте его движением.
  2. Добавляйте цвета на холст при щелчке мышью.
  3. Меняйте цвета с помощью разных клавиш.
  4. Создавайте блоки и назначайте им разные цвета и звуки.
  5. Добавьте управление движением пальцев к спрайту (ручке) с помощью Handpose2Scratch (для нашего окончательного вывода)
  6. Добавьте обучаемые машины для подъема и опускания пера, чтобы упростить рисование указательным пальцем.
Пример игры для рисования, управляемой мышью

Шаг 1: Выберите спрайт (перо) и с помощью мыши управляйте его движением.

Выберите любой спрайт (карандаш), который можно анимировать. Вы также можете дать ему имя. Мы выбрали Карандаш и дали ему цвет и имя (синий). Поместите его в позиции X=0 и Y=0, что означает, что он останется в центре страницы.

Исходный код для пера, чтобы установить положение по умолчанию

Мы также добавили небольшие инструкции для пользователей, чтобы получать уведомления о том, как все работает, когда они запускают игру, как показано выше.

Шаг 2: Добавьте цвета на холст при щелчке мышью.

Чтобы добавить управление движением мыши по спрайту, мы написали следующий код.

Блок кода для управления спрайтом пера с помощью мыши

Теперь пользователи могут рисовать, нажимая кнопку мыши и перемещая перо с помощью указателя мыши.

Шаг 3: Измените цвета, используя разные клавиши.

Мы сделали разные костюмы для разных цветов карандашей, чтобы показать видимые изменения при нажатии определенных клавиш для изменения цвета.

Код для смены цветов при нажатии различных клавиш

Шаг 4: Создайте блоки и назначьте им разные цвета и звуки.

Мы сделали блок и продублировали его, чтобы создать линию, и установили его крайнее левое положение (x=-240) и заставили его двигаться каждые 10 шагов в направлении X. Это делает его похожим на линию

Код для перемещения блоков по холсту. Из-за лагов некоторые блоки двигаются с задержкой

Шаг 5: Добавьте управление движением пальцев к спрайту (ручке).

Замените «указатель мыши» на «Перейти к x и y» из блоков движения. В растяжку добавьте расширение Handpose2Scratch.

Перетащите «x указательного пальца» и «y указательного пальца» в основную программу и поместите их в пробел.

Это заставляет спрайт прилипать к указательному пальцу и бесконечно перемещаться по холсту.

Шаг 6: Добавьте обучаемые машины для перемещения пера вверх и вниз, чтобы упростить рисование указательным пальцем.

В обучаемой машине выберите параметр «Проект изображения»:

https://teachablemachine.withgoogle.com/train

Для тренировки режима мы создали два класса (Pen Up, Pen Down). Шаги просты. Создайте класс и модель с помощью веб-камеры. Результат тренировки выглядит так:

Обучение модели Image Project в ТМ.

Затем мы экспортировали модель и скопировали URL-адрес.

В растяжку добавьте расширение Teachable Machine (TM2Scratch).

Перетащите блок URL-адреса модели классификации изображений в основную программу (код) и замените «Мышь вниз?» с блоком «изображение ___» .

Добавьте ссылку на обученную обучаемую машину к URL-адресу модели. Установите предсказание на перо вниз.

Обновлен код атрибутов пера с ТМ

После всего, что мы придумали.

Загрузите окончательный код здесь:https://drive.google.com/drive/folders/1w4FAdF74Uw74eZG-Fia1GtEOUkHMYfJU?usp=sharing

Кредиты

Кодирование: Ишаан Гупта и Анант Патрик

Идея, концептуализация, мозговой штурм и планирование: Ишаан Гупта и Ведакшиаггарвал

Документация по содержанию: Ишаан Гупта и Ведакши Аггарвал

И это сделано! так просто, не правда ли.

Спасибо, что провели здесь время.❤