-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
250 lines (247 loc) · 11.6 KB
/
index.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
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Moving Eye</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<div>
<h1 class="text-center">Moving Eyes with JavaScript</h1>
</div>
<div class="row justify-content-center" style="max-width: 100vw;">
<div class="col-auto text-nowrap"><?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="50%"
viewBox="0 0 255 255"
version="1.1"
id="SVGRoot"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="eye.svg">
<defs
id="defs1366" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.0078431"
inkscape:cx="145.20041"
inkscape:cy="125.44033"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="836"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:grid-bbox="true" />
<metadata
id="metadata1369">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="eye">
<circle
cy="127.49999"
cx="127.5"
id="circle2212"
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:3.85195494;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
r="125.57402" />
</g>
<g
inkscape:label="iris"
inkscape:groupmode="layer"
id="layer1">
<g
id="g2210"
transform="matrix(0.39215686,0,0,0.39215686,75.5,79.500001)">
<circle
r="127.5"
cy="127.5"
cx="127.5"
id="path1922"
style="opacity:1;fill:#784421;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:44.07052612;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" />
<circle
style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:17.73150063;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
id="circle2206"
cx="127.5"
cy="127.5"
r="51.298828" />
</g>
</g>
</svg>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="50%"
viewBox="0 0 255 255"
version="1.1"
id="SVGRoot1"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="eye.svg">
<defs
id="defs1366" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.0078431"
inkscape:cx="145.20041"
inkscape:cy="125.44033"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="836"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:grid-bbox="true" />
<metadata
id="metadata1369">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="eye">
<circle
cy="127.49999"
cx="127.5"
id="circle2212"
style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:3.85195494;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
r="125.57402" />
</g>
<g
inkscape:label="iris"
inkscape:groupmode="layer"
id="layer1">
<g
id="g2210"
transform="matrix(0.39215686,0,0,0.39215686,75.5,79.500001)">
<circle
r="127.5"
cy="127.5"
cx="127.5"
id="path1922"
style="opacity:1;fill:#784421;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:44.07052612;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" />
<circle
style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:17.73150063;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke"
id="circle2206"
cx="127.5"
cy="127.5"
r="51.298828" />
</g>
</g>
</svg>
<script>
class MovingEye {
constructor(id, irisid, movement) {
// save the outer eye which contains the iris (I will refer to this as the 'outer eye')
this.bound = document.getElementById(id);
// save the iris which will move
this.iris = this.bound.getElementById(irisid);
// maximum percentage the iris can move in the outer eye
this.movement = movement;
//find the x and y coordinates of the midpoint of the outer eye by taking an average of the coordinates of the edges
this.midX = (
this.bound.getBoundingClientRect().left + this.bound.getBoundingClientRect().right)/2;
this.midY = (
this.bound.getBoundingClientRect().top + this.bound.getBoundingClientRect().bottom)/2;
}
// Function which will be called when the mouse is moved. Requires 2 parameters, the x and y coordinates of the mouse respectively
mousemoved(mouseX, mouseY){
// check if the mouse is to the left or right of the center of the outer eye
if(mouseX < this.midX){
// if the mouse is on the left, find the difference between the x coordinate of the mouse and the left hand side of the page and turn that into a percentage
var x = (mouseX - this.midX) / this.midX;
}else if(mouseX > this.midX){
// if the mouse is on the right, find the difference between the x coordinate of the mouse and right hand side of the page and turn that into a percentage
var x = (mouseX - this.midX) / (window.innerWidth - this.midX);
}else{
// if the mouse is in line with the eye, center the eye
var x = 0;
};
// check if the mouse is to the above or below of the center of the outer eye
if(mouseY < this.midY){
// if the mouse is on the above, find the difference between the y coordinate of the mouse and the top of the page and turn that into a percentage
var y = (mouseY - this.midY) / this.midY;
}else if(mouseY > this.midY){
// if the mouse is on the below, find the difference between the x coordinate of the mouse and bottom of the page and turn that into a percentage
var y = (mouseY - this.midY) / (window.innerHeight - this.midY);
}else{
// if the mouse is in line with the eye, center the eye
var y = 0;
};
// multiply the 2 values by the movenent factor (set earlier) and turn into a percentage
x = this.movement * x + "%";
y = this.movement * y + "%";
// finally move the iris
this.iris.style.transform = "translate("+ x +","+ y +")";
}
}
function ActivateEye(eye){
document.addEventListener("mousemove", function(e) {
eye.mousemoved(e.clientX, e.clientY);
});
}
// use the MovingEye class to create the object(s) for the eye(s)
// There are 3 parameters:
// 1) The ID of the svg/outer eye which contains the iris
// 2) The ID of the iris which will move
// 3) The maximum percentage the iris can move in the outer eye
LeftEye = new MovingEye('SVGRoot', 'layer1', 20);
RightEye = new MovingEye('SVGRoot1', 'layer1', 20);
// Activate the eyes by running the ActivateEye function passing through the eye variables set previously
ActivateEye(LeftEye);
ActivateEye(RightEye);
</script></div>
<div class="col-auto" style="/*max-width: 800px;*/">
<div class="text-center"><a class="btn btn-primary github-button" role="button" href="https://github.com/avt613/Moving-Eye" data-icon="octicon-star" data-size="large" aria-label="Star avt613/Moving-Eye on GitHub">Star</a><a class="btn btn-primary github-button" role="button" href="https://github.com/avt613/Moving-Eye/fork" data-icon="octicon-repo-forked" data-size="large" aria-label="Fork avt613/Moving-Eye on GitHub">Fork</a></div>
<p style="padding: inherit;">I have tried to make an eye which moves with the mouse using JavaScript. This code uses the mouses' location relative to the centre of the eye and the edge of the page to work out how far to move the iris. <br>First I made a simple eye with <a href="http://www.inkscape.org/"><span style="text-decoration: underline;">inkscape</span></a> containing the layer containing an iris. Then I opened the saved image with a text editor and copied it into the html where. Finally I inserted the JavaScript which does the magic.<br>To make it simpler, I have used classes. To use this in your own code, first import the 'MovingEye' class by inserting <code><script src="https://raw.githubusercontent.com/avt613/Moving-Eye/master/MouseMoved.js"></script></code> in the header of the html. <br>Then initiate the eye by running <code>Eye = new MovingEye('eyeID', 'irisID', 20);</code> in the JavaScript, where 'eyeID' is the ID of the svg/outer eye which contains the iris, `irisID` is the ID of the iris which will move and the last parameter is the maximum percentage the iris can move in the outer eye. (I would recommend keeping that at 20.)<br>Then set the eye to move when the mouse moves by running <code><br>ActivateEye(Eye);<br></code><br>For an example, here is the code for the two eyes on this page:<code><br><script><br> LeftEye = new MovingEye('SVGRoot', 'layer1', 20);<br> RightEye = new MovingEye('SVGRoot1', 'layer1', 20);<br> ActivateEye(LeftEye);<br> ActivateEye(RightEye);<br></script><br></code>To understand how this code works, please look at <a href="https://github.com/avt613/Moving-Eye/blob/master/MouseMoved.js">MouseMoved.js</a>.</p>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>