From 2aec6de5ebbfe8c0fa7a70fa4e1bd7dfd3731000 Mon Sep 17 00:00:00 2001 From: PayodPanda Date: Wed, 20 May 2015 11:59:06 -0400 Subject: [PATCH 1/2] Updates to behaviour --- Source/index.html | 39 ++ index.html => Source/scripts/Polygons.js | 565 +++++++++--------- .../scripts/jquery.simpleWeather.js | 0 3 files changed, 309 insertions(+), 295 deletions(-) create mode 100644 Source/index.html rename index.html => Source/scripts/Polygons.js (84%) rename jquery.simpleWeather.js => Source/scripts/jquery.simpleWeather.js (100%) diff --git a/Source/index.html b/Source/index.html new file mode 100644 index 0000000..b5d6453 --- /dev/null +++ b/Source/index.html @@ -0,0 +1,39 @@ + + + + + Mockup + + + + + + + + + + + +
+ + + diff --git a/index.html b/Source/scripts/Polygons.js similarity index 84% rename from index.html rename to Source/scripts/Polygons.js index 209537b..be8193b 100644 --- a/index.html +++ b/Source/scripts/Polygons.js @@ -1,295 +1,270 @@ - - - - - Mockup - - - - - - - - - -
- - - + + //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 = 500; //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 stage; //the stage == the canvas element + var points; //an array of Point objects + var numVertices = 3; //number of vertices/sides for this polygon + var sideLength = 150; //length of the sides of the regular polygon + 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"); + sideLength = stage.stageHeight / 6; //length of the sides of the regular polygon + + numVertices = Math.floor(Math.random() * 5 + 4); //between 4 and 8 + + 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 = (stage.stageWidth / 2) + Math.random() * 0; + s.y = (stage.stageHeight / 2) + Math.random() * 0; + //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.05); //orig= 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("
" + + "
" + + "
 " + + weather.temp + "°" + weather.units.temp + "
" + + weather.city + ", " + weather.region + ", " + weather.country + "
" + ); + + //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; + + degree = 0; + + //FINALLY set the color of the background to the time of day and the temperature dav so it shows up + var bg = Math.round(255 * degree); + + // Use HSL system to calculate color // PayodPanda + var hue = (240 + degree * 180) % 360; + var lightness = 40 + Math.round(degree * 40); + var saturation = 20 + Math.round(degree * 30); + + var txt = (lightness < 60) ? 200 : 20; //white if < 50% gray, black if >= 50% gray + $("body").css("background-color", "hsla(" + hue + ", " + saturation + "%," + lightness + "%, 0.5)"); //Blue to Yellow to Blue //PayodPanda + + //$("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'; + } \ No newline at end of file diff --git a/jquery.simpleWeather.js b/Source/scripts/jquery.simpleWeather.js similarity index 100% rename from jquery.simpleWeather.js rename to Source/scripts/jquery.simpleWeather.js From 85a1e757c24f0422378597dc82d4561c031c8138 Mon Sep 17 00:00:00 2001 From: PayodPanda Date: Tue, 15 Sep 2015 13:33:11 -0400 Subject: [PATCH 2/2] FinalVersion Final version for the Art Wall. --- Source/index.html | 36 +++++++++++++++++---- Source/scripts/Polygons.js | 65 +++++++++++++++++++++----------------- 2 files changed, 66 insertions(+), 35 deletions(-) diff --git a/Source/index.html b/Source/index.html index b5d6453..9647292 100644 --- a/Source/index.html +++ b/Source/index.html @@ -1,3 +1,12 @@ + + @@ -8,20 +17,31 @@ position: absolute; bottom: 10px; right: 10px; - font: 30px calibri, sans-serif; + font: 48px arial, sans-serif; text-align: right; } + + #attribution{ + position: absolute; + bottom: 10px; + left: 10px; + font: 48px arial, sans-serif; + text-align: left; + } #draw-shapes { z-index: 10; } + + #url { + /*color: rgb(0,64,160);*/ + } .colorbox { display: inline-block; - width: 20px; - height: 20px; + width: 34px; + height: 34px; } - @@ -33,7 +53,11 @@ -
- +
+ +
+ CSC 342 Code+Art project
+ Learn more: http://go.ncsu.edu/weatherart
+
diff --git a/Source/scripts/Polygons.js b/Source/scripts/Polygons.js index be8193b..806a567 100644 --- a/Source/scripts/Polygons.js +++ b/Source/scripts/Polygons.js @@ -1,26 +1,30 @@ - //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 + //color constants for per-weather //edited, PayodPanda + var above95 = ["E88436", "FF7D48", "E85036"]; //brightest red, orange, yellow + var between8595 = ["E8AD52", "FFAE67", "E88352"]; //slightly more muted red, orange, yellow + var between7585 = ["FFD83A", "FFB546", "FF783A"]; + var between6575 = ["FFE95A", "FFCC67", "FF9E5A"]; //green, yellow-green, aqua + var between5565 = ["92FF8B", "E6FF98", "FFF08B"]; //2 muted sea greens, blue + var between4555 = ["87FFD4", "94FF9C", "D0FF87"]; // + var between3545 = ["8DCFFF", "99FFF3", "8DFFB1"]; // + var between2535 = ["828EE8", "9BC1FF", "82C4E8"]; // + var below25 = ["82C4E8", "509EFF", "43EAFF"]; // var TIME = 60; //how many frames the animation is var FRAME_RATE = 5; //how many millis/frame - var MAX_ROUNDS = 500; //this is now how many rounds to wait before beginning the fadeout + var MAX_ROUNDS = 10000; //this is now how many rounds to wait before beginning the fadeout //orig=50 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 WEATHER_REFRESH = 1000 * 240; //millis between checking for the weather. Currently 1 minute var stage; //the stage == the canvas element var points; //an array of Point objects - var numVertices = 3; //number of vertices/sides for this polygon + + var vertexFrom = 4; //min. number of vertices //PayodPanda + var vertexTo = 9; //max no. of vertices //PayodPanda + var numVertices = vertexFrom; //number of vertices/sides for this polygon initially set to min number //PayodPanda var sideLength = 150; //length of the sides of the regular polygon + 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 @@ -29,11 +33,11 @@ getWeather(); //this initializes the colors and everything, so it needs to happen originally stage = new Stage("ivank"); - sideLength = stage.stageHeight / 6; //length of the sides of the regular polygon + sideLength = stage.stageHeight / 3; //length of the sides of the regular polygon //PayodPanda - numVertices = Math.floor(Math.random() * 5 + 4); //between 4 and 8 + numVertices = Math.floor(Math.random() * ((vertexTo-vertexFrom)+1) + vertexFrom); //between 4 and 9 //PayodPanda - 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) + setTimeout(function() {initialize(stage)}, WEATHER_INITIALIZATION); //this is so the colours are initialized before this happens (it sometimes broke at just TIMEOUT when TIMEOUT is 500) }); function initialize() { @@ -51,16 +55,18 @@ 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 + setTimeout(function() {fade(s, 0.5 / TIME, 0)}, TIMEOUT * MAX_ROUNDS); //fade the centre triangle, too } function makePoly() { if (points == undefined) { initializePoints(); } + var s = new Sprite(); - - s.graphics.beginFill("0x" + colors[Math.floor(Math.random() * 3)], 0.05); //orig= 0.5 + s.graphics.beginFill("0x" + colors[Math.floor(Math.random() * 3)], 0.02); //orig= 0.5 + s.graphics.lineStyle(4, "0x" + colors[Math.floor(Math.random() * 3)], 0.4); //add a stroke for visual interest //PayodPanda + 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); @@ -75,7 +81,7 @@ //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); + points[i - 1] = Point.polar(Math.random() * sideLength, (i * 2 * Math.PI) / numVertices); //PayodPanda } } @@ -133,7 +139,7 @@ newpoly.y = polygon.y; //TODO this needs to be calculated and tested for polygons besides triangles - newpoly.rotation = 30 * ((numVertices + 1) * overside + 1); + newpoly.rotation = (0.5+Math.random()) * 30 * ((numVertices + 1) * overside + 1); newpoly.scaleX = polygon.scaleX; stage.addChild(newpoly); @@ -214,21 +220,22 @@ if (degree < 0) degree = 0; - degree = 0; //FINALLY set the color of the background to the time of day and the temperature dav so it shows up var bg = Math.round(255 * degree); - // Use HSL system to calculate color // PayodPanda - var hue = (240 + degree * 180) % 360; - var lightness = 40 + Math.round(degree * 40); - var saturation = 20 + Math.round(degree * 30); + // Use HSL system to calculate color //PayodPanda + var bgHue = (240 + degree * 180) % 360; + var bgLightness = 0 + degree * 80; + var bgSaturation = 20 + Math.round(degree * 30); - var txt = (lightness < 60) ? 200 : 20; //white if < 50% gray, black if >= 50% gray - $("body").css("background-color", "hsla(" + hue + ", " + saturation + "%," + lightness + "%, 0.5)"); //Blue to Yellow to Blue //PayodPanda + //var txt = (bgLightness < 60) ? 200 : 20; //white if < 50% gray, black if >= 50% gray + var txt = (bgLightness+50)%100; + $("body").css("background-color", "hsla(" + bgHue + ", " + bgSaturation + "%," + bgLightness + "%, 0.5)"); //Blue to Yellow to Blue //PayodPanda //$("body").css("background", "rgb(" + bg + ", " + bg + ", " + bg + ")"); //TODO make me care about the time of day - $("#temperature").css("color", "rgb(" + txt + ", " + txt + ", " + txt + ")"); + $("#temperature").css("color", "hsl( 0, 0%, " + txt + "%)"); + $("#attribution").css("color", "hsl( 0, 0%, " + txt + "%)"); //weather.temp = TEMPERATURE; //temporary, so I can override the weather //now get a random color based on the current temperature