João Gonçalves

Gerador de Árvores em AS3 / Tree Generator AS3 Code

Posted on 12. Fev, 2011 by João Gonçalves in INFOVIS, actionscript, flash, noticias, tutorial

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
}

Tags: actionscript, flash, INFOVIS