-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
132 lines (101 loc) · 4.72 KB
/
about.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1">
<title>AffectButton</title>
<!-- Use CDN versions of 3rd party resources to avoid clutter in our repository -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Include (minimalistic) style for this demo page -->
<link rel="stylesheet" href="css/mobile.css" />
<!-- Register document ready callback -->
<script>
jQuery( function( $ ) {
$( '[data-role="navbar"]' ).navbar();
$( '[data-role="header"], [data-role="footer"]' ).toolbar();
$( document ).on( 'pagecontainerchange', function() {
var current = $( '.ui-page-active' ).jqmData( 'title' );
// Remove active class from nav buttons
$( '[data-role="navbar"] a.ui-btn-active' ).removeClass( 'ui-btn-active' );
// Add active class to current nav button
$( '[data-role="navbar"] a' ).each( function() {
if ( $( this ).text() === current ) {
$( this ).addClass( 'ui-btn-active' );
}
} );
} );
} );
</script>
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-prefetch="true" data-transition="fade">Demo</a></li>
<li><a href="about.html" data-prefetch="true" data-transition="fade" class="ui-btn-active">About</a></li>
<li><a href="usage.html" data-prefetch="true" data-transition="fade">Usage</a></li>
<li><a href="android.html" data-prefetch="true" data-transition="fade">Android</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div id="about" data-role="page" data-title="About">
<div data-role="content">
<p>
The widget is a re-implementation of Joost Broeken's original Java version. Please refer
to his <a href="http://mmi.tudelft.nl/~joostb/#AffectButton">homepage</a> for more
information. Basically, you're free to use it in research or education
context -- but <i>commercial application will require his explicit blessing</i>.
</p>
<p>
I will now attempt to explain briefly how it all works...
</p>
<h3>Mapping X and Y co-ordinates to P/A/D components</h3>
<p>
The attentive reader will have noticed that the canvas is two-dimensional
while there are three scalar components. And sure enough, there are lots
of P/A/D triplets that you cannot "reach" via input at the canvas.
</p>
<p>
The important thing to note here is that:
<ul>
<li>Pleasure corresponds to the horizontal axis of the canvas;</li>
<li>Dominance corresponds to the vertical axis of the canvas;</li>
<li>Arousal is computed from a function of distance to the center.</li>
</ul>
I cannot speak to the merits of this restriction, but surveys suggest that
users feel the widget is sufficiently expressive.
</p>
<h3>Mapping P/A/D components to facial expression</h3>
<p>
The three scalar P/A/D components span a cube, <code>[-1,1]<sup>3</sup></code>
for the mathematically inclined. For each of the eight vertices of the cube,
as well as the origin at <code>(0,0,0)</code>, Joost has assigned numerical
values for eight "features", such as the openness of eyes and mouth, distance
between eyebrows and eyes, rotation of eyebrows, curvature of lips.
These are the parameters that are used by the <code>paint</code> function to
actually draw the face.
</p>
<p>
I like to think of these nine anchor points in P/A/D space as "archetypes".
For an arbitrary P/A/D triplet, we determine the (Euclidean) distance to
each of the archetypes and then "mix" the associated feature values by
computing a weighted sum. The resulting feature vector is then used to
repaint the face.
</p>
<p>
The nine archetypes are displayed below:
</p>
<div id="archetypes">
</div>
<p>
You could re-create each of these archetypes in the Demo section
by moving all three sliders to extreme positions at -1 or +1, or to
re-create the neutral face at the origin of the P/A/D cube by moving
all three sliders to 0.
</p>
</div>
</div>
</body>
</html>