Skip to content

Instantly share code, notes, and snippets.

@xav76

xav76/index.html

Created October 24, 2012 17:15
Show Gist options
  • Save xav76/3947411 to your computer and use it in GitHub Desktop.
Save xav76/3947411 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Tristan. Geese - A tribute to Giess - Best Winamp vis plugin ever. Type your name in the Seed box to see what it looks like! Most of the control is done with Ctrl, Alt and Shift & Mouse Wheel / Click on the Canvas element. Seedrandom.js co
Raw
index.html
<body>
<section id="wrapper">
<label title="Ctrl-Click">[ <span id="screenshot">Screenshot</span> ]</label>
<label title="Shift-Click">[ <span id="revRotation">Reverse Rotation</span> ]</label>
<label title="Alt-Click">[ <span id="palette">Reverse Palette</span> ]</label>
<label class="right" title="Ctrl-Mouse Wheel">[ Draw Alpha: <span id="drawAlpha">0.0750</span> ]</label>
<label class="right" title="Alt-Mouse Wheel">[ Clear Alpha: <span id="clearAlpha">0.0100</span> ]</label>
<label class="right" title="Shift-Mouse Wheel">[ Rotation: <span id="rotation">0.0050</span> ]</label>
<label class="right" title="Mouse Wheel">[ Scale: <span id="scale">1.2000</span> ]</label>
<canvas id="canvas" width="1200" height="600"></canvas>
<label>Seed: </label><input id="seed" type="text" class="long" value="rose" title="Change random seed" />
<button id="clear" title="Click: Black | Ctrl-Click: White">Clear</button>
<section id="thumbnails"></section>
</section>
</body>
Raw
script.js
//seeded random numbers, ftw.
(function(j,i,g,m,k,n,o){function q(b){var f,e,a=this,d=b.length,c=0,h=a.i=a.j=a.m=0;a.S=[];a.c=[];for(d||(b=[d++]);c<g;)a.S[c]=c++;for(c=0;c<g;c++)f=a.S[c],h=h+f+b[c%d]&g-1,e=a.S[h],a.S[c]=e,a.S[h]=f;a.g=function(b){var c=a.S,d=a.i+1&g-1,e=c[d],f=a.j+e&g-1,h=c[f];c[d]=h;c[f]=e;for(var i=c[e+h&g-1];--b;)d=d+1&g-1,e=c[d],f=f+e&g-1,h=c[f],c[d]=h,c[f]=e,i=i*g+c[e+h&g-1];a.i=d;a.j=f;return i};a.g(g)}function p(b,f,e,a,d){e=[];d=typeof b;if(f&&"object"==d)for(a in b)if(5>a.indexOf("S"))try{e.push(p(b[a], f-1))}catch(c){}return e.length?e:b+("string"!=d?"\x00":"")}function l(b,f,e,a){b+="";for(a=e=0;a<b.length;a++){var d=f,c=a&g-1,h=(e^=19*f[a&g-1])+b.charCodeAt(a);d[c]=h&g-1}b="";for(a in f)b+=String.fromCharCode(f[a]);return b}i.seedrandom=function(b,f){var e=[],a,b=l(p(f?[b,j]:arguments.length?b:[(new Date).getTime(),j,window],3),e);a=new q(e);l(a.S,j);i.random=function(){for(var d=a.g(m),c=o,b=0;d<k;)d=(d+b)*g,c*=g,b=a.g(1);for(;d>=n;)d/=2,c/=2,b>>>=1;return(d+b)/c};return b};o=i.pow(g,m);k=i.pow(2, k);n=2*k;l(i.random(),j)})([],Math,256,6,52);
// my code starts here
var canvas, c, s;
var spiro = function(canvas, c, seed){
Math.seedrandom(seed);
var points = [],
palette = [],
settings = {
segments: Math.random()*49+1,
clearAlpha: 0.0100,
drawAlpha: 0.0750,
rotate: 0.0050,
scale: 1.2,
scaled: 1.2,
steps: Math.floor(Math.random()*8+1),
rMod: Math.random()*3,
gMod: Math.random()*3,
bMod: Math.random()*3
},
w = canvas.width,
h = canvas.height;
function create(){
c.restore();
c.save();
c.translate(w/2,h/2);
c.scale(settings.scale,settings.scale);
var cStep = 255 / settings.segments,
r = 0, g = 0, b = 0;
points.push({x:0, y:0, xd:0, yd:0, rgb:{r:r,g:g,b:b}});
for(var i = 1; i < settings.segments; i++){
points.push({
x:points[i-1].x+(Math.random()*(w/8)-(w/16)),
y: -(h/settings.segments)*i,
xd: (Math.random()*2-1)/1,
yd: (Math.random()*2-1)/1
});
}
r = 255, g = 255, b = 255;
for(var p = 0; p < points.length; p++){
r-=(cStep/settings.rMod);
g-=(cStep/settings.gMod);
b-=(cStep/settings.bMod);
palette.push({r:r|0,g:g|0,b:b|0});
}
updateDisplay();
}
function draw(){
var step = Math.PI*2 / settings.steps;
c.save();
for(var p = points.length-1; p > 1; p--){
for(var i = 0; i < settings.steps; i++){
c.beginPath();
c.moveTo(points[p-1].x, points[p-1].y);
c.bezierCurveTo(points[p-1].x, points[p-1].y, 0, 0, points[p].x, points[p].y);
c.strokeStyle="rgba(" + palette[p].r + "," + palette[p].g + "," + palette[p].b + "," + settings.drawAlpha + ")";
c.stroke();
c.rotate(step);
}
}
c.restore();
c.rotate(settings.rotate);
}
function move(){
for(var p = 1; p < points.length; p++){
points[p].y += points[p].yd;
if(points[p].y > h || points[p].y < -h){
points[p].yd = points[p].yd * -1;
}
points[p].x += points[p].xd;
if(points[p].x > w || points[p].x < -w){
points[p].xd = points[p].xd * -1;
}
}
}
function clear(){
c.save();
c.fillStyle = "rgba(0,0,0,"+settings.clearAlpha+")";
c.fillRect(-w/2,-w/2,w,w);
c.restore();
}
function animate(){
move();
clear();
draw();
}
function updateDisplay(){
document.getElementById("drawAlpha").innerHTML = settings.drawAlpha.toFixed(4);
document.getElementById("clearAlpha").innerHTML = settings.clearAlpha.toFixed(4);
document.getElementById("rotation").innerHTML = settings.rotate.toFixed(4);
document.getElementById("scale").innerHTML = settings.scaled.toFixed(4);
}
this.dispose = function(){
window.clearInterval(this.t);
};
this.clear = function(e){
if(e.ctrlKey){
c.save();
c.fillStyle = "rgba(255,255,255,1)";
c.fillRect(-w,-w,w*2,w*2);
c.restore();
} else {
c.clearRect(-w,-w,w*2,w*2);
}
};
this.click = function(e){
if(e.ctrlKey){
var img = new Image();
img.src = canvas.toDataURL();
img.style.width = w/10 + "px";
img.style.height = h/10 + "px";
img.className = "thumb";
img.onload = function(){
document.getElementById("thumbnails").appendChild(img);
};
} else if(e.shiftKey){
settings.rotate = -settings.rotate;
updateDisplay();
} else if(e.altKey){
points.reverse();
}
};
this.wheel = function(e){
if(e.ctrlKey){
settings.drawAlpha += (e.detail>0) ? -0.005 : 0.005;
if(settings.drawAlpha > 1) settings.drawAlpha = 1;
if(settings.drawAlpha < 0) settings.drawAlpha = 0;
} else if(e.altKey) {
settings.clearAlpha += (e.detail>0) ? -0.005 : 0.005;
if(settings.clearAlpha > 1) settings.clearAlpha = 1;
if(settings.clearAlpha < 0) settings.clearAlpha = 0;
} else if(e.shiftKey){
settings.rotate += (e.detail>0) ? -0.005 : 0.005;
if(settings.rotate > 1) settings.rotate = 1;
if(settings.rotate < -1) settings.rotate = -1;
} else {
var scale = (e.detail>0) ? 0.95 : 1.05;
settings.scaled *= scale;
ctx.scale(scale, scale);
}
updateDisplay();
};
create();
this.t = window.setInterval(animate, 33);
};
$(document).ready( function(){
canvas=document.getElementById("canvas");
ctx=canvas.getContext("2d");
s = new spiro(canvas, ctx, "rose");
document.getElementById("seed").onkeydown = function(e){
if(e.keyCode == 13){
s.dispose();
s = new spiro(canvas, ctx, document.getElementById("seed").value);
this.select();
}
};
document.getElementById("seed").onfocus = function(){ this.select(); };
document.getElementById("clear").onclick = function(e){ s.clear(e); };
canvas.onmousewheel = function(e){
e.preventDefault();
s.wheel(e);
};
if(window.addEventListener)
canvas.addEventListener('DOMMouseScroll', canvas.onmousewheel, false);
canvas.onmousedown = function(e){ s.click(e); };
document.onkeydown = function(e){
switch(e.keyCode){
case 16: //shift
document.getElementById("rotation").style.color = '#eee';
document.getElementById("revRotation").style.color = '#eee';
break;
case 17: //ctrl
document.getElementById("drawAlpha").style.color = '#eee';
document.getElementById("screenshot").style.color = '#eee';
break;
case 18: //alt
e.stopPropagation();
document.getElementById("clearAlpha").style.color = '#eee';
document.getElementById("palette").style.color = '#eee';
break;
}
};
document.onkeyup = function(e){
switch(e.keyCode){
case 16:
document.getElementById("rotation").style.color = '';
document.getElementById("revRotation").style.color = '';
break;
case 17:
document.getElementById("drawAlpha").style.color = '';
document.getElementById("screenshot").style.color = '';
break;
case 18:
document.getElementById("clearAlpha").style.color = '';
document.getElementById("palette").style.color = '';
break;
}
};
});
Raw
style.css
*{margin:0;padding:0} html,body{width:100%;height:100%;position:relative}
canvas{border:1px solid #222;box-shadow:0 0 10px 0 #222;display:block;margin: 5px 0}
#wrapper{position:absolute;left:50%;top:50%;margin:-380px 0 0 -600px;}
body{background:#333}
label{font: 10px/20px Arial, sans-serif;color:#777;display:inline-block;margin:3px 5px;}
input{height:14px;font-size:10px;margin:3px 5px 3px 0px;background:#333;border:1px solid #444;color:#777;padding:2px;width:160px;}
button{font-size:10px;line-height:10px;text-transform:uppercase;background:#333;border:1px solid #444;border-radius:5px;color:#777;padding:3px 10px 5px;margin:3px 5px;float:right}
input:hover,button:hover,label:hover{border-color:#777;color:#eee}
input::-moz-selection{background:#222}
.right{float:right;}
label span{padding:0 5px}
#thumbnails{padding:5px 15px;}
.thumb{margin: 5px;-moz-box-sizing:border-box;border:1px solid #111;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment