Skip to content

Instantly share code, notes, and snippets.

@IbrahimTanyalcin

IbrahimTanyalcin/README.md

Last active January 10, 2018 11:47
Show Gist options
  • Save IbrahimTanyalcin/80d8f6687dd8f29f90fa30b70fe47a8b to your computer and use it in GitHub Desktop.
Save IbrahimTanyalcin/80d8f6687dd8f29f90fa30b70fe47a8b to your computer and use it in GitHub Desktop.
Download ZIP
hexBinSort
Raw
README.md

Test for rawgit

Raw
blob1.0.4.7.js
var coordinates = [0,0];
var areaBlob = {};
var blobJsCanvasCounter = 0;
var blobTools ={
vBelt:function vBelt(r,R,d,i,nodeCount) {
var sum = r+R+d;
var theta = Math.asin((R-r)/(R+r+d));
var A = Math.sqrt(Math.pow(R+r+d,2)-Math.pow(R-r,2));
var beta = Math.atan(A/r);
var y = Math.abs(Math.PI-i/nodeCount*Math.PI*2);
var x = Math.abs(Math.asin(sum*Math.sin(y)/R)) || 0;
var z = Math.PI-x-y;
var U = Math.sqrt(Math.pow(sum,2)+Math.pow(R,2)-2*sum*R*Math.cos(z));
var delta = (Math.PI-2*theta)/2/Math.PI/2;
var betaCurrent = i/nodeCount <= 0.5 ? Math.PI*2*(i/nodeCount-delta) : Math.PI*2*(1-i/nodeCount-delta);
return blobTools.retrieveInterval(-0.5,delta,i,nodeCount)*r+blobTools.retrieveInterval(delta,delta+beta/Math.PI/2,i,nodeCount)*r/Math.cos(betaCurrent)+blobTools.retrieveInterval(delta+beta/Math.PI/2,1-delta-beta/Math.PI/2,i,nodeCount)*U+blobTools.retrieveInterval(1-delta-beta/Math.PI/2,(3/2*Math.PI+theta)/Math.PI/2,i,nodeCount)*r/Math.cos(betaCurrent)+blobTools.retrieveInterval((3/2*Math.PI+theta)/Math.PI/2,1,i,nodeCount)*r;
},
retrieveInterval:function retrieveInterval (a,b,i,nodeCount){
var mid = (a+b)/2;
var distance = Math.abs(a-mid);
return Math.round(0.5+distance-Math.abs(mid-i/nodeCount));
},
wiggle:function wiggle(R,Rx,teethCount,i,nodeCount){
var teethWidth = nodeCount/teethCount;
var teethSegment = Math.floor((i%teethWidth)/(teethWidth/3));
return (Math.floor(i/teethWidth)%2)*(Math.abs(Math.sign(teethSegment*(teethSegment-2)))*(Rx-R)/R+Math.abs(Math.sign((teethSegment-1)*(teethSegment-2)))*((Rx-R)/R*(i%(teethWidth/3))/teethWidth*3)+Math.abs(Math.sign(teethSegment*(teethSegment-1)))*((Rx-R)/R-(Rx-R)/R*(i%(teethWidth/3))/teethWidth*3))
},
ellipse:function ellipse (a,i,nodeCount,b){
b = b === undefined ? 1 : b;
var tanTheta = Math.abs(Math.tan(i/nodeCount*Math.PI*2));
var x = Math.sqrt(Math.pow(a,2)*Math.pow(tanTheta,2)*Math.pow(b,2)/(Math.pow(a,2)+Math.pow(tanTheta,2)*Math.pow(b,2)));
var y = tanTheta === 0 ? b : x/tanTheta;
/*x^2/a^2+(x/tanTheta)^2=1
x^2*tanTheta^2+x^2*a^2 = a^2*tanTheta^2;
x^2(tanTheta^2+a^2) = a^2*tanTheta^2;*/
return Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
},
droplet:function droplet (roundness,i,nodeCount) {
var coefficient = 1/(1-roundness) === Infinity ? 0 : 1/(1-roundness);
return roundness+(coefficient*Math.pow((i-nodeCount*(1-roundness))/nodeCount,2))*blobTools.retrieveInterval(-0.5,1-roundness,i,nodeCount)+blobTools.retrieveInterval(roundness,1,i,nodeCount)*(coefficient*Math.pow((i-nodeCount*roundness)/nodeCount,2));
},
star:function star (vertexLength,vertexCount,sharpness,i,nodeCount) {
return 1-vertexLength+vertexLength*Math.abs(Math.pow(Math.sin(vertexCount*Math.PI*i/nodeCount-Math.PI/2),10*sharpness))
},
heart:function heart(a,b,i,nodeCount) {
var r = 1/(1+Math.pow(b,-5));
return blobTools.retrieveInterval(-0.5,0.25,i,nodeCount)*1/(1+Math.pow(b,-1*(i/nodeCount*40-5)))+blobTools.retrieveInterval(0.75,1,i,nodeCount)*1/(1+Math.pow(b,-1*(10-(i/nodeCount-0.75)*40-5)))+blobTools.retrieveInterval(0.25,0.75,i,nodeCount)*blobTools.ellipse(a,i+nodeCount/4,nodeCount,r);
},
polygonAngular:function polygonAngular(a,i,nodeCount){
var length = a.length;
var residualAngle = Math.PI*2;
for (var j=0;j<a.length;j+=2){
residualAngle -= a[j]/360*Math.PI*2;
}
var distanceRlastR1=Math.sqrt(Math.pow(a[a.length-1],2)+Math.pow(a[1],2)-2*a[a.length-1]*a[1]*Math.cos(residualAngle+a[0]/360*Math.PI*2));
var zeta = Math.asin(a[a.length-1]*Math.sin(residualAngle+a[0]/360*Math.PI*2)/distanceRlastR1);
var r0 = Math.round(residualAngle*1000000)/1000000!==0?Math.sin(zeta)*a[1]/Math.sin(Math.PI-zeta-a[0]/360*Math.PI*2):a[a.length-1];
var angle = i/nodeCount*360;
for (var j = 0,sum =0;(i/nodeCount*360>a[j]+sum && j<a.length);j+=2){
sum += a[j];
angle = i/nodeCount*360-sum;
}
j += 1;
angle = angle/360*Math.PI*2;
a[-1] = r0;
a[length] = residualAngle/Math.PI/2*360;
a[length+1] = r0;
var distanceRlastR0 = Math.sqrt(Math.pow(a[length-1],2)+Math.pow(r0,2)-2*a[length-1]*r0*Math.cos(residualAngle));
var distanceRjRjmin2 = Math.sqrt(Math.pow(a[j],2)+Math.pow(a[j-2],2)-2*a[j]*a[j-2]*Math.cos(a[j-1]/360*Math.PI*2));
var r;
if (j>length) {
if (Math.pow(r0,2)>= Math.pow(a[j-2],2)+Math.pow(distanceRlastR0,2)) {
r = Math.abs(a[j-2]*r0*Math.sin(residualAngle)/distanceRlastR0/Math.sin(-angle+Math.asin(r0*Math.sin(residualAngle)/distanceRlastR0)));
} else {
r = Math.abs(a[j-2]*r0*Math.sin(residualAngle)/distanceRlastR0/Math.sin(Math.PI-angle-Math.asin(r0*Math.sin(residualAngle)/distanceRlastR0)));
}
} else {
if (Math.pow(a[j],2)>=Math.pow(a[j-2],2)+Math.pow(distanceRjRjmin2,2)) {
r = Math.abs(a[j-2]*a[j]*Math.sin(a[j-1]/360*Math.PI*2)/distanceRjRjmin2/Math.sin(-angle+Math.asin(a[j]/distanceRjRjmin2*Math.sin(a[j-1]/360*Math.PI*2))));
} else {
r = Math.abs(a[j-2]*a[j]*Math.sin(a[j-1]/360*Math.PI*2)/distanceRjRjmin2/Math.sin(Math.PI-angle-Math.asin(a[j]/distanceRjRjmin2*Math.sin(a[j-1]/360*Math.PI*2))));
}
}
return r;
},
moveTo:function moveTo (ID,pos,t,delay) {
delay = delay===undefined?0:delay;
var element = document.getElementById(ID);
var X = pos[0]!==undefined?pos[0]:pos.x;
var Y = pos[1]!==undefined?pos[1]:pos.y;
element.style.transition = "top "+t+"s ease"+" "+delay+"s,"+"left "+t+"s ease"+" "+delay+"s";
element.style.top = Y+"px";
element.style.left = X+"px";
}
}
function initiateBlobArea (areaObject) {
//{id:"drawHere",width:1000,height:1000,top:0,left:0}
var top = areaObject.top+"px" || "0px";
var left = areaObject.left+"px" || "0px";
var zIndex = areaObject.zIndex || 1;
var width = areaObject.width+"px" || "1000px";
var height = areaObject.height+"px" || "1000px";
var background = areaObject.background || null;
var createdElement = document.createElement("div");
createdElement.setAttribute("id",areaObject.id);
if (areaObject.parent) {
document.getElementById(areaObject.parent).appendChild(createdElement);
} else {
document.body.appendChild(createdElement);
}
document.getElementById(areaObject.id).style.position = "absolute";
document.getElementById(areaObject.id).style.top = top;
document.getElementById(areaObject.id).style.left = left;
document.getElementById(areaObject.id).style.zIndex = zIndex;
document.getElementById(areaObject.id).style.width = width;
document.getElementById(areaObject.id).style.height = height;
document.getElementById(areaObject.id).style.background = background;
document.getElementById(areaObject.id).addEventListener("mousemove",listener);
areaBlob.width = parseFloat(width);
areaBlob.height = parseFloat(height);
areaBlob.top = top;
areaBlob.left = left;
areaBlob.zIndex = zIndex;
function listener(event){
var area = document.getElementById(areaObject.id).getBoundingClientRect();
coordinates = [event.clientX - area.left+0.001,event.clientY-area.top+0.001];
//console.log(coordinates);
}
}
function blob(blobObject) {
//{id:"someID",width:600,height:600,nodeCount:50,origin:[300,300],maxPeriod:5,minPeriod:2,blobRadius:100,tickRadius:3,harmonicRadius:25,sync:1,randomness:0,lineWidth:100,lineOpacity:0.5,fillOpacity:0.5,attraction:0.5,bounce:1,xray:0.9}
//globals
var ID;
if (document.getElementById(blobObject.id)) {
ID = blobObject.id + blobJsCanvasCounter;
} else {
ID = blobObject.id || ("myCanvas"+blobJsCanvasCounter);
}
blobJsCanvasCounter++;
var width = blobObject.width===undefined?areaBlob.width:blobObject.width;
var height = blobObject.height===undefined?areaBlob.height:blobObject.height;
//var top = blobObject.top===undefined?areaBlob.top:blobObject.top;
//var left = blobObject.left===undefined?areaBlob.left:blobObject.left;
var nodeCount = blobObject.nodeCount || 10;
var origin = blobObject.origin || [(areaBlob.width)/2,(areaBlob.height)/2];
var circlePositions = [];
var orCirclePositions = [];
var circleHarmonicLimits = [];
var circlePeriods = [];
var maxPeriod = blobObject.maxPeriod || 5;
var minPeriod = blobObject.minPeriod || 2;
var blobRadius = blobObject.blobRadius || 100;
var tickRadius = blobObject.tickRadius || 3;
var harmonicRadius = blobObject.harmonicRadius || 0.25*blobRadius;
var startTime;
var frameRate = blobObject.frameRate===undefined?1000:blobObject.frameRate;
var frameCount = 0;
var sync = blobObject.sync || 1;
var randomness = blobObject.randomness || 0;
var blobRadii = [];
var thetas = [];
var bounce = 0;
var bounceStrength = Math.PI*4;
var bounceSpeed = blobObject.bounceSpeed || 0.975;
var lineWidth = blobObject.lineWidth || 100;
var lineOpacity = blobObject.lineOpacity || 0.5;
var fillOpacity = blobObject.fillOpacity || 0.5;
var strokeStyle = blobObject.strokeStyle || "Orange";
var fillStyle = blobObject.fillStyle || "Orange";
var attraction = blobObject.attraction || 0.5;
var bounceOn = blobObject.bounce || 1;
var xray = blobObject.xray || 0;
var parentTop = blobObject.top === undefined ? "0px" : blobObject.top+"px";
var parentLeft = blobObject.left === undefined ? "0px" : blobObject.left+"px";
var parameter = blobObject.parameter || function(){return 1;};
var parameterTime = blobObject.parameterTime || function(){return 1;};
var offset = blobObject.offset===undefined? [0,0] : blobObject.offset;
var isStatic = blobObject.isStatic ? blobObject.isStatic : 0;
var phase = blobObject.phase ? blobObject.phase : 0;
var tick = blobObject.tick===undefined ? 1 : blobObject.tick;
var tickLine = blobObject.tickLine===undefined ? 1 : blobObject.tickLine;
//globals
//append the canvas element
var createdElement = document.createElement("canvas");
createdElement.setAttribute("id",ID);
createdElement.setAttribute("width",width);
createdElement.setAttribute("height",height);
if (blobObject.parent) {
document.getElementById(blobObject.parent).appendChild(createdElement);
document.getElementById(ID).style.position = "absolute";
document.getElementById(ID).style.top = parentTop;
document.getElementById(ID).style.left = parentLeft;
} else {
document.body.appendChild(createdElement);
document.getElementById(ID).style.position = "absolute";
document.getElementById(ID).style.top = parentTop;
document.getElementById(ID).style.left = parentLeft;
}
document.getElementById(ID).style.zIndex = areaBlob.zIndex - 1;
var canvas = document.getElementById(ID);
var context = canvas.getContext("2d");
//append the canvas element
function animate(timestamp) {
var thetaMouse = Math.atan((origin[1]+offset[1]-coordinates[1])/(origin[0]+offset[0]-coordinates[0]));
context.globalAlpha = xray;
var bounceCoeff = 1;
if (bounce !== 0 && !(Math.round(bounceStrength*1000)/1000 === 0)) {
bounceCoeff = 1+0.35*Math.sin(bounceStrength);
bounceStrength = bounceStrength*bounceSpeed;
}
if (!startTime){
startTime = timestamp;
for (i=0;i<nodeCount;i++) {
var randomCoef = (1-randomness+randomness*Math.random());
circlePositions[i]=[origin[0]+(blobRadius*randomCoef)*Math.sin(i*Math.PI*2/nodeCount),origin[1]-(blobRadius*randomCoef)*Math.cos(i*Math.PI*2/nodeCount)];
orCirclePositions[i]=[origin[0]+(blobRadius*randomCoef)*Math.sin(i*Math.PI*2/nodeCount),origin[1]-(blobRadius*randomCoef)*Math.cos(i*Math.PI*2/nodeCount)];
circlePeriods[i] = minPeriod+(maxPeriod-minPeriod)*Math.random();
circleHarmonicLimits[i] = calculateMotionSpan(i);
blobRadii[i]= blobRadius*randomCoef*parameter(i,nodeCount);
thetas[i]=Math.atan((circleHarmonicLimits[i][1][1]-circleHarmonicLimits[i][0][1])/(circleHarmonicLimits[i][1][0]-circleHarmonicLimits[i][0][0]));
}
}
var currentTime = (timestamp-startTime)/1000;
if(currentTime*frameRate-frameCount>1 || currentTime===0){
context.clearRect(0,0,width,height);
for (i=0;i<nodeCount;i++) {
var theta = thetas[i];
var sign = Math.sign(origin[0]+offset[0]-coordinates[0])*Math.sign(origin[0]-circlePositions[i][0]);
if (i === 0 || i === nodeCount/2) {
sign = -Math.sign(origin[0]+offset[0]-coordinates[0]);
}
var distance = Math.min(Math.sqrt(Math.pow(coordinates[0]-origin[0]-offset[0],2)+Math.pow(coordinates[1]-origin[1]-offset[1],2)),blobRadius)/blobRadius;
var thetaDiff = thetaMouse-theta;
circlePositions[i]=[origin[0]+parameterTime(i,nodeCount,currentTime)*(blobRadii[i]+attraction*blobRadii[i]*bounceCoeff*sign*distance*Math.cos(thetaDiff))*Math.sin(i*Math.PI*2/nodeCount),origin[1]-parameterTime(i,nodeCount,currentTime)*(blobRadii[i]+attraction*blobRadii[i]*bounceCoeff*sign*distance*Math.cos(thetaDiff))*Math.cos(i*Math.PI*2/nodeCount)];
orCirclePositions[i]=[origin[0]+parameterTime(i,nodeCount,currentTime)*(blobRadii[i]+attraction*blobRadii[i]*bounceCoeff*sign*distance*Math.cos(thetaDiff))*Math.sin(i*Math.PI*2/nodeCount),origin[1]-parameterTime(i,nodeCount,currentTime)*(blobRadii[i]+attraction*blobRadii[i]*bounceCoeff*sign*distance*Math.cos(thetaDiff))*Math.cos(i*Math.PI*2/nodeCount)];
circleHarmonicLimits[i] = calculateMotionSpan(i);
}
for (i=0;i<nodeCount;i++){
var w = 2*Math.PI/circlePeriods[i];
var theta = thetas[i];
var sign = sync === 1? Math.sign(nodeCount/2-i) || 1 : 1;
var x = orCirclePositions[i][0]+1*(harmonicRadius*Math.sin(w*currentTime+phase)*Math.cos(theta)*sign);
var y = orCirclePositions[i][1]+1*(harmonicRadius*Math.sin(w*currentTime+phase)*Math.sin(theta)*sign);
circlePositions[i] = [x,y];
circleHarmonicLimits[i] = calculateMotionSpan(i);
context.globalAlpha = xray;
context.beginPath();
context.arc(x,y,1,0,2*Math.PI,false);
context.lineWidth = 2;
context.strokeStyle = "Black";
context.stroke();
context.fillStyle = "Black";
context.fill();
generateTick(i);
}
for (i=0;i<nodeCount;i++){
context.globalAlpha = tickLine;
context.beginPath();
context.moveTo(origin[0],origin[1]);
context.lineTo(circlePositions[i][0],circlePositions[i][1]);
context.lineWidth = 1;
context.strokeStyle = "Black";
context.stroke();
}
context.beginPath();
context.moveTo(circlePositions[0][0],circlePositions[0][1]);
context.lineJoin="round";
context.lineWidth = lineWidth;
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
context.globalAlpha = lineOpacity;
for (i=1;i<nodeCount;i++){
context.lineTo(circlePositions[i][0],circlePositions[i][1]);
}
context.closePath();
context.stroke();
context.globalAlpha = fillOpacity;
context.fill();
//next frame
frameCount++;
}
if (bounce !== 0 && (Math.round(bounceStrength*1000)/1000 === 0)) {
bounce = bounce-1;
bounceStrength = Math.PI*4;
} else if (bounce === 0 && (Math.round(bounceStrength*1000)/1000 === 0)){
bounceStrength = Math.PI*4;
}
var distance = Math.sqrt(Math.pow(coordinates[0]-origin[0]-offset[0],2)+Math.pow(coordinates[1]-origin[1]-offset[1],2));
var thresholdRadius = (Math.max.apply(null,blobRadii)+Math.min.apply(null,blobRadii))/2;
if (Math.round((thresholdRadius+attraction*thresholdRadius+lineWidth/2)/distance*10)/10 === 1 && bounceOn === 1) {
bounce = 1;
bounceStrength = Math.PI*4;
}
function generateTick(order){
context.globalAlpha = tick;
context.beginPath();
context.moveTo(orCirclePositions[order][0]+harmonicRadius*Math.sin(order*Math.PI*2/nodeCount)-tickRadius*Math.cos(order*Math.PI*2/nodeCount),orCirclePositions[order][1]-harmonicRadius*Math.cos(order*Math.PI*2/nodeCount)-tickRadius*Math.sin(order*Math.PI*2/nodeCount));
context.lineTo(orCirclePositions[order][0]+harmonicRadius*Math.sin(order*Math.PI*2/nodeCount)+tickRadius*Math.cos(order*Math.PI*2/nodeCount),orCirclePositions[order][1]-harmonicRadius*Math.cos(order*Math.PI*2/nodeCount)+tickRadius*Math.sin(order*Math.PI*2/nodeCount));
context.lineWidth = 2;
context.strokeStyle = "Black";
context.stroke();
context.beginPath();
context.moveTo(orCirclePositions[order][0]-harmonicRadius*Math.sin(order*Math.PI*2/nodeCount)-tickRadius*Math.cos(order*Math.PI*2/nodeCount),orCirclePositions[order][1]+harmonicRadius*Math.cos(order*Math.PI*2/nodeCount)-tickRadius*Math.sin(order*Math.PI*2/nodeCount));
context.lineTo(orCirclePositions[order][0]-harmonicRadius*Math.sin(order*Math.PI*2/nodeCount)+tickRadius*Math.cos(order*Math.PI*2/nodeCount),orCirclePositions[order][1]+harmonicRadius*Math.cos(order*Math.PI*2/nodeCount)+tickRadius*Math.sin(order*Math.PI*2/nodeCount));
context.lineWidth = 2;
context.strokeStyle = "Black";
context.stroke();
}
function calculateMotionSpan(order) {
var x1 = circlePositions[order][0]+harmonicRadius*Math.sin(order*Math.PI*2/nodeCount);
var x2 = circlePositions[order][0]-harmonicRadius*Math.sin(order*Math.PI*2/nodeCount);
var y1 = circlePositions[order][1]-harmonicRadius*Math.cos(order*Math.PI*2/nodeCount);
var y2 = circlePositions[order][1]+harmonicRadius*Math.cos(order*Math.PI*2/nodeCount);
return [[x2,y2],[x1,y1]];
}
((function (){var x = {0:function(){window.requestAnimationFrame(animate)},1:function(){}}; return x[isStatic]})())();
}
window.requestAnimationFrame(animate);
};
Raw
hexBinsSort.html
<!--Copyright Ibrahim Tanyalcin 2013-2015.-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Blob.js by Ibrahim Tanyalcin</title>
<script src="https://cdn.rawgit.com/IbrahimTanyalcin/80d8f6687dd8f29f90fa30b70fe47a8b/raw/d1d8502fa6ac1cabb85c088b1f2d68ec5a2b002f/blob1.0.4.7.js" type="text/javascript"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<style type ="text/css">
@font-face{
font-family: "mystery";
src: url("./fonts/mystery.ttf");
}
@font-face{
font-family: "freckle";
src: url("./fonts/Asap-Regular.ttf");
}
html {
background:gray;
margin-left:auto;
margin-right:auto;
}
body {
padding-left:50px;
position:relative;
margin-left:auto;
margin-right:auto;
background: white;
width: 800px;
height:2000px;
}
#textDiv {
position:relative;
margin-left:auto;
margin-right:auto;
top:100px;
text-align: center;
font-family: "mystery";
}
#par{
position:relative;
margin-left:auto;
margin-right:auto;
top:50px;
width:700px;
text-align: left;
font-family: "freckle";
font-size: 16px;
opacity:0.8;
line-height: 60px;
padding-right:100px;
}
#par2,#par3,#par4,#par5,#par6,#par7,#par8,#par9{
position:relative;
margin-left:auto;
margin-right:auto;
//top:700px;
width:700px;
text-align: left;
font-family: "freckle";
font-size: 14px;
opacity:0.8;
line-height: 60px;
//overflow-y: scroll;
padding-right:100px;
}
#div1 {
position: absolute;
top:435px;
left:0px;
}
#drawHere {
overflow: hidden;
}
#button {
position: absolute;
top:400px;
left:400px;
}
#___plusone_0 {
position: absolute;
top: 350px;
left: 255px;
z-index: 100;
}
#twitterDiv{
position: absolute;
top: 350px;
left:330px;
z-index: 100;
}
.fb-share-button {
position: absolute;
top: 350px;
left: 370px;
z-index: 100;
}
#linkedinShare{
position: absolute;
top: 350px;
left: 540px;
z-index: 100;
}
#github {
position:absolute;
top: 350px;
left: 50px;
z-index: 100;
}
</style>
<!-- Start of Google Analytics Code for Default Guide -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-60672496-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End of Google Analytics Code for Default Guide -->
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
</head>
<body>
<div id="github"><a class="github-button" href="https://github.com/IbrahimTanyalcin" data-style="mega" data-count-href="/IbrahimTanyalcin/followers" data-count-api="/users/IbrahimTanyalcin#followers" data-count-aria-label="# followers on GitHub" aria-label="Follow @IbrahimTanyalcin on GitHub">Follow @Ibrahim</a></div>
<div id="linkedinShare"><script type="IN/Share" data-url="http://i-pv.org/blob.html" data-counter="right"></script></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="http://i-pv.org/blob.html" data-layout="button_count"></div>
<div id="twitterDiv">
<a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-hashtags="Javascript">Tweet</a>
</div>
<div id="googlePlusOne" class="g-plusone"></div>
<div id="textDiv"><span style="font-size:40px;font-weight:900;color:darkslategray;opacity:0.7;">BLOB.js<span style="font-size:30px;font-weight:400;color:darkslategray;opacity:0.9;">v1.0.4.7</span></span><br><span style="font-size:30px;font-weight:normal;font-style:italic;color:slategray;opacity:0.9;">Drawing shapes and rendering scenes..</span>
<div id="par" style="height:739px;">
<span style="text-align:center;color:red;font-size:15px;display:block;line-height:15px;font-style:italic;opacity:0.65;width:300px;margin-left:auto;margin-right:auto;">Below are the quick links:</span>
<span style="background:orange;display:table;text-align:center;margin-left:auto;margin-right:auto;width:300px;border-radius:25px;transition:background 1s ease;line-height:30px;" onmouseover="this.childNodes[0].parentElement.style.backgroundColor = 'DeepPink';" onmouseout="this.childNodes[0].parentElement.style.backgroundColor = 'orange';"><a href="./blob.html" style="color:gray;font-family:helvetica;text-decoration:none;">INTRODUCTION</a></span>
<span style="background:orange;display:table;text-align:center;margin-left:auto;margin-right:auto;width:300px;border-radius:25px;transition:background 1s ease;line-height:30px;" onmouseover="this.childNodes[0].parentElement.style.backgroundColor = 'DeepPink';" onmouseout="this.childNodes[0].parentElement.style.backgroundColor = 'orange';"><a href="./blob2.html" style="color:gray;font-family:helvetica;text-decoration:none;">RENDERING SHAPES</a></span><br>
</div>
</div>
<button id="button" onclick="render()">redraw</button>
<div id="div1"></div>
<script type="text/javascript">
var data = {};
var stack = {};
var level = 20;
var step = 255/40;
var generator = d3.random.normal(127.5,50);
var timeout;
initiateBlobArea({id:"drawHere",width:850,height:800,top:0,left:0,parent:"div1"});
function del() {
var nodeListCanvas = document.querySelectorAll("canvas");
for (i=0;i<nodeListCanvas.length;i++){
nodeListCanvas[i].remove();
}
}
function render() {
del();
initiateStack();
clearTimeout(timeout);
for (var k=0;k<20;k++) {
for (var j=0;j<40;j++){
generateBin(k,j,6);
}
}
function generateBin (k,j,r) {
//var rnd = Math.round(Math.random()*765/3);
var rnd = Math.round(Math.min(Math.max(0,generator()),255));
var color = "rgba("+rnd+","+rnd+","+rnd+",1)";
blob({width:2*r,height:3*r,top:0+k*3/2*r,left:220+j*r*Math.sqrt(3)+(k%2)*r/2*Math.sqrt(3),nodeCount:6,origin:[r,3/2*r],blobRadius:r,lineWidth:1,strokeStyle:"Black",fillStyle:color,randomness:0,fillOpacity:0.5,lineOpacity:0.8,minPeriod:3,maxPeriod:3,id:"myCanvas"+k+","+j,harmonicRadius:r*0.1,attraction:0.0001,bounce:1,xray:0,parent:"drawHere",tick:0,tickLine:0,isStatic:1});
data["myCanvas"+k+","+j] = rnd;
}
timeout = setTimeout(function(){
for (var k=level;k>=1;k--) {
sort(k,6);
}
},3000);
}
render();
function initiateStack() {
for (var i = 0;i<41;i++) {
stack[i] = 0;
}
}
function sort(level,r) {
for (var j = 0;j<40;j++) {
var rnd = data["myCanvas"+(level-1)+","+j];
var stackKey = Math.round(rnd/step);
var stackH = 220+(40-Math.round(rnd/step))*Math.sqrt(3)*r;
//console.log(48-Math.round(rnd/step));
var stackV = 190+2*r*(stack[stackKey]+19);
blobTools.moveTo("myCanvas"+(level-1)+","+j,[stackH,stackV],3,0);
stack[stackKey]--;
}
}
</script>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
<!--Copyright Ibrahim Tanyalcin 2013-2015.-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment