# Help! Cant make this cube work!

**URL:** <https://forum.kirupa.com/t/help-cant-make-this-cube-work/207456>\
**Category:** flash\
**Created:** [November 17, 2006, 7:08pm UTC](https://forum.kirupa.com/t/help-cant-make-this-cube-work/207456 "2006-11-17T19:08:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![skyfox2k](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@skyfox2k](https://forum.kirupa.com/u/skyfox2k)\
**Post date:** [November 17, 2006, 7:08pm UTC](https://forum.kirupa.com/t/help-cant-make-this-cube-work/207456/1 "2006-11-17T19:08:18Z")

</div>

Hey guys, this is my first post, so first things first, hi!

My problemo- I need to make this cube work correctly. I used one of the tutorials, and tried to adapt it to my needs, but I’ve run aground. I have made the cube different colours, but the sides dont appear to show properly, its like 5 of the 6 sides are hollow, very strange.

Ideally I would like to make the sides one colour, then when clicked, become a different colour. How would I go about doing this? Here is the flash script:

// create a scene movieclip to contain all 3D elements  
// and center it on the screen.  
this.createEmptyMovieClip(“theScene”, 1);  
theScene.\_x = 375;  
theScene.\_y = 210;  
// focal length to determine perspective scaling  
focalLength = 300;  
// here we set up a function to make an object with  
// x, y and z properties to represent a 3D point.  
make3DPoint = function(x,y,z){  
var point = new Object();  
point.x = x;  
point.y = y;  
point.z = z;  
return point;  
};  
// here we set up a function to make an object with  
// x and y properties to represent a 2D point.  
make2DPoint = function(x,y){  
var point = new Object();  
point.x = x;  
point.y = y;  
return point;  
};  
// this is a function that will determine whether a triangle  
// drawn between the 3 points a, b and c is supposed to be  
// visible or not  
isVisibleBetween = function(a,b,c){  
if (((b.y-a.y)/(b.x-a.x)-(c.y-a.y)/(c.x-a.x)\<0)^(a.x\<=b.x == a.x\>c.x)){  
return true;  
}else{  
return false;  
}  
};  
// here is a function that will draw a side of cube  
// based on 4 passed points, first checking if it should  
// be drawn using isVisibleBetween on the first 3 points  
drawFilledSquare = function(a,b,c,d){  
this.clear();  
this.lineStyle(2,0,100);  
if (isVisibleBetween(a,b,c)){  
this.moveTo(a.x, a.y);  
this.beginFill(this.col, 100);  
this.lineTo(b.x, b.y);  
this.lineTo(c.x, c.y);  
this.lineTo(d.x, d.y);  
this.lineTo(a.x, a.y);  
this.endFill();  
}  
};  
// conversion function for changing an array of 3D points to an  
// array of 2D points which is to be returned.  
Transform3DPointsTo2DPoints = function(points, axisRotations){  
// the array to hold transformed 2D points - the 3D points  
// from the point array which are here rotated and scaled  
// to generate a point as it would appear on the screen  
var TransformedPointsArray = [];  
// Math calcs for angles - sin and cos for each (trig)  
// this will be the only time sin or cos is used for the  
// entire portion of calculating all rotations  
var sx = Math.sin(axisRotations.x);  
var cx = Math.cos(axisRotations.x);  
var sy = Math.sin(axisRotations.y);  
var cy = Math.cos(axisRotations.y);  
var sz = Math.sin(axisRotations.z);  
var cz = Math.cos(axisRotations.z);

// a couple of variables to be used in the looping  
// of all the points in the transform process  
var x,y,z, xy,xz, yx,yz, zx,zy, scaleRatio;  
// 3… 2… 1… loop!  
// loop through all the points in your object/scene/space  
// whatever - those points passed - so each is transformed  
var i = points.length;  
while (i–){  
// apply Math to making transformations  
// based on rotations

// assign variables for the current x, y and z  
x = points\*.x;  
y = points\*.y;  
z = points\*.z;  
// perform the rotations around each axis  
// rotation around x  
xy = cx_y - sx_z;  
xz = sx_y + cx_z;  
// rotation around y  
yz = cy_xz - sy_x;  
yx = sy_xz + cy_x;  
// rotation around z  
zx = cz_yx - sz_xy;  
zy = sz_yx + cz_xy;

// now determine perspective scaling factor  
// yz was the last calculated z value so its the  
// final value for z depth  
scaleRatio = focalLength/(focalLength + yz);  
// assign the new x, y and z  
x = zx_scaleRatio;  
y = zy_scaleRatio;  
// create transformed 2D point with the calculated values  
// adding it to the array holding all 2D points  
TransformedPointsArray\* = make2DPoint(x, y);  
}  
// after looping return the array of points as they  
// exist after the rotation and scaling  
return TransformedPointsArray;  
};  
// the points array contains all the points in the 3D  
// scene. These 8 make a cube on the screen.  
pointsArray = [  
make3DPoint(-50,-50,-50),  
make3DPoint(50,-50,-50),  
make3DPoint(50,-50,50),  
make3DPoint(-50,-50,50),  
make3DPoint(-50,50,-50),  
make3DPoint(50,50,-50),  
make3DPoint(50,50,50),  
make3DPoint(-50,50,50)  
];  
// each side will be in its own movieclip  
// each movieclip will have button actions which  
// will display text and change its color  
// drawFilledSquare is also given to the clip so  
// it can know how to draw itself. First the functions  
// for handling the interaction will be defined, then  
// added to each clip as its created.  
rollOverFace = function(){  
this.col = 0xff0000;  
};  
pressFace = function(){  
display\_txt.text = "This Page is "+this.\_name;  
};  
rollOutFace = function(){  
this.col = 0xffffff;  
};  
for (i=0; i\<6; i++){  
emptyFace = theScene.createEmptyMovieClip(“Face”+i,i);  
emptyFace.col = 0xffffff;  
emptyFace.onRollOver = emptyFace.onDragOver = rollOverFace;  
emptyFace.onRollOut = emptyFace.onDragOut = rollOutFace;  
emptyFace.onPress = pressFace;  
emptyFace.draw = drawFilledSquare;  
emptyFace.draw = drawFilledSquare;  
}  
// an object to represent the 3 angles of rotation  
cubeAxisRotations = make3DPoint(0,0,0);  
rotateCube = function(){  
cubeAxisRotations.y -= this.\_xmouse/3000;  
cubeAxisRotations.x += this.\_ymouse/3000;  
// create a new array to contain the \_x and \_y positions of the  
// points in the pointsArray as they would exist on the screen  
var pts2D = Transform3DPointsTo2DPoints(pointsArray, cubeAxisRotations);

// draw each side of the cube  
with (this.face0){  
clear();  
lineStyle(5,0x000000,100);  
beginFill(0xFFFF99, 100);  
moveTo(pts2D[0].x, pts2D[0].y);  
lineTo(pts2D[3].x, pts2D[3].y);  
lineTo(pts2D[2].x, pts2D[2].y);  
lineTo(pts2D[1].x, pts2D[1].y);}  
with (this.face1){  
clear();  
lineStyle(5,0x000000,100);  
beginFill(0x99CCFF, 100);  
moveTo(pts2D[4].x, pts2D[4].y);  
lineTo(pts2D[5].x, pts2D[5].y);  
lineTo(pts2D[6].x, pts2D[6].y);  
lineTo(pts2D[7].x, pts2D[7].y);}  
with (this.face2){  
clear();  
lineStyle(5,0x000000,100);  
beginFill(0x99FF99, 100);  
moveTo(pts2D[0].x, pts2D[0].y);  
lineTo(pts2D[4].x, pts2D[4].y);  
lineTo(pts2D[7].x, pts2D[7].y);  
lineTo(pts2D[3].x, pts2D[3].y);}  
with (this.face3){  
clear();  
lineStyle(5,0x000000,100);  
beginFill(0xFFCC66, 100);  
moveTo(pts2D[3].x, pts2D[3].y);  
lineTo(pts2D[7].x, pts2D[7].y);  
lineTo(pts2D[6].x, pts2D[6].y);  
lineTo(pts2D[2].x, pts2D[2].y);}  
with (this.face4){  
clear();  
lineStyle(5,0x000000,100);  
beginFill(0xFF9966, 100);  
moveTo(pts2D[2].x, pts2D[2].y);  
lineTo(pts2D[6].x, pts2D[6].y);  
lineTo(pts2D[5].x, pts2D[5].y);  
lineTo(pts2D[1].x, pts2D[1].y);}  
with (this.face5){  
clear();  
lineStyle(5,0x000000,100);  
beginFill(0xCC66FF, 100);  
moveTo(pts2D[1].x, pts2D[1].y);  
lineTo(pts2D[5].x, pts2D[5].y);  
lineTo(pts2D[4].x, pts2D[4].y);  
lineTo(pts2D[0].x, pts2D[0].y);}  
};  
// make rotateCube happen every frame for theScene  
theScene.onEnterFrame = rotateCube;

Any ideas?  
Thanks ever so much!

Piers