Skip to content

Instantly share code, notes, and snippets.

@mc706

mc706/blockslide.html

Created May 15, 2013 03:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mc706/5581457 to your computer and use it in GitHub Desktop.
Save mc706/5581457 to your computer and use it in GitHub Desktop.
Download ZIP
A whirlpool of colors generated in javascript and jquery.
Raw
blockslide.html
<html>
<style>
.row {
float: left;
clear: left;
}
.box{
float:left;
height:20px;
width:20px;
border:1px solid black;
}
.block{
height:20px;
width:20px;
background-color:blue;
position:absolute;
}
</style>
<body>
<div id=container></div>
<br>
<br>
<br>
<div style="clear:both">
<h4>Options</h4>
<form action="" method="get">
<label for=layers>Number of Layers</label>
<input type=number id=layers name=layers min=1 max=25><br>
<label for=even>Even</label>
<input type=radio name=type id=even value=even>
<label for=odd>Odd</label>
<input type=radio name=type id=odd value=odd><br>
<label for=alterating>Alterating</label>
<input type=radio name=direction id=alternating value=alternating>
<label for=same>Same</label>
<input type=radio name=direction id=same value=same><br>
<input type=submit value=ReDraw>
</form>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var layers = {
0:'a',
1:'b',
2:'c',
3:'d',
4:'e',
5:'f',
6:'g',
7:'h',
8:'i',
9:'j',
10:'k',
11:'l',
12:'m',
13:'n',
14:'o',
15:'p',
16:'q',
17:'r',
18:'s',
19:'t',
20:'u',
21:'v',
22:'w',
23:'x',
24:'y',
25:'z'
}
function range(stop){
//returns list of 1 to stop
var numrange = [];
for (var i = 1; i < stop + 1; i ++){
numrange.push(i)
}
return numrange
}
function get_ranges(layercount, even){
//returns length of all the layers as hash
ranges = {}
if (even){
for (var i = 1; i < layercount + 1; i++){
len = 8*(i - 1) + 4;
ranges[i] = range(len);
}
} else {
for (var i = 0; i < layercount + 1; i++){
if ( i == 0){
ranges[i] = [1];
} else {
ranges[i] = range(i * 8)
}
}
}
return ranges
}
function build(layercount,even,alternating){
//Dynamically builds the grid with layercount # of rows each alternating
var ranges = get_ranges(layercount, even)
$('#container').empty()
if (even){ //start with 4 grid as layer 1
for (var i = -layercount; i < layercount + 1; i++){
if (i != 0){
var newrow = '<div class=row id=row_' + i + '></div>'
$('#container').append(newrow);
for (var k = -layercount; k < layercount + 1; k++){
if (k != 0){
var id = "";
var layerid = Math.max(Math.abs(i),Math.abs(k)); //get distance from center in number of layers
id += layers[layerid]; //assign letter to layer
if (alternating){ //check if they should all go in the same direction or not
if (layerid % 2 === 0){ //even number layer (clockwise)
if ( i == -layerid) { //first row is special case
num = ranges[layerid].shift()
id += num
} else if (i == layerid){
num = ranges[layerid].pop()
id += num
} else {
if (k < 0){
num = ranges[layerid].pop()
id += num
}else{
num = ranges[layerid].shift()
id += num
}
}
} else { // od number layer (counterclockwise)
if ( i == -layerid) { //first row is special case
num = ranges[layerid].pop()
id += num
} else if (i == layerid){
num = ranges[layerid].shift()
id += num
} else {
if (k < 0){
num = ranges[layerid].shift()
id += num
}else{
num = ranges[layerid].pop()
id += num
}
}
}
} else {
if ( i == -layerid) { //first row is special case
num = ranges[layerid].shift()
id += num
} else if (i == layerid){
num = ranges[layerid].pop()
id += num
} else {
if (k < 0){
num = ranges[layerid].pop()
id += num
}else{
num = ranges[layerid].shift()
id += num
}
}
}
var newblock = '<div class="box '+layers[layerid]+'" id=' + id + '></div>';
$('#row_'+i).append(newblock);
}
}
}
}
} else { //solid cetner
for (var i = -layercount; i < layercount + 1; i++){
var newrow = '<div class=row id=row_' + i + '></div>'
$('#container').append(newrow);
for (var k = -layercount; k < layercount + 1; k++){
var id = "";
var layerid = Math.max(Math.abs(i),Math.abs(k)); //get distance from center in number of layers
id += layers[layerid]; //assign letter to layer
if (alternating){
if (layerid % 2 === 0){ //even number layer (clockwise)
if ( i == -layerid) { //first row is special case
num = ranges[layerid].shift()
id += num
} else if (i == layerid){
num = ranges[layerid].pop()
id += num
} else {
if (k <= 0){
num = ranges[layerid].pop()
id += num
}else{
num = ranges[layerid].shift()
id += num
}
}
} else { // odd number layer (counterclockwise)
if ( i == -layerid) { //first row is special case
num = ranges[layerid].pop()
id += num
} else if (i == layerid){
num = ranges[layerid].shift()
id += num
} else {
if (k < 0){
num = ranges[layerid].shift()
id += num
}else{
num = ranges[layerid].pop()
id += num
}
}
}
} else {
if ( i == -layerid) { //first row is special case
num = ranges[layerid].shift()
id += num
} else if (i == layerid){
num = ranges[layerid].pop()
id += num
} else {
if (k < 0){
num = ranges[layerid].pop()
id += num
}else{
num = ranges[layerid].shift()
id += num
}
}
}
var newblock = '<div class="box '+layers[layerid]+'" id=' + id + '></div>';
$('#row_'+i).append(newblock);
}
}
}
draw(layercount, even)
}
function draw(layercount, even){
//draws the blocks that will move around the div
var ranges = get_ranges(layercount, even);
if (even){
$.each(ranges,function(index, value){
$.each(value.slice(0,-1), function(n,i){
var id = "#" + layers[index] + i;
max = Math.max.apply(null,value)
red = Math.sin((Math.PI*2/max)*i+2)*127 + 128 //the colors are based on sinwave math, and offsetting RGB colors
green = Math.sin((Math.PI*2/max)*i+0)*127 + 128
blue = Math.sin((Math.PI*2/max)*i+4)*127 + 128
color = RGB2Color(red,green,blue)
$(id).html('<div class=block style="background-color:'+color+'"></div>');
})
})
} else {
$.each(ranges,function(index, value){
$.each(value.slice(0,-1), function(n,i){
var id = "#" + layers[index] + i;
max = Math.max.apply(null,value)
red = Math.sin((Math.PI*2/max)*i+2)*127 + 128
green = Math.sin((Math.PI*2/max)*i+0)*127 + 128
blue = Math.sin((Math.PI*2/max)*i+4)*127 + 128
color = RGB2Color(red,green,blue)
$(id).html('<div class=block style="background-color:'+color+'"></div>');
})
})
$('#a1').html('<div class=block></div>')
}
animation(layercount, 150)
}
function move(a, b){
//Moves block object in a to b
var block = $('#'+a).children('.block');
var dest = $('#'+b);
var pos = dest.position();
block.animate({
'top': pos.top + 1 + 'px',
'left': pos.left + 1 +'px'
},
300) //this is the animation length, move this to change speed
block.appendTo(dest);
$('#'+a).empty()
}
function animation(layercount, timeout){
//calls the animate function for each layer
$.each(range(layercount),function(i,l){
animate(l, false, timeout)
})
}
function animate(layer, start, timeout) {
//recursive function to move blocks
letter = layers[layer]
ids = []
$('.'+letter).each(function(){
ids.push(this.id.substring(1,this.id.length))
})
max = Math.max.apply(null, ids);
if (!start){
start = max
}
if ($('#'+ letter + start).children('.block')){
//added to removed delay when moving empty blocks
var b = start
var a = start - 1
if (a == 0){ a = max}
move(letter + a, letter + b);
start--;
if (start ==0 ) {
start = max
}
setTimeout(function(){animate(layer, start, timeout)},timeout);
}
else{
start--;
if (start ==0 ) {
start = max
}
animate(layer, start, timeout)
}
}
function getURLvars(){
//get the get variables out of the URL
var vars = {}
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
function RGB2Color(r,g,b){
//helper function to convert rgb to html hex
return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}
function byte2Hex(n){
//converts bit values to hex
var nybHexString = "0123456789ABCDEF";
return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
}
$().ready(function(){
var layers = parseInt(getURLvars()["layers"]);
if (!layers){layers = 12}
var type = getURLvars()["type"]
var direction = getURLvars()["direction"]
var even = true;
var alternating = false;
if (direction=="alternating"){alternating=true}
if (type=="odd"){even=false}
build(layers,even,alternating);
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment