Lightfeather
05-06-2012, 11:53 AM
I had no idea what to title this but I found this snip of code years and years ago, modified it a little and put it on the front page of my site. It's been there forever and I sort of forgot about it since it's just a goofy little personal website that I fart around with whenever the mood strikes me. However, I noticed that the code doesn't function properly in Chrome. It still works in IE but I've been using chrome for a while and don't like how it's behaving. =(
I went to the authors website but it seems to be as depreciated as this code and I doubt I'd get a response from him so I guess I'm here asking if there's an easy way to tweak this into compliance or if there is something out there that does the same thing as this:
<script language="javascript">
// all code copyright jeff heuer 1999, 2000
// please give me credit if you use this code
// jeff@deconstructor.com
var displaying = rotating = momentum = 0;
var lasty, lastx, dy, dx, my, mx;
var x = new Array();
var y = new Array();
var z = new Array();
l = new Array("…","…","♥","♥","♥","♥","•","L","I","G","H","T","F","E","A","T","H","E","R","•","N","E","T","•","♥","♥","♥","♥","…","…");
function init() {
for (i = 0; i < l.length; i++) {
z[i] = Math.sin(i*.524 - 2.6) * 50;
y[i] = Math.cos(i*.524 - 2.6) * 50;
x[i] = (l.length * 5) - (i * 10);
}
setup();
display();
window.setInterval("rotate();", 20)
document.onmousedown = down;
document.onmousemove = move;
document.onmouseup = up;
}
function setup() {
for (i = 0; i < l.length; i++) {
document.body.insertAdjacentHTML("AfterBegin", "<div id=\"pt" + i + "\" style=\"position: absolute;\">" + l[i % l.length] + "</div>");
}
displaying = 1;
}
function down() {
rotating = 1;
dy = dx = momentum = 0;
}
function move(evt) {
dy = lasty - window.event.clientY;
dx = lastx - window.event.clientX;
lasty = window.event.clientY;
lastx = window.event.clientX;
return false;
}
function up() {
rotating = 0;
momentum = 1;
}
function rotate() {
if (rotating) {
transform(dy, dx);
my = dy;
mx = dx;
} else if (momentum) {
my *= 0.95;
mx *= 0.95;
transform(my, mx);
}
dy = dx = 0;
display();
}
function transform(dx, dy) {
dx *= .0175;
dy *= .0175;
for (i = 0; i < x.length; i++) {
dys = Math.sin(dy);
dyc = Math.cos(dy);
dxs = Math.sin(dx);
dxc = Math.cos(dx);
ztemp = z[i] * dyc - x[i] * dys;
x[i] = z[i] * dys + x[i] * dyc;
z[i] = y[i] * dxs + ztemp * dxc;
y[i] = y[i] * dxc - ztemp * dxs;
}
}
function display() {
if (displaying) {
for (i = 0; i < x.length; i++) {
scalar = (1.2 / ((z[i] * 1.2)/500 + 1));
xp = x[i] * scalar;
yp = y[i] * scalar;
tempid = document.all.tags("DIV")[i].id;
eval(tempid + ".style.pixelTop = " + document.body.clientHeight/2 + " - yp");
eval(tempid + ".style.pixelLeft = " + document.body.clientWidth/2 + " + xp");
if (scalar < 0.95) {
color = "#cccccc";
} else if (scalar < 1.2) {
color = "#999999";
} else if (scalar < 1.05) {
color = "#666666";
} else {
color = "#333333";
}
eval(tempid + ".style.color = \"" + color + "\"");
eval(tempid + ".style.fontSize = " + (12+(scalar-1)/.035));
}
}
}
</script>
Example at www.lightfeather.net
I went to the authors website but it seems to be as depreciated as this code and I doubt I'd get a response from him so I guess I'm here asking if there's an easy way to tweak this into compliance or if there is something out there that does the same thing as this:
<script language="javascript">
// all code copyright jeff heuer 1999, 2000
// please give me credit if you use this code
// jeff@deconstructor.com
var displaying = rotating = momentum = 0;
var lasty, lastx, dy, dx, my, mx;
var x = new Array();
var y = new Array();
var z = new Array();
l = new Array("…","…","♥","♥","♥","♥","•","L","I","G","H","T","F","E","A","T","H","E","R","•","N","E","T","•","♥","♥","♥","♥","…","…");
function init() {
for (i = 0; i < l.length; i++) {
z[i] = Math.sin(i*.524 - 2.6) * 50;
y[i] = Math.cos(i*.524 - 2.6) * 50;
x[i] = (l.length * 5) - (i * 10);
}
setup();
display();
window.setInterval("rotate();", 20)
document.onmousedown = down;
document.onmousemove = move;
document.onmouseup = up;
}
function setup() {
for (i = 0; i < l.length; i++) {
document.body.insertAdjacentHTML("AfterBegin", "<div id=\"pt" + i + "\" style=\"position: absolute;\">" + l[i % l.length] + "</div>");
}
displaying = 1;
}
function down() {
rotating = 1;
dy = dx = momentum = 0;
}
function move(evt) {
dy = lasty - window.event.clientY;
dx = lastx - window.event.clientX;
lasty = window.event.clientY;
lastx = window.event.clientX;
return false;
}
function up() {
rotating = 0;
momentum = 1;
}
function rotate() {
if (rotating) {
transform(dy, dx);
my = dy;
mx = dx;
} else if (momentum) {
my *= 0.95;
mx *= 0.95;
transform(my, mx);
}
dy = dx = 0;
display();
}
function transform(dx, dy) {
dx *= .0175;
dy *= .0175;
for (i = 0; i < x.length; i++) {
dys = Math.sin(dy);
dyc = Math.cos(dy);
dxs = Math.sin(dx);
dxc = Math.cos(dx);
ztemp = z[i] * dyc - x[i] * dys;
x[i] = z[i] * dys + x[i] * dyc;
z[i] = y[i] * dxs + ztemp * dxc;
y[i] = y[i] * dxc - ztemp * dxs;
}
}
function display() {
if (displaying) {
for (i = 0; i < x.length; i++) {
scalar = (1.2 / ((z[i] * 1.2)/500 + 1));
xp = x[i] * scalar;
yp = y[i] * scalar;
tempid = document.all.tags("DIV")[i].id;
eval(tempid + ".style.pixelTop = " + document.body.clientHeight/2 + " - yp");
eval(tempid + ".style.pixelLeft = " + document.body.clientWidth/2 + " + xp");
if (scalar < 0.95) {
color = "#cccccc";
} else if (scalar < 1.2) {
color = "#999999";
} else if (scalar < 1.05) {
color = "#666666";
} else {
color = "#333333";
}
eval(tempid + ".style.color = \"" + color + "\"");
eval(tempid + ".style.fontSize = " + (12+(scalar-1)/.035));
}
}
}
</script>
Example at www.lightfeather.net