In this exercise, we will explore how to track mouse position in Flash, and also how to use random values. For this, we will crate an example based on drawing successive lines from the cursor position to a random point on the stage.

1. First, some words on random numbers. Until recently, computers haven’t been able to calculate true random numbers, and Flash is not an exception. Computer generated random numbers are often called “pseudo random” numbers. Quoting Wikipedia:

Several computational methods for random number generation exist, but often fall short of the goal of true randomness — though they may meet, with varying success, some of the statistical tests for randomness intended to measure how unpredictable their results are (that is, to what degree their patterns are discernible). Only in 2010 was the first truly random computational number generator produced, recurring to principles of quantum physics.

The uses for computer generated random numbers might involve: applications in gambling, statistical sampling, computer simulation, cryptography, completely randomized design, and other areas where producing an unpredictable result is desirable. (from: http://en.wikipedia.org/wiki/Random_number_generation)

In Flash, random calculation is part of the Math class, and is obtained through the Math.random() method. Math.random() returns a pseudo-random floating point number between 0 and 1. Usually arithmetic operation are used in conjunction with Math.random() to obtain the desired result. For example, if we want to position an object in a random position of the horizontal axis of the stage, we might want to multiply Math.random() by stage.stageWidth.

Finally, to track mouse position, we should use properties mouseX and mouseY.

2. Let’s set up our exercise. I will begin by creating a shape to contain all our graphics, and then draw a black rectangle, with the size of the stage, as background:

`var myShape:Shape = new Shape();`

stage.addChild(myShape);

myShape.graphics.beginFill(0x000000);

myShape.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight)

3. I would like to draw lines with random colors, but within a certain color palette I predefine. For that, I will create an array of color values:

`var colors:Array = new Array();`

colors[0]=0x666600;

colors[1]=0x3200FF;

colors[2]=0x999999;

colors[3]=0xCC33CC;

colors[4]=0x99CC00;

4. Now let’s create a “drawLines” function, which will be triggered by an Event.ENTER_FRAME listener. Since the function will include different steps, I will brake it into different steps.

4.1 First, let’s create our listener and start our function:

`stage.addEventListener(Event.ENTER_FRAME,drawLines);`

function drawLines(e:Event):void{

4.2 Now, still within the function, let’s obtain a random color from my color palette. For that, we need to obtain a random index, from 0 up to the number of colors we have (5, the arrray length) minus 1 (that is 4, the index of our last color). To obtain this random number, we can multiply Math.random() by (array.length-1). Let’s store this number in a variable called randomColor, and typecast it as “int”, so that the floating point number generated by our calculation is rounded to an integer. The resulting line of code is:

`var randomColor:int = Math.random()*(colors.length-1);`

4.3 Next, let’s generate 2 more random numbers, for defining the ending point of our line. This point will have a random position in the screen (obtainable by multiplying Math.random() by stage.stageWidth or stage.stageHeight). We will store these numbers in two numerical variables: endX and endY. This would be the code (still inside the function):

` var endX:Number = Math.random()*stage.stageWidth;`

var endY:Number = Math.random()*stage.stageHeight;

4.4 To define the starting point of our line, we will use the graphics.moveTo() method, and move the starting point to the position of the mouse, using mouseX and mouseY (remember, still inside the function):

` myShape.graphics.moveTo(mouseX,mouseY);`

4.5 Now, we will define the style of the line. Let’s use 1 pixel thickness, and as color let’s use our random color index and thus obtain the final color from the array (color[randomColor]):

` myShape.graphics.lineStyle(1,colors[randomColor]);`

4.6 The last line of our function will actually draw the line, to coordinates (endX,endY):

` myShape.graphics.lineTo(endX,endY);`

4.7 And let’s not forget to close the function:

}

4.8 The whole function will look like this:

`function drawLines(e:Event):void{`

var randomColor:int = Math.random()*(colors.length-1);

var endX:Number = Math.random()*stage.stageWidth;

var endY:Number = Math.random()*stage.stageHeight;

myShape.graphics.moveTo(mouseX,mouseY);

myShape.graphics.lineStyle(1,colors[randomColor]);

myShape.graphics.lineTo(endX,endY);

}

5. The whole code will look like this:

`var myShape:Shape = new Shape();`

stage.addChild(myShape);

myShape.graphics.beginFill(0x000000);

myShape.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight)

`var colors:Array = new Array();`

colors[0]=0x666600;

colors[1]=0x3200FF;

colors[2]=0x999999;

colors[3]=0xCC33CC;

colors[4]=0x99CC00;

`stage.addEventListener(Event.ENTER_FRAME,drawLines);`

function drawLines(e:Event):void{

var randomColor:int = Math.random()*(colors.length-1);

var endX:Number = Math.random()*stage.stageWidth;

var endY:Number = Math.random()*stage.stageHeight;

myShape.graphics.moveTo(mouseX,mouseY);

myShape.graphics.lineStyle(1,colors[randomColor]);

myShape.graphics.lineTo(endX,endY);

}

And one possible image out of this system:

Download files: ex12-random_mouse_lines.zip

Pingback: Flash and ActionScript | Software Studies for Media Designers