差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
lecture:ai_interaction_design [2020/12/22 15:16] – [Basics of p5.js] baba | lecture:ai_interaction_design [2021/01/22 11:52] – [AI Interaction Design] 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. | 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:// | + | * Our comment app: https:// |
===== 1. Getting started with P5.js and editor ===== | ===== 1. Getting started with P5.js and editor ===== | ||
- | Let's start with the basics of p5.js. p5.js is a development | + | Let's start with the basics of p5.js. p5.js is a coding |
* https:// | * https:// | ||
- | 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 ==== | ==== Basics of p5.js ==== | ||
行 35: | 行 36: | ||
For more information on the role of each file, please see following page. | For more information on the role of each file, please see following page. | ||
* [[processing: | * [[processing: | ||
+ | |||
+ | 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!! | ||
+ | * https:// | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | ===== 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:// | ||
+ | |||
+ | ==== 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:// | ||
+ | |||
+ | |||
+ | 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' | ||
+ | * https:// | ||
+ | Now, let's put a camera captured image on the game screen, just like below. | ||
+ | {{ : |