alternate column, still kinda roughHEADmaster

1 files changed, 52 insertions, 21 deletions

diff --git a/columns/index.html b/columns/index.html
index 2e643f3..2d65b0c 100644
--- a/columns/index.html
+++ b/columns/index.html
@@ -87,7 +87,8 @@
 
 	$(window).load(function(){
 		scene.init();
-	});
+	})
+	
 	MX.PivotControl = function (){
 		var x = 0, y = 0, el
 		this.init = function(mx){
@@ -100,8 +101,10 @@
 			y = e.pageX/window.innerWidth*-2 + 1
 		}
 		this.update = function(t){
+		  y = 0
+		  x = 0
 			el.x = avg(el.x, -y * 10, 15)
-			el.y = avg(el.y, x * 10, 10) - 10
+			el.y = avg(el.y, x * 10, 10) // + 10
 			el.rotationX = avg(el.rotationX, x * 1, 50)
 			el.rotationY = avg(el.rotationY, y * 1, 30)
 			// el.rotationZ += 1/20
@@ -118,15 +121,26 @@
       ctx = canvas.getContext('2d')
       this.resize()
     }
-    $(window).resize(this.resize)
     this.resize = function(){
+      w = canvas.width = window.innerWidth
+      h = canvas.height = window.innerHeight
+    }
+    $(window).resize(this.resize)
+    
+    this.paint = function(t){
+    	var tz = (sinp(t/2)*250)|0
+    	var dw = -300
+    	var dwf = 55
+    	var dhf = 50
+    	console.log(tz)
       ctx.clearRect(0,0,w,h)
       ctx.beginPath()
-      ctx.moveTo(0,h)
-      ctx.lineTo(w/2, h/2)
-      ctx.lineTo(w,h)
+      ctx.moveTo(-dw,h)
+      ctx.lineTo(w/2 - dwf, h/2 + dhf)
+      ctx.lineTo(w/2 + dwf, h/2 + dhf)
+      ctx.lineTo(w+dw,h)
       ctx.lineTo(0,h)
-      ctx.fillStyle = "#020101"
+      ctx.fillStyle = 'rgb(' + [tz,tz,tz].join(',') + ')'
       ctx.fill()
     }
   }
@@ -136,7 +150,7 @@
 
 		scene.parent = new MX.Object3D("#scene")
 		scene.parent.addTo("#info");
-		scene.parent.perspective = 600
+		scene.parent.perspective = min( window.innerWidth, window.innerHeight)
 		scene.parent.update()
 
 		scene.control = new MX.PivotControl()
@@ -156,15 +170,19 @@
 
 			scene.animate(0)
 		}
+		var old_t = 0
 		scene.animate = function (t) {
 			requestAnimationFrame(scene.animate)
 			t /= 500
 
-			scene.control.update(t)
+			var dt = old_t - t
+			old_t = t
+
+			scene.control.update(dt)
 			scene.parent.update()
 
-      triangle.resize()
-			hashtags.animate(t)
+      triangle.paint(t)
+			hashtags.animate(dt)
 		}
 		scene.reverse = false
 		scene.flip = function(){
@@ -191,8 +209,18 @@
 			var w = window.innerWidth, h = window.innerHeight
 			for (var i = 0; count > i; i++) {
 				var hash = new MX.Image({
-					src: 'new-col-static.svg'
+					src: 'col.svg'
+				})
+				hash.index = i
+				hash.side = "left"
+				hash.reposition(i, true)
+				hash.addTo(this.parent);
+
+				var hash = new MX.Image({
+					src: 'col.svg'
 				})
+				hash.index = i
+				hash.side = "right"
 				hash.reposition(i, true)
 				hash.addTo(this.parent);
 			}
@@ -203,10 +231,10 @@
 		hashtags.hide = function(){
 			hashtags.parent.el.style.opacity = 0
 		}
-		hashtags.animate = function (t) {
+		hashtags.animate = function (dt) {
 			scene.control.rotationZ += 1
 			hashtags.parent.children.forEach(function(item, i){
-				item.z -= ~~(item.dz*-1)
+				item.z -= ~~(item.dz*-1*dt)
 				if (z_min > item.z) {
 					/*
           item.loadTexture({
@@ -220,23 +248,26 @@
 					// item.y = cos(TWO_PI*random()) * randrange(h/2, h*1.2)
 					// item.z = z_max - randrange(0, 800)
 				}
-				item.scaleX = Math.pow((1 - item.z / z_max), 3)
-				item.scaleY = Math.pow((1 - item.z / z_max), 2)
+				item.scaleX = Math.pow((1 - item.z / z_max), 1)
 				if (item.z >= z_max-z_fade) {
-					item.el.style.opacity = smoothstep(0.0, 1.0, (z_max-item.z)/z_fade, 0.0, 1.0)
+					item.el.style.opacity = smoothstep(0.0, 1.0, 2 * (z_max-item.z)/z_fade, 0.0, 1.0)
 				}
 				item.update()
 			})
 		}
 		MX.Image.prototype.reposition = function(i, start){
+			var dw = 1000
+			var dr = 90
 			var h = window.innerHeight
 			var w = window.innerWidth
-      this.x = 0
-      this.y = 200
+      this.x = this.side == "left" ? -dw : dw
+      this.y = -200
       this.z = z_max
-      this.dz = -10
+      this.dz = 500
       this.scale = 1.0
-      this.rotationX = -10 // sign((i % 2)-0.5) * 20
+			this.scaleY = 1.5 // Math.pow((1 - item.z / z_max), 1)
+      this.rotationX = 1 // sign((i % 2)-0.5) * 20
+      this.rotationY = this.side == "left" ? dr : -dr
 
       if (start) {
         this.z = (z_max - z_min) * i / count