-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (83 loc) · 2.84 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
<!DOCTYPE html>
<html>
<head>
<title>Liyan Zhao</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="info" class="full">
<span id="name">L I Y A N Z H A O</span> i s c u r r e n t l y a n M F A c a n d i d a t e a t Y a l e S c h o o l o f A r t . R e a c h m e a t <a id="email" href="mailto: [email protected]">l i y a n . z h a o @ y a l e . e d u</a>
</div>
<div class="short">LIYAN ZHAO is currently an MFA candidate at Yale School of Art. Reach me at <a href="mailto: [email protected]">[email protected]</a></div>
<canvas id="myCanvas" width="500" height="500"></canvas>
<!-- <div id="coord"></div>
<div id="width"></div>
<div id="spacing"></div>
<div id="hue"></div> -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
function showCoords(mouseEvent) {
var x;
var y;
if (mouseEvent){
x = mouseEvent.pageX;
y = mouseEvent.pageY;
}
var coords = "X: " + x + ", Y: " + y;
var wwidth = window.innerWidth-1;
var spacing = -3.5+x/wwidth*45.1+ 'px';
var liyan = document.getElementById('name');
var email = document.getElementById('email');
// document.getElementById("coord").innerHTML = coords;
// document.getElementById("width").innerHTML = wwidth;
// document.getElementById("spacing").innerHTML = spacing;
liyan.style.letterSpacing = spacing;
email.style.letterSpacing = spacing;
}
document.onmousemove = showCoords;
</script>
<script type="text/javascript">
var d;
var sec;
var msec;
var hue;
var mousePressed = true;
var lastX, lastY;
var ctx;
$(window).load(function () {
canv = document.getElementById('myCanvas');
ctx = canv.getContext("2d");
canv.width = $(window).width();
canv.height = $(window).height();
$('#myCanvas').mousemove(function (e) {
if (mousePressed) {
//Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
Draw(e.pageX/2+window.innerWidth/2 , e.pageY , true);
}
});
$('#myCanvas').mouseleave(function (e) {
mousePressed = true;
});
});
function Draw(x, y, isDown) {
if (isDown) {
d = new Date();
sec = d.getSeconds();
msec = d.getMilliseconds();
hue = 360 * sec/60;
strokesize = 1 + 40 * msec/1000;
ctx.beginPath();
ctx.strokeStyle = "hsl(" + hue +", 100%, 50%)";
ctx.lineWidth = strokesize;
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
</script>
</body>
</html>