|
|
Post by Avtar on Nov 3, 2008 18:34:33 GMT
Just came across this page and thought this was quite cool.
Click here.
Nice effect, nice code.
|
|
|
|
Post by Mucleus on Nov 3, 2008 19:10:49 GMT
It is a nice effect... but it's a really weird projection, since the lines of the cube don't turn into lines in the image. I don't know enough about 3D imaging to guess whether that's shortcut plotting or rounding errors  |
|
|
|
Post by noobster on Dec 22, 2008 8:35:04 GMT
It is a nice effect... but it's a really weird projection, since the lines of the cube don't turn into lines in the image. I don't know enough about 3D imaging to guess whether that's shortcut plotting or rounding errors LOLers. that's the first thing I noticed. It bothered me so bad I had to fix it. just take *(f+2) out the equations and it renders a squarish blocky cube No real perspective. I knew the math was bad despite not being able to understand it fully, LOL. I hope you don't mind me posting the code so the scripter has a chance to find it. I hope he fixes his code. About me: Carpenter. Never used computers until a couple years ago. Really dig messing with javascript and canvas. I have a lot of questions and I try real hard to find answers. Anyway, enjoy the fix Code has all the tags broken so the BB will print the code I hope. Good luck with it. html head title Rotating 3D Cube in JavaScript /title style type="text/css" body{background:#FFF;color:#FF0;height:100%;margin:0;padding:0;width:100%;} /style script type="text/javascript" src="../excanvas.js" /script /head body onMouseMove="a=event.clientX/99; b=event.clientY/99;" onLoad="c=document.getElementById('canvas').getContext('2d');setInterval('draw()', 17);" script type="text/javascript" var a = 0, b = 0, prevA = 1, prevB = 1, c, modI, powJ, xLoc = new Array(8), yLoc = new Array(8); function dSolid (aMod, bMod, mMod, rCol, gCol, bCol) { c.beginPath(); c.fillStyle = "rgba("+rCol+","+gCol+","+bCol+",.15)"; c.moveTo(xLoc[mMod * 0 + aMod], yLoc[mMod * 0 + aMod]); c.lineTo(xLoc[mMod * 1 + aMod], yLoc[mMod * 1 + aMod]); c.lineTo(xLoc[mMod * 3 + aMod + bMod], yLoc[mMod * 3 + aMod + bMod]); c.lineTo(xLoc[mMod * 2 + aMod + bMod], yLoc[mMod * 2 + aMod + bMod]); c.fill(); } function draw() { prevA = a;prevB = b; c.clearRect(0,0,350,350); for (var i = 0; i <= 7; i++) { d = 2 * Math.floor(i /4) - 1; e = 2 * Math.floor((i % 4)/2 ) - 1; f = 2 * (i % 2) - 1; g = d * Math.cos(a) - e * Math.sin(a); e = d * Math.sin(a) + e * Math.cos(a); h = e * Math.cos(b) - f * Math.sin(b); f = e * Math.sin(b) + f * Math.cos(b); xLoc = 175+g * 100;
yLoc = 175+h * 100;
}
dSolid (0, 0, 1, 255, 255, 215);
dSolid (4, 0, 1, 255, 0, 0);
dSolid (0, 2, 1, 255, 0, 255);
dSolid (2, 2, 1, 0, 0, 255);
dSolid (0, 0, 2, 0, 255, 0);
dSolid (1, 0, 2, 0, 255, 255);
c.beginPath();
for (var i = 1; i <= 7; i=2*i-(i==4))
for (var j = 0; j <= 2; j++) {
powJ = Math.pow(2,j);
modI = i - (i % (2*powJ)) + ((i + powJ) % (2*powJ))
//c.moveTo(xLoc,yLoc);
//c.lineTo(xLoc[modI],yLoc[modI]);
}
//c.stroke(); //turn these three back on if you want the wireframe
}
/script
canvas id="canvas" width="350" height="350" Your browser does not support the canvas tag  /canvas
/body
/html
TAGS are all removed!!
|
|
|
|
Post by noobster on Dec 22, 2008 8:54:49 GMT
woops. here's the code in question. The one i posted was a rewrite by someone else who took it to the canvas. Twice as annoying efffect there. LOL <html> <head> <title>Rotating 3D Cube in JavaScript</title> <style type="text/css"> body{background:#000;color:#FF0;height:100%;margin:0;padding:0;width:100%;} b{position:absolute;} a{color:gold;} a:hover{color:#FF0;} address{bottom:10px;font-family:Georgia;font-style:normal;position:absolute;right:10px;text-align:right;} </style> </head> <body onmousemove="a = event.clientX / 99; b = event.clientY / 99;"> <script type="text/javascript"> /* I wrote this script in a few minutes just for fun. It's not made to win any competition. */ var dimension = 1, a = 0, b = 0, i = 27; while (i--) document.write('<b id="l' + i + '">+</b>'); function f() { i = 0; for (x = -dimension; x <= dimension; x += dimension) for (y = -dimension; y <= dimension; y += dimension) for (z = -dimension; z <= dimension; z += dimension) { u = x; v = y; w = z; u2 = u * Math.cos(a) - v * Math.sin(a); v2 = u * Math.sin(a) + v * Math.cos(a); w2 = w; u = u2; v = v2; w = w2; u2 = u; v2 = v * Math.cos(b) - w * Math.sin(b); w2 = v * Math.sin(b) + w * Math.cos(b); u = u2; v = v2; w = w2; var c = Math.round((w + 2) * 70); if (c < 0) c = 0; if (c > 255) c = 255; s = document.getElementById('l' + i).style; s.left = 300 + u * 50; s.top = 300 + v * 50; s.color = 'rgb(' + c + ', ' + c + ', 0)'; s.fontSize = (w + 2) * 16 + 'px'; /* The Digg users missed depth sort, so here it is. */ s.zIndex = Math.round((w + 2) * 10); i++; } } /* Using a timer instead of the onmousemove handler wastes CPU time but makes the animation much smoother. */ setInterval('f()', 17); </script> <address>© <a href="http://maettig.com/">Thiemo Mättig</a>, created in September 2007<br /> <a href="./">More JavaScript experiments »</a></address> </body> </html> |
|
/canvas