Teachable Machine

👉

Teachable Machine links

Teachable Machine home

Experiments with Google

ml5 Reference

Table of contents

📌

Reminders

직접 타이핑하자.

필요한 걸 인터넷에서 찾아보자.

이걸로 뭘 재밌게 할지 고민하자.

지난 시간에 못 다한 인터랙션

마우스 인터랙션

원으로 궤적 그리기

sin + millis 를 이용하여 원 크기 바꾸어 궤적 그리기

마이크 입력

p5.AudioIn

let mic;

function setup() {
  createCanvas(710, 200);

  // 오디오 입력 생성하기
  mic = new p5.AudioIn();

  // 오디오 입력 시작하기
  // 그 기본값은 .connect()(즉, 컴퓨터 스피커에 연결)되지 "않은" 상태입니다.
  mic.start();
}

function draw() {
  background(200);

  // 전체 볼륨(0과 1.0 사이) 받아오기
  let vol = mic.getLevel();
  fill(127);
  stroke(0);

  // 마이크 소리의 볼륨에 따라 떠있는 높이가 변하는 타원 그리기
  let h = map(vol, 0, 1, height, 0);
  ellipse(width / 2, (h-25), 50, 50);
}

비디오 입력

createCapture()

let capture;

function setup() {
  createCanvas(640, 480);

  // Create the video capture and hide the element.
  capture = createCapture(VIDEO);
  capture.hide();
}

function draw() {
  // Draw the video capture within the canvas.
  translate(width, 0);
  scale(-1, 1);
  image(capture, 0, 0, width, height);
}

p5.js에서 라이브러리 이용하기

외부 라이브러리 연결

HTML 파일에 라이브러리 링크를 걸면 된다

기본 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>

ml5.js 사용을 위한 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/addons/p5.sound.min.js"></script>
    <!-- ml5 -->
    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
  </body>
</html>