O foco principal do site é dado por uma personagem que carinhosamente a equipa de desenvolvimento a baptizou por “quim zé”. Este Boneco é animado com base no sistema de “inverse kinematics” disponível na versão CS4 e CS5 do Adobe Flash. “Inverse Kinematics” é um método animação de objectos ou conjunto de objectos relacionados entre eles através de uma estrutura articulada de ossos, tal e qual a um esqueleto.

Para criar uma posição o utilizador têm apenas de escolher se prefere o boneco voltado para frente, direita, de costas ou esquerda e depois arrastar as diversas partes do corpo até atingir o desejado. Para além destas configurações um sistema de gravidade permite definir posições aéreas onde o utilizador escolhe a que a altura o boneco deve estar do solo numa determinada posição.

Um sistema inteligente reproduz sequência de posições de forma graciosa, criando em tempo real a animação entre posições distintas.

Endereço: http://www.lipton.pt/letsdance/creator/

Um trabalho produzido pela VIEW
Design: David Carvalho
Programação Flash: Paulo Afonso / Jorge Varandas

Na web

Endereço: Jogos | Catálogo

No desenvolvimento do portal zippy.pt tive o prazer de dar o meu contributo desenvolvendo dois jogos e um catálogo electrónico.

Jogo Pisga-te

“Neste jogo tens de ser capaz de reagir com toda a atenção e velocidade. Não podes ser atingido pelas bolas que aparecem de todo os lados. Quanto mais tempo passar sem que te acertem, mais à frente ficarás na tabela dos resultados. Estás pronto? Pisga-te!”

Tecnicamente o desafio principal aconteceu quando nos primeiros testes o processamento aumentava progressivamente com a adição de novos elementos (as bolas e estrelas). O problema deste aumento de processamento foi identificado, era o método usado para o teste de colisões entre os objectos.
O flash player tem diversas formas para manipulação de colisões, entre elas existem os métodos mais vulgares como o hitTest e hitTestPoint da classe DisplayObject. Como são os mais usuais e directos, foram estes a primeira opção.
(DisplayObject: A classe base de qualquer objecto que possa ser exibido, trata de desde as funções mais básicas como o posicionamento x,y a outras avançadas)
Estes métodos começam a falhar quando precisamos do seu uso em grande escala, no caso deste jogo desta forma era efectuada uma verificação por cada objecto a cada instante de movimento da personagem principal.

No entanto, o flash player contêm outra forma de fazer os testes de colisão usando a class BitmapData. Agrupando os diferentes tipos de objectos (bolas, estrelas de crescimento, estrelas de encolhimento, estrelas de slowmotion), transformado-os num object bitmap, reduziu-se os testes de colisão a apenas 5 (um por cada tipo de objecto e um outro para ver a proximidade que afecta a expressão facial da personagem) independentemente do numero de objectos.
(BitmapData: A classe BitmapData permite trabalhar com os dados (pixeis) de um objeto Bitmap.

Jogo do Pop

“Neste jogo vais pôr à prova a tua rapidez e pontaria. Quantos pops irás fazer? É esse o desafio que temos para ti. Entra num espaço onde tens de acertar nas figuras que tentam passar por ti. És tu sozinho contra uma multidão colorida e traquina!”

Quando uma figura é clicada esta desaparece e as figuras próximas são repelidas para longe inversamente à sua proximidade e com o mesmo ângulo a que se encontram da figura clicada. Este pormenor foi resolvido usando distâncias e as funções matemáticas coseno e seno, que aliás, são correntemente usadas em programação interactiva.

Catálogo

Esta aplicação consiste em usar documentos digitais e aplicar o efeito de folhear como se fossem documentos físicos.

Na web

Endereço: http://www.alergias.com.pt

Um site desenvolvido por uma equipa dedicada onde tive o prazer de trabalhar. O meu papel foi o de programador. Vou destacar alguns pontos do meu trabalho neste projecto:

Parallax

Foi simulado o conhecido parallax, dividindo em 11 camadas distintas os objectos.
Estas camadas reagem à posição do rato sendo actualizado constantemente a posição nos xx's e ligeiramente nos yy's semrpe que existe um movimento do rato.
Os objectos não sofrem a actualização directa e instantânea, existe um easeOut de forma quando o rato pára os objectos ainda se movem um pouco suavizando a paragem.
Para dar um ar mais orgânico, as principais flores rodam no espaço 3D conforme a proximidade e posição do rato.

Explosões

As explosões são processadas em runtime.
Num primeiro passo são geradas as partículas a partir de um png. Esta tarefa lê pixel por pixel um png, descartando os pixeis com transparência superior a 80% (para efeitos de optimização CPU).
Demora perto de 10 segundos a processar em background. O processamento foi reduzido ao mínimo para deixar as restantes animações fluírem com graciosidade.
Após criadas todas as partículas (aproximadamente 11.000) existe um timer aleatório que inicia a explosão em uma das flores também esta escolhida aleatoriamente.

Clicar no flash acima para ver a explosão (esta é uma versão de testes não optimizada).

Vapor

O Vapor do spray é gerado e processado em runtime usando essencialmente o perlin noise, blur e outros pormenores.

Dente de leão

Os pára-quedas são colocados em ovais criando o dente-de-leão.
Com a iteração do utilizador ou automaticamente são "disparados" e oportunamente, para que o dente-de-leão não fique totalmente "careca", voltam a nascer.

Optimizações

Para optimização de CPU foi necessário assinalar as animações intensivas e consequentemente impedir que ocorressem em simultâneo.

A titulo de exemplo temos o caso mais visível: suspender o parallax quando ocorre uma explosão.
Claro que antes desta decisão houve um trabalho árduo de revisão em todas as animações de modo a ocuparem o menos processador possível.

Indexação (seo)

O site está optimizado para ser devidamente indexado, (http://www.google.pt/webhp?#q=site%3Aalergias.com.pt). Em resumo foi criada uma simulação de um site html para que os "web spiders" funcionassem. Infelizmente ainda existe muita dificuldade em indexar sites inteiramente em flash.

Vídeo de demonstração do site a funcionar

Um trabalho VIEW.
O designer do projecto é o Daniel Teixeira
Com direcção criativa de Carlos Guedes
Som por Jean Pierre Dos Santos
A programação ficou a meu cargo, Paulo Afonso.

Quando se fala em trigonometria geralmente é associada por grande parte a um "bicho daqueles maus" com cosenos, senos e mais um monte de fórmulas.
A verdade é que nos mais variados problemas é constante termos que aliar o actionscript com este ramo da matemática. É um dos assuntos que um programador/animador deve dominar.

- PI:

É um numero irracional, eu normalmente uso apenas a aproximação com duas casas decimais 3,14. O record actualmente do numero mais aproximado é de Fabrice Bellard — um programador, claro!

Mas o que é visualmente este valor PI?

Importa saber que se fizermos um circulo perfeito com um raio de 1 unidade usando por exemplo uma corda, se esticarmos essa corda numa linha recta vamos ver que ela mede 2*PI. Portanto, metade da corda mede PI — um valor aproximado a 3.14159 26535 89793 23846 26433 83279 50288 4197 .... unidades! É a mesma coisa que dizer que o raio cabe PI vezes no arco de meia circunferência (um arco de circunferência de 180 graus).

- Está bem, pronto.. já gravei o que é o PI e agora o que faço com ele?

As funções Math.cos, Math.sin e outras no actionscript aceitam como parâmetro uma variável em radianos, esta variável indicam uma amplitude, um ponto especifico do nosso circulo.

A definição de Radiano

"O ângulo definido no centro de um círculo por um arco de circunferência com o mesmo comprimento que o raio do círculo é 1 radiano"
Ou seja, dizer que o raio do circulo "cabe" n vezes numa determinada parte do arco pode-se simplificar e dizer simplesmente que essa parte mede "n" radianos

Num sistema de coordenadas no plano cartesiano centrando um circulo com uma unidade de raio, fixa-se o ponto (a) mais à direita do circulo e mede-se o arco em sentido contrário ao sentido dos ponteiros do relógio obtendo um segundo ponto (b);
- a medida do arco entre os dois pontos "n radianos" (a verde), corresponde o parâmetro que usamos no coseno e no seno (entre outras funções do actionscript).

Seno

- traça-se uma recta paralela ao eixo dos xx's que passa pelo ponto b e vai interceptar o eixo dos yy's obtendo o valor do seno para "n radianos" (a laranja)

Coseno

- traça-se uma recta paralela ao eixo dos yy's que passa pelo ponto b e que vai interceptar o eixo dos xx's obtendo o valor do coseno para "n radianos" (a azul)

Isto é a parte chata da coisa, mas é o suficiente para fazermos milhares e milhares de cenas espectaculares :D.

Problema 1:

- Desenhar os pontos referentes às horas de um relógio analógico com raio de 80 pixeis e centro no ponto (200,122)

Resposta:

Sabemos que um circulo tem um arco de 2*PI, queremos dividir em 12 partes, portanto vamos ter 2*PI/12 como a medida de cada arco.
A partir daqui podemos passar estes arcos para coordenadas x,y usando o coseno e o seno.
Como queremos um raio maior que uma unidade temos que multiplicar os valores obtidos pelo novo raio desejado.

var arco_hora:Number=Math.PI*2/12;// simplificando Math.pi/6
var raio:Number=80;//raio do nosso relogio
this.graphics.lineStyle(4,0xff0000);//vamos por os pontos vermelhos
for (var i:int=0;i<12;i++)
{
var posx:Number=Math.cos(arco_hora*i)*raio;
var posy:Number=Math.sin(arco_hora*i)*raio;
this.graphics.drawCircle(posx,posy,4);
}

Ok, mas isto ficou no ponto (0,0), agora é necessário fazer uma translação para a posição final.

var arco_hora:Number=Math.PI*2/12;// simplificando Math.pi/6
var raio:Number=80;//raio do nosso relogio
var centro:Point=new Point(200,122);//posição central do relógio
this.graphics.lineStyle(4,0xff0000);//vamos por os pontos vermelhos
for (var i:int=0;i<12;i++)
{
var posx:Number=Math.cos(arco_hora*i)*raio+centro.x;
var posy:Number=Math.sin(arco_hora*i)*raio+centro.y;
this.graphics.drawCircle(posx,posy,4);
}


Desafio:

- Desenhar os ponteiros
Assim por alto podemos por um TIMER de 1000 e no evento TimerEvent.TIMER obtemos a hora e actualizamos os ponteiros.
Os ponteiros podem ser desenhados com

graphics.lineStyle(4,0xff0000);
graphics.moveTo(centro.x, centro.y);
graphics.lineTo(posx, posy);


Cuidados:

O coseno e seno são funções pesadas, o processador queixa-se se quando os usamos intensamente como por exemplo em sistemas de partículas.
Por isso uma leitura a este post do Michael Baczynski é recomendada.

"A View foi escolhida para ajudar a TIMEX a recuperar o lugar que é seu por herança sentimental – e começamos por garantir que qualquer habitante deste planeta, desde que tenha ligação à Internet, pode colocar no seu pulso o relógio TIMEX da sua preferência e usá-lo o tempo que quiser sem pagar absolutamente nada."
@newsletter VIEW dez/2009

Endereço: http://www.esta-na-hora-timex.com/

Este site usa realidade aumentada permitindo visualizar os diversos relógios no pulso do visitante. Para que isto seja possível é necessário que o visitante tenha uma webcam e imprima uma pulseira que deverá colocar no pulso.

Oportunamente colocarei aqui um vídeo de demonstração do site/aplicação a funcionar para quem não tiver oportunidade de experimentar.

Um trabalho VIEW.
O designer do projecto é o Carlos Guedes
Flash: Paulo Afonso (eu :D)