João Gonçalves

Gerador de Árvores em AS3 / Tree Generator AS3 Code

Posted on 12. Fev, 2011 by João Gonçalves.

Ultimamente tenho estado a ler um livro que considero um dos melhores livros de Design e programação de 2010, FORM+CODE, de Casey Reas , Chandler Williams, e LUST. 

Se até à bem pouco tempo o “Código” era um domínio exclusivo de programadores, cada vez mais Designers, artistas, etc, iniciaram o seu percurso no dominio das linguagens de programação, criando novas frameworks de programação viradas para a Arte e o Design, como são o caso do Processing, criado por Casey Reas e Ben Fry, Open Frameworks, desenvolvido por Zach Lieberman, Theodore Watson, and Arturo Castro, ou até a framework HYPE de Joshua Davis e Branden Hall, para não falar em muitas outras. 

Este livro mostra claramente como tirar partido destas ferramentas para criar trabalhos artisiticos nas várias áreas do Design e Visualização de Dados, gaming, Inteligência artificial, etc…, utilizando qualquer linguagem de programação.

Como bem sabem pelo menos aqueles que me conhecem melhor, o meu mundo é quase todo ele ocupado pela dedicação à plataforma FLASH e mais concretamente ao Actionscript, nos últimos tempos e fruto do Mestrado em Multimédia que estou a frequentar, tenho me interessado sobremaneira a visualização de dados (tema do meu projecto de Mestrado), e ao ler o livro peguei nos exemplos de Processing e resolvi brincar traduzindo alguns deles em Actionscript , pelo que deixo aqui um exemplo de como é fácil criar formas visuais usando algoritmos de repetição com recursividade. 

Exemplo:

E o Código em As3 para os mais curiosos:

 actionscript3 | 
 copy code |
?
 
001
package 
002
{
003
 import flash.display.Sprite;
004
 import flash.events.Event;
005
 import flash.events.MouseEvent;
006
 import flash.text.TextField;
007
 import flash.text.TextFieldAutoSize;
008
 
009
 /**
010
  * ...
011
  * @author Joao Gonçalves
012
  * http://joaogoncalves.net
013
  * joao@joaogoncalves.net
014
  */
015
 
016
 [SWF(width='900', height='600', backgroundColor='#ffffff', framerate=1)]
017
 public class Main extends Sprite 
018
 {
019
 
020
 private var dotSize:Number = 9;
021
 private var angleOffsetA:Number;
022
 private var angleOffsetB:Number;
023
 
024
 private var instructions:TextField;
025
 
026
 
027
 public function Main():void 
028
 {
029
 if (stage) init();
030
 else addEventListener(Event.ADDED_TO_STAGE, init);
031
 }
032
 
033
 private function init(e:Event = null):void 
034
 {
035
 removeEventListener(Event.ADDED_TO_STAGE, init);
036
 // entry point
037
 
038
 instructions = new TextField();
039
 instructions.text = "Click to generate a Tree, Double-Click to clear the stage.";
040
 instructions.autoSize = TextFieldAutoSize.LEFT;
041
 addChild(instructions);
042
 
043
 angleOffsetA = degToRad(1.5);
044
 angleOffsetB = degToRad(50);
045
 
046
 stage.doubleClickEnabled = true;
047
 stage.addEventListener(MouseEvent.CLICK, generateThree);
048
 stage.addEventListener(MouseEvent.DOUBLE_CLICK, clearStage);			
049
 
050
 }
051
 
052
 private function clearStage(e:MouseEvent):void 
053
 {
054
 this.graphics.clear();
055
 }
056
 
057
 private function generateThree(e:MouseEvent):void 
058
 {
059
 //this.graphics.beginFill(Math.random()*0xffffff);
060
 seed1(dotSize, degToRad(270), mouseX, mouseY);
061
 }
062
 
063
 private function seed1(dotSize:Number, angle:Number, xpos:Number, ypos:Number):void
064
 {
065
 
066
 this.graphics.beginFill(Math.random()*0x0000bb);
067
 if (dotSize>1) 
068
 {
069
 // create random number between 0 and 1
070
 var r:Number = Math.random();
071
 
072
 // 98% chances this will happen
073
 if (r> 0.02) 
074
 {
075
 this.graphics.drawEllipse(xpos, ypos, dotSize, dotSize);
076
 var newX:Number = xpos + Math.cos(angle) * dotSize;
077
 var newY:Number = ypos + Math.sin(angle) * dotSize;
078
 seed1(dotSize * 0.99, angle- angleOffsetA, newX, newY);
079
 }
080
 // 2% chance this will happen
081
 else 
082
 {
083
 this.graphics.drawEllipse(xpos, ypos, dotSize, dotSize);
084
 var newX:Number = xpos + Math.cos(angle);
085
 var newY:Number = ypos + Math.sin(angle);
086
 seed2(dotSize * 0.99, angle + angleOffsetA, newX, newY);
087
 seed1(dotSize * 0.60, angle + angleOffsetB, newX, newY);
088
 seed2(dotSize * 0.50, angle-angleOffsetB, newX, newY);
089
 
090
 }
091
 }
092
 }
093
 
094
 private function seed2(dotSize:Number, angle:Number, xpos:Number, ypos:Number):void
095
 {
096
 if (dotSize>1) 
097
 {
098
 // create random number between 0 and 1
099
 var r:Number = Math.random();
100
 
101
 // 95% chances this will happen
102
 if (r> 0.05) 
103
 {
104
 this.graphics.drawEllipse(xpos, ypos, dotSize, dotSize);
105
 var newX:Number = xpos + Math.cos(angle) * dotSize;
106
 var newY:Number = ypos + Math.sin(angle) * dotSize;
107
 seed2(dotSize * 0.99, angle+ angleOffsetA, newX, newY);
108
 }
109
 // 5% chance this will happen
110
 else 
111
 {
112
 this.graphics.drawEllipse(xpos, ypos, dotSize, dotSize);
113
 var newX:Number = xpos + Math.cos(angle);
114
 var newY:Number = ypos + Math.sin(angle);
115
 seed1(dotSize * 0.99, angle + angleOffsetA, newX, newY);
116
 seed2(dotSize * 0.60, angle + angleOffsetB, newX, newY);
117
 seed1(dotSize * 0.50, angle-angleOffsetB, newX, newY);
118
 
119
 }
120
 }
121
 }
122
 
123
 
124
 private function degToRad(deg:Number):Number
125
 {
126
 return deg * (Math.PI / 180);
127
 }
128
 
129
 }
130
 
131
}

Continue Reading

somaUI – MVC Framework para FLASH

Posted on 27. Ago, 2009 by João Gonçalves.

Cada vez mais começam a aparecer projectos open-source no âmbito de desenvolvimento Web e RIA´s, nos ultimos dias foi lançada a versão beta da Framework somaUI, criada por Romuald Quantin.

a Soma Framework é uma framework  MVC de Actionscript 3.0 essencialmente virada para o desenvolvimento de sites em Flash , além de que integra a construção do site com recurso a XML e técnicas recentes de SWFAdrress e DeepLinking, de forma a tornar uma site usável e pesquisável pelos vários motores de busca.

A Framework vem acompanhada de uma Interface Gráfica onde é facilmente criado todo a estrutura do site incluindo a integração de conteúdos (imagens, textos, vídeos, etc…), cria automaticamente toda a estrutura de ficheiros do projecto criando inclusive os ficheiros de html, css´s, xml, etc…, sendo posteriormente podemos acrescentar facilmente a estrutura de classes criadas (uma por página), quaisquer elementos que queiramos inserir via actionscript.

para mais informações vejam o site da Framework : Soma Framework, podem ainda ver um video demonstrativo da framework :

Esta framework vem ao encontro de outras já existentes e com maior projecção como é o exemplo da GAIA Framework, da qual ja falei (http://www.joaogoncalves.net/blog/2008/06/23/gaia-framework-para-flash/) , e aproveito aqui também para dar realce a uma framework desenvolvida por uma minha ex-aluna a Cátia Rodrigues, que como projecto final do curso técnico profissional de Multimédia desenvolveu a framework LUNULATA com o mesmo propósito e que lhe valeu uma das melhores notas de sempre do curso assim como um lugar de destaque no meu Blog Roll de alunos brilhantes , vale a pena tambem analisar.

Esperemos que apareçam mais.

 

Continue Reading

Passar VO(Value Objects) com recurso a uma Class Event

Posted on 03. Abr, 2009 by João Gonçalves.

Durante as minhas aulas de Actionscript em ambiente de FLASH, por norma verifico que os formandos têm alguma dificuldade em utilizar algumas das “best practices” mais comuns nomeadamente em relação á criação de Eventos personalizados, no entanto, e assim que conseguem ultrapassar essa barreira, a primeira questão que me colocam é sempre a mesma:

“então e se eu quiser enviar dados pelo meu Event Object, por forma a ……”

Eis que surge então a necessidade de passar o conceito de VO (Value Object) e criação de Classes de Eventos personalizadas.

Como tive hoje que criar alguns ficheiros para exemplificação do Conceito de Classe de Evento Personalizada para envio de dados de uma instância para outra, resolvi partilhar convosco neste Blog os mesmos Ficheiros na esperança que venha ainda a ser útil para alguns dos meus leitores, ou ainda servir de ponto de consulta e esclarecimento de dúvidas para aqueles que durante as aulas não perceberam o conceito. Sendo Assim vamos começar por analisar o pequeno problema que se coloca, e que servirá de “Case Study” para a criação de uma Class de Evento personalizada e do conceito de VO.

PROBLEMA:

• Temos um form onde a pessoa regista o seu nome, idade e situação laboral, e ao clicar num botão registar, pretende-se acrescentar a uma lista (Texto) os dados da pessoa.

RESOLUÇÃO:

1. Criar uma Class PessoaVO, que irá servir para armazenar os dados da pessoa que forem inseridos no Form
2. Criar uma Class PessoaEvent, que será uma subclass da Class Event, e que servirá para enviar um “Event Object” que incluirá uma instância da Class PessoaVO, com os dados anteriormente adquiridos no Form.
3. A Aplicação principal estará á “escuta” da ocorrência do Evento PessoaEvent, e quando este for detectado, receberá pelo “Event Object” uma instância de PessoaVO com os dados da pessoa.
4. A Aplicação após receber os dados da pessoa insere e actualiza a TextArea com os registos das pessoas.

Mãos á obra, vamos começar por criar um ficheiro em FLASH, com um form com duas instâncias de TextInputs, para o nome e idade, uma instância de CheckBox para o estado laboral e um botão de registo, ao lado criar uma Textarea para ir acrescentando os Registos, ou seja, qualquer coisa deste género(desculpem mas a designer estava de folga, lol):Passo seguinte vamos criar a Class PessoaVO, que será uma classe Value Object, e por esse motivo terá somente propriedades, propriedades estas que servirão para guardar os dados do form de registo:

 actionscript | 
 copy code |
?
 
01
 
02
package {
03
 
04
     public class PessoaVO  {
05
 
06
        public var nome:String;
07
        public var idade:int;
08
        public var empregado:Boolean;
09
 
10
     }
11
 
12
}
13

Depois de criar a Class responsável pelo armazenamento e transporte dos dados do formulário vamos criar a Class PessoaEvent, que irá ser uma SubClass da Class Event:

 actionscript | 
 copy code |
?
 
01
 
02
package {
03
      import flash.events.Event;
04
      import PessoaVO;
05
 
06
      public class PessoaEvent extends Event {
07
 
08
           public static const PESSOA:String = "pessoa";		
09
           public var dadosPessoa:PessoaVO;
10
 
11
           public function PessoaEvent(type:String, voPessoa:PessoaVO) {
12
                super(type);
13
                this.dadosPessoa = voPessoa;
14
 
15
           }
16
 
17
             public override function clone():Event {
18
                 return new PessoaEvent(type, dadosPessoa);
19
             }
20
      }
21
}
22
 
23

Esta Class começa por fazer o “extends” da Class Event, na linha 9, criamos uma constante do tipo de String que irá identificar o “type” do nosso evento para usar depois como por exemplo usamos o CLICK num MouseEvent, na linha 10 criamos uma instância de PessoaVO, para guardar os dados do form e posteriormente enviar os mesmos pela instância de evento criada. O constructor da Class é bastante simples e terá como parâmetros o “tipo ” de evento criado, e a instância, neste caso, de PessoaVO. na linha seguinte (13), chamamos o constructor da Class “Pai” para passar o tipo de evento criado, aqui não se passa qualquer parâmetro extra pois a Class “Event” não contêm parâmetros adicionais. Na linha 14 atribuímos á instância da class “dadosPessoa” os valores recebidos no parâmetro voPessoaConstructor da Class. Por fim é necessário efectuar o overrride do método clone da class Event, de forma a que esta instância de evento tenha um comportamentos normal de um evento como o “Bubbling” por exemplo, nesta definição retornamos o event criando a instância do novo evento e passando os dados armazenados na instância da PessoaVO. do

Por fim criamos a Document Class do nosso ficheiro:

 actionscript | 
 copy code |
?
 
01
02
package {
03
      import flash.display.MovieClip;
04
       import flash.events.MouseEvent;
05
 
06
       public class MainEventPessoa extends MovieClip {
07
 
08
            public var pessoa:PessoaVO;
09
 
10
             public function MainEventPessoa() {
11
                       pessoa = new PessoaVO;
12
 
13
                       registarBtn.addEventListener(MouseEvent.CLICK, registar);
14
                       this.addEventListener(PessoaEvent.PESSOA, receberPessoa);
15
 
16
               }
17
 
18
                private function receberPessoa(e:PessoaEvent):void {
19
                       registosTa.appendText("\n------------------\n" +
20
                        "Nome: " + String(e.dadosPessoa.nome) + "\n" +
21
                        "Idade: " + String(e.dadosPessoa.idade) + "\n" +
22
                        "Nome: " + String(e.dadosPessoa.empregado) + "\n");
23
                 }
24
 
25
                 private function registar(e:MouseEvent):void {
26
                        pessoa.nome = nomeTi.text;
27
                        pessoa.idade = int(idadeTi.text);
28
                        pessoa.empregado = empregadoCb.selected;
29
 
30
                        dispatchEvent(new PessoaEvent("pessoa", pessoa));
31
                    }
32
 
33
             }
34
 
35
  }
36

Nesta Document Class, começamos por criar uma instância de PessoaVO, onde iremos atribuir os valores dos dados que irão ser preenchidos no FORM, na linha 13, definimos o evento click no botão registar que irá inicializar toda a sequência do script. o Listener do clicar em Registar vai associar os dados dos campos do form ás propriedades da instância de PEssoaVO (pessoa) linhas 26 a 28, na linha 30 “criamos” um evento do tipo PessoaEvent, onde iremos incluir nos parâmetros do constructor, o nosso PessoaVO com o nome “pessoa”. Na linha 14 a nossa Aplicação recebe o evento “PessoaEvent.PESSOA“, e chama o listener das linhas 18 a 22 que irá acrescentar(para os mais esquecidos deverão sempre usar o método appendText da Class TextField, e não o operador ” += ” para concatenar strings) á TextArea os dados que recebeu no “Evento Object” e que acedemos na propriedade “dadosPessoa” deste.

espero que este Post seja esclarecedor para muitos de vós, não hesitem em colocar questões ou sugestões para explicações futuras, deixo aqui tb um ficheiro zip com os ficheiros exemplificando o mini-tutorial.

Continue Reading

Realidade Aumentada em FLASH

Posted on 04. Fev, 2009 by João Gonçalves.

Quando falamos em realidade aumentada, referimo-nos a um sistema que combina elementos virtuais com elementos reais, criando interactividade entre ambos e com processamento em tempo real.

Actualmente o Japonês SAQOOSHA, desenvolveu uma Library em AS3, denominada por FLARToolKit, desenvolvida a partir de uma outra library de realidade aumentada desenvolvida em C, ARToolKit, oferecendo deste modo a capacidade aos developers de FLASH de criarem aplicações no âmbito da Realidade Aumentada, e que poderão ser aproveitadas nas mais diversas áreas, desde publicidade, engenharia, entretenimento, etc…

Sem dúvida uma grande mais valia, principalmente quando aliada as novas capacidades 3D do Flash Player 10, ou a outras frameworks como Papervision 3D.

Deixo aqui um vídeo demonstrativo, destas capacidades e daquilo que se poderá fazer no futuro em Realidade Aumentada, quanto a mim, espero que o curso que irei frequentar de Papervision 3D me comece a dar outras perspectivas de desenvolvimento de aplicações na Plataforma FLASH.

Continue Reading