summaryrefslogtreecommitdiff
path: root/columns
diff options
context:
space:
mode:
Diffstat (limited to 'columns')
-rw-r--r--columns/black.html259
-rw-r--r--columns/col.svg43
-rw-r--r--columns/index.html73
3 files changed, 354 insertions, 21 deletions
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 @@
+<!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>
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 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+ <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+ x="0px" y="0px" width="257px" height="906px" viewBox="0 -0.945 257 906"
+ overflow="visible" enable-background="new 0 -0.945 257 906" xml:space="preserve">
+<defs>
+</defs>
+<path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M142,38.5h-12h-11.963H47c0,0,4.93,5.072,8.903,12.5
+ C59.895,58.459,60,64.5,60,64.5v750h70h66v-750c0,0,2.124-6.041,6.113-13.5c3.975-7.428,10.924-12.5,10.924-12.5H142z"/>
+<rect x="59" y="830.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="137" height="17"/>
+<rect x="47" y="814.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="164" height="16"/>
+<rect x="15" y="847.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="228" height="17"/>
+<rect x="1" y="864.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="255" height="39"/>
+<rect x="1" y="0.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="255" height="38"/>
+<rect x="69" y="66.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="22" height="748"/>
+<rect x="116" y="66.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="22" height="748"/>
+<rect x="163" y="66.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="23" height="748"/>
+<path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M142,38.5h-12h-11.963H47c0,0,4.93,5.072,8.903,12.5
+ C59.895,58.459,60,64.5,60,64.5v750h70h66v-750c0,0,2.124-6.041,6.113-13.5c3.975-7.428,10.924-12.5,10.924-12.5H142z"/>
+<rect x="59" y="830.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="137" height="17"/>
+<rect x="47" y="814.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="164" height="16"/>
+<rect x="15" y="847.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="228" height="17"/>
+<rect x="1" y="864.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="255" height="39"/>
+<rect x="1" y="0.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="255" height="38"/>
+<rect x="69" y="66.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="22" height="748"/>
+<rect x="116" y="66.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="22" height="748"/>
+<rect x="163" y="66.5" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" width="23" height="748"/>
+<path fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" stroke-dasharray="4" d="M142,39h-12h-11.963H47
+ c0,0,4.68,4.822,8.653,12.25C59.645,58.709,59.5,64.5,59.5,64.5V815H130h65.5V64.5c0,0,2.374-5.791,6.363-13.25
+ C205.838,43.822,213.037,39,213.037,39H142z"/>
+<rect x="58.5" y="831" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" stroke-dasharray="4" width="137" height="17"/>
+<rect x="46.5" y="815" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" stroke-dasharray="4" width="164" height="16"/>
+<rect x="14.5" y="848" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" stroke-dasharray="4" width="228" height="17"/>
+<rect x="0.5" y="865" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" stroke-dasharray="4" width="255" height="39"/>
+<rect x="0.5" y="1" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" stroke-dasharray="4" width="255" height="38"/>
+<rect x="68.5" y="67" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" stroke-dasharray="4" width="22" height="748"/>
+<rect x="115.5" y="67" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" stroke-dasharray="4" width="22" height="748"/>
+<rect x="162.5" y="67" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" stroke-dasharray="4" width="23" height="748"/>
+</svg>
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
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 10:57:17 +0000