스크래치로 멜로디 게임 그리기

Nov 25 2022
스크래치로 멜로디 그리기 게임을 만들어 봅시다. MIT Media Labs에서 개발한 Scratch로 누구나 코딩을 배울 수 있습니다.

스크래치로 멜로디 그리기 게임을 만들어 봅시다. MIT Media Labs에서 개발한 Scratch로 누구나 코딩을 배울 수 있습니다. 멋진 게임, 애니메이션, 예술 작품 및 기타 멋진 것들을 만드는 것은 매우 간단합니다.

프로젝트 정보:

마우스/검지 손가락다양한 색상 으로 화면에 그림을 그려 아름다운 작품 을 만드세요 . 흥미로운 부분은 각 색상에 다른 곡/음표가 할당된다는 것입니다. 디자인이 완료되면 스페이스바를 눌러 타임라인을 시작하십시오. 막대가 그림의 색상과 접촉할 때 소리가 납니다. 이것은 다른 음표와 곡의 조합으로 독특한 멜로디를 만들 것입니다.

낙서 만 해도 흥미롭고 즐거운 음악이 만들어질 것입니다. 이것은 그들이 계속 궁금해 할 것입니다.

이것은 ANMOL SRIVASTAVA 가 가르치는 "기계 학습" 과정을 위한 프로젝트입니다 . 수정된 버전의 스크래치 — 늘이기(http://stretch3.github.io/). 이를 통해 우리는 더 많은 확장 기능을 사용할 수 있었습니다.

이 프로젝트에서 4개의 확장을 사용했습니다.

  1. 손포즈2스크래치
  2. 음악
  3. TM2스크래치

게임을 다음 단계로 분류해 보겠습니다.

  1. 스프라이트(펜)를 ​​선택하고 마우스를 사용하여 움직임을 제어합니다.
  2. 마우스를 클릭하면 캔버스에 색상을 추가합니다.
  3. 다른 키를 사용하여 색상을 변경합니다.
  4. 블록을 생성하고 다양한 색상과 다양한 사운드를 할당하세요.
  5. Handpose2Scratch를 사용하여 스프라이트(펜)에 손가락 이동 컨트롤 추가(최종 출력용)
  6. 집게 손가락으로 더 쉽게 그림을 그릴 수 있도록 펜 위아래로 학습할 수 있는 기계를 추가하세요.
마우스 제어 그리기 게임 예제

1단계: 스프라이트(펜)를 ​​선택하고 마우스를 사용하여 움직임을 제어합니다.

애니메이션을 적용할 수 있는 스프라이트(연필)를 선택합니다. 이름도 지정할 수 있습니다. 연필을 선택하고 색상과 이름(파란색)을 지정했습니다. X=0 및 Y=0 위치에 배치합니다. 즉, 페이지 중앙에 유지됩니다.

기본 위치를 설정하는 펜의 초기 코드

또한 사용자가 위와 같이 게임을 시작할 때 작동 방식에 대한 알림을 받을 수 있도록 작은 지침을 추가했습니다.

2단계: 마우스를 클릭하면 캔버스에 색상을 추가합니다.

스프라이트에 마우스 이동 제어를 추가하기 위해 다음 코드를 작성했습니다.

마우스를 사용하여 펜 스프라이트를 제어하기 위한 코드 블록

이제 사용자는 마우스 버튼을 클릭하고 마우스 포인터로 펜을 움직여 그림을 그릴 수 있습니다.

3단계: 다른 키를 사용하여 색상을 변경합니다.

색상을 변경하기 위해 특정 키를 눌렀을 때 눈에 띄는 변화를 보여주기 위해 다양한 연필 색상에 대해 서로 다른 의상을 만들었습니다.

다양한 키를 누를 때 색상을 바꾸는 코드

4단계: 블록을 생성하고 블록에 다양한 색상과 다양한 사운드를 할당합니다.

블록을 만들고 복제하여 선을 만들고 위치를 맨 왼쪽(x=-240)으로 설정하고 X 방향으로 10걸음마다 이동하도록 했습니다. 이것은 라인처럼 보입니다.

캔버스에서 블록을 이동하기 위한 코드입니다. 지연으로 인해 일부 블록의 이동이 지연되었습니다.

5단계: 스프라이트(펜)에 손가락 이동 컨트롤을 추가합니다.

모션 블록에서 '마우스 포인터'를 'x & y로 이동'으로 바꿉니다. 스트레치에서 Handpose2Scratch 확장을 추가합니다.

'집게손가락의 x' & '검지손가락의 y'를 메인 프로그램으로 드래그하여 빈칸에 놓으세요.

이렇게 하면 스프라이트가 집게 손가락에 달라붙고 캔버스에서 무기한 이동합니다.

6단계: 검지 손가락으로 더 쉽게 그림을 그릴 수 있도록 펜을 위아래로 학습할 수 있는 기계를 추가합니다.

학습 가능한 머신에서 이미지 프로젝트 옵션을 선택합니다.

https://teachablemachine.withgoogle.com/train

모드를 훈련하기 위해 두 개의 클래스(Pen Up, Pen Down)를 만들었습니다. 단계는 간단합니다. 웹 카메라를 사용하여 클래스와 모델을 만듭니다. 학습 결과는 다음과 같습니다.

TM에서 이미지 프로젝트 모델 훈련.

다음으로 모델을 내보내고 URL을 복사했습니다.

스트레치에서 Teachable Machine 확장(TM2Scratch)을 추가합니다.

이미지 분류 모델 URL 블록을 메인 프로그램(코드)으로 드래그하고 “Mouse down?” 을 교체합니다. "이미지 is___" 블록 으로 .

훈련된 학습 가능한 기계 링크를 모델 URL에 추가하십시오 . 예측을 Pen down으로 설정합니다.

TM으로 업데이트된 펜 속성 코드

모든 것을 따른 후에 이것이 우리가 생각해 낸 것입니다.

여기에서 최종 코드를 다운로드하십시오.https://drive.google.com/drive/folders/1w4FAdF74Uw74eZG-Fia1GtEOUkHMYfJU?usp=sharing

학점

코딩: Ishaan Gupta & Anant Patrick

구상, 개념화, 브레인스토밍 및 계획: Ishaan Gupta & Vedakshiaggarwal

콘텐츠 문서: Ishaan Gupta & Vedakshi Aggarwal

그리고 끝났습니다! 너무 간단하지.

여기서 시간을 보내주셔서 감사합니다.❤