summaryrefslogtreecommitdiff
path: root/columns/index.html
diff options
context:
space:
mode:
authorJulie Lala <jules@okfoc.us>2014-07-16 00:42:42 -0400
committerJulie Lala <jules@okfoc.us>2014-07-16 00:42:42 -0400
commit96da808972316b2ced88867e7960438e8159cd1e (patch)
treeb1bbe291e912875b145fdf0e10ef6b3d8f049672 /columns/index.html
parent3e2408165503bbc9ec793d42976dc6bbd2ac9979 (diff)
columns
Diffstat (limited to 'columns/index.html')
-rw-r--r--columns/index.html259
1 files changed, 259 insertions, 0 deletions
diff --git a/columns/index.html b/columns/index.html
new file mode 100644
index 0000000..2e643f3
--- /dev/null
+++ b/columns/index.html
@@ -0,0 +1,259 @@
+<!doctype>
+<html>
+<head>
+ <title>columns</title>
+ <style type="text/css">
+ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+ .mx-object3d { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
+ html,body{ margin: 0; padding: 0; width:100%;height:100%;}
+ body {
+ -webkit-perspective: 600px;
+ -moz-perspective: 600px;
+ perspective: 1000px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+ overflow:hidden;
+ position:fixed;
+ top:0;
+ left:0;
+ width:100%;
+ height:100%;
+ cursor:crosshair;
+ font-family:sans-serif;
+ background-color: black;
+ }
+ .text {
+ font-size: 100px;
+ color: white;
+ }
+ #flip{
+ display:none;
+ }
+ #bg {
+ pointer-events: none;
+ position: fixed;
+ width: 100%;
+ top: 0;
+ height: 100%;
+ z-index: 0;
+ cursor:move;
+ left:0;
+ }
+ </style>
+ <body>
+ <div id="info"></div>
+ <div id="flip">FLIP</div>
+ <div id="bg"></div>
+ </body>
+ <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/jquery-1.10.2.min.js"></script>
+ <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/jquery-nodoubletapzoom.js"></script>
+ <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/mx.min.js"></script>
+ <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/mx.gyroControl.js"></script>
+ <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/mx.rotationControl.js"></script>
+ <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/vendor/mx.scene.js"></script>
+ <script type="text/javascript" src="http://asdf.us/dither/js/util.js"></script>
+ <script type="text/javascript" src="http://okfoc.us/beentrill/shirts/assets/js/image.js"></script>
+ <script type="text/javascript" src="okstars.js"></script>
+ <script type="text/javascript">
+ (function( ua ) {
+ ua = ua.toLowerCase();
+ var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
+ /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
+ /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
+ /(msie) ([\w.]+)/.exec( ua ) ||
+ 0 > ua.indexOf("compatible") && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
+ [];
+ var matched = {
+ browser: match[ 1 ] || "",
+ version: match[ 2 ] || "0"
+ };
+ browser = {};
+ if ( matched.browser ) {
+ browser[ matched.browser ] = true;
+ browser.version = matched.version;
+ }
+ // Chrome is Webkit, but Webkit is also Safari.
+ if ( browser.chrome ) {
+ browser.webkit = true;
+ } else if ( browser.webkit ) {
+ browser.safari = true;
+ }
+ $.browser = browser;
+ return browser;
+ })( navigator.userAgent );
+
+ $(window).load(function(){
+ scene.init();
+ });
+ MX.PivotControl = function (){
+ var x = 0, y = 0, el
+ this.init = function(mx){
+ el = mx
+ el.y = -10
+ document.addEventListener("mousemove", move)
+ }
+ var move = function(e){
+ x = e.pageY/window.innerHeight*2 - 1
+ y = e.pageX/window.innerWidth*-2 + 1
+ }
+ this.update = function(t){
+ el.x = avg(el.x, -y * 10, 15)
+ 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
+ }
+ }
+
+ var triangle = new function(){
+ var canvas,ctx,w,h
+ this.init = function(){
+ canvas = document.createElement("canvas")
+ w = canvas.width = window.innerWidth
+ h = canvas.height = window.innerHeight
+ document.body.appendChild(canvas)
+ ctx = canvas.getContext('2d')
+ this.resize()
+ }
+ $(window).resize(this.resize)
+ this.resize = function(){
+ ctx.clearRect(0,0,w,h)
+ ctx.beginPath()
+ ctx.moveTo(0,h)
+ ctx.lineTo(w/2, h/2)
+ ctx.lineTo(w,h)
+ ctx.lineTo(0,h)
+ ctx.fillStyle = "#020101"
+ ctx.fill()
+ }
+ }
+ var scene = new function(){}
+ scene.init = function(){
+ MX.rotationUnit = 'deg'
+
+ scene.parent = new MX.Object3D("#scene")
+ scene.parent.addTo("#info");
+ scene.parent.perspective = 600
+ scene.parent.update()
+
+ scene.control = new MX.PivotControl()
+ scene.control.init(scene.parent)
+
+ hashtags.init()
+ triangle.init();
+ $.okstars('body')
+
+ // if (is_mobile) {
+ // hashtags.parent.scale = 0.8
+ // }
+
+ $("#flip").click(function(){
+ scene.flip()
+ })
+
+ scene.animate(0)
+ }
+ scene.animate = function (t) {
+ requestAnimationFrame(scene.animate)
+ t /= 500
+
+ scene.control.update(t)
+ scene.parent.update()
+
+ triangle.resize()
+ hashtags.animate(t)
+ }
+ scene.reverse = false
+ scene.flip = function(){
+ scene.reverse = ! scene.reverse
+ var rotation = scene.control.rotationY % 180;
+ if (scene.reverse) {
+ scene.control.rotationY = scene.control.rotationY - rotation + 180 * 3
+ }
+ else {
+ scene.control.rotationY = scene.control.rotationY - rotation - 180 * 3
+ }
+ }
+
+ // depth of field
+ var count = 20
+ var z_min = -1000, z_fade = 26000, z_max = 15000, z_shadow = 900
+ var hashtags = new function(){}
+ hashtags.init = function(){
+ this.parent = new MX.Object3D('.mx-rapper')
+ this.parent.addTo(scene.parent)
+
+ this.children = []
+
+ var w = window.innerWidth, h = window.innerHeight
+ for (var i = 0; count > i; i++) {
+ var hash = new MX.Image({
+ src: 'new-col-static.svg'
+ })
+ hash.reposition(i, true)
+ hash.addTo(this.parent);
+ }
+ }
+ hashtags.show = function(){
+ hashtags.parent.el.style.opacity = 1
+ }
+ hashtags.hide = function(){
+ hashtags.parent.el.style.opacity = 0
+ }
+ hashtags.animate = function (t) {
+ scene.control.rotationZ += 1
+ hashtags.parent.children.forEach(function(item, i){
+ item.z -= ~~(item.dz*-1)
+ if (z_min > item.z) {
+ /*
+ item.loadTexture({
+ src: 'http://okfocus.s3.amazonaws.com/emoji/' + (randint(845) + 1) + ".png",
+ })
+ */
+ item.reposition(i, false)
+ // var theta = TWO_PI*random()
+ // var w = window.innerWidth, h = window.innerHeight
+ // item.x = sin(theta) * randrange(h/2, h*1.2)
+ // 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)
+ 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.update()
+ })
+ }
+ MX.Image.prototype.reposition = function(i, start){
+ var h = window.innerHeight
+ var w = window.innerWidth
+ this.x = 0
+ this.y = 200
+ this.z = z_max
+ this.dz = -10
+ this.scale = 1.0
+ this.rotationX = -10 // sign((i % 2)-0.5) * 20
+
+ if (start) {
+ this.z = (z_max - z_min) * i / count
+ }
+/*
+ var u = randrange(0, TWO_PI)
+ var v = randrange(0, TWO_PI)
+ this.x = (1.2 + 0.9 * cos(v))*cos(u) * w * 1.5
+ this.y = (1.2 + 0.9 * cos(v))*sin(u) * w * 1.5
+ // this.z = randrange(z_min, z_max)
+ this.z = z_max + randint(z_shadow)
+ this.rotationZ = 100 * (random()-0.5)
+ this.el.style.opacity = 1.0
+ this.dz = randrange(-2300,-1600)
+ this.drz = randrange(-1,1)/2
+ // this.update()
+*/
+ }
+ </script>
+ </html>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 20:36:50 +0000