-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprojectold.html
239 lines (196 loc) · 14.1 KB
/
projectold.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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<title>Portfolio | Zhengxing Chen</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36580827-1']);
_gaq.push(['_setDomainName', 'czxttkl.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!--scrollTo-->
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.scrollTo-min.js" type="text/javascript"></script>
<script language=javascript>
$(function(){
$("#MoveUp3").click(function(){
$.scrollTo( $("#project2"), 400 );
});
$("#MoveDown1").click(function(){
$.scrollTo( "#project2", 400 );
});
$("#MoveDown2").click(function(){
$.scrollTo( "#project3", 400 );
});
$("#MoveDown3").click(function(){
$.scrollTo( "#project4", 400 );
});
$("#MoveUp2").click(function(){
$.scrollTo( "#project1", 400 );
});
$("#MoveUp4").click(function(){
$.scrollTo( "#project3", 400 );
});
$("#Top").click(function(){
$.scrollTo( {top:'0px', left:'0px'}, 400 );
});
});
</script>
<!--fancybox-->
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.0.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.0.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
<!-- Begin DropDown -->
<script type="text/javascript">
$(function(){
$("ul.dropdown li").hover(function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});
</script>
</head>
<body>
<div id="header">
<div id="logo" style="position:relative;top:0px;left:0px;"><img src="images/logo.png"></div>
</div>
<ul class="dropdown">
<!-- menu -->
<li class="title"><a href="indexold.html">Home</a></li>
<li class="title"><a href="projectold.html">Projects</a></li>
<li class="title"><a href="cv.pdf" target="_blank">CV</a>
<!-- <ul class="sub_menu">
<li><a href="project.html">Projects</a></li>
<li><a href="others.html">Others</a></li>
</ul>-->
</li>
<li class="social"><a href="https://www.facebook.com/czxttkl" target="_blank"><img src="images/facebook.png" width="26" height="26" alt="facebook" /></a> </li>
<li class="social"><a href="https://twitter.com/czxttkl" target="_blank"><img src="images/twitter.png" width="26" height="26" alt="twitter" /></a> </li>
<li class="social"><a href="http://www.linkedin.com/pub/zhengxing-chen/4b/746/179" target="_blank"><img src="images/linkedin.png" width="26" height="26" alt="linkedin" /></a></li>
<li class="social"> <a href="https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=czxttkl@gmail.com" target="_blank"><img src="images/email.png" width="26" height="26" alt="email" /></a></li>
</ul>
<!-- close menu -->
<div id="gallery">
<h3 id="project1">Virtual Costumes-Trial System</h3>
<div class="project" style="height:700px;">
<div class="projectimg left" style="height:700px;"><a href="images/art1.jpg" title="pic" class="fancybox" rel="group"> <img src="images/port1.jpg" alt="demo" /></a> <br />
<a href="images/art2dot5.jpg" title="pic" class="fancybox" rel="group"> <img src="images/port2dot5.jpg" alt="demo" /></a><br />
<a href="images/art2.jpg" title="pic" class="fancybox" rel="group"> <img src="images/port2.jpg" alt="demo" /></a><br />
</div>
<div class="projectcontent right" style="height:700px;">
<h4 style="margin-top:0;">Objective</h4>
<p>To design and build a virtual costumes-trial system to eliminate the worry of purchasing unsuitable clothes online.</p>
<h4>Overview and Challenges</h4>
<p>With the rapid development of e-commerce, a large amount of consumers have chosen to purchase clothes online. However, it has always been a tough decision for consumers to make purchases of clothes online without virtual images of trying clothes on. In order to make consumers getting clothes fitting correctly online, we have designed a virtual costumes-trial system based on 3D body modeling. Challenges are significant because we need to consider every aspect both on the level of hardware and software.</p>
<h4>The Journey</h4>
<p>We always put the user’s experience in the first place. After discussion, we held that simplicity,
convenience and universality would greatly improve user’s experience. Firstly, our team chose
the processor of Intel Atom E6x5C with built-in FPGA of Arria Company, whose superior
performance made possible the quick data collection and processing. In terms of camera, we
chose prevailing USB camera, which allowed most users to obtain the data more conveniently.
I implemented Canny algorithm on the FPGA, which could quickly obtain edge profile
of users' bodies. Moreover, I used to processed body information to
accurately form 3D human model by powerful Java 3D APIs. We prepared several skins of different clothes. When we
attached the clothes skins to the built human model, a 360 degree panoramic perspective was possible to observe the effect of trying clothes on. </p>
<h4>Project Info</h4>
<p> <span class="inlineRed">Collaborators:</span> Yunbing Ding, Xiaopeng Bi, Jinming Ma <br />
<span class="inlineRed">Methods & Tools:</span> Bodystorming, Wireframing, Prototyping, Testing, Quartus II, Eclipse, 3DMax <br />
<span class="inlineRed">Timeline:</span> March 2012 - July 2012</p>
</div>
</div>
<div class="galsep"> <span id="MoveDown1">Next</span> </div>
<h3 id="project2">Intelligent Platform of Mobile Network Awareness</h3>
<div class="project" style="height:610px;">
<div class="projectcontent left">
<h4 style="margin-top:0;">Objective</h4>
<p>The intelligent platform of mobile Internet awareness will provide operators, service providers and IT developers with visualized data about mobile network health conditions. Users can clearly observe the health conditions of their services or websites through various models, such as Timeline and Map View. </p>
<h4>Overview and Challenges</h4>
<p>Mobile Internet will be a trend in the future. All network operators, service providers and website/app
operators want to thoroughly understand their service quality in order to improve the user experience. The intellisense platform
will provide users with vivid visual data to help users fully understand the health status of their
service. To employ a variety of vivid and effective display models is the biggest challenge to the
project.</p>
<h4>The Journey</h4>
<p> Those who need to customize measuring and monitoring service are professional operators and content
providers. They always need a full range of data in every aspect of network. The platform I have designed
at present can observe the service quality from maps, timeframe and historical timeline.
Furthermore, users can observe real-time service quality by triggering immediate measuring. By
virtue of powerful HTML5, CSS3 and Javascript, I keep trying to present results in rich effect. I
recently began to conduct a survey on users preference in checking measuring results, in hope
that I can rely on it to perfect my platform.</p>
<h4>Project Info</h4>
<p> <span class="inlineRed">Methods & Tools:</span> Anthropomorphic Approach, Affordances Analysis, Wireframing, Prototyping, Testing, Dreamweaver CS5.5, Eclipse <br />
<span class="inlineRed">Timeline:</span> July 2012 - Present</p>
</div>
<div class="projectimg right"><a href="images/art3.jpg" title="pic" class="fancybox" rel="group"> <img src="images/port3.jpg" alt="demo" /></a> <br />
<a href="images/art4.jpg" title="pic" class="fancybox" rel="group"> <img src="images/port4.jpg" alt="demo" /></a><br />
</div>
</div>
<div class="galsep" style="text-align:right"> <span id="MoveUp2">Previous</span> <span id="MoveDown2">Next</span> </div>
<h3 id="project3">MemoQuiz - Game App Development</h3>
<div class="project" style="height:483px;">
<div class="projectimg left"><a href="images/art5.jpg" title="pic" class="fancybox" rel="group"> <img src="images/port5.jpg" alt="demo" /></a> <br />
<a href="images/art6.jpg" title="pic" class="fancybox" rel="group"> <img src="images/port6.jpg" alt="demo" /></a><br />
</div>
<div class="projectcontent right">
<h4 style="margin-top:0;">Objective</h4>
<p>To design and develop an appealing memory test game app.</p>
<h4>Overview and Challenges</h4>
<p> The biggest challenge is to distinguish my app from a variety of apps.</p>
<h4>The Journey</h4>
<p>The experience is the milestone of my interest in HCI. I participated in the Samsung App Development Competition in my campus when it was my sophomore. At that time, I had neither experience of object-oriented programming beforehand nor ideas about UX and UI design. I started to delve into Java programing with the extreme excitement to make my first app. The game itself was simple. However, I made it sticky through designing hierarchical missions and adding appealing animations. After three months’ constructing, modifying and debugging, my efforts eventually paid off. My first mobile app was successfully approved by the Samsung App Store and until now there have been nearly 40 thousand downloads. </p>
<h4>Project Info</h4>
<p> <span class="inlineRed">Collaborators:</span> Shaojie Wang, Wentao Zhao, Yunbing Ding <br />
<span class="inlineRed">Methods & Tools:</span> Wireframing, Prototyping, Testing, Eclipse, Photoshop <br />
<span class="inlineRed">Timeline:</span> Sept. 2010 - March 2011</p>
</div>
</div>
<div class="galsep"> <span id="MoveUp3">Previous</span> <span id="MoveDown3">Next</span> </div>
<h3 id="project4">Pitch Match - Practice Assistant for Music Beginners</h3>
<div class="project" style="height:690px;">
<div class="projectcontent left">
<h4 style="margin-top:0;">Objective</h4>
<p>Our goal was to design an app for music rookies as a professional robot-teacher when their music teachers are absent.</p>
<h4>Overview and Challenges</h4>
<p>Innotation, rhythm and sound are three main problems tormenting beginners of playing instruments. When lacking of the on-site instruction of professional music teachers, beginners even don't know where goes wrong during their playing. Pitch Match is a smart app on Android, serving as a professional pitch/rhythm correction assistant for music beginners. Practicing playing instruments is no longer expensive, tedious and difficult! Designing a friendly but professional interface as well as accurate FFT filters is challenging. </p>
<h4>The Journey</h4>
<p> At first, I designed and simulated a FFT filter to extract frequencies of pitches, which generated accurate outputs under the ideal condition. However, when I integrated the FFT filter into our app running on a real phone, the problem emerged because the environmental noise did affect a lot. So I added a module functioning as a collector of environmental noise into the app, mading it more intelligent to filter useless sound frequencies. Another challenge is leveraging the processing speed of normal smart phones and the accuracy of FFT filter. Considering that most frequencies of music pitches are less than 5000Hz, I chose to use a 2048-point FFT filter to ensure the identification accuracy and the smooth operation of the application. After that, my teammates and I devoted to furnish the UI. The elaborated statistics forms and easy-to-use sliding menu were both indispensable elements. We also designed several skins for the application. </p>
<h4>Project Info</h4>
<p> <span class="inlineRed">Collaborators:</span> Shaojie Wang, Yajie Zhang <br />
<p> <span class="inlineRed">Methods & Tools:</span> Constraints and Affordances design, Wireframing, Prototyping, Testing, Matlab, Eclipse, Photoshop CS5 <br />
<span class="inlineRed">Timeline:</span> Oct. 2011 - Mar. 2012</p>
</div>
<div class="projectimg right"><a href="images/art9.jpg" title="pic" class="fancybox" rel="group"> <img src="images/port9.jpg" alt="demo" /></a> <br />
<a href="images/art10.jpg" title="pic" class="fancybox" rel="group"> <img src="images/port10.jpg" alt="demo" /></a><br />
<a href="images/art8.jpg" title="pic" class="fancybox" rel="group"> <img src="images/port8.jpg" alt="demo" /></a><br />
</div>
</div>
<div class="galsep" style="text-align:right"> <span id="MoveUp4">Previous</span> <span id="Top">Top</span> </div>
</div>
<!-- close gallery -->
<div id="footer" style="text-align:left; padding-left:10px;"> <br> Visit <a href="project.html">new version </a>. Contact me: <a href="https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=czxttkl@gmail.com" target="_blank">czxttkl@gmail.com</a></div>
</body>
</html>