Giuseppe Arcimboldo meets Math Smith -sqn

Mas que Magia negra é essa que está acontecendo aqui? Simples, Javascript! Quando me foi passado a tarefa de fazer uma montagem estilo Giuseppe Arcimboldo com os elementos dessa imagem:

Logo percebi o que era suposto de ser a maioria dos elementos, porém ao ver o macarrãozinho ali eu logo pensei "Bow ties are cool", portanto decidi fazer algo parecido com o Matt Smith, até porque essa folha, que supostamente seria para se fazer sobrancelhas me lembrou o cabelo dele e essa fruta cítrica vermelha me lembrou o Fez e já que eu estava usando esses elementos que poderiam servir de sobrancelhas, o que seriam as sobrancelhas? nada o Matt Smith quase não as tem.

Mas por que capirotos, ele mexe o olho?
Simples também: Quando eu estava posicionando a BlueBerry/Mirtilo/Whatever, eu pensei nas camadas e em como eu gostaria que ele ficasse olhando para o cursor, então eu salvei o trabalho e o fiz 3 imagens: Uma completa, uma faltando a Íris/BlueBerry/Mirtilo/Whatever e outra só com esse elemento. Por que eu fiz uma imagem estática completa? Para quando alguém tentar salvar, ter uma imagem completa ao invés da imagem dele com o olho vazio. E como eu fiz isso? Bom, eu subi as 3 imagens pra postagem e passei pro modo mais legal da edição do blogger: HTML. A partir daí eu pude modificar as propriedades da imagem, fazendo com que a imagem completa ficasse invisível adicionando a propriedade style="filter: alpha(opacity=0); opacity: 0.0;" e a imagem com o olho vazado por detrás dessa style="margin-left: -270px;" sendo 270px a largura da imagem, assim a pessoa vê a imagem sem ponto azul, porém quando clica com o botão direito para salvar, na verdade o faz na imagem completa.

Tá bom, mas como foi feito o olho se mexer!?
Finalmente chegamos ao clímax da postagem, como o olho se mexe e "segue" o cursor. Como eu comentei anteriormente, eu me utilizei de JavaScript, colocado "in line" no HTML da postagem. O código foi basicamente "inspirado" nesse aqui, o qual eu modifiquei para que ao invés de imprimir os valores em tabelas de um formulário, modificasse os atributos de margem top e left da imagem daquele ponto azul usando um cálculo para que ficasse apenas dentro da cenoura, ou seja, dividi por 100 e adicionei a distância entre as margens da imagem ao lugar onde fica a orbita do olho dele.

E é só isso!!???
Nope! Esse é apenas o jeito mais preguiçoso de fazê-lo e o Blogger ainda ajudou um pouco com sua estrutura, afinal se vocês ararem pra perceber, se o cursor está no meio da tela, ele olha diretamente pra frente e não pra direita, mas pra isso eu teria que pegar a posição da imagem na tela e então fazer um cálculo de geometria analítica para rastrear a posição que o olho deveria estar em relação ao cursor para criar um efeito realista, ou seja, pegar as coordenadas do centro da rodela de cenoura e traçar uma linha reta em direção ao cursor e colocar a íris nessa reta em uma posição diretamente proporcional a distância com as margens da tela e o raio da rodela e para isso eu também teria que me utilizar de variáveis de tamanho da tela para que fique tudo proporcional ao invés de simplesmente pegar em pixels.

E por que não fizeste isso?
Porque não precisava. A tarefa era apenas fazer uma imagem, e eu a fiz e quis adicionar uns defeitos especiais e para tal, a maneira que foi implementado funciona bem, principalmente se a tela não for quadrada.