Putting Stars and More into a Skybox (Source)

Introduction

A skybox is a simple device. Just a large low polygon cube that you put six panoramic images on-one for each side of the cube. Putting particles in the sky box adds a new dimension of fun and interactivity. But Papervision’s ParticleMaterial class only has two particles-a circle and square. So I added some of my own;

Stars – bursts – wedges – gears – polys

Stars and More!

Below is a video on how I created this, demo site, source code download, background on its creation and source code swicth case that I added to Papervision’s ParticleMaterial class.

VIdeo Demo Code

YouTube:

Demo:

http://www.professionalpapervision.com/demos/web/skyboxstars/

Source: (SkyBoxandStars)

http://code.google.com/p/flex3cookbook1/downloads/list

Background

Recently, Seb Lee-Delisle did a skybox example in his presentation on Papervision3D Simplified-great presentation!

I downloaded his source code for the skybox and it didn’t work (probably because I was using a newer version of Papervision). So I rewrote it and added a few new features;

1. The planets now return when the cube gets too far out.

2. I added to the particle class. It now includes more than just square and circle particles. It has,

Stars – bursts – wedges – gears – polys

3. I got rid of the else if statements and added a switch case.

4. And I added multiple type planets to the skybox – starts – circles – burst. You can add more if you want.

You can catch Seb’s video and source code from his blog at

http://www.sebleedelisle.com/?p=263

I also encourage you to donate to Seb’s cancer run if you use his (or this post) material. I did!

http://www.sebleedelisle.com/?p=274

In my download, I included all the source code even the Papervision classes needed for the project to run.

ParticalMaterial Switch Case

The core replacement switch case that I wrote for Papervision’s ParticleMaterial class is given below;

switch(shape)

{

case SHAPE_SQUARE:

graphics.drawRect(renderrect.x, renderrect.y, renderrect.width, renderrect.height);

break;

case SHAPE_CIRCLE:

graphics.drawCircle(renderrect.x+renderrect.width/2, renderrect.y+renderrect.width/2, renderrect.width/2);

break;

case SHAPE_STAR:

var points:int=6;

var innerRadius:Number=renderrect.width/10;

var outerRadius:Number=renderrect.width*2;

var count:int = Math.abs(points);

if (count>=2)

{

// calculate distance between points

var step:Number = (Math.PI*2)/points;

var halfStep:Number = step/2;

// calculate starting angle in radians

var start:Number = (20/180)*Math.PI;

graphics.moveTo(renderrect.x+(Math.cos(start)*outerRadius), renderrect.y-(Math.sin(start)*outerRadius));

// draw lines

for (var i:int=1; i<=count; i++)

{

graphics.lineTo(renderrect.x+Math.cos(start+(step*i)-halfStep)*innerRadius,

renderrect.y-Math.sin(start+(step*i)-halfStep)*innerRadius);

graphics.lineTo(renderrect.x+Math.cos(start+(step*i))*outerRadius,

renderrect.y-Math.sin(start+(step*i))*outerRadius);

}

}

break;

case SHAPE_GEAR:

var gearPoints:int=5;

var ginnerRadius:Number=renderrect.width/2;

var gouterRadius:Number=renderrect.width;

var holeSides:int=4;

var holeRadius:Number=renderrect.width/4;

if (gearPoints>=2)

{

// calculate length of sides

var gearStep:Number = (Math.PI*2)/gearPoints;

var gearQtrStep:Number = gearStep/4;

// calculate starting angle in radians

var gearStart:Number = (20/180)*Math.PI;

graphics.moveTo(renderrect.x+(Math.cos(gearStart)*gouterRadius), renderrect.y-(Math.sin(gearStart)*gouterRadius));

// draw lines

for (var j:int=1; j<=gearPoints; j++)

{

graphics.lineTo(renderrect.x+Math.cos(gearStart+(gearStep*j)-(gearQtrStep*3))*ginnerRadius,

renderrect.y-Math.sin(gearStart+(gearStep*j)-(gearQtrStep*3))*ginnerRadius);

graphics.lineTo(renderrect.x+Math.cos(gearStart+(gearStep*j)-(gearQtrStep*2))*ginnerRadius,

renderrect.y-Math.sin(gearStart+(gearStep*j)-(gearQtrStep*2))*ginnerRadius);

graphics.lineTo(renderrect.x+Math.cos(gearStart+(gearStep*j)-gearQtrStep)*gouterRadius,

renderrect.y-Math.sin(gearStart+(gearStep*j)-gearQtrStep)*gouterRadius);

graphics.lineTo(renderrect.x+Math.cos(gearStart+(gearStep*j))*gouterRadius,

renderrect.y-Math.sin(gearStart+(gearStep*j))*gouterRadius);

}

if (holeSides>=2)

{

if(holeRadius == 0)

{

holeRadius = ginnerRadius/3;

}

gearStep = (Math.PI*2)/holeSides;

graphics.moveTo(renderrect.x+(Math.cos(gearStart)*holeRadius), renderrect.y-(Math.sin(gearStart)*holeRadius));

for (var k:int=1; k<=holeSides; k++)

{

graphics.lineTo(renderrect.x+Math.cos(gearStart+(gearStep*k))*holeRadius,

renderrect.y-Math.sin(gearStart+(gearStep*k))*holeRadius);

}

}

}

break;

case SHAPE_WEDGE:

// move into position

var arc:Number=40;

var radius:Number= renderrect.width*2;

var yRadius:Number= renderrect.width;

var wedgeStartAngle:Number=20;

graphics.moveTo(renderrect.x, renderrect.y);

// limit sweep to reasonable numbers

if (Math.abs(arc)>360)

{

arc = 360;

}

// Draw in a maximum of 45 degree segments. First we calculate how

// many segments are needed for our arc.

var segs:Number = Math.ceil(Math.abs(arc)/45);

// Now calculate the sweep of each segment.

var segAngle:Number = arc/segs;

// The math requires radians rather than degrees. To convert from degrees

// use the formula (degrees/180)*Math.PI to get radians.

var theta:Number =-(segAngle/180)*Math.PI;

// convert angle startAngle to radians

var angle:Number =-(wedgeStartAngle/180)*Math.PI;

// draw the curve in segments no larger than 45 degrees.

if (segs>0)

{

// draw a line from the center to the start of the curve

graphics.lineTo(renderrect.x+Math.cos(wedgeStartAngle/180*Math.PI)*radius,

renderrect.y+Math.sin(-wedgeStartAngle/180*Math.PI)*yRadius);

//draw curve segments

for (var m:int = 0; m<segs; m++)

{

angle += theta;

var angleMid:Number = angle-(theta/2);

graphics.curveTo(renderrect.x+Math.cos(angleMid)*(radius/Math.cos(theta/2)),

renderrect.y+Math.sin(angleMid)*(yRadius/Math.cos(theta/2)),

renderrect.x+Math.cos(angle)*radius, renderrect.y+Math.sin(angle)*yRadius);

}

//close the wedge by drawing a line to the center

graphics.lineTo(renderrect.x, renderrect.y);

}

break;

case SHAPE_POLY:

var polyPoints:int=7;

var myCount:int = Math.abs(polyPoints);

var polyAngle:Number=20;

var polyRadius:Number=renderrect.width;

if (myCount>=2)

{

// calculate span of sides

var polyStep:Number = (Math.PI*2)/polyPoints;

// calculate starting angle in radians

var polyStart:Number = (polyAngle/180)*Math.PI;

graphics.moveTo(renderrect.x+(Math.cos(polyStart)*polyRadius), renderrect.y-(Math.sin(polyStart)*polyRadius));

// draw the polygon

for (var n:int=1; n<=myCount; n++)

{

graphics.lineTo(renderrect.x+Math.cos(polyStart+(polyStep*n))*polyRadius,

renderrect.y-Math.sin(polyStart+(polyStep*n))*polyRadius);

}

}

break;

case SHAPE_BURST:

var binnerRadius:Number=renderrect.width/2;

var bouterRadius:Number=renderrect.width;

var bAngle:int=20;

var bPoints:int=7

if (bPoints >=2)

{

// calculate length of sides

var bStep:Number = (Math.PI*2)/bPoints;

var bHalfStep:Number = bStep/2;

var bQtrStep:Number = bStep/4;

// calculate starting angle in radians

var bStart:Number = (bAngle/180)*Math.PI;

graphics.moveTo(renderrect.x+(Math.cos(bStart)*bouterRadius), renderrect.y-(Math.sin(bStart)*bouterRadius));

// draw curves

for (var p:int=1; p<=bPoints; p++)

{

graphics.curveTo(renderrect.x+Math.cos(bStart+(bStep*p)-(bQtrStep*3))*(binnerRadius/Math.cos(bQtrStep)),

renderrect.y-Math.sin(bStart+(bStep*p)-(bQtrStep*3))*(binnerRadius/Math.cos(bQtrStep)),

renderrect.x+Math.cos(bStart+(bStep*p)-bHalfStep)*binnerRadius,

renderrect.y-Math.sin(bStart+(bStep*p)-bHalfStep)*binnerRadius);

graphics.curveTo(renderrect.x+Math.cos(bStart+(bStep*p)-bQtrStep)*(binnerRadius/Math.cos(bQtrStep)),

renderrect.y-Math.sin(bStart+(bStep*p)-bQtrStep)*(binnerRadius/Math.cos(bQtrStep)),

renderrect.x+Math.cos(bStart+(bStep*p))*bouterRadius,

renderrect.y-Math.sin(bStart+(bStep*p))*bouterRadius);

}

}

break;

default:

trace(“warning – Particle material has no valid shape.”);

break;

}