Obra de arte

Antonio Roberto Testa · October 9, 2011

Senhores,

Descobri na internet o código abaixo, de autor desconhecido, que achei uma verdadeira obra de arte em termos de script. Trata-se de complexo modelo físico/matemático que simula uma mola (ou elastico), composto por qualquer figura gif, que segue o cursor mantendo as propriedades de massa, gravidade, velocidade, aceleração, etc.

O problema é que só funciona em Internet Explorer ! alguém se habilitaria em fazê-lo funcionar em Netscape Mozila e Chrome ?

Abraços,

Antonio Testa

---------------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Objetos voadores 2</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
</STYLE>
</HEAD>
<BODY>

<DIV id=dot0 
style="VISIBILITY: hidden; POSITION: absolute;"><IMG 
height=31 src="fig.gif" width=31></DIV>
<DIV id=dot1 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot2 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot3 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot4 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot5 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot6 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot7 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot8 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot9 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot10 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot11 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot12 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
&lt;script language=JavaScript> 

<!-- hide code

/*
script 
*/


// T
// Y

var nDots = 13;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
var Xpos = 0;
var Ypos = 0;

// parametros originais
// DELTAT = .01;
// SEGLEN = 10;
// SPRINGK = 10;
// MASS = 1;
// GRAVITY = 50;
// RESISTANCE = 10;
// STOPVEL = 0.1;
// STOPACC = 0.1;
// DOTSIZE = 11;


  // fixed time step, no relation to real time
var DELTAT = .01;
  // size of one spring in pixels
var SEGLEN = 10;
  // spring constant, stiffness of springs
var SPRINGK = 10;
  // all the physics is bogus, just picked stuff to
  // make it look okay
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
  // stopping criterea to prevent endless jittering
  // doesn't work when sitting on bottom since floor
  // doesn't push back so acceleration always as big
  // as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 32;
  // BOUNCE is percent of velocity retained when 
  // bouncing off a wall

var BOUNCE = 0.75;

var isNetscape = navigator.appName=="Netscape";

  // always on for now, could be played with to
  // let dots fall to botton, get thrown, etc.
var followmouse = true;

var dots = new Array();
init();

function init()
{
    var i = 0;
    for (i = 0; i < nDots; i++) {
        dots[i] = new dot(i);
    }
    
    if (!isNetscape) {
        // I only know how to read the locations of the 
        // <LI> items in IE
        //skip this for now
        //setInitPositions(dots)
        
    // set their positions
    for (i = 0; i < nDots; i++) {
        dots[i].obj.left = dots[i].X;
        dots[i].obj.top = dots[i].Y;
    }
}    
    
    if (isNetscape) {
        // start right away since they are positioned
        // at 0, 0
        startanimate();
    } else {
        // let dots sit there for a few seconds
        // since they're hiding on the real bullets
        setTimeout("startanimate()", 2000);
    }
}



function dot(i) 
{
    this.X = Xpos;
    this.Y = Ypos;
    this.dx = 0;
    this.dy = 0;
    if (isNetscape) {   
        this.obj = eval("document.dot" + i);
    } else {
        this.obj = eval("dot" + i + ".style");
    }
}


function startanimate() {       
    setInterval("animate()", 20);
}


// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
    // initialize dot positions to be on top 
    // of the bullets in the <ul>
    var startloc = document.all.tags("LI");
    var i = 0;
    for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
        dots[i+1].X = startloc[i].offsetLeft
            startloc[i].offsetParent.offsetLeft - DOTSIZE;
        dots[i+1].Y = startloc[i].offsetTop +
            startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
    }
    // put 0th dot above 1st (it is hidden)
    dots[0].X = dots[1].X;
    dots[0].Y = dots[1].Y - SEGLEN;
}

// just save mouse position for animate() to use
function MoveHandler(e)
{
    Xpos = e.pageX;
    Ypos = e.pageY;       
    return true;
}

// just save mouse position for animate() to use
function MoveHandlerIE() {
    Xpos = window.event.x + document.body.scrollLeft;
    Ypos = window.event.y + document.body.scrollTop;      
}

if (isNetscape) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onMouseMove = MoveHandler;
} else {
    document.onmousemove = MoveHandlerIE;
}


function vec(X, Y)
{
    this.X = X;
    this.Y = Y;
}

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
        var springF = SPRINGK * (len - SEGLEN);
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}


function animate() {    
    // dots[0] follows the mouse,
    // though no dot is drawn there
    var start = 0;
    if (followmouse) {
        dots[0].X = Xpos;
        dots[0].Y = Ypos;       
        start = 1;
    }
    
    for (i = start; i < nDots; i++ ) {
        
        var spring = new vec(0, 0);
        if (i > 0) {
            springForce(i-1, i, spring);
        }
        if (i < (nDots - 1)) {
            springForce(i+1, i, spring);
        }
        
        // air resisitance/friction
        var resist = new vec(-dots[i].dx * RESISTANCE,
            -dots[i].dy * RESISTANCE);
        
        // compute new accel, including gravity
        var accel = new vec((spring.X + resist.X)/ MASS,
            (spring.Y + resist.Y)/ MASS + GRAVITY);
        
        // compute new velocity
        dots[i].dx += (DELTAT * accel.X);
        dots[i].dy += (DELTAT * accel.Y);
        
        // stop dead so it doesn't jitter when nearly still
        if (Math.abs(dots[i].dx) < STOPVEL &&
            Math.abs(dots[i].dy) < STOPVEL &&
            Math.abs(accel.X) < STOPACC &&
            Math.abs(accel.Y) < STOPACC) {
            dots[i].dx = 0;
            dots[i].dy = 0;
        }
        
        // move to new position
        dots[i].X += dots[i].dx;
        dots[i].Y += dots[i].dy;
        
        // get size of window
        var height, width;
        if (isNetscape) {
            height = window.innerHeight + document.scrollTop;
            width = window.innerWidth + document.scrollLeft;
        } else {        
            height = document.body.clientHeight + document.body.scrollTop;
            width = document.body.clientWidth + document.body.scrollLeft;
        }
        
        // bounce of 3 walls (leave ceiling open)
        if (dots[i].Y >=  height - DOTSIZE - 1) {
            if (dots[i].dy > 0) {
                dots[i].dy = BOUNCE * -dots[i].dy;
            }
            dots[i].Y = height - DOTSIZE - 1;
        }
        if (dots[i].X >= width - DOTSIZE) {
            if (dots[i].dx > 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = width - DOTSIZE - 1;
        }
        if (dots[i].X < 0) {
            if (dots[i].dx < 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = 0;
        }
        
        // move img to new position
        dots[i].obj.left = dots[i].X;                   
        dots[i].obj.top =  dots[i].Y;           
    }
}

// end code hiding -->

</SCRIPT>
</BODY></HTML>

---------------------------------------------------------------------------------------------------------------

Edited October 11, 2011 by kuroi
Adicionar tag CODE

fiote · October 10, 2011

Qual o erro que dá no chrome/firefox?

Antonio Roberto Testa · October 11, 2011

Qual o erro que dá no chrome/firefox?

Dá erro: dots.obj is undefined (na penúltima linha do script), que contem o comando: dots.obj.left = dots.X;

Antonio Roberto Testa · October 15, 2011

Bem... aparentemente ninguém gostou do desafio de identificar o porque este script não roda em MozilaFirefox. Será que existe alguém que possa fazê-lo de forma remunerada ?

Antonio Roberto Testa · October 25, 2011

Será que alguém conhece algum tutorial / apostila que contenha todas as diferenças de JavaScript entre Mozila / IE / Chrome ??? Um documento desse tipo iria resolver a minha vida !!!!!

fiote · October 26, 2011

Qual seria a remuneração? =)

Antonio Roberto Testa · October 29, 2011

Oooo Fiote....

Eu não gosto de colocar preço em serviço alheio. Diga lá quanto custa para por o script para rodar nos três principais browsers.

Só não queira ficar rico com este trabalho, hein ?

fiote · October 30, 2011

Minha conta no paypal é paypal@fftonline.net. Deposite o quanto achar justo =)

Segue código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Objetos voadores 2</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
</STYLE>
</HEAD>
<BODY>

<DIV id=dot0 
style="VISIBILITY: hidden; POSITION: absolute;"><IMG 
height=31 src="fig.gif" width=31></DIV>
<DIV id=dot1 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot2 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot3 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot4 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot5 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot6 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot7 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot8 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot9 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot10 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot11 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>
<DIV id=dot12 style="POSITION: absolute;"><IMG height=31 
src="fig.gif" width=31></DIV>

<script language=JavaScript> 

<!-- hide code

/*
script 
*/


// T
// Y

var nDots = 13;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
var Xpos = 0;
var Ypos = 0;

// parametros originais
// DELTAT = .01;
// SEGLEN = 10;
// SPRINGK = 10;
// MASS = 1;
// GRAVITY = 50;
// RESISTANCE = 10;
// STOPVEL = 0.1;
// STOPACC = 0.1;
// DOTSIZE = 11;


  // fixed time step, no relation to real time
var DELTAT = .01;
  // size of one spring in pixels
var SEGLEN = 10;
  // spring constant, stiffness of springs
var SPRINGK = 10;
  // all the physics is bogus, just picked stuff to
  // make it look okay
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
  // stopping criterea to prevent endless jittering
  // doesn't work when sitting on bottom since floor
  // doesn't push back so acceleration always as big
  // as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 32;
  // BOUNCE is percent of velocity retained when 
  // bouncing off a wall

var BOUNCE = 0.75;

var isNetscape = navigator.appName=="Netscape";

  // always on for now, could be played with to
  // let dots fall to botton, get thrown, etc.
var followmouse = true;

var dots = new Array();
init();

function init()
{
    var i = 0;
    for (i = 0; i < nDots; i++) {
        dots[i] = new dot(i);
    }
    
    if (!isNetscape) {
        // I only know how to read the locations of the 
        // <LI> items in IE
        //skip this for now
        //setInitPositions(dots)
        
    // set their positions
    for (i = 0; i < nDots; i++) {
        dots[i].obj.left = dots[i].X;
        dots[i].obj.top = dots[i].Y;
    }
}    
    
    if (isNetscape) {
        // start right away since they are positioned
        // at 0, 0
        startanimate();
    } else {
        // let dots sit there for a few seconds
        // since they're hiding on the real bullets
        setTimeout("startanimate()", 2000);
    }
}



function dot(i) 
{
    this.X = Xpos;
    this.Y = Ypos;
    this.dx = 0;
    this.dy = 0;
    if (isNetscape) {   
        this.obj = document.getElementById("dot" + i);
    } else {
        this.obj = eval("dot" + i + ".style");
    }
}


function startanimate() {       
    setInterval("animate()", 20);
}


// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
    // initialize dot positions to be on top 
    // of the bullets in the <ul>
    var startloc = document.all.tags("LI");
    var i = 0;
    for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
        dots[i+1].X = startloc[i].offsetLeft
            startloc[i].offsetParent.offsetLeft - DOTSIZE;
        dots[i+1].Y = startloc[i].offsetTop +
            startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
    }
    // put 0th dot above 1st (it is hidden)
    dots[0].X = dots[1].X;
    dots[0].Y = dots[1].Y - SEGLEN;
}

// just save mouse position for animate() to use
function MoveHandler(e)
{
    Xpos = e.pageX;
    Ypos = e.pageY;       
    return true;
}

// just save mouse position for animate() to use
function MoveHandlerIE() {
    Xpos = window.event.x + document.body.scrollLeft;
    Ypos = window.event.y + document.body.scrollTop;      
}

if (isNetscape) {
    document.addEventListener("mousemove", MoveHandler);
} else {
    document.onmousemove = MoveHandlerIE;
}


function vec(X, Y)
{
    this.X = X;
    this.Y = Y;
}

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
        var springF = SPRINGK * (len - SEGLEN);
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}


function animate() {    
    // dots[0] follows the mouse,
    // though no dot is drawn there
    var start = 0;
    if (followmouse) {
        dots[0].X = Xpos;
        dots[0].Y = Ypos;       
        start = 1;
    }
    
    for (i = start; i < nDots; i++ ) {
        
        var spring = new vec(0, 0);
        if (i > 0) {
            springForce(i-1, i, spring);
        }
        if (i < (nDots - 1)) {
            springForce(i+1, i, spring);
        }
        
        // air resisitance/friction
        var resist = new vec(-dots[i].dx * RESISTANCE,
            -dots[i].dy * RESISTANCE);
        
        // compute new accel, including gravity
        var accel = new vec((spring.X + resist.X)/ MASS,
            (spring.Y + resist.Y)/ MASS + GRAVITY);
        
        // compute new velocity
        dots[i].dx += (DELTAT * accel.X);
        dots[i].dy += (DELTAT * accel.Y);
        
        // stop dead so it doesn't jitter when nearly still
        if (Math.abs(dots[i].dx) < STOPVEL &&
            Math.abs(dots[i].dy) < STOPVEL &&
            Math.abs(accel.X) < STOPACC &&
            Math.abs(accel.Y) < STOPACC) {
            dots[i].dx = 0;
            dots[i].dy = 0;
        }
        
        // move to new position
        dots[i].X += dots[i].dx;
        dots[i].Y += dots[i].dy;
        
        // get size of window
        var height, width;
        if (isNetscape) {
            height = window.innerHeight + document.scrollTop;
            width = window.innerWidth + document.scrollLeft;
        } else {        
            height = document.body.clientHeight + document.body.scrollTop;
            width = document.body.clientWidth + document.body.scrollLeft;
        }
        
        // bounce of 3 walls (leave ceiling open)
        if (dots[i].Y >=  height - DOTSIZE - 1) {
            if (dots[i].dy > 0) {
                dots[i].dy = BOUNCE * -dots[i].dy;
            }
            dots[i].Y = height - DOTSIZE - 1;
        }
        if (dots[i].X >= width - DOTSIZE) {
            if (dots[i].dx > 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = width - DOTSIZE - 1;
        }
        if (dots[i].X < 0) {
            if (dots[i].dx < 0) {
                dots[i].dx = BOUNCE * -dots[i].dx;
            }
            dots[i].X = 0;
        }
        
        // move img to new position
        if (isNetscape) {
            dots[i].obj.style.left = dots[i].X;                   
            dots[i].obj.style.top = dots[i].Y;                       
        } else {
            dots[i].obj.left = dots[i].X;                   
            dots[i].obj.top =  dots[i].Y;           
        }
    }
}

// end code hiding -->

</SCRIPT>
</BODY></HTML>

Antonio Roberto Testa · October 31, 2011

Quem sou eu para saber o que é justo para você ? Essa missão é impossível. Fala logo, meu ?

fiote · October 31, 2011

Antonio, eu não trabalho com isso. Programo por hobbie.

Você vai ganhar dinheiro por causa desse script? Se não, somos ambos amigos de hobbie e não há motivo para pagar.

Se for ganhar... quanto você DEIXARIA de ganhar se o script não funcionasse? Me dê 10% desse valor =P

Antonio Roberto Testa · November 1, 2011

Não vou ganhar nada com esse script.

Queria vê-lo funcionar apenas por curtição mas, acredite, se um dia por qualquer razão eu ganhar dinheiro com ele, vou separar para você não 10 mas sim 20%! Fechado ? Você acha necessário redigirmos um contratinho ?

fiote · November 1, 2011

Não, só guarde meu site ai na lista (ta na minha sign).

To procurando uns trabalhinhos leves na área de PHP/Javascript. Me recomende =P

Antonio Roberto Testa · November 3, 2011

Fechado. Disponibilize um curriculum que envio para meus amigos em diversas empresas. Tks.

Antonio Roberto Testa · November 18, 2011

E ai, meu caro "fiote", Desistiu ?

Sign In

Obra de arte

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Forum Statistics