-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
295 lines (254 loc) · 11.9 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
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="60">
<title>Mockup</title>
<style>
#temperature {
position: absolute;
bottom: 10px;
right: 10px;
font: 30px calibri, sans-serif;
text-align: right;
}
#draw-shapes {
z-index: 10;
}
.colorbox {
display: inline-block;
width: 20px;
height: 20px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.simpleWeather.js"></script>
<script type="text/javascript" src="http://lib.ivank.net/ivank.js"></script>
<script>
//color constants for per-weather
var above95 = ["E80014", "FF640D", "F5AB00"]; //brightest red, orange, yellow
var between8595 = ["E84718", "FFAA27", "F5D81A"]; //slightly more muted red, orange, yellow
var between7585 = ["E8E300", "8EFF00", "0AF500"];
var between6575 = ["DCE834", "50FF25", "24F55A"]; //green, yellow-green, aqua
var between5565 = ["37E812", "14FF55", "13F5B0"]; //2 muted sea greens, blue
var between4555 = ["1FE865", "22FFDB", "1FB4F5"]; //brightest red, yellow, orange CHANGE ME
var between3545 = ["2DE899", "00EEFF", "2E8DF5"]; //brightest red, yellow, orange CHANGE ME
var between2535 = ["59E7E8", "61B0FF", "5F61F5"]; //brightest red, yellow, orange CHANGE ME
var below25 = ["1FD9E8", "9CE0FF", "69FFE5"]; //brightest red, yellow, orange CHANGE ME
var TIME = 60; //how many frames the animation is
var FRAME_RATE = 5; //how many millis/frame
var MAX_ROUNDS = 50; //this is now how many rounds to wait before beginning the fadeout
var TIMEOUT = 500; //how many millis to wait before animating again (all else held constant, 500 = as soon as done flipping)
var WEATHER_INITIALIZATION = 1500; //how many millis to wait after getting the initial weather to start animating, so colors are initializes and correct
var WEATHER_REFRESH = 1000 * 60; //millis between checking for the weather. Currently 1 minute
var points; //an array of Point objects
var numVertices = 3; //number of vertices/sides for this polygon
var sideLength = 75; //length of the sides of the regular polygon
var stage; //the stage == the canvas element
var colors; //an array of possible colors, color-coordinated according to weather
var inverted; //this is currently required for triangles to animate correctly. TODO can I get rid of this?
var possibleMoves = new Array(numVertices); //will be an array of booleans; mark out polygons that went off the page
$(document).ready(function() {
getWeather(); //this initializes the colors and everything, so it needs to happen originally
stage = new Stage("ivank");
numVertices = Math.floor(Math.random() * 4 + 3); //between 3 and 6 (I think)
setTimeout(function() {initialize(stage)}, WEATHER_INITIALIZATION); //this is so the colors are initialized before this happens (it sometimes broke at just TIMEOUT when TIMEOUT is 500)
});
function initialize() {
inverted = true;
//starting place 1
var s = makePoly();
stage.addChild(s);
s.rotation = -90; //rotated so that the shape sits on its flat side
//this is now a random starting place, controlled so it's sort of in the middle of stuff
s.x = Math.random() * (stage.stageWidth / 2) + Math.random() * (stage.stageWidth / 4);
s.y = Math.random() * (stage.stageHeight / 2) + Math.random() * (stage.stageWidth / 4);
//originate all moves to okay and not off the page
for (var i = 0; i < numVertices; i++) {
possibleMoves[i] = true;
}
setTimeout(function() {animate(s)}, TIMEOUT); //animate the shape
setTimeout(function() {fade(s, 0.5 / TIME, 0)}, TIMEOUT * MAX_ROUNDS); //fade the center triangle, too
}
function makePoly() {
if (points == undefined) {
initializePoints();
}
var s = new Sprite();
s.graphics.beginFill("0x" + colors[Math.floor(Math.random() * 3)], 0.5);
s.graphics.moveTo(points[0].x, points[0].y);
for (var i = 1; i < numVertices; i++) {
s.graphics.lineTo(points[i].x, points[i].y);
}
s.graphics.endFill();
return s;
}
function initializePoints() {
points = new Array(numVertices);
//these numbers are creative so that the numbers later (at least for triangles) work out
//TODO see if this still works for other polys
points[numVertices - 1] = Point.polar(sideLength, 0);
for (var i = 1; i < numVertices; i++) {
points[i - 1] = Point.polar(sideLength, (i * 2 * Math.PI) / numVertices);
}
}
function animate(polygon) {
//flip three new triangles from the original, one at each position
var polygons = new Array(numVertices);
//do the flip
for (var i = 0; i < numVertices; i++) {
polygons[i] = flip(polygon, i);
}
inverted = !inverted; //it alternates
setTimeout(function() {checkMovesAnimate(polygons)}, TIMEOUT);
}
function checkMovesAnimate(polygons) {
//first, mark all polygons as off the page as necessary
for (var i = 0; i < numVertices; i++) {
if (polygons[i].x < 0 || polygons[i].x > stage.stageWidth || polygons[i].y < 0 || polygons[i].y > stage.stageHeight) {
possibleMoves[i] = false;
//console.log("setting move to false: " + i);
}
else {
possibleMoves[i] = true;
}
}
//this randomly chooses a triangle and prevents against animating a polygon that's off the page
move = Math.floor(Math.random() * 3);
//console.log(possibleMoves);
if (possibleMoves[move] == false) {
//console.log("tried to move to false");
for (var i = move; i < move + numVertices; i++) {
if (possibleMoves[i % numVertices] == true) {
move = i % numVertices;
break;
}
}
}
animate(polygons[move]);
}
/*
* put a new triangle on top of the given one, then animate flip over the given edge
* 0 = left
* 1 = right
* 2 = top/bottom
*/
function flip(polygon, overside) {
//make the new polygon
var newpoly = makePoly();
newpoly.x = polygon.x;
newpoly.y = polygon.y;
//TODO this needs to be calculated and tested for polygons besides triangles
newpoly.rotation = 30 * ((numVertices + 1) * overside + 1);
newpoly.scaleX = polygon.scaleX;
stage.addChild(newpoly);
//and this recursively animates the flip and the fade
var posx = points[overside].x;
var posy = points[overside].y;
flipOver(newpoly, 2 / TIME, posx / TIME, posy / TIME, 0);
setTimeout(function() {fade(newpoly, 0.5 / TIME, 0)}, TIMEOUT * MAX_ROUNDS);
//finally, return the new polygon
return newpoly;
}
function flipOver(poly, scale, posx, posy, timer) {
if (timer <= TIME) {
if (inverted) {
poly.scaleX += scale;
poly.x += posy;
poly.y -= posx;
}
else {
poly.scaleX -= scale;
poly.x -= posy;
poly.y += posx;
}
timer++;
currTimeout = setTimeout(function(){flipOver(poly, scale, posx, posy, timer)}, FRAME_RATE); //animate again in 5 millis
}
}
function fade(polygon, opacity, timer) {
if (timer < TIME) {
polygon.alpha -= opacity;
timer++;
currTimeout = setTimeout(function(){fade(polygon, opacity, timer)}, FRAME_RATE); //animate again in 5 millis
}
else {
stage.removeChild(polygon);
}
}
function getWeather() {
$.simpleWeather({
location: '27607',
unit: 'f',
success: function(weather) {
//display the div with the weather in it
$("#temperature").html("<div class='colorbox' id='box1'></div>"
+ "<div class='colorbox' id='box2'></div>"
+ "<div class='colorbox' id='box3'></div> "
+ weather.temp + "°" + weather.units.temp + "<br />"
+ weather.city + ", " + weather.region + ", " + weather.country + "<br />"
);
//get today's midpoint between sunrise and sunset (called brightest and is a Date object)
var sunriseTime = to24Time(weather.sunrise);
var sunsetTime = to24Time(weather.sunset);
var sunriseDate = new Date();
sunriseDate.setHours(sunriseTime.split(":")[0]);
sunriseDate.setMinutes(sunriseTime.split(":")[1]);
sunriseDate.setSeconds(0);
var sunsetDate = new Date();
sunsetDate.setHours(sunsetTime.split(":")[0]);
sunsetDate.setMinutes(sunsetTime.split(":")[1]);
sunsetDate.setSeconds(0);
var midpoint = new Date((sunriseDate.getTime() + sunsetDate.getTime()) / 2);
var curr = new Date();
var difference = Math.abs(midpoint.getTime() - curr.getTime());
//this will calculate a value between 0 (sunrise/sunset) and 1 (high noon) or possibly a negative if outside light range
var degree = 1 - (difference / midpoint.getTime() * ((sunsetDate.getTime() - sunriseDate.getTime())) / 500);
//console.log("Degree: " + degree);
if (degree < 0)
degree = 0;
//FINALLY set the color of the background to the time of day and the temperature div so it shows up
var bg = Math.round(255 * degree);
var txt = (bg < 125) ? 255 : 0; //white if < 50% gray, black if >= 50% gray
$("body").css("background", "rgb(" + bg + ", " + bg + ", " + bg + ")"); //TODO make me care about the time of day
$("#temperature").css("color", "rgb(" + txt + ", " + txt + ", " + txt + ")");
//weather.temp = TEMPERATURE; //temporary, so I can override the weather
//now get a random color based on the current temperature
if (weather.temp > 95)
colors = above95;
else if (weather.temp > 85)
colors = between8595;
else if (weather.temp > 75)
colors = between7585;
else if (weather.temp > 65)
colors = between6575;
else if (weather.temp > 55)
colors = between5565;
else if (weather.temp > 45)
colors = between4555;
else if (weather.temp > 35)
colors = between3545;
else if (weather.temp > 25)
colors = between2535;
else
colors = below25;
$("#box1").css("background-color", "#" + colors[0]);
$("#box2").css("background-color", "#" + colors[1]);
$("#box3").css("background-color", "#" + colors[2]);
},
error: function(error) {
console.log("error getting weather");
}
});
setTimeout(function() {getWeather()}, WEATHER_REFRESH);
}
function to24Time(input) {
matches = input.toLowerCase().match(/(\d{1,2}):(\d{2}) ([ap]m)/);
return (parseInt(matches[1]) + (matches[3] == 'pm' ? 12 : 0)) + ':' + matches[2] + ':00';
}
</script>
</head>
<body>
<div id="temperature"></div>
<canvas id="ivank"></canvas>
</body>
</html>