Browsing posts in: Portifólio

Projeto – Quadro Tetris – Debug

 

Comecei o projeto do Quadro Tetris e me deparei com um problema, como analisar o comportamento do jogo se eu não tenho os leds ainda?

Usar o Serial não daria muito certo, pois visualmente seria inviável, então pensei em uma solução mais bonita, fiz um programa básico em Adobe AIR, que lê a Serial e transcreve os dados para um grid, igual seria com os leds, renderizei em 3D um fundo para ficar mais agradável.

O Arduino faz todo o controle e envia para serial uma array de 121 caracteres, com as 120 informações dos led mais o nulo. Envia 0 se o led deve ficar apagado e 1 até 5 para falar qual cor o led acende.

O programa de ajuda foi feito em Adobe AIR utilizando um ANE chamado as3-arduino-connector , ele permite utilizar a Serial com o mesmo comportamento do Arduino.

Para ajudar no debug, coloquei um display lcd 20×4, um joystick e dois botões, resolvi concentrar todos os comandos no arduino para ficar mais rápido o desenvolvimento, posteriormente faço ele conversar com o celular.

Por enquanto o joystick irá mover as peças para os lados, o botão verde irá rotacionar a peça e o vermelho irá fazer a peça cair mais rápido.

Acho que com isso eu ganho em tempo e ainda fica uma coisa mais bonita de ser ver do que uma saída serial cheio de números.

 

Share

Usando eclipse como IDE para o Arduino

Continuando o projeto do Quadro Tetris, senti a necessidade de ter um ambiente de desenvolvimento melhor do que a IDE do arduino, que é bem limitada em recursos de edição do código.
Busquei por alternativas e achei várias, mas optei pelo eclipse com o plugin para arduino, já que sempre utilizei o eclipse para programar em Java os programas para o Lego Mindstorms NXT e também é a que utilizo para desenvolver para o Adobe AIR com o plugin FDT.
Escolhida a IDE, pesquisei como configurar da melhor forma, então abaixo vou resumir o que dever feito para poder sair desenvolvendo para o arduino com mais conforto.

Caso queira ver o vídeo que usei, CLIQUE AQUI, ele mostra o que baixar e instalar de forma mais didática. Esse vídeo foi feito pelo professor Villao do Patrulha Eureka. Tem também uma apresentação com links – AQUI.

Já vou assumir que você fez download e instalou o software do arduino para o seu sistema. Então resumindo você deve:

Fazer download do eclipse no site do projeto, eu baixei a versão 32 bits para manter a compatibilidade com meus projetos do NXT.

Link para o site

O plugin utiliza o CDT (Para programar em C/C++) no eclipse, dependendo do eclipse já vem junto, verifique em Help / About Eclipse se ele está listado como instalado, se não estiver, temos que instalar, para isso abra o eclipse e vá em Help / Install new software e coloque no primeiro campo o link de acordo com sua versão do Eclipse e clique em Add.

Link para as versões do CDT

Não irá aparecer a lista de itens para instalar até deselecionar o item Group Itens by Category , concorde com tudo e mande instalar.

Agora temos que instalar o Plugin do Arduino, chamado Jantje  - Para isso vá no eclipse e clique em Help / Install new software e coloque no primeiro campo o link  http://www.baeyens.it/eclipse/V2 e clique em Add. Aceite tudo e finalize a instalação.

No Eclipse vá em Window/Preferences/Arduino e coloque os paths para as pastas solicitadas.

Caso der a mensagem que falta o make.exe, faça o download do arquivo em ftp://ftp.equation.com/make/32/make.exe e coloque na pasta c:/Windows. Caso queira mais explicações sobre isso, assista esse Vídeo.

Vamos fazer duas modificações no Eclipse para ficar tudo certinho.

Primeiro vamos fazer o Eclipse salvar o projeto antes de dar o build, vá em Window/Preferences/ General -> Workspace and check Save automatically before build e deixe selecionado.

Segundo, vamos linkar a extensão do Arduino .ino com o C++:

Vá em Window/Preferences -> C/C++ -> file types Pressione new e adicione Pattern: *.ino e Type:  C++Source.

Bom com isso você já tem um ambiente bacana para desenvolver.

Share

Projeto – Quadro Tetris Bluetooth

tetris

 

Faz muito tempo que não posto nada aqui, andei meio preguiçoso esses tempos, mas resolvi deixar a preguiça de lado e comecei a pensar em um projeto para fazer em casa no tempo livre.

Eu queria um projeto que realmente gostasse de desenvolver, então tive a ideia de juntar várias coisas que me interessam no mesmo projeto , como games e Arduíno , aí veio a ideia de fazer o clássico jogo tetris, mas utilizando LEDs em um quadro de pendurar na parede, mas controlado por celular via bluetooth.

O projeto será acomodado em um quadro com uma moldura profunda e um grid 8 x 15 com LEDs RGB endereçáveis individualmente, são leds com chips WS2812b internos, existem também os com chip WS2811, são bem parecidos, mas endereçados de 3 em 3, então para esse projeto não serve, a parte física ficará mais ou menos igual a imagem de destaque do post, dentro estará um microcontrolador Arduíno Mega 2560 e um adaptador bluetooth para comunicação com o celular.

Toda a logica será gerenciada pelo Arduíno, ficando o celular apenas com a função de enviar comandos básicos para o Arduíno, como o de mover a peça ou girar.

Penso em colocar um vidro jateado sobre as baías dos LEDs, para destacar cada quadrado aceso.

Também estou avaliando a possibilidade de colocar sons e um motor de eixo torto para dar aquele efeito de explosão e sacolejo quando destrói uma linha, mas isso serão itens plus, caso dê vontade após o projeto finalizado.

Nos próximos posts pretendendo descrever cada fase do desenvolvimento, assim criando um diário, ou melhor, semanário do progresso do projeto .

Caso tenham alguma ideia bacana para o projeto, coloca ai nos comentários.

Até a próxima.
Share

Totem Interativo – Chillibeans

Esse trabalho nós da Immersive em parceria com a XFrame e APEK desenvolvemos um totem interativo 3D para a Chillibeans.

É um totem touchscreen de 70 polegadas na vertical, que foi instalado em uma loja da Chillibeans em São Paulo, nele o cliente consegue navegar e configurar 4 modelos de óculos.

Em cada modelo pode ser trocada a cor das hastes, das lentes, da frente e ainda escolher uma textura para ser aplicada na parte interna da haste, após configurado os óculos, o cliente pode tirar fotos e compartilhar no facebook,  enviar por email e realizar a compra, onde o software gera um pedido e o óculos é montado na hora, de acordo com o que foi estudado no 3D.

O aplicativo é alimentado por um banco de dados do estoque da loja, após a venda faz o update no banco para retirar o que foi vendido.

O cliente pode salvar os óculos que está criando para comparar com outros modelos que ele criou, tudo isso facilmente configurável.

Share

Demo Reel – 2009 – 2010

Fiz uma coletânea dos meus últimos trabalhos e coloquei em vídeo, ficou com 8:40 minutos, um pouco comprido mas não custa nada assistir né.

Share

Eventos AddEventListener e RemoveEventListener

Nessa vídeo aula tento demonstrar de forma simples como funciona o básico do sistema de eventos do actionscript 3, abordo apenas a adição e remoção de ouvintes de eventos (AddEventListener e RemoveEventListener), em um próximo vídeo falarei do disparo de eventos. Iremos colocar ação em um botão em actionscript 3.

Sempre que faço uma vídeo aula tento escrever um roteiro, mas dessa vez transcrevi a vídeo aula e vou colocar em modo texto também, para que preferir ler do que ver o vídeo.

TRANSCRIÇÃO

Entender o que é evento no actionscript 3 é muito importante, pois a maioria das classes que usamos responde utilizando os eventos.
Por exemplo, o click do mouse em um botão, o click é um evento que o botão sofre, o botão por sua vez avisa que foi clicado, o programa ouvindo esse grito reage de acordo com o que deve ser feito.
Existem diversos tipos de eventos, como finalização de um carregamento, mouse sobre um movieclip, redimensionamento da tela, etc…
Vou tentar explicar de uma forma simples, vamos imaginar um general e um soldado no campo de batalha, o soldado está na luta com um rádio enquanto o general está no comando no quartel, o soldado ficou incumbido de reportar para o general quando uma bomba explodir no campo de batalha.
Quando um bomba explode ele grita, explodiu uma bomba, o ato da bomba explodir é um evento, o soldado percebendo esse evento chama o general, agora se o general vai escutar esse chamado é outra coisa.
E no actionscript3 é igual, sempre que acontece um evento, ele é disparado, mas só é ouvido se esse evento for cadastrado para ser ouvido.
Voltando ao exemplo do soldado, ele está lá gritando quando as bombas explodem, ai o general vê que seu rádio está desligado, ele liga o rádio e diz, soldado agora estou te ouvindo.
Pronto agora sim, todos os eventos de explosão de bombas serão ouvidos pelo general, e quando o general escuta um grito do soldado ele ordena mais contra-atraques.
No actionscript3 quando é cadastrado um ouvinte de evento é preciso informar quem será ouvido, no nosso caso é o soldado, qual evento será ouvido, que é a explosão e qual função reagirá quando esse evento for ouvido, desempenhado pelo nosso general.
Vamos partir para o código, quando clicarmos no soldado ele vai dar o avisa da bomba que explodiu , primeiramente vamos criar a função que reagirá ao chamado.

import flash.events.Event;

function explodiuBomba(event:Event):void{
 mensagem.text = "explodiu uma bomba ";
}

Agora cadastramos o soldado para ser ouvido pelo general.

soldado1.addEventListener(MouseEvent.CLICK , bombaExplodiu);

Pronto , tem gente ouvindo, tem gente gritando e tem gente reagindo ao evento.
Tem eventos para tudo, abaixo tem alguns links para maior aprofundamento no assunto.
Vamos incrementar mais um pouco isso, imagina que temos 2 soldados no campo com essa mesma função de ouvir as explosões, podemos utilizar informações passadas pelo evento para saber qual foi o soldado que avisou, vamos também cadastrar o soldado2.

import flash.events.Event;
function explodiuBomba(event:Event):void{
 mensagem.text = "explodiu uma bomba - " + event.target.name;
}

soldado1.addEventListener(MouseEvent.CLICK , explodiuBomba);
soldado2.addEventListener(MouseEvent.CLICK , explodiuBomba);

Sempre que um evento acontece é passado um objeto com informações sobre o evento, como o nome de quem sofreu o evento, o tipo de evento e diversas outras informações.
Nesse caso nós pegamos o evento e extraímos o seu alvo, quem foi que sofreu o evento usando o target, e pegamos o seu nome com o name.
Em uma próxima vídeo aula vou falar como disparar um evento customizado, passando um objeto com as informações que quiser.
Mas beleza, você deve estar pensando e seu eu não quiser mais ouvir esse soldado gritando na minha orelha?
É fácil, basta parar de ouvi-lo.
Da mesma forma que cadastramos para ouvir nós podemos descadastrar.
Vamos fazer assim, clicando no general manda o soldado 2 ficar quieto.

function calarSoldado(event:Event):void{
 mensagem.text = "cala a boca soldado 2";
 soldado2.removeEventListener(MouseEvent.CLICK , explodiuBomba);
}
general.addEventListener(MouseEvent.CLICK , calarSoldado);

Pronto, agora não escutamos mais esse mala gritando e deixamos ele morrer no campo de batalha.
Bom era isso que eu queria falar, não deixe de dar uma olhada nos links que estão ai embaixo.
Até a próxima.

Download do .fla.

DOWNLOAD

Links úteis

Documentação da adobe em português sobre eventos – LINK

Share

Novo site da Hipno

Esta é a segunda versão do site da HIPNO que faço, espero que gostem.

Clique na imagem.

Share

Passeio virtual interativo 3D – Folhamatic

Esse é um passeio virtual interativo que fiz junto com o meu amigo Daniel Magri enquanto trabalhavamos na XFrame 3D, o cliente foi a Folhamatic sistemas, que desejava apresentar o seu novo prédio.

Foi modelado no 3D Studio Max e programado no Quest 3D, conta com 3 tipos de interações ( Mouse e taclado , passeio pré-programado e interatividade com Wiimote), foi modelado quase todas as partes do prédio, que diga-se de passagem é enorme e muito mais bonito ao vivo, mas acho que o resultado ficou bacana, confiram.

Share

Demo de visualização e configuração de carro

Esse aplicativo foi desenvolvido para demonstrar e configurar um veiculo, como todos os demos contém apenas algumas funcionalidades, como trocar rodas, abrir portas, trocar cor e navegar dentro do veiculo.
Foi utilizado o Quest 3D para a programação.



Share

Flash e Papervision 3D

Iniciei na área de interatividade trabalhando com o flash a alguns anos atrás, desde o flash 4,  sempre foi limitado a 2D, mas isso começou a mudar com a adobe inserindo algumas funcionalidades 3D no flash e também com bibliotecas auxiliares, como a Away 3D e Papervision 3D.

Em alguns de meus trabalhos utilizei o Papervision 3D, é uma boa biblioteca mas ainda com muitas coisas a serem corrigidas e aprimoradas, mas com uma gambiarra aqui e outra ali nos viramos muito bem com ela.

Sites que fiz com Papervision

Hipno T-Shirt

Clarus Digital

Segue alguns links sobre Papervision

http://blog.papervision3d.org/

http://www.madvertices.com/

http://www.papervision3d.org/docs/as3/

http://www.maximized.co.uk/tutorials/

e como 3D é tudo matemática..

Flash e Math

Share

Pages:12