diff --git a/Makefile b/Makefile index b656588..14d59bd 100644 --- a/Makefile +++ b/Makefile @@ -26,6 +26,7 @@ pack: mkdir -p release/fonts mkdir -p release/respacks cp -r respacks release/ + cp -r img release/ cp -r fonts release/ cp -r js/lib release/js cp js/hues-min.js release/js diff --git a/css/hues-x.css b/css/hues-x.css index 9f09f1c..757bb3e 100644 --- a/css/hues-x.css +++ b/css/hues-x.css @@ -1,6 +1,3 @@ -/* Heavily based on Kepstin's wonderful CSS work - https://github.com/kepstin/0x40hues-html5/blob/master/hues-m.css */ - .XmasUI { font-family: 'PetMe64Web'; } @@ -15,6 +12,7 @@ left: 8px; right: 8px; color: rgba(255,255,255,0.7); + z-index: 1; } .hues-x-beatbar { @@ -41,15 +39,78 @@ -webkit-transform: translateY(0px); transition: transform 1s ease-out; -webkit-transition: -webkit-transform 1s ease-out; - } .hues-x-beatbar.hidden{ -transform: translateY(-40px); + transform: translateY(-40px); -webkit-transform: translateY(-40px); } .hues-x-controls.hidden { transform: translateY(104px); -webkit-transform: translateY(104px); +} + +.hues-x-light { + position: absolute; + width: 68px; + height: 113px; + transform-origin: 32px 69px; + -webkit-transform-origin: 32px 69px; + background-image: url("../img/lightbase.png"); +} + +.hues-x-light > div > img { + position: absolute; +} + +.hues-x-fade{ + transition: opacity 0.1s linear; + -webkit-transition: opacity 0.1s linear; +} + +.hues-x-lighton { + opacity: 1; +} + +.hues-x-lightoff { + opacity: 0; +} + +.hues-x-lighton.off{ + opacity: 0; +} + +.hues-x-lightoff.off{ + opacity: 1; +} + +.hues-x-wiresleft, .hues-x-wiresbottom, .hues-x-wiresright { + position: absolute; + background-repeat: no-repeat; +} + +.hues-x-wiresleft, .hues-x-wiresright { + height: 100%; + top: 0px; +} + +.hues-x-wiresleft { + width: 76px; + left: 0px; + background-image: url("../img/wiresleft.png"); +} + +.hues-x-wiresright { + width: 59px; + right: 0px; + background-image: url("../img/wiresright.png"); +} + +.hues-x-wiresbottom { + bottom: 0px; + height: 56px; + width:2889px; + background-image: url("../img/wiresbottom.png"); + left:50%;margin-left:-1444.5px; } \ No newline at end of file diff --git a/css/style.css b/css/style.css index 808bff5..0f8acd4 100644 --- a/css/style.css +++ b/css/style.css @@ -12,7 +12,6 @@ html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; - background-color:#fff; } h1 { @@ -67,14 +66,25 @@ h1, h2, h3 { margin: 10px; } -#waifu { +#waifu, #snow { + position: absolute; display: block; height: 100%; padding: 0; +} +#waifu { z-index: -10; } +#snow { + z-index: -9; +} + +#snow.hidden { + display: none; +} + #preloadHelper { background-color: #FFF; width: 100%; diff --git a/img/lightbase.png b/img/lightbase.png new file mode 100644 index 0000000..76a0512 Binary files /dev/null and b/img/lightbase.png differ diff --git a/img/lightoff.png b/img/lightoff.png new file mode 100644 index 0000000..ca81dbf Binary files /dev/null and b/img/lightoff.png differ diff --git a/img/lighton.png b/img/lighton.png new file mode 100644 index 0000000..4509d19 Binary files /dev/null and b/img/lighton.png differ diff --git a/img/wiresbottom.png b/img/wiresbottom.png new file mode 100644 index 0000000..20191b4 Binary files /dev/null and b/img/wiresbottom.png differ diff --git a/img/wiresleft.png b/img/wiresleft.png new file mode 100644 index 0000000..266a6a9 Binary files /dev/null and b/img/wiresleft.png differ diff --git a/img/wiresright.png b/img/wiresright.png new file mode 100644 index 0000000..a0c81e4 Binary files /dev/null and b/img/wiresright.png differ diff --git a/index-min.html b/index-min.html index 0d4fc3c..d49cd5e 100644 --- a/index-min.html +++ b/index-min.html @@ -102,6 +102,7 @@
+ \ No newline at end of file diff --git a/index.html b/index.html index b1fdfa4..d83535e 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@ "./respacks/PackShit.zip" ], //load : false, //debug - autoplay : false // debug + autoplay : false, // debug }; core = new HuesCore(defaults); }; @@ -111,6 +111,7 @@
+ \ No newline at end of file diff --git a/js/HuesCanvas.js b/js/HuesCanvas.js index 0433303..746784d 100644 --- a/js/HuesCanvas.js +++ b/js/HuesCanvas.js @@ -68,6 +68,12 @@ function HuesCanvas(element, aContext, core) { this.canvas = document.getElementById(element).getContext("2d"); window.addEventListener('resize', this.resizeHandler(this)); this.resize(); + + this.snowing = false; + this.maxSnow = 30; + this.snowAngle = 0; + this.lastSnow = 0; + this.snowflakes = []; this.animating = true; requestAnimationFrame(this.getAnimLoop()); @@ -80,7 +86,9 @@ HuesCanvas.prototype.resizeHandler = function(that) { HuesCanvas.prototype.resize = function() { // height is constant 720px, we expand width to suit var ratio = window.innerWidth / window.innerHeight; - this.canvas.canvas.width = 720 * ratio + 1; + this.canvas.canvas.width = Math.ceil(720 * ratio); + var snow = document.getElementById("snow").getContext("2d"); + snow.canvas.width = Math.ceil(720 * ratio); this.needsRedraw = true; } @@ -221,6 +229,9 @@ HuesCanvas.prototype.animationLoop = function() { } else if(this.needsRedraw){ this.redraw(); } + if(this.snowing) { + this.drawSnow(); + } if(this.animating) { requestAnimationFrame(this.getAnimLoop()); } @@ -379,4 +390,77 @@ HuesCanvas.prototype.setAnimating = function(anim) { requestAnimationFrame(this.animationLoop); } this.animating = anim; +} + +// From http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect + +HuesCanvas.prototype.startSnow = function() { + this.snowing = true; + document.getElementById("snow").style.display = "block"; + var height = this.canvas.canvas.height; + var width = this.canvas.canvas.width; + this.snowAngle = 0; + this.snowflakes = []; + for(var i = 0; i < this.maxSnow; i++) { + this.snowflakes.push({ + x: Math.random()*width, //x-coordinate + y: Math.random()*height, //y-coordinate + r: Math.random()*4+1, //radius + d: Math.random()*25 //density + }) + } + this.lastSnow = this.aContext.currentTime; +} + +HuesCanvas.prototype.stopSnow = function() { + this.snowing = false; + document.getElementById("snow").style.display = "none"; +} + +HuesCanvas.prototype.drawSnow = function() { + var ctx = document.getElementById("snow").getContext("2d"); + var W = ctx.canvas.width; + var H = ctx.canvas.height; + var delta = this.lastSnow - this.aContext.currentTime; + ctx.clearRect(0, 0, W, H); + + ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; + ctx.beginPath(); + for(var i = 0; i < this.maxSnow; i++) { + var p = this.snowflakes[i]; + ctx.moveTo(p.x, p.y); + ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true); + } + ctx.fill(); + + this.snowAngle += delta / 6; + for(var i = 0; i < this.maxSnow; i++) { + var p = this.snowflakes[i]; + //Updating X and Y coordinates + //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards + //Every particle has its own density which can be used to make the downward movement different for each flake + //Lets make it more random by adding in the radius + p.y += Math.cos(this.snowAngle+p.d) + 1 + p.r/2; + p.x += Math.sin(this.snowAngle) * 2; + + //Sending flakes back from the top when it exits + //Lets make it a bit more organic and let flakes enter from the left and right also. + if(p.x > W+5 || p.x < -5 || p.y > H) { + if(i%3 > 0) {//66.67% of the flakes + this.snowflakes[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d}; + } + else { + //If the flake is exitting from the right + if(Math.sin(this.snowAngle) > 0) { + //Enter from the left + this.snowflakes[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d}; + } + else { + //Enter from the right + this.snowflakes[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d}; + } + } + } + } + this.lastSnow = this.aContext.currentTime; } \ No newline at end of file diff --git a/js/HuesSettings.js b/js/HuesSettings.js index 8355351..2ab474c 100644 --- a/js/HuesSettings.js +++ b/js/HuesSettings.js @@ -119,7 +119,7 @@ HuesSettings.prototype.settingsOptions = { function HuesSettings(defaults) { this.core = null; this.root = document.getElementById("huesSettings"); - this.window = document.getElementById("settingsWindow"); + this.window = document.getElementById("settingsHelper"); this.hide(); for(var attr in this.defaultSettings) { @@ -152,7 +152,7 @@ HuesSettings.prototype.connectCore = function(core) { HuesSettings.prototype.show = function() { if(this.core) this.core.hideLists(); - this.window.style.display = "block"; + this.window.style.display = "flex"; } HuesSettings.prototype.hide = function() { @@ -161,7 +161,7 @@ HuesSettings.prototype.hide = function() { HuesSettings.prototype.toggle = function() { if(this.window.style.display == "none") { - this.window.style.display = "block"; + this.window.style.display = "flex"; if(this.core) this.core.hideLists(); } else { diff --git a/js/HuesUI.js b/js/HuesUI.js index b25a5a1..12807bf 100644 --- a/js/HuesUI.js +++ b/js/HuesUI.js @@ -481,6 +481,8 @@ function ModernUI() { this.volLabel = null; this.hideRestore = null; + this.currentBeat = "."; + HuesUI.call(this); this.hidden = 0; // we have a 3 stage hide @@ -679,19 +681,19 @@ ModernUI.prototype.modeUpdated = function() { ModernUI.prototype.beat = function() { var beats = this.core.getBeatString(); - var current = beats[0]; + this.currentBeat = beats[0]; var rest = beats.slice(1); this.beatLeft.textContent = rest; this.beatRight.textContent = rest; - if (current != ".") { + if (this.currentBeat != ".") { while (this.beatCenter.firstElementChild) { this.beatCenter.removeChild(this.beatCenter.firstElementChild); } var span = this.beatCenter.ownerDocument.createElement("span"); - span.textContent = current; + span.textContent = this.currentBeat; this.beatCenter.appendChild(span); } this.beatCount.textContent = "B=" + this.intToHex4(this.core.getSafeBeatIndex()); @@ -744,10 +746,132 @@ function XmasUI() { this.controls.className = "hues-x-controls"; this.beatBar.className = "hues-x-beatbar"; + + this.lights = []; + + var wires = document.createElement("div"); + wires.className = "hues-x-wires"; + + var left = document.createElement("div"); + left.className = "hues-x-wiresleft"; + for(var i = 0; i < xleft.length; i++) { + var l = xleft[i]; + var light = this.newLight(l, left); + light.style.transform = "rotate(" + l.angle + "deg)"; + light.style.left = l.x + "px"; + light.style.top = l.y + "px"; + this.lights.push(light); + } + + var right = document.createElement("div"); + right.className = "hues-x-wiresright"; + for(var i = 0; i < xright.length; i++) { + var l = xright[i]; + var light = this.newLight(l, right); + light.style.transform = "rotate(" + (-l.angle) + "deg)"; + light.style.right = l.x + "px"; + light.style.top = l.y + "px"; + this.lights.push(light); + } + + var bottom = document.createElement("div"); + bottom.className = "hues-x-wiresbottom"; + for(var i = 0; i < xbottom.length; i++) { + var l = xbottom[i]; + var light = this.newLight(l, bottom); + light.style.transform = "rotate(" + l.angle + "deg)"; + light.style.left = l.x + "px"; + light.style.bottom = l.y + "px"; + this.lights.push(light); + } + + wires.appendChild(left); + wires.appendChild(right); + wires.appendChild(bottom); + this.root.appendChild(wires); } XmasUI.prototype = Object.create(ModernUI.prototype); XmasUI.prototype.constructor = XmasUI; +XmasUI.prototype.connectCore = function(core) { + HuesUI.prototype.connectCore.call(this, core); + this.core.renderer.startSnow(); +} + +XmasUI.prototype.disconnect = function() { + this.core.renderer.stopSnow(); + HuesUI.prototype.disconnect.call(this); +} + +XmasUI.prototype.lightOn = function(light) { + light.on.className = "hues-x-lighton"; + light.off.className = "hues-x-lightoff"; +} + +XmasUI.prototype.lightOff = function(light) { + light.on.className = "hues-x-lighton off"; + light.off.className = "hues-x-lightoff off"; +} + +XmasUI.prototype.lightFadeOut = function(light) { + light.on.className = "hues-x-lighton hues-x-fade off"; + light.off.className = "hues-x-lightoff hues-x-fade off"; +} + +XmasUI.prototype.lightRecolour = function(light) { + var hue = Math.random() * 360; + light.bulb.style.filter = "hue-rotate(" + hue + "deg)"; + light.bulb.style.webkitFilter = "hue-rotate(" + hue + "deg)"; +} + +XmasUI.prototype.randomLight = function(light) { + if(Math.random() >= 0.5) { + this.lightOn(light); + } else { + this.lightOff(light); + } +} + +XmasUI.prototype.newLight = function(l, parent) { + var light = document.createElement("div"); + light.className = "hues-x-light"; + var bulb = document.createElement("div"); + var on = document.createElement("img"); + on.src = "./img/lighton.png"; + var off = document.createElement("img"); + off.src = "./img/lightoff.png"; + bulb.appendChild(on); + bulb.appendChild(off); + light.appendChild(bulb); + parent.appendChild(light); + light.on = on; + light.off = off; + light.bulb = bulb; + this.randomLight(light); + this.lightRecolour(light); + return light; +} + +XmasUI.prototype.beat = function() { + ModernUI.prototype.beat.call(this); + if(this.currentBeat != ".") { + for(var i = 0; i < this.lights.length; i++) { + var l = this.lights[i]; + switch(this.currentBeat) { + case ":": + this.lightOn(l); + this.lightRecolour(l); + break; + case "+": + this.lightFadeOut(l); + break; + default: + this.randomLight(this.lights[i]); + } + } + } +} + XmasUI.prototype.toggleHide = function() { this.beatBar.className = "hues-x-beatbar"; this.beatCenter.className = "hues-m-beatcenter"; @@ -764,4 +888,80 @@ XmasUI.prototype.toggleHide = function() { XmasUI.prototype.setColourText = function(colour) {}; XmasUI.prototype.blurUpdated = function(x, y) {}; -XmasUI.prototype.updateTime = function(time) {}; \ No newline at end of file +XmasUI.prototype.updateTime = function(time) {}; + +var xleft = [ + {"angle":122.529582194,"x":19.4,"y":-19.35}, + {"angle":92.5309436511,"x":25.4,"y":38.7}, + {"angle":107.530202659,"x":39.4,"y":107.75}, + {"angle":77.5309700777,"x":20.75,"y":184.8}, + {"angle":77.5309700777,"x":32.3,"y":249.8}, + {"angle":107.530202659,"x":40.45,"y":327.9}, + {"angle":88.3307935055,"x":35,"y":410.9}, + {"angle":107.530202659,"x":54.35,"y":490.95}, + {"angle":74.9981580491,"x":28.15,"y":573.8}, + {"angle":89.9973772074,"x":23.45,"y":675.35}, + {"angle":107.530202659,"x":21.65,"y":762.6}, + {"angle":107.530202659,"x":15.8,"y":842.75}, + {"angle":92.5309436511,"x":36.55,"y":905.7}, + {"angle":88.3307935055,"x":31.1,"y":988.7}, + {"angle":107.530202659,"x":50.45,"y":1068.75}, + {"angle":74.9981580491,"x":45.75,"y":1158.5}, + {"angle":88.3307935055,"x":35.85,"y":1238.55} +] +var xright = [ + {"angle":120.001009518,"x":33.3,"y":-29.75}, + {"angle":90.0026227926,"x":35.35,"y":53.65}, + {"angle":102.469029922,"x":41.5,"y":136.5}, + {"angle":91.6692064945,"x":22.15,"y":216.55}, + {"angle":72.4697973408,"x":34.4,"y":278.25}, + {"angle":102.469029922,"x":45.75,"y":361.85}, + {"angle":87.4699314665,"x":26.65,"y":426.35}, + {"angle":72.4697973408,"x":41.6,"y":502.15}, + {"angle":102.469029922,"x":27.5,"y":566}, + {"angle":72.4697973408,"x":7.65,"y":638.45}, + {"angle":102.469029922,"x":11,"y":721.25}, + {"angle":76.1887724128,"x":7.65,"y":792.7}, + {"angle":87.4690563489,"x":36.15,"y":850.35}, + {"angle":102.46813454,"x":16.6,"y":924.3}, + {"angle":72.4697973408,"x":15.3,"y":990.8}, + {"angle":76.1887724128,"x":11.95,"y":1062.25}, + {"angle":87.4690563489,"x":40.45,"y":1119.9}, + {"angle":102.46813454,"x":20.9,"y":1193.85} +] +var xbottom = [ + {"angle":32.5804579323,"x":110.35,"y":-12.1}, + {"angle":3.28979777069,"x":168.05,"y":-5.55}, + {"angle":17.6989154099,"x":238.35,"y":7.7}, + {"angle":-12.6587029361,"x":314.8,"y":-10.4}, + {"angle":-12.6587029361,"x":379.4,"y":1.05}, + {"angle":17.6989154099,"x":457.75,"y":9.4}, + {"angle":2.59102780115,"x":540.6,"y":3.75}, + {"angle":17.6989154099,"x":620.35,"y":22.7}, + {"angle":-15.134241831,"x":703,"y":-2.9}, + {"angle":2.30443717424,"x":804.75,"y":-7.85}, + {"angle":17.6989154099,"x":892.45,"y":-9.55}, + {"angle":17.6989154099,"x":971.65,"y":-15.5}, + {"angle":3.28979777069,"x":1035.2,"y":4.35}, + {"angle":2.59102780115,"x":1118,"y":0.2}, + {"angle":17.6989154099,"x":1198.05,"y":18.95}, + {"angle":-18.378894807,"x":1288.2,"y":14.2}, + {"angle":-4.561224264,"x":1367.9,"y":4.6}, + {"angle":32.5804579323,"x":1452.6,"y":-1.7}, + {"angle":3.28979777069,"x":1511.45,"y":4.45}, + {"angle":17.6989154099,"x":1580.6,"y":17.6}, + {"angle":-12.6587029361,"x":1656.6,"y":-0.95}, + {"angle":-12.6587029361,"x":1722.1,"y":11.1}, + {"angle":17.6989154099,"x":1800.5,"y":18.8}, + {"angle":2.59102780115,"x":1883.1,"y":13}, + {"angle":17.6989154099,"x":1963,"y":32.6}, + {"angle":-15.134241831,"x":2045.8,"y":7}, + {"angle":2.30443717424,"x":2147.55,"y":1.55}, + {"angle":17.6989154099,"x":2234.1,"y":0.4}, + {"angle":17.6989154099,"x":2315,"y":-5.6}, + {"angle":3.28979777069,"x":2377.8,"y":14.5}, + {"angle":2.59102780115,"x":2460.65,"y":9.75}, + {"angle":17.6989154099,"x":2540.2,"y":28.5}, + {"angle":-18.378894807,"x":2627.55,"y":24.9}, + {"angle":-4.561224264,"x":2710.4,"y":14.4} +] \ No newline at end of file