summaryrefslogtreecommitdiff
path: root/columns
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
parent3e2408165503bbc9ec793d42976dc6bbd2ac9979 (diff)
columns
Diffstat (limited to 'columns')
-rw-r--r--columns/index.html259
-rw-r--r--columns/new-col-static.svg70
-rw-r--r--columns/new-col.svg97
-rw-r--r--columns/okstars.js74
4 files changed, 500 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>
diff --git a/columns/new-col-static.svg b/columns/new-col-static.svg
new file mode 100644
index 0000000..13fad1e
--- /dev/null
+++ b/columns/new-col-static.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="utf-8"?>
+<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="1361px" height="904px" viewBox="0 0 1361 904" overflow="visible" enable-background="new 0 0 1361 904"
+ xml:space="preserve">
+<defs>
+</defs>
+<path fill="#FFFFFF" d="M142,38h-12h-11.963H47c0,0,4.93,5.072,8.904,12.5C59.895,57.959,60,64,60,64v750h70h66V64
+ c0,0,2.124-6.041,6.114-13.5c3.974-7.428,10.923-12.5,10.923-12.5H142z"/>
+<rect x="59" y="830" fill="#FFFFFF" width="137" height="17"/>
+<rect x="47" y="814" fill="#FFFFFF" width="164" height="16"/>
+<rect x="15" y="847" fill="#FFFFFF" width="228" height="17"/>
+<rect x="1" y="864" fill="#FFFFFF" width="255" height="39"/>
+<rect x="1" fill="#FFFFFF" width="255" height="38"/>
+<rect x="69" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="116" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="163" y="66" fill="#FFFFFF" width="23" height="748"/>
+<path fill="#FFFFFF" d="M1247,38h-12h-11.963H1152c0,0,4.93,5.072,8.904,12.5C1164.895,57.959,1165,64,1165,64v750h70h66V64
+ c0,0,2.124-6.041,6.114-13.5c3.974-7.428,10.923-12.5,10.923-12.5H1247z"/>
+<rect x="1164" y="830" fill="#FFFFFF" width="137" height="17"/>
+<rect x="1152" y="814" fill="#FFFFFF" width="164" height="16"/>
+<rect x="1120" y="847" fill="#FFFFFF" width="228" height="17"/>
+<rect x="1106" y="864" fill="#FFFFFF" width="255" height="39"/>
+<rect x="1106" fill="#FFFFFF" width="255" height="38"/>
+<rect x="1174" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="1221" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="1268" y="66" fill="#FFFFFF" width="23" height="748"/>
+<path fill="#FFFFFF" d="M142,38h-12h-11.963H47c0,0,4.93,5.072,8.904,12.5C59.895,57.959,60,64,60,64v750h70h66V64
+ c0,0,2.124-6.041,6.114-13.5c3.974-7.428,10.923-12.5,10.923-12.5H142z"/>
+<rect x="59" y="830" fill="#FFFFFF" width="137" height="17"/>
+<rect x="47" y="814" fill="#FFFFFF" width="164" height="16"/>
+<rect x="15" y="847" fill="#FFFFFF" width="228" height="17"/>
+<rect x="1" y="864" fill="#FFFFFF" width="255" height="39"/>
+<rect x="1" fill="#FFFFFF" width="255" height="38"/>
+<rect x="69" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="116" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="163" y="66" fill="#FFFFFF" width="23" height="748"/>
+<path fill="#FFFFFF" d="M1247,38h-12h-11.963H1152c0,0,4.93,5.072,8.904,12.5C1164.895,57.959,1165,64,1165,64v750h70h66V64
+ c0,0,2.124-6.041,6.114-13.5c3.974-7.428,10.923-12.5,10.923-12.5H1247z"/>
+<rect x="1164" y="830" fill="#FFFFFF" width="137" height="17"/>
+<rect x="1152" y="814" fill="#FFFFFF" width="164" height="16"/>
+<rect x="1120" y="847" fill="#FFFFFF" width="228" height="17"/>
+<rect x="1106" y="864" fill="#FFFFFF" width="255" height="39"/>
+<rect x="1106" fill="#FFFFFF" width="255" height="38"/>
+<rect x="1174" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="1221" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="1268" y="66" fill="#FFFFFF" width="23" height="748"/>
+<path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" d="M142,38.5h-12h-11.963H47
+ c0,0,4.68,4.822,8.654,12.25C59.645,58.209,59.5,64,59.5,64v750.5H130h65.5V64c0,0,2.374-5.791,6.364-13.25
+ c3.974-7.428,11.173-12.25,11.173-12.25H142z"/>
+<rect x="58.5" y="830.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="137" height="17"/>
+<rect x="46.5" y="814.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="164" height="16"/>
+<rect x="14.5" y="847.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="228" height="17"/>
+<rect x="0.5" y="864.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="255" height="39"/>
+<rect x="0.5" y="0.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="255" height="38"/>
+<rect x="68.5" y="66.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="22" height="748"/>
+<rect x="115.5" y="66.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="22" height="748"/>
+<rect x="162.5" y="66.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="23" height="748"/>
+<path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" d="M1247,38.5h-12h-11.963H1152
+ c0,0,4.68,4.822,8.654,12.25c3.99,7.459,3.846,13.25,3.846,13.25v750.5h70.5h65.5V64c0,0,2.374-5.791,6.364-13.25
+ c3.974-7.428,11.173-12.25,11.173-12.25H1247z"/>
+<rect x="1163.5" y="830.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="137" height="17"/>
+<rect x="1151.5" y="814.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="164" height="16"/>
+<rect x="1119.5" y="847.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="228" height="17"/>
+<rect x="1105.5" y="864.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="255" height="39"/>
+<rect x="1105.5" y="0.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="255" height="38"/>
+<rect x="1173.5" y="66.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="22" height="748"/>
+<rect x="1220.5" y="66.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="22" height="748"/>
+<rect x="1267.5" y="66.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="23" height="748"/>
+</svg>
diff --git a/columns/new-col.svg b/columns/new-col.svg
new file mode 100644
index 0000000..5bb9571
--- /dev/null
+++ b/columns/new-col.svg
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="utf-8"?>
+<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="1361px" height="904px" viewBox="0 0 1361 904" overflow="visible" enable-background="new 0 0 1361 904"
+ xml:space="preserve">
+ <style>
+ @-webkit-keyframes doit {
+ from {
+ stroke-dasharray:5px;
+ stroke-dashoffset:100px;
+ }
+ to {
+ stroke-dasharray:5px;
+ stroke-dashoffset:110px;
+ }
+ }
+ @-webkit-keyframes doit2 {
+ from {
+ stroke-dasharray:200px;
+ stroke-dashoffset:600px;
+ }
+ to {
+ stroke-dasharray:200px;
+ stroke-dashoffset:200px;
+ }
+ }
+ line, path,rect {
+ -webkit-animation:1s doit infinite linear;
+ stroke:white;
+ fill:black;
+ }
+ </style>
+<defs>
+</defs>
+<path fill="#FFFFFF" d="M142,38h-12h-11.963H47c0,0,4.93,5.072,8.904,12.5C59.895,57.959,60,64,60,64v750h70h66V64
+ c0,0,2.124-6.041,6.114-13.5c3.974-7.428,10.923-12.5,10.923-12.5H142z"/>
+<rect x="59" y="830" fill="#FFFFFF" width="137" height="17"/>
+<rect x="47" y="814" fill="#FFFFFF" width="164" height="16"/>
+<rect x="15" y="847" fill="#FFFFFF" width="228" height="17"/>
+<rect x="1" y="864" fill="#FFFFFF" width="255" height="39"/>
+<rect x="1" fill="#FFFFFF" width="255" height="38"/>
+<rect x="69" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="116" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="163" y="66" fill="#FFFFFF" width="23" height="748"/>
+<path fill="#FFFFFF" d="M1247,38h-12h-11.963H1152c0,0,4.93,5.072,8.904,12.5C1164.895,57.959,1165,64,1165,64v750h70h66V64
+ c0,0,2.124-6.041,6.114-13.5c3.974-7.428,10.923-12.5,10.923-12.5H1247z"/>
+<rect x="1164" y="830" fill="#FFFFFF" width="137" height="17"/>
+<rect x="1152" y="814" fill="#FFFFFF" width="164" height="16"/>
+<rect x="1120" y="847" fill="#FFFFFF" width="228" height="17"/>
+<rect x="1106" y="864" fill="#FFFFFF" width="255" height="39"/>
+<rect x="1106" fill="#FFFFFF" width="255" height="38"/>
+<rect x="1174" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="1221" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="1268" y="66" fill="#FFFFFF" width="23" height="748"/>
+<path fill="#FFFFFF" d="M142,38h-12h-11.963H47c0,0,4.93,5.072,8.904,12.5C59.895,57.959,60,64,60,64v750h70h66V64
+ c0,0,2.124-6.041,6.114-13.5c3.974-7.428,10.923-12.5,10.923-12.5H142z"/>
+<rect x="59" y="830" fill="#FFFFFF" width="137" height="17"/>
+<rect x="47" y="814" fill="#FFFFFF" width="164" height="16"/>
+<rect x="15" y="847" fill="#FFFFFF" width="228" height="17"/>
+<rect x="1" y="864" fill="#FFFFFF" width="255" height="39"/>
+<rect x="1" fill="#FFFFFF" width="255" height="38"/>
+<rect x="69" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="116" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="163" y="66" fill="#FFFFFF" width="23" height="748"/>
+<path fill="#FFFFFF" d="M1247,38h-12h-11.963H1152c0,0,4.93,5.072,8.904,12.5C1164.895,57.959,1165,64,1165,64v750h70h66V64
+ c0,0,2.124-6.041,6.114-13.5c3.974-7.428,10.923-12.5,10.923-12.5H1247z"/>
+<rect x="1164" y="830" fill="#FFFFFF" width="137" height="17"/>
+<rect x="1152" y="814" fill="#FFFFFF" width="164" height="16"/>
+<rect x="1120" y="847" fill="#FFFFFF" width="228" height="17"/>
+<rect x="1106" y="864" fill="#FFFFFF" width="255" height="39"/>
+<rect x="1106" fill="#FFFFFF" width="255" height="38"/>
+<rect x="1174" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="1221" y="66" fill="#FFFFFF" width="22" height="748"/>
+<rect x="1268" y="66" fill="#FFFFFF" width="23" height="748"/>
+<path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" d="M142,38.5h-12h-11.963H47
+ c0,0,4.68,4.822,8.654,12.25C59.645,58.209,59.5,64,59.5,64v750.5H130h65.5V64c0,0,2.374-5.791,6.364-13.25
+ c3.974-7.428,11.173-12.25,11.173-12.25H142z"/>
+<rect x="58.5" y="830.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="137" height="17"/>
+<rect x="46.5" y="814.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="164" height="16"/>
+<rect x="14.5" y="847.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="228" height="17"/>
+<rect x="0.5" y="864.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="255" height="39"/>
+<rect x="0.5" y="0.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="255" height="38"/>
+<rect x="68.5" y="66.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="22" height="748"/>
+<rect x="115.5" y="66.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="22" height="748"/>
+<rect x="162.5" y="66.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="23" height="748"/>
+<path fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" d="M1247,38.5h-12h-11.963H1152
+ c0,0,4.68,4.822,8.654,12.25c3.99,7.459,3.846,13.25,3.846,13.25v750.5h70.5h65.5V64c0,0,2.374-5.791,6.364-13.25
+ c3.974-7.428,11.173-12.25,11.173-12.25H1247z"/>
+<rect x="1163.5" y="830.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="137" height="17"/>
+<rect x="1151.5" y="814.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="164" height="16"/>
+<rect x="1119.5" y="847.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="228" height="17"/>
+<rect x="1105.5" y="864.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="255" height="39"/>
+<rect x="1105.5" y="0.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="255" height="38"/>
+<rect x="1173.5" y="66.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="22" height="748"/>
+<rect x="1220.5" y="66.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="22" height="748"/>
+<rect x="1267.5" y="66.5" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="4" width="23" height="748"/>
+</svg>
diff --git a/columns/okstars.js b/columns/okstars.js
new file mode 100644
index 0000000..4f1cde3
--- /dev/null
+++ b/columns/okstars.js
@@ -0,0 +1,74 @@
+(function($){
+
+ $.okstars = function(el, options){
+ var base = this;
+ base.$el = $(el);
+ base.el = el;
+ base.$el.data("okstars", base);
+
+ base.init = function () {
+ base.options = $.extend({}, $.okstars.options, options);
+ if (! base.canvas) base.canvas = base.new_canvas();
+ base.context = base.canvas.getContext("2d");
+ base.build();
+ $(window).resize(base.build)
+ };
+
+ base.new_canvas = function () {
+ var canvas = document.createElement("canvas");
+ canvas.style.cssText = "position:fixed;top:0;left:0;z-index:-1;";
+ base.$el.append(canvas);
+ return canvas;
+ };
+ function randrange(a,b){
+ var x = Math.random()
+ return a * (1-x) + b * x
+ }
+ base.build = function () {
+ var w = base.canvas.width = window.innerWidth
+ var h = base.canvas.height = window.innerHeight
+ var context = base.context;
+ var starcount = ~~randrange(base.options.starMin, base.options.starMax)
+ var tt = +new Date()
+ for (var i = 0; i < starcount; i++) {
+ var radius = Math.random() * 2
+ context.fillStyle = base.mottle_gray(base.options.color, base.options.colorrange)
+ context.fillRect( Math.random() * w, Math.random() * h, radius,radius)
+ }
+// console.log("generated", starcount, "stars in", (+new Date() - tt), "ms")
+ };
+
+ base.clamp = function (x, min, max) {
+ return Math.max(min, Math.min(max, x));
+ };
+ base.mottle_gray = function (color, radius) {
+ var rgb = color.split("")
+ var rgbcolor = 'rgb('
+ var offset = Math.floor(Math.random()*radius*2 - radius)
+ rgbcolor += parseInt(rgb[0], 16) * 16 + offset
+ rgbcolor += ","
+ rgbcolor += parseInt(rgb[1], 16) * 16 + offset
+ rgbcolor += ","
+ rgbcolor += parseInt(rgb[2], 16) * 16 + offset
+ rgbcolor += ")"
+ return rgbcolor
+ };
+
+ base.init();
+ };
+
+ $.okstars.options = {
+ transparent: false,
+ starMin: 100,
+ starMax: 1000,
+ color: "888",
+ colorrange: 128
+ };
+
+ $.fn.okstars = function(options){
+ return this.each(function(){
+ (new $.okstars(this, options));
+ });
+ };
+
+})(jQuery);
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 19:11:43 +0000