As2 Blox

Every laptop I’ve ever had has just simply died on me eventually – kind of odd. Anyway, as I’ve mentioned before, at least every month I do a dvd backup of everything I’ve been working on. Commercial projects and personal projects alike. Every time my laptops die I end up loosing a few weeks of stuff – now, I rarely loose client work because I have weird trick – when I upload a client project to the dev server, I upload EVERYTHING, so it becomes an actual backup of the project. I guess I must have learned that the hard way – I know there have been about 3 times when I had to decompile an .swf to work on a project, but I can’t remember exactly why that was. My girlfriend is taking 4 of my old laptop and desktop hardrives and geting them all put onto one drive for my birthday. Pretty excited to see what I’ll discover. I was thinking about this, so I started looking through all the old DVDs again and I found this little thing:

This movie requires Flash Player 9

Here is the fla – unedited: DOWNLOAD

This is the 3D engine it uses:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
Stage.scaleMode = "noScale";
function localReset() {
	lxr = 0;
	lyr = 0;
	lx = 0;
	ly = 0;
	lz = 0;
}
gz = 0;
gx = 0;
gy = 0;
gxr = 0;
gyr = 0;
localReset();
centerX = 300;
centerY = 220;
rads = Math.PI/180;
sin = new Array();
cos = new Array();
for (var i = 0; i<720; i++) {
	sin[i] = Math.sin(i*(Math.PI/180));
}
for (var i = 0; i<720; i++) {
	cos[i] = Math.cos(i*(Math.PI/180));
}
lx = 0;
ly = 0;
lz;
// calculate 3d coards no 2d translation;
function l3d(_mx, my, mz) {
	zpos = ((lz+mz)*cos[lxr])-((lx+_mx)*sin[lxr]);
	xpos = ((lz+mz)*sin[lxr])+((lx+_mx)*cos[lxr]);
	ypos = ((ly+my)*cos[lyr])-(zpos*sin[lyr]);
	zpos = ((ly+my)*sin[lyr])+(zpos*cos[lyr]);
	//3rd one 
	apoint = [xpos, ypos, zpos];
	return apoint;
}
//////////////////////////////
// translate 3d coards to 2D 
//////////////////////////////
function p3d(_mx, my, mz) {
	zpos = ((gz+mz)*cos[gxr])-((gx+_mx)*sin[gxr]);
	xpos = ((gz+mz)*sin[gxr])+((gx+_mx)*cos[gxr]);
	ypos = ((gy+my)*cos[gyr])-(zpos*sin[gyr]);
	zpos = ((gy+my)*sin[gyr])+(zpos*cos[gyr]);
	dep = 1/((zpos/99390)+1);
	contrast = 1/((zpos/150)+1);
	//3rd one 
	apoint = [xpos*dep+centerX, ypos*dep+centerY, zpos];
	return apoint;
}
function skewObj(obj, mcW, mcH, pt0, ptH, ptW) {
	function distance(pt1, pt2) {
		var dy = pt2.y-pt1.y;
		var dx = pt2.x-pt1.x;
		var side = Math.sqrt(dy*dy+dx*dx);
		return side;
	}
	// 
	// pt0 = {x:p0._x, y:p0._y};
	// ptH = {x:pH._x, y:pH._y};
	// ptW = {x:pW._x, y:pW._y};
	// 
	obj._x = pt0.x;
	obj._y = pt0.y;
	obj._yscale = 100;
	var angleP2 = Math.atan2(ptW.y-pt0.y, ptW.x-pt0.x);
	var angleP1 = Math.atan2(ptH.y-pt0.y, ptH.x-pt0.x);
	var dAngle = (angleP1-angleP2)/2;
	var arm = Math.sqrt(2)/2/Math.cos(dAngle);
	// original a 100x100 model , now use 1x1 model
	obj._rotation = (180/Math.PI)*(angleP1-dAngle);
	obj.nest._rotation = -45;
	obj._yscale = 100*Math.tan(dAngle);
	obj.nest._xscale = distance(ptW, pt0)*100/arm/mcW;
	obj.nest._yscale = distance(ptH, pt0)*100/arm/mcH;
}

Despite the cluttered/messy style of the code and a few weird mistakes like the nesting of the distance function and a few other things. This code is actually kind of interesting, because it shows how we used to do 3D stuff and how we used to skew movieClips. The p3d function was based on code that I saw at http://wireframe.co.za/ I changed some stuff about it though, I cached the sin/cos function calls and added another function so that I could nest 3d transformations to give objects a local coordinate system. The skewing code was from Eric Lin. I may or may not have tweaked the skew code, I can’t remember.

The function for making a “blox”. Looks like this, you can see the thought process where I decided not to have top and bottom side for a cube:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
pts = new Array();
pre = new Array();
function box(pX, pY, pZ) {
	// left
	lx = pX;
	lz = 10+pZ;
	ly = pY;
	pre[inc] = l3d(50, 50, 0);
	pre[inc+1] = l3d(-50, 50, 0);
	pre[inc+2] = l3d(50, -50, 0);
	inc += 3;
	// front
	lx = 10+pX;
	ly = pY;
	lz = pZ;
	pre[inc] = l3d(0, 50, 50);
	pre[inc+1] = l3d(0, 50, -50);
	pre[inc+2] = l3d(0, -50, 50);
	inc += 3;
	// right 
	lx = pX;
	lz = 50+pZ;
	ly = pY;
	pre[inc] = l3d(50, 50, 0);
	pre[inc+1] = l3d(-50, 50, 0);
	pre[inc+2] = l3d(50, -50, 0);
	inc += 3;
	// top
	/*lx = pX+1;
	lz = 60+pZ;
	ly = pY+62;
	pre[inc] = l3d(50, 0, -50);
	pre[inc+1] = l3d(-50, 0, -50);
	pre[inc+2] = l3d(50, 0, 50);
	inc += 3;*/
	//back
	lx = 50+pX;
	ly = pY;
	lz = pZ;
	pre[inc] = l3d(0, 50, 50);
	pre[inc+1] = l3d(0, 50, -50);
	pre[inc+2] = l3d(0, -50, 50);
	inc += 3;
}

Kind of interesting that I’m storing all the blox points in one array. Then when I draw, I alter the values in the array and end by looping through it and drawing each point:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
this.onEnterFrame = function() {
 
	inc = 0;
	for (var i = 0; i<10; i++) {
		spindle[i] += rinc[i];
		mindle[i] += zinc[i];
		lxr = spindle[i]%360;
		lyr = mindle[i]%360
		box(rx[i], ry[i], 0);
	}
	tint = (inc/3)+2;
	//
	if (_xmouse>10 && _xmouse<500) {
		xdest = _xmouse;
	}
	if (_ymouse>10 && _ymouse<500) {
		ydest = _ymouse;
	}
	active = true;
	gxr += ((xdest)-gxr)/5;
	gyr += ((ydest)-gyr)/5;
	gxr = int(gxr);
	gyr = int(gyr);
	localReset();
	inc = 0;
	for (var i = 0; i<tint; i++) {
		pts[0] = p3d(pre[inc][0], pre[inc][1], pre[inc][2]);
		pts[1] = p3d(pre[inc+1][0], pre[inc+1][1], pre[inc+1][2]);
		pts[2] = p3d(pre[inc+2][0], pre[inc+2][1], pre[inc+2][2]);
		pt0 = {x:pts[0][0], y:pts[0][1]};
		ptH = {x:pts[1][0], y:pts[1][1]};
		ptW = {x:pts[2][0], y:pts[2][1]};
		dup = this["plane"+i];
		skewObj(dup, 100, 100, pt0, ptH, ptW);
 
		val = 4000+int(((pts[0][2]+pts[1][2]+pts[2][2])/3)*20);
		dup.swapDepths((val));
 
		dup._visible = true;
		inc += 3;
	}
};

It’s kind of like some of the OpenGL ES stuff I’ve been doing lately where I make heavy use of glDrawArrays() and array manipulation.

I used this basic 3D engine a bunch of times back in 2006-07. If you dig around you’ll find other instances of it here: old daily log.

Here is another one that uses the same engine:

This movie requires Flash Player 9

I also used this same 3D technique back in my director days 2002-04 – and java days too: Catch Env.

This link is also a great resource if your interested in simple 3D engines:

http://freespace.virgin.net/hugo.elias/routines/3d_to_2d.htm



 
 
 

Leave a Reply

Spam protection by WP Captcha-Free