Trigonometria con Actionscript 3.0 esempio 5

[Flep]

Oggi torniamo alla trigonometria applicata ad Actionscript 3.0 .

In questo esempio disegno in runtime utilizzando seni e coseni.
Per chi non avesse ancora letto o studiato gli articoli nella sezione trigonometria: trigonometria e Flash CS3, consiglio di dargli uno sguardo in modo da avere le idee più chiare prima di vedere questo esempio.
Vediamolo...*

Creo un FLA, che salvo con nome ' trigonometria5.fla ' .
Creo la Document Class, un file AS che salvo con nome ' Trigo5.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	
	public class Trigo5 extends MovieClip
	{
		private var clips_array:Array;
		
		private var numclips_array:int=4;
		private var centerX:Number;
		private var centerY:Number;
		private const range:int=50;
		private var speed_0:Number=1;
		private var angle_0:Number=0;
		private var angle_1:Number=0;

		public function Trigo5()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			clips_array=new Array();
			
			centerX=stage.stageWidth-100;
			centerY=stage.stageHeight/2;
			
			createClips();
			initGraphics();
			
			addEventListener(Event.ENTER_FRAME,go);
		}
		
		private function createClips():void
		{
			for(var i:int=0;i < numclips_array;i++)
			{
				var clip:MovieClip=new MovieClip();
				clips_array.push(clip);
				addChild(clip);
			}
		}
		
		private function initGraphics():void
		{
			clips_array[0].graphics.moveTo(0,stage.stageHeight/2);
			clips_array[0].graphics.lineStyle(3,0xFFFFFF,100);
			clips_array[1].graphics.moveTo(0,stage.stageHeight/2);
			clips_array[1].graphics.lineStyle(3,0xFFFFFF,100);
			clips_array[2].graphics.moveTo(0,stage.stageHeight/2+50);
			clips_array[2].graphics.lineStyle(3,0xFFFFFF,100);
			clips_array[3].graphics.moveTo(0,stage.stageHeight/2-50);
			clips_array[3].graphics.lineStyle(3,0xFFFFFF,100);
		}
		
		private function go(evt:Event):void
		{
			clips_array[0].graphics.lineTo(speed_0,centerY+Math.sin(angle_0)*range);
			clips_array[1].graphics.lineTo(speed_0,centerY+Math.sin(angle_1)*range);
			clips_array[2].graphics.lineTo(speed_0,centerY+Math.cos(angle_0)*range);
			clips_array[3].graphics.lineTo(speed_0,centerY-Math.cos(angle_1)*range);
			angle_0+=.2;
			angle_1-=.2;
			speed_0+=2;
		}
	}
}

Risultato:

Analizziamo il codice

Proprietà
un Array in cui inserirò tutte le clip che creo
private var clips_array:Array;
una variabile che contiene il valore di quante clip voglio utilizzare
private var numclips_array:int=4;
due variabili alle quali assegnerò 2 valori fissi in base alle dimensioni dello stage
private var centerX:Number;
private var centerY:Number;
una costante che contiene un valore numerico utilizzato come sorta di raggio della circonferenza
private const range:int=50;
una variabile numerica che incrementerò e utilizzerò come velocità orizzontale del disegno
private var speed_0:Number=1;
due varibili numeriche a cui assengo il compito di essere gli angoli delle circonferenze
private var angle_0:Number=0;
private var angle_1:Number=0;

Metodi
init();
imposto una velocità di frame rate
stage.frameRate=31;
inizializzo l' Array
clips_array=new Array();
assegno un valore a centerX e centerY
centerX=stage.stageWidth-100;
centerY=stage.stageHeight/2;
chiamo il metodo createClips che crea le MovieClip
createClips();
chiamo il metodo initGraphics che inizializza le grafiche delle MovieClip appena create
initGraphics();
aggiungo un listener in ascolto dell' evento ENTER_FRAME che chiamerà il metodo go
addEventListener(Event.ENTER_FRAME,go);

createClips();
utilizzando un ciclo for con massima iterazione il valore contenuto nella variabile numClips, creo le movieClip, le aggiungo all' Array e allo stage
for(var i:int=0;i < numclips_array;i++)
{
var clip:MovieClip=new MovieClip();
clips_array.push(clip);
addChild(clip);
}

initGraphics();
inizializo le grafiche di ogni MovieClip su alcuni punti precisi ( poi vi invito a provare a cambiare qualche valore per vedere cosa succede in modo da capire meglio la logica di quei punti )
clips_array[0].graphics.moveTo(0,stage.stageHeight/2);
clips_array[0].graphics.lineStyle(3,0xFFFFFF,100);
clips_array[1].graphics.moveTo(0,stage.stageHeight/2);
clips_array[1].graphics.lineStyle(3,0xFFFFFF,100);
clips_array[2].graphics.moveTo(0,stage.stageHeight/2+50);
clips_array[2].graphics.lineStyle(3,0xFFFFFF,100);
clips_array[3].graphics.moveTo(0,stage.stageHeight/2-50);
clips_array[3].graphics.lineStyle(3,0xFFFFFF,100);

go();
quì siamo sotto intervallo ENTER_FRAME, per cui questo metodo viene chiamato continuamente tante volte al secondo pari al valore del frame rate impostato all' inizio nel metodo init.
Dico alla clip di disegnare alle coordnate che hanno come x il valore di speed_0 che incrementerò sempre e omogeneamente. Come y il valore del seno o coseno di uno dei due angoli ( angle_0, angle_1 ) moltiplicato per il valore di range ( se non moltiplicasi per range avrei solo i valori del seno o coseno dell' angolo che sappiamo che variano da -1 a 1 per cui non sarebbero percepibili ).
clips_array[0].graphics.lineTo(speed_0,centerY+Math.sin(angle_0) *range);
clips_array[1].graphics.lineTo(speed_0,centerY+Math.sin(angle_1) *range);
clips_array[2].graphics.lineTo(speed_0,centerY+Math.cos(angle_0) *range);
clips_array[3].graphics.lineTo(speed_0,centerY-Math.cos(angle_1)*range);
incremento il valore degli angoli
angle_0+=.2;
angle_1-=.2;
incremento la velocità
speed_0+=2;

Alla prossima !