columns

From 1de12d1585a991560c0dd2d34f042668bdb003ba Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 16 Jul 2014 12:31:17 -0400 Subject: alternate column, still kinda rough --- columns/black.html | 259 +++++++++++++++++++++++++++++++++++++++++++++++++++++ columns/col.svg | 43 +++++++++ columns/index.html | 73 ++++++++++----- 3 files changed, 354 insertions(+), 21 deletions(-) create mode 100644 columns/black.html create mode 100644 columns/col.svg diff --git a/columns/black.html b/columns/black.html new file mode 100644 index 0000000..2e643f3 --- /dev/null +++ b/columns/black.html @@ -0,0 +1,259 @@ + + + + columns + + +

FLIP

+ + + + + + + + + + + + diff --git a/columns/col.svg b/columns/col.svg new file mode 100644 index 0000000..e2c816a --- /dev/null +++ b/columns/col.svg @@ -0,0 +1,43 @@ + + + +]> + 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 -- cgit v1.2.3-70-g09d2