-
Notifications
You must be signed in to change notification settings - Fork 0
/
portfolio.html
182 lines (156 loc) · 8.16 KB
/
portfolio.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>YukiMaeda — Mypage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Website Template by freehtml5.co" />
<meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
<meta name="author" content="freehtml5.co" />
<!--
//////////////////////////////////////////////////////
FREE HTML5 TEMPLATE
DESIGNED & DEVELOPED by FreeHTML5.co
Website: http://freehtml5.co/
Email: [email protected]
Twitter: http://twitter.com/fh5co
Facebook: https://www.facebook.com/fh5co
//////////////////////////////////////////////////////
-->
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Old+Standard+TT:400,400i" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/iframe.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container">
<div class="top-menu">
<div class="row">
<div class="col-xs-2">
<div id="fh5co-logo"><a href="index.html">Yuki Maeda</a></div>
</div>
<div class="col-xs-10 text-right menu-1">
<ul>
<li><a href="index.html">Profile</a></li>
<li class="active"><a href="portfolio.html">Portfolio</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="blog.html">Tech Blog</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container">
<div id="fh5co-intro">
<div class="row animate-box">
<div class="col-md-8 col-md-offset-2 col-md-pull-2">
<h2>過去の制作物</h2>
</div>
</div>
</div>
<div id="fh5co-portfolio">
<div class="row">
<h1 id="potato">ポテチで近道を見つけろ！VR脱出ゲーム(制作時期：大学4年, チーム制作)</h1>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/QiVgxOzeipM?si=wdSNAY5LDf0kXEA6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<p><font size="4">大学4年生の時に大学の学祭に向けて作成したVRゲーム。</font></p>
<p><font size="4">何度か堅さの異なるポテチを食べてもらい、柔らかいポテチだと思った選択肢（道）をどんどん選んでもらい脱出を目指すVR脱出ゲームです。</font></p>
<p><font size="4">柔らかいと思った選択肢を選べばすぐ脱出でき、堅いと思った道を選ぶと脱出するのに時間がかかります。</font></p>
<p><font size="4">このゲームの面白い所は、実はゲーム内で食べているポテチは最初から最後までずっと変わらず一種類だというところです。</font></p>
<p><font size="4">しかし、体験者の多くは同じ選択肢を柔らかいポテチだと感じる人が多いです。何故でしょうか？</font></p>
<p><font size="4">実は体験者にはヘッドフォンと顎にセンサーをつけてもらい、ポテチを食べるときに堅さを錯覚するような音や振動を与えます。</font></p>
<p><font size="4">これによって体験者は同じポテチなのに堅さが違うと錯覚し、柔らかいと思うポテチの選択肢が皆ほぼ同じになるのです。</font></p>
<p><font size="4">体験者もゲームが終わってVRセットを取るまでまさか同じポテチを食べていたとは気付かず、その錯覚に驚きを感じてもらうのがこのゲームの狙いです。また、このような錯覚をクロスモーダル現象と言います。</font></p>
<h4>キーワード</h4>
<ul>
<li>クロスモーダル現象</li>
<li>VR脱出ゲーム</li>
</ul>
<br><br><br><br>
<h1 id="move">運動視できる立体視映像の作成(制作時期：大学3年, チーム制作)</h1>
<img src="images/pro_kzm.png" alt="画像の説明" width="600" height="400">
<p><font size="4">大学三年生の<a href="http://www.kzm.info.gifu-u.ac.jp/" target="_blank">木島研究室</a>に仮配属時に作成した作品。改良したものを2022年岐阜大学祭で展示を行いました。</font></p>
<p><font size="4">まるで物体がテレビから飛び出て掴めるような感覚が得られる作品です。</font></p>
<p><font size="4">詳しい説明、詳細は<a href="http://www.kzm.info.gifu-u.ac.jp/contents/B3Project2021.pdf" target="_blank">ドキュメント</a>, <a href="http://www.kzm.info.gifu-u.ac.jp/contents/popOutObjectPoster.pdf" target="_blank">学祭展示でのポスター</a>をご確認下さい。</font></p>
<h4>概要</h4>
<p>
HTC VIVEのコントローラーが括りつけられたヘッドセットを被ると、飛び出した物体が見える。さらに、ユーザーが動いても仮想物体の場所は移動せず、仮想物体が同じ位置にとどまっているように見える。また、今回のプロジェクトは特別な眼鏡を装着した人のみが物体が浮いている様な感覚が得られるが、イメージとしては以下の様な動画であり、この動画から着想を得てより浮き出ているような仮想空間を作成した。
</p>
<h4>参考にした動画</h4>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/Jd3-eiid-Uw?si=4Ek8I_Dw2h3jTfA4&start=165" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
</div><!-- END container-wrap -->
<div class="container">
<footer id="fh5co-footer" role="contentinfo">
<div class="row">
<div class="col-md-3">
<h4>Contact Information</h4>
<ul class="fh5co-footer-links">
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
</div>
</div>
<div class="row copyright">
<div class="col-md-12 text-center">
<p>
<small class="block">© 2016 Free HTML5. All Rights Reserved.</small>
<small class="block">Designed by <a href="http://freehtml5.co/" target="_blank">FreeHTML5.co</a> Demo Images: <a href="http://unsplash.co/" target="_blank">Unsplash</a></small>
</p>
</div>
</div>
</footer>
</div><!-- END container -->
</div>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Sticky Kit -->
<script src="js/sticky-kit.min.js"></script>
<!-- Main -->
<script src="js/main.js"></script>
</body>
</html>