差分

このページの2つのバージョン間の差分を表示します。

--- lecture:ai_interaction_design [2020/12/22 15:30] – [Play Mario] baba
+++ lecture:ai_interaction_design [2021/03/09 02:37] (現在) – ↷ 移動操作に合わせてリンクを書き換えました。 baba
@@ 行 16: / 行 16: @@
 If you have any questions, please feel free to ask them via ZOOM chat or commentable. Since we only have 2 hours, if you have any difficulties in solving them on the spot, please review the archived videos that will be distributed later.
-  * Our comment app: https://commentable.lolipop.io/v/
+  * Our comment app: https://commentable.lolipop.io/
 ===== 1. Getting started with P5.js and editor =====
-Let's start with the basics of p5.js. p5.js is a development environment developed by the processing foundation to support creative coding. It runs in the browser, so there is no need to build an environment and you can start developing right away. Go to the below link and <wrap hi>open up with Chrome browser</wrap>.
+Let's start with the basics of p5.js. p5.js is a coding environment based on javascript so that we can code on a browser without any specific IDE, like a Visual Studio, Xcode and so on., which is developed by the processing foundation to support creative coding. It runs in the browser, so there is no need to build an environment and you can start developing right away. Go to the below link and <wrap hi>open up with Chrome browser</wrap>.
   * https://p5js.org
-Now you got p5.js website and will see a menu on the left side. Just click Editor on the menu
+Now you got p5.js website and will see a menu on the left side. Just click Editor on the menu.
 ==== Basics of p5.js ====
@@ 行 34: / 行 35: @@
   * style.css
 For more information on the role of each file, please see following page.
-  * [[processing:p5js:02.cssとhtmlとjs|cssとhtmlとjs]]
+  * [[p5js:02.cssとhtmlとjs|cssとhtmlとjs]]
+On our workshop, we just check and play below examples.
+  * Drawing: Continuous Lines
+  * Dom: Capture
+  * Simulate: Particle
 If you want to get to know about P5.js more, please visit below site and check beginners videos out!!
@@ 行 42: / 行 48: @@
 ===== 2. Start with playing Mario =====
+The goal of this workshop is to apply deep learning techniques to interaction design. Interaction design is the design of interaction. The research area is how to design the relationship between computers and humans, or humans and humans. In this workshop, we will use Super Mario Bros. as an example, and work together to create a case study that uses deep learning for its controls.
+Start with [[https://editor.p5js.org/tetsuakibaba/sketches/NfnWBTMGs|this template]] and save it on your account.
+==== How do we control Mario ====
+Now, we can control Mario by pressing a keyboard.
+  * d: move left
+  * a: move right
+  * w: jump
+  * s: crouch
+Let's change keyboard inputs to mouse inputs. This is a simple transformation of interaction.
+  * **What kind of mouse control design would you use?**
+It is a simple question, but fundamental of interaction design. The key is to notice the experiential value that comes from not changing the game content, but only the interaction design.
+Here, we try to control Mario with keyboard and mouse inputs referring a traditional game pad mental model.
+{{ https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Nintendo-Famicom-Console-Set-FL.png/800px-Nintendo-Famicom-Console-Set-FL.png }} cited from {{https://ja.wikipedia.org/wiki/ファミリーコンピュータ}}.
+If you are accustomed to this type of general controller operation, you may find it easier to assign the jump button to your right hand and the directional controls to your left.
+===== 3. Control your Mario with Deep Learning =====
+I'm going to try to use something different instead of the usual keyboard and mouse for the controls. Yes, today I use camera. Here is my design.
+  * up right hand: move right
+  * up left hand: move left
+  * up both hands: jump
+In order to achieve this kind of operation design, it used to be necessary to use computer vision to build advanced algorithms. However, recent AI technology, specifically deep learning, has made this kind of implementation easier.
+There is a lot of knowledge and methods available in libraries for implementing deep learning, and it is impossible to introduce them in today's workshop. Today we will try to use deep learning with ml5.js, which can work in conjunction with p5.js.
+  * https://ml5js.org/
+Now, let's put a camera captured image on the game screen, just like below.
+{{ :lecture:スクリーンショット_2020-12-22_16.04.51.png |}}