-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsmiley test.html
91 lines (71 loc) · 2.29 KB
/
smiley test.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
<html>
<head>
<title>Stupid ass experiment</title>
</head>
<body>
<h1>Rate me</h1>
<input type="range" id="satisfaction" min="0" max="10" value="5" step="0.01"/>
<br />
<br />
<p id="valueIndicator"></p>
<p id="happinessText"></p>
<canvas id="myCanvas" width="150" height="150" />
</body>
<script>
var smileyValue = 5;
drawSmiley();
/* event listener */
document.getElementById("satisfaction").addEventListener('input', updateSmileyValue);
function updateSmileyValue(){
smileyValue = this.value;
drawSmiley();
}
function drawSmiley() {
// 75 = middle => should be 5
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
let yTotalHeight = 150;
let xTotalWidth = 150;
let maxSmileyValue = 10;
let margin = 20;
let xMarginRight= xTotalWidth - margin;
let intermediatePointsYValue = smileyValue * (yTotalHeight / maxSmileyValue);
let point1x = 0;
let point1y = yTotalHeight / 2;
let point2x = 45;
let point2y = intermediatePointsYValue;
let point3x = 105;
let point3y = intermediatePointsYValue;
let point4x = xTotalWidth;
let point4y = yTotalHeight / 2;
ctx.clearRect(0, 0, xTotalWidth, yTotalHeight);
ctx.beginPath();
ctx.moveTo(point1x + margin, point1y);
// Smile
ctx.bezierCurveTo(point2x, point2y, point3x, point3y, point4x - margin, point4y);
document.getElementById('valueIndicator').innerHTML = smileyValue;
// TODO formula for RGB values
if (smileyValue >= 8) {
ctx.fillStyle = '#51FF00';
ctx.strokeStyle = '#51FF00';
document.getElementById('happinessText').innerHTML = 'Oh man that\'s a pretty happy face!';
}
else if (smileyValue <= 2) {
ctx.fillStyle = '#FF0800';
ctx.strokeStyle = '#FF0800';
document.getElementById('happinessText').innerHTML = 'Surely it wasn\'t that bad?';
}
else {
ctx.fillStyle = '#FF9700';
ctx.strokeStyle = '#FF9700';
document.getElementById('happinessText').innerHTML = 'Your opinion is boring';
}
ctx.lineWidth = 5;
ctx.stroke();
// Left eye
ctx.fillRect(35,10,10,10);
// Right eye
ctx.fillRect(105,10,10,10);
}
</script>
</html>