- Author:
- Mark Homans
- Twitter:
- @
- GitHub:
- Facebook:
- Google+:
- +
- Reddit:
- /r/
- Pouet:
- Website:
- build-software.nl
- Compo:
- classic
- Demo link:
- https://js1k.com/2010-first/demo/370
- Shortlink:
- https://js1k.com/370
- Blog post:
- please update here!
- Bytes:
- 1021
- Chars:
- 1021
- Submission
var l=10,s=50,a=120,x=0,y=0,S=new Array(),c,M=Math,L;function d(){C=c.getContext('2d');C.clearRect(0,0,c.width,c.height);for(p in S){t=S[p];if(t.o!=null&&t.o.length>0){for(cp in t.o){m=t.o[cp];D=M.sqrt(M.pow(t.u-m.u,2)+M.pow(t.r-m.r,2));K=255/(a-s)*(D-s);C.shadowOffsetX=-5*(10/L*x);C.shadowOffsetY=-5*(10/L*y);C.shadowBlur=5;C.shadowColor='rgba(0,0,255,0.5)';C.strokeStyle='rgb('+M.floor(K)+',0,'+Math.floor(255-K)+')';C.beginPath();C.moveTo(t.u,t.r);C.lineTo(m.u,m.r);C.closePath();C.stroke()}}}}function O(x,y,o){t=this;t.x=x;t.y=y;t.u=t.x*s;t.r=t.y*s;t.o=o}c=document.getElementById('c');L=c.width=c.height=500;p=0;for(i=0;i<=l;i++){for(j=0;j<=l;j++){S[p]=new O(i,j);k=new Array();for(z in S){if(i>0&&S[z].x==i-1&&S[z].y==j)k[k.length]=S[z];if(j>0&&S[z].x==i&&S[z].y==j-1)k[k.length]=S[z]}S[p].o=k;p++}}d();c.onmousemove=function(e){x=e.offsetX?e.offsetX:e.layerX;y=e.offsetY?e.offsetY:e.layerY;for(p in S){t=S[p];t.u=t.x*s;t.r=t.y*s;q=x-t.u;Q=y-t.r;D=M.sqrt((q*q)+(Q*Q));if(D<a){v=a/D;t.u-=(q*v)-q;t.r-=(Q*v)-Q}}d()}
- Description
- 3d effect on grid
1.2: now in color
- Base64 encoded
dmFyIGw9MTAscz01MCxhPTEyMCx4PTAseT0wLFM9bmV3IEFycmF5KCksYyxNPU1hdGgsTDtmdW5jdGlvbiBkKCl7Qz1jLmdldENvbnRleHQoJzJkJyk7Qy5jbGVhclJlY3QoMCwwLGMud2lkdGgsYy5oZWlnaHQpO2ZvcihwIGluIFMpe3Q9U1twXTtpZih0Lm8hPW51bGwmJnQuby5sZW5ndGg+MCl7Zm9yKGNwIGluIHQubyl7bT10Lm9bY3BdO0Q9TS5zcXJ0KE0ucG93KHQudS1tLnUsMikrTS5wb3codC5yLW0uciwyKSk7Sz0yNTUvKGEtcykqKEQtcyk7Qy5zaGFkb3dPZmZzZXRYPS01KigxMC9MKngpO0Muc2hhZG93T2Zmc2V0WT0tNSooMTAvTCp5KTtDLnNoYWRvd0JsdXI9NTtDLnNoYWRvd0NvbG9yPSdyZ2JhKDAsMCwyNTUsMC41KSc7Qy5zdHJva2VTdHlsZT0ncmdiKCcrTS5mbG9vcihLKSsnLDAsJytNYXRoLmZsb29yKDI1NS1LKSsnKSc7Qy5iZWdpblBhdGgoKTtDLm1vdmVUbyh0LnUsdC5yKTtDLmxpbmVUbyhtLnUsbS5yKTtDLmNsb3NlUGF0aCgpO0Muc3Ryb2tlKCl9fX19ZnVuY3Rpb24gTyh4LHksbyl7dD10aGlzO3QueD14O3QueT15O3QudT10Lngqczt0LnI9dC55KnM7dC5vPW99Yz1kb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYycpO0w9Yy53aWR0aD1jLmhlaWdodD01MDA7cD0wO2ZvcihpPTA7aTw9bDtpKyspe2ZvcihqPTA7ajw9bDtqKyspe1NbcF09bmV3IE8oaSxqKTtrPW5ldyBBcnJheSgpO2Zvcih6IGluIFMpe2lmKGk+MCYmU1t6XS54PT1pLTEmJlNbel0ueT09ailrW2subGVuZ3RoXT1TW3pdO2lmKGo+MCYmU1t6XS54PT1pJiZTW3pdLnk9PWotMSlrW2subGVuZ3RoXT1TW3pdfVNbcF0ubz1rO3ArK319ZCgpO2Mub25tb3VzZW1vdmU9ZnVuY3Rpb24oZSl7eD1lLm9mZnNldFg/ZS5vZmZzZXRYOmUubGF5ZXJYO3k9ZS5vZmZzZXRZP2Uub2Zmc2V0WTplLmxheWVyWTtmb3IocCBpbiBTKXt0PVNbcF07dC51PXQueCpzO3Qucj10LnkqcztxPXgtdC51O1E9eS10LnI7RD1NLnNxcnQoKHEqcSkrKFEqUSkpO2lmKEQ8YSl7dj1hL0Q7dC51LT0ocSp2KS1xO3Quci09KFEqdiktUX19ZCgpfQ==
- Original source
var cells = 10;
var cellsize = 50;
var affection_distance = 130;
var mousex = -1;
var mousey = -1;
var points = new Array();
var canvas;
var M = Math;
var size;
function init(){
canvas = document.getElementById('c');
size = canvas.width = canvas.height= 500;
InitGridArray();
DrawGrid();
canvas.onmousemove = function(event){
mousex = event.offsetX ? event.offsetX : event.layerX;
mousey = event.offsetY ? event.offsetY : event.layerY;
adjustPoints();
DrawGrid();
};
}
function InitGridArray(){
var pos = 0;
for(var i = 0; i <= cells; i++)
{
for(var j = 0; j <= cells; j++)
{
points[pos] = new Point(i,j);
var connectedList = new Array();
for(var z in points)
{
if(i>0 && points[z].x == i-1 && points[z].y == j)
{
connectedList[connectedList.length] = points[z];
}
if(j>0 && points[z].x == i && points[z].y == j-1)
{
connectedList[connectedList.length] = points[z];
}
}
points[pos].PointArray = connectedList;
pos++;
}
}
}
function DrawGrid(){
var context = canvas.getContext('2d');
context.clearRect(0,0,canvas.width,canvas.height);
for(var p in points)
{
var point = points[p];
if(point.PointArray != null && point.PointArray.length>0)
{
//foreach connected point
for(var cp in point.PointArray)
{
var connectedPoint = point.PointArray[cp];
var distance = M.sqrt(M.pow(point.offsetX - connectedPoint.offsetX,2) + M.pow(point.offsetY - connectedPoint.offsetY,2));
var procent_rood = 255 / (affection_distance-cellsize) * (distance-cellsize)
context.shadowOffsetX = -5*(10/size*mousex);
context.shadowOffsetY = -5*(10/size*mousey);
context.shadowBlur= 5;
context.shadowColor = 'rgba(0, 0, 255, 0.5)';
context.strokeStyle = 'rgb('+M.floor(procent_rood)+',0,' + Math.floor(255-procent_rood) + ')';
drawLine(
context,
point.offsetX,
point.offsetY,
connectedPoint.offsetX,
connectedPoint.offsetY
);
}
}
}
}
function adjustPoints(){
for(var p in points)
{
var point = points[p];
//zet de orriginele waarden terug
point.offsetX = point.x * cellsize;
point.offsetY = point.y * cellsize;
//deze vars kunnen ook negatief zijn
var x_dist = mousex - point.offsetX;
var y_dist = mousey - point.offsetY;
//deze var is altijd positief
var distance = M.sqrt(M.pow(x_dist,2) + M.pow(y_dist,2));
if(distance < affection_distance)
{
var verhouding = affection_distance / distance;
point.offsetX -= (x_dist * verhouding) - x_dist;
point.offsetY -= (y_dist * verhouding) - y_dist;
}
}
}
function drawLine(ctx, startx, starty, endx, endy) {
ctx.beginPath();
ctx.moveTo(startx, starty);
ctx.lineTo(endx, endy);
ctx.closePath();
ctx.stroke();
}
function Point(x,y, PointArray){
this.x = x;
this.y = y;
this.offsetX = this.x * cellsize;
this.offsetY = this.y * cellsize;
this.PointArray = PointArray;
}
init();