-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscratchvr.html
More file actions
151 lines (127 loc) · 6.42 KB
/
scratchvr.html
File metadata and controls
151 lines (127 loc) · 6.42 KB
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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Victor Chen</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="FreeHTML5.co" />
<!--
//////////////////////////////////////////////////////
FREE HTML5 TEMPLATE
DESIGNED & DEVELOPED by FreeHTML5.co
Website: http://freehtml5.co/
Email: info@freehtml5.co
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="" />
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="shortcut icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" 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">
<!-- 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 id="fh5co-page">
<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
<aside id="fh5co-aside" role="complementary" class="border js-fullheight">
<h1 id="fh5co-logo"><a href="index.html">Victor<br>Chen</a></h1>
<nav id="fh5co-main-menu" role="navigation">
<ul>
<li class="fh5co-active"><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<div class="fh5co-footer">
<p><small>© 2016 Blend Free HTML5. All Rights Reserved.</span> <span>Designed by <a href="http://freehtml5.co/" target="_blank">FreeHTML5.co</a> </span> <span>Modified by Me</span></small></p>
</div>
</aside>
<div id="fh5co-main">
<div class="fh5co-narrow-content">
<div class="row row-bottom-padded-md">
<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
<img class="img-responsive" src="images/front.jpg" alt="">
</div>
</div>
<div class="row row-bottom-padded-md">
<div class="col-md-12 animate-box" data-animate-effect="fadeInLeft">
<h2 class="fh5co-heading">ScratchVR</h2>
<p>Low-cost mobile virtual reality (VR), like the Google Cardboard, is limited in regards to
what you can do/interact with, because they do not have controllers. Besides moving the head to look around, the Google Cardboard v1 has one magnet button mechanism for simple selections. The project, ScratchVR,
was an exploration into providing more interactions for input into VR. It provides bidirectional scrolling input as well as discrete selection input.</p>
<p>The original intention was to recognize acoustic signatures of distinct textures. I did a lot of prototyping and 3D-printed several textures to do audio analysis on. We ended up switching to repurpose the magnetic components of the Cardboard v1 and created a custom cardboard enclosure. This way, we could use commodity sensing on smartphones, particularly the magnetometer, to recognize the position of the magnet in our interface. In the enclosure, there is an inner and outer circular track. The outer track has a magnetized washer that users can slide along the track. The inner track is made up of a series of ridges, and a magnet is dragged along the ridges when the user slides the washer on the outside.</p>
<!-- pictures -->
</div>
</div>
<div class="row row-bottom-padded-md" style="display:flex; align-items:center;">
<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
<img class="img-responsive" src="images/outer_layer.jpg">
</div>
<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
<img class="img-responsive" src="images/scratchvr.jpg">
</div>
<div class="col-md-4 animate-box" data-animate-effect="fadeInLeft">
<img class="img-responsive" src="images/inner_layer.jpg">
</div>
</div>
<div class="row row-bottom-padded-md">
<div class="col-md-12 animate-box" data-animate-effect="fadeInLeft">
<p>I tested and implemented algorithms for tracking the position of the magnet. I also conducted user studies to evaluate our system compared to the standard "gaze" practice of VR. Because the interface was made of cardboard, I built an automatic rig that would spin the washer in different directions and durations of time to evaluate the robustness of the material and system.</p>
<!-- video? -->
</div>
</div>
<video width="600" controls>
<source src="images/scratch_iswc_v5.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<br>
--
<p>Richard Li, Victor Chen, Gabriel Reyes, and Thad Starner. 2018. ScratchVR: low-cost, calibration-free sensing for tactile input on mobile virtual reality enclosures. In Proceedings of the 2018 ACM International Symposium on Wearable Computers (ISWC '18). ACM, New York, NY, USA, 176-179. DOI: https://doi.org/10.1145/3267242.3267260
</p>
</div>
</div>
</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>
<!-- MAIN JS -->
<script src="js/main.js"></script>
</body>
</html>