Be a Supporter!

As: Very Basic Wireframe 3d, I

  • 3,950 Views
  • 26 Replies
New Topic Respond to this Topic
Begoner
Begoner
  • Member since: Oct. 10, 2004
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 03:12 PM Reply

This is just a simple 3D tutorial on how to make extremely basic
wireframe objects. It is intended for a 400 x 400 screen.

Final product . Arrow keys to move.

Z-Axis:

The most critical part of anything 3D is the z-axis. The z-axis is the
depth of something -- how far back it is. Something with a big
z-coordinate will be farther away from you than something with a small
z-coordinate. No trigonometry is needed for something like this, but
if you want to make a more complex 3D engine you will need to use
trigonometry to more accurately simulate a z-axis.

Vantage Point:

The 3D object will be drawn as if a person standing in the middle of the
screen, which means an ( x, y, z ) coordinate of ( 200, 200, 0 ). The
person's view will be pyramid shaped.

Image 1

The shaded part represents the screen. The line going from the base of
the pyramid to the eye represents a point in 3D space ( a specific 3D
coordinate on the entire pyramid ) being transferred to a 2D coordinate
( a 2D coordinate on the screen ). A view from one side of the pyramid
to see how the line is being plotted would look like:

Image 2

The little arrows on the lines means that they are parallel. Using
basic geometry ( AAA similarity theorem ), you can deduce that a / b =
c / d, and that means that ( a + b ) / b = ( c + d ) / d. By just being
given a point on the pyramid, we know the length of a. So the first
thing we need to find is a + b.

Image 3

Z represents the z-coordinate of the point, which is given. Using any
given angle, and a bit of trigonometry:

h = ( a + b ) / 2
tan( angle ) = h / z
h = tan( angle ) * z

The value of the tangent of the angle is irrelevent -- it will always be
the same as long as the angle does not change. So you don't need
trigonometry to find out what the tangent is -- you can just replace it
with a constant ( I used 2, but anything reasonable works ). Now that we
know a and a + b, and that a / ( a + b ) = c / ( c + d ), then we know
the value of c / ( c + d ). We already know the value of c + d, because
c + d just represents the width of the screen -- 400 pixels in this case.
So:

c / 400 = a / ( a + b )
c = 400a / ( a + b )

And now we have the x-coordinate of the point in 2D space. We can do the
same for the y-coordinate. Translating this into two AS functions :

function getXAtDepth(x, depth)
{
widthAtDepth = 2 * depth;
ratio = (x + ((widthAtDepth - Stage.width) / 2)) / widthAtDepth;
return ratio * Stage.width;
}

And:

function getYAtDepth(y, depth)
{
heightAtDepth = 2 * depth;
ratio = (y + ((heightAtDepth - Stage.height) / 2)) / heightAtDepth;
return ratio * Stage.height;
}

The AS functions are a bit more complicated than before because the top
left corner of the screen at depth 200 is ( 0, 0 ), while the top left
corner of the screen at depth 400 is ( -100, -100 ), so that has to be
taken into account when getting the ratio. In this, y isn't exactly
equal to a because it the distance from 0 to y, not from the start of the
base of the pyramid to a, which could be -100. That's basically the
entire 3D code. The rest is just making it work.

Variables:

These are just the three variables that I used.

array = [];
lines = [];
cAS = 0;

Array < http://newgrounds.co../topic.php?id=296610
> holds
all the points, lines will be used later, cAS is the current length of
the point array.

Plotting the Points:

The way I did it is that I had an array of point objects
that I plotted. So I used a very basic function for clarity:

function addPoint(x, y, z)
{
array.push(new Object());
array[cAS].x = x;
array[cAS].y = y;
array[cAS].z = z;
cAS++;
}

Basically, it takes the point, converts it to an object, and adds it to
the end of the point array. This serves no practical purpose, but it
makes the code more clear. Instead of array[ 3 ][ 2 ], you have
array[ 3 ].y.

function plotPoints(points)
{
for (i = 0; i < points.length; i++)
{
newPoint = attachMovie("point", "point" + i, this.getNextHighestDepth());
newPoint._x = getXAtDepth(points[i].x, points[i].z);
newPoint._y = getYAtDepth(points[i].y, points[i].z);
}
}

This physically puts a movie clip representing a point on the screen. In
this case, I added a movie clip called "point" to the library that was a
small circle. What the code does is go through all the points in the
array and uses getXAtDepth() and getYAtDepth() to place them at the
correct coordinates.

Plotting the Lines:

This is used to plot the lines that connect two points. The first
function takes a set of points denoted by numbers. It then adds the
respective point to an array. Instead of saying "point0", "point1", you
just say "0", "1" to save time.

function addLine(points)
{
pointArray = [];
for (i = 0; i < points.length; i++)
{
pointArray.push('point' + points[i]);
}
lines.push(pointArray);
}

Points is an array of points, like [ 0, 1, 2, 3 ]. The next function
connects all these points.

function plotLines()
{
for (i = 0; i < lines.length; i++)
{
lineStyle(2, 0x000000, 150);
moveTo(_root[lines[i][0]]._x, _root[lines[i][0]]._y);
for (j = 1; j < lines[i].length; j++)
{
lineTo(_root[lines[i][j]]._x, _root[lines[i][j]]._y);
}
}
}

Using the AS API , it draws a
line between any two given points in the array.

Clearing the Points:

You also need a function to clear all the points.

function removePoints()
{
_root.clear();
for (i in _root)
{
if (i.slice(0, 5) == "point")
{
removeMovieClip(_root.i);
}
}
}

First, it clears all the non-movie clip lines in _root, and then it
checks all movie clips in _root. If they start with "point", it means
that they should be removed.

Begoner
Begoner
  • Member since: Oct. 10, 2004
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 03:14 PM Reply

Moving the Shape:

onEnterFrame = function ()
{
if (Key.isDown(Key.RIGHT))
{
removePoints();
for (i = 0; i < array.length; i++)
{
array[i].x += 3;
}
plotPoints(array);
plotLines();
}
if (Key.isDown(Key.LEFT))
{
removePoints();
for (i = 0; i < array.length; i++)
{
array[i].x -= 3;
}
plotPoints(array);
plotLines();
}
if (Key.isDown(Key.UP))
{
removePoints();
for (i = 0; i < array.length; i++)
{
array[i].y -= 3;
}
plotPoints(array);
plotLines();
}
if (Key.isDown(Key.DOWN))
{
removePoints();
for (i = 0; i < array.length; i++)
{
array[i].y += 3;
}
plotPoints(array);
plotLines();
}
};

Basically, if up key is pressed, every coordinate in the point array is
increased by a certain amount ( 3 in this case ). The screen is erased
and then redrawn to fit the new points.

Final code:

Make sure you have a movie clip in your library called "point."

array = [];
lines = [];
cAS = 0;
function addPoint(x, y, z)
{
array.push(new Object());
array[cAS].x = x;
array[cAS].y = y;
array[cAS].z = z;
cAS++;
}
function addLine(points)
{
pointArray = [];
for (i = 0; i < points.length; i++)
{
pointArray.push('point' + points[i]);
}
lines.push(pointArray);
}
addPoint(150, 150, 200);
addPoint(250, 150, 200);
addPoint(250, 250, 200);
addPoint(150, 250, 200);
addPoint(150, 150, 300);
addPoint(250, 150, 300);
addPoint(250, 250, 300);
addPoint(150, 250, 300);
addLine([0, 1, 2, 3, 0]);
addLine([4, 5, 6, 7, 4]);
addLine([0, 4]);
addLine([1, 5]);
addLine([2, 6]);
addLine([3, 7]);
function plotPoints(points)
{
for (i = 0; i < points.length; i++)
{
newPoint = attachMovie("point", "point" + i, this.getNextHighestDepth());
newPoint._x = getXAtDepth(points[i].x, points[i].z);
newPoint._y = getYAtDepth(points[i].y, points[i].z);
}
}
function removePoints()
{
_root.clear();
for (i in _root)
{
if (i.slice(0, 5) == "point")
{
removeMovieClip(_root.i);
}
}
}
function getXAtDepth(x, depth)
{
widthAtDepth = 2 * depth;
ratio = (x + ((widthAtDepth - Stage.width) / 2)) / widthAtDepth;
return ratio * Stage.width;
}
function getYAtDepth(y, depth)
{
heightAtDepth = 2 * depth;
ratio = (y + ((heightAtDepth - Stage.height) / 2)) / heightAtDepth;
return ratio * Stage.height;
}
function plotLines()
{
for (i = 0; i < lines.length; i++)
{
lineStyle(2, 0x000000, 150);
moveTo(_root[lines[i][0]]._x, _root[lines[i][0]]._y);
for (j = 1; j < lines[i].length; j++)
{
lineTo(_root[lines[i][j]]._x, _root[lines[i][j]]._y);
}
}
}
plotPoints(array);
plotLines();
onEnterFrame = function ()
{
if (Key.isDown(Key.RIGHT))
{
removePoints();
for (i = 0; i < array.length; i++)
{
array[i].x += 3;
}
plotPoints(array);
plotLines();
}
if (Key.isDown(Key.LEFT))
{
removePoints();
for (i = 0; i < array.length; i++)
{
array[i].x -= 3;
}
plotPoints(array);
plotLines();
}
if (Key.isDown(Key.UP))
{
removePoints();
for (i = 0; i < array.length; i++)
{
array[i].y -= 3;
}
plotPoints(array);
plotLines();
}
if (Key.isDown(Key.DOWN))
{
removePoints();
for (i = 0; i < array.length; i++)
{
array[i].y += 3;
}
plotPoints(array);
plotLines();
}
};

liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 03:26 PM Reply

Great tutorial, now I'm going to try and make sense of this code then have a play around with it. Maybe it'll be useful to make it a class.. good tutorial anyway :)


Sup, bitches :)

BBS Signature
Simple-Logistics
Simple-Logistics
  • Member since: May. 10, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 03:30 PM Reply

Good tutorial, I tried doing the same with API b4, but it didn't work out, your script is great!

Rustygames
Rustygames
  • Member since: May. 7, 2005
  • Offline.
Forum Stats
Member
Level 19
Programmer
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 03:31 PM Reply

Overly complicated methinks
I havnt read through it but I had a skim and it looks way too complicated for what it is

Delta already made an excellent AS: 3D thread


- Matt, Rustyarcade.com

liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 03:33 PM Reply

At 10/29/05 03:31 PM, Ninja-Chicken wrote: Overly complicated methints

It isn't.

I havnt read through it but I had a skim and it looks way too complicated for what it is

It isn't, it's easy to understand.

Delta already made an excellent AS: 3D thread

dELtas is way too complicated to start off with.


Sup, bitches :)

BBS Signature
Rustygames
Rustygames
  • Member since: May. 7, 2005
  • Offline.
Forum Stats
Member
Level 19
Programmer
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 03:42 PM Reply

No no I mean the code is too complex deltas is easy and gives better results
I could be wrong ill post back whe nIve read it but have faith in delta doing this best


- Matt, Rustyarcade.com

liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 03:43 PM Reply

At 10/29/05 03:42 PM, Ninja-Chicken wrote: No no I mean the code is too complex deltas is easy and gives better results

To be honest this is a lot easier to understand than dELtas. Deltas may be better, but this is simpler.. and thats what begoner was aiming for. Hence the "very basic", which it is.


Sup, bitches :)

BBS Signature
dELtaluca
dELtaluca
  • Member since: Apr. 16, 2004
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 03:44 PM Reply

my first 3D thread is just for basic 3D, what i explain in my basic 3D thread can be directly used to make this - only with alot less code


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature
Begoner
Begoner
  • Member since: Oct. 10, 2004
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 03:51 PM Reply

Delta's accomplishes the same thing in a more efficient way, but it's more complex. The only real code I used was getXAtDepth() and getYAtDepth(). I tried to explain why it works more, and clean it up more, at the cost of making it less efficient.

Rustygames
Rustygames
  • Member since: May. 7, 2005
  • Offline.
Forum Stats
Member
Level 19
Programmer
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 03:58 PM Reply

At 10/29/05 03:43 PM, -liam- wrote:
At 10/29/05 03:42 PM, Ninja-Chicken wrote: No no I mean the code is too complex deltas is easy and gives better results
To be honest this is a lot easier to understand than dELtas. Deltas may be better, but this is simpler.. and thats what begoner was aiming for. Hence the "very basic", which it is.

Meh
I had no problems understanding deltas threads but then when I learn I usualy pay attention to it and focus completely otherwise I just half-heartedly skim through it


- Matt, Rustyarcade.com

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 03:58 PM Reply

I have been looking foward with this thread, I should start learning basic 3D..


BBS Signature
Rustygames
Rustygames
  • Member since: May. 7, 2005
  • Offline.
Forum Stats
Member
Level 19
Programmer
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 04:01 PM Reply

At 10/29/05 03:58 PM, -Toast- wrote: I have been looking foward with this thread, I should start learning basic 3D..

Nah you should learn some other blanks you have like trig and OOP


- Matt, Rustyarcade.com

IWantSomeCookies
IWantSomeCookies
  • Member since: Aug. 20, 2004
  • Offline.
Forum Stats
Member
Level 13
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 04:04 PM Reply

Awesome tutorial, I didnt get it that much. But seriously, its very nice! :)

Well done.


"Actually, the server timed out trying to remove all your posts..."
-TomFulp

liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 04:35 PM Reply

I've converted it to a class, and all works find -_- make a new .as file (or .txt in notepad) and paste:

class threeD {
var array:Array = [];
var lines:Array = [];
var cAS:Number = 0;
public function addPoint(x, y, z):Void {
array.push(new Object());
array[cAS].x = x;
array[cAS].y = y;
array[cAS].z = z;
cAS++;
}
public function addLine(points):Void {
var pointArray:Array = [];
for (var i = 0; i<points.length; i++) {
pointArray.push('point'+points[i]);
}
lines.push(pointArray);
}
public function plotPoints(points):Void {
for (var i = 0; i<points.length; i++) {
var newPoint = _root.attachMovie("point", "point"+i, _root.getNextHighestDepth());
newPoint._x = getXAtDepth(points[i].x, points[i].z);
newPoint._y = getYAtDepth(points[i].y, points[i].z);
}
}
public function removePoints():Void {
_root.clear();
for (var i in _root) {
removeMovieClip(_root[i]);
}
}
private function getXAtDepth(x, depth):Number {
var widthAtDepth = 2*depth;
var ratio = (x+((widthAtDepth-550)/2))/widthAtDepth;
return ratio*550;
}
private function getYAtDepth(y, depth):Number {
var heightAtDepth = 2*depth;
var ratio = (y+((heightAtDepth-400)/2))/heightAtDepth;
return ratio*400;
}
public function plotLines():Void {
for (var i = 0; i<lines.length; i++) {
_root.lineStyle(1, 0x000000, 100);
_root.moveTo(_root[lines[i][0]]._x, _root[lines[i][0]]._y);
for (var j = 1; j<lines[i].length; j++) {
_root.lineTo(_root[lines[i][j]]._x, _root[lines[i][j]]._y);
}
}
}
public function movex(amount:Number):Void {
removePoints();
for (var i = 0; i<array.length; i++) {
array[i].x += amount;
}
plotPoints(array);
plotLines();
}
public function movey(amount:Number):Void {
removePoints();
for (var i = 0; i<array.length; i++) {
array[i].y += amount;
}
plotPoints(array);
plotLines();
}
}

Then save it somewhere (as a .as file if you're notepadding). Make a new .fla and save it in the same place (not needed if you've saved the .as in a class directory) then enter this code into it:

d3 = new threeD();
d3.addPoint(150, 150, 200);
d3.addPoint(170, 150, 200);
d3.addPoint(170, 220, 200);
d3.addPoint(200, 220, 200);
d3.addPoint(200, 250, 200);
d3.addPoint(150, 250, 200);
//
d3.addPoint(150, 150, 300);
d3.addPoint(170, 150, 300);
d3.addPoint(170, 220, 300);
d3.addPoint(200, 220, 300);
d3.addPoint(200, 250, 300);
d3.addPoint(150, 250, 300);
//
d3.addLine([0, 1, 2, 3, 4, 5, 0]);
d3.addLine([0, 6]);
d3.addLine([1, 7]);
d3.addLine([2, 8]);
d3.addLine([3, 9]);
d3.addLine([4, 10]);
d3.addLine([5, 11]);
d3.addLine([6, 7, 8, 9, 10, 11, 6]);
d3.plotPoints(d3.array);
d3.plotLines();
//
onEnterFrame = function () {
Key.isDown(Key.RIGHT) ? d3.movex(3) : 0;
Key.isDown(Key.LEFT) ? d3.movex(-3) : 0;
Key.isDown(Key.UP) ? d3.movey(-3) : 0;
Key.isDown(Key.DOWN) ? d3.movey(3) : 0;
};

---

I'm not going to explain it because I haven't changed much, just modified the code so it's a class and made the wireframe different.


Sup, bitches :)

BBS Signature
dELtaluca
dELtaluca
  • Member since: Apr. 16, 2004
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 04:35 PM Reply

oh also, youre method of perspective is incorrect, (the reason why youre box looks like a cuboid when moved to edges) that shouldnt happen until the box passes the camera on the z-axis which is not happening here:

here is my version of your code:
some parts are more complex - but the bit i surrounded by @@@@@ is the actual 3d part which is alot simpler than yours and is correct projection for perspective

http://img496.images..begonerbegone5gm.swf

var vert:Array = new Array();
var line:Array = new Array();
var sx:Number = Stage.width/2;
var sy:Number = Stage.height/2;
//
function addPoint(x:Number, y:Number, z:Number):Void
{
//adds a new vertex to the vert array
var i:Number = this.getNextHighestDepth();
vert.push({x:x, y:y, z:z, m:this.attachMovie("dot","dot"+i,i)});
}
function removePoints():Void
{
//removes all points / only points specified
if(arguments.length==0)
{
var i:Number;
for(i=0;i<vert.length;i++)
{
removeMovieClip(vert[i].m);
}
vert = new Array();
}else
{
arguments.sortOn(0,18);
var i:Number;
for(i=0;i<arguments.length;i++)
{
removeMovieClip(vert[arguments[i]].m)
vert.splice(arguments[i],1);
}
}
}
function addLine():Void
{
//adds a new line to the line array
var i:Number;
var j:Number = line.push(new Array()) - 1;
for (i = 0; i < arguments.length; i++)
{
line[j].push(arguments[i]);
}
}
function removeLines():Void
{
//removes all lines / only lines specified
if(arguments.length==0)
{
line = new Array();
}else
{
arguments.sortOn(0,18);
var i:Number;
for(i=0;i<arguments.length;i++)
{
line.splice(arguments[i],1);
}
}
}
function render(cx:Number,cy:Number,cz:Number):Numb
er
{
this.clear();
this.lineStyle(2,0,100);
//
var tvert:Array = new Array(vert.length);
var i:Number,j:Number,index:Number;
for(i=0;i<line.length;i++)
{
for(j=0;j<line[i].length;j++)
{
index = line[i][j];
if(tvert[index] == undefined)
{
tvert[index] = persp(vert[index],cx,cy,cz);
vert[index].m._x = sx+tvert[index].x;
vert[index].m._y = sy+tvert[index].y;
}
//
if(!j)
{
this.moveTo(sx+tvert[index].x,sy+tvert[ind
ex].y);
}else
{
this.lineTo(sx+tvert[index].x,sy+tvert[ind
ex].y);
}
}
}
//
return 0;
}
function persp(a:Object,cx:Number,cy:Number,cz:Numb
er):Object
{
var b:Object = new Object();
b.x = a.x+cx;
b.y = a.y+cy;
b.z = a.z+cz;
//
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
var t:Number = 500/(500+b.z);
b.x *= t;
b.y *= t;
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
return b;
}

addPoint(0,0,0);
addPoint(100,0,0);
addPoint(100,100,0);
addPoint(0,100,0);
addPoint(0,0,100);
addPoint(100,0,100);
addPoint(100,100,100);
addPoint(0,100,100);
addLine(0,1,2,3,0,4,5,6,7,4);
addLine(1,5,1);
addLine(2,6,2);
addLine(3,7,3);
//
var mx:Number = -50;
var my:Number = -50;
var mz:Number = -50;
render(mx,my,mz);
//
onEnterFrame = function()
{
var rend:Boolean = false;
if(Key.isDown(Key.UP))
{
my -= 5;
rend = true;
}
if(Key.isDown(Key.DOWN))
{
my += 5;
rend = true;
}
if(Key.isDown(Key.LEFT))
{
mx -= 5;
rend = true;
}
if(Key.isDown(Key.RIGHT))
{
mx += 5;
rend = true;
}
if(rend)
{
render(mx,my,mz);
}
}

http://img496.images..begonerbegone5gm.swf


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature
Begoner
Begoner
  • Member since: Oct. 10, 2004
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 04:47 PM Reply

Lol, not only owned, but with a very creative file name. :P

I think there's a simple fix, though. Where it says:

function getXAtDepth(x, depth)
{
widthAtDepth = 2 * depth;
ratio = (x + ((widthAtDepth - Stage.width) / 2)) / widthAtDepth;
return ratio * Stage.width;
}
function getYAtDepth(y, depth)
{
heightAtDepth = 2 * depth;
ratio = (y + ((heightAtDepth - Stage.height) / 2)) / heightAtDepth;
return ratio * Stage.height;
}

Get rid of the 2 * depth in both functions, and just change it to depth. That seems to work.

dELtaluca
dELtaluca
  • Member since: Apr. 16, 2004
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 04:51 PM Reply

At 10/29/05 04:47 PM, Begoner wrote: Lol, not only owned, but with a very creative file name. :P

I think there's a simple fix, though. Where it says:

function getXAtDepth(x, depth)
{
widthAtDepth = 2 * depth;
ratio = (x + ((widthAtDepth - Stage.width) / 2)) / widthAtDepth;
return ratio * Stage.width;
}
function getYAtDepth(y, depth)
{
heightAtDepth = 2 * depth;
ratio = (y + ((heightAtDepth - Stage.height) / 2)) / heightAtDepth;
return ratio * Stage.height;
}

Get rid of the 2 * depth in both functions, and just change it to depth. That seems to work.

it still wont be correctly projected for perspective:
the change in x and y is proportional to depth in yours:
in mine it it is inversely proportional


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature
Begoner
Begoner
  • Member since: Oct. 10, 2004
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 04:57 PM Reply

No, mine is inversely proportional. getXAtDepth() will return:

( 400( 2x - 400 ) ) / d

The bigger d is, the smaller ( 400( 2x - 400 ) ) / d is. So it is inversely proportional.

dELtaluca
dELtaluca
  • Member since: Apr. 16, 2004
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 05:07 PM Reply

At 10/29/05 04:57 PM, Begoner wrote: No, mine is inversely proportional. getXAtDepth() will return:

( 400( 2x - 400 ) ) / d

The bigger d is, the smaller ( 400( 2x - 400 ) ) / d is. So it is inversely proportional.

that is not inversely proportional

http://en.wikipedia...i/Inverse_proportion

as it states:

It follows, that the variable y is inversely proportional to the variable x if there exists a non-zero constant k such that y = k/x;

in your perspective: (changed letters)

y = ( 400( 2a - 400 ) ) / x

you have no constant here in the division, so to write in general proportionality you would write it, y = k(a/x) where a = 400(2a-400), direct proportinality

to have inverse proportionality you need y = k/x where k is a constant, 400(2a-400) is variable


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature
dELtaluca
dELtaluca
  • Member since: Apr. 16, 2004
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 05:36 PM Reply

the problem is that in the little formula t = k/z; k is a constant which is the distance from the eye to the viewing plane, if k isnt constant, then yes perspective will be correct, but as yours is, for different values of depth, k increases/decreases meaning that when put together, you get a slightly morphed and inacccurate perspective projection, k should always be a constant, i use 500 because it just looks nice


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature
Begoner
Begoner
  • Member since: Oct. 10, 2004
  • Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 06:30 PM Reply

Well, obviously you know more about 3D math than I do, and you're probably 100% correct. But where did I go wrong with my method? At a certain depth, a point that is 1/10 of the way across should also be translated onto the screen as 1/10 of the way across the screen, right? That's all my code does.

ColdLogic
ColdLogic
  • Member since: Nov. 12, 2003
  • Offline.
Forum Stats
Member
Level 19
Blank Slate
Response to As: Very Basic Wireframe 3d, I Oct. 29th, 2005 @ 11:18 PM Reply

3d is probably the most inspireing thing to the future coder.

OXXOI77777
OXXOI77777
  • Member since: Jul. 6, 2005
  • Offline.
Forum Stats
Member
Level 17
Musician
Response to As: Very Basic Wireframe 3d, I Mar. 18th, 2006 @ 05:44 PM Reply

At 10/29/05 03:12 PM, Begoner wrote: This is just a simple 3D tutorial on how to make extremely basic
wireframe objects.

I think you are a bit miss leading


///////////////////////////////////
///////////////////////////////////
\\\\\\\\\\\[magic]\\\\\\\\\\\

BBS Signature
Pyromaniac
Pyromaniac
  • Member since: Jan. 14, 2005
  • Offline.
Forum Stats
Member
Level 18
Blank Slate
Response to As: Very Basic Wireframe 3d, I Mar. 18th, 2006 @ 05:49 PM Reply

At 3/18/06 05:44 PM, Droneavp23 wrote: I think you are a bit miss leading

Dont bump year old topics please.

OXXOI77777
OXXOI77777
  • Member since: Jul. 6, 2005
  • Offline.
Forum Stats
Member
Level 17
Musician
Response to As: Very Basic Wireframe 3d, I Mar. 18th, 2006 @ 06:12 PM Reply

At 3/18/06 05:49 PM, pyro111 wrote:
Dont bump year old topics please.

o dang, didnt even notice.Dang now i am going to get banned...


///////////////////////////////////
///////////////////////////////////
\\\\\\\\\\\[magic]\\\\\\\\\\\

BBS Signature
Denvish
Denvish
  • Member since: Apr. 25, 2003
  • Offline.
Forum Stats
Member
Level 46
Blank Slate
Response to As: Very Basic Wireframe 3d, I Mar. 18th, 2006 @ 08:23 PM Reply

At 3/18/06 06:12 PM, Droneavp23 wrote:
At 3/18/06 05:49 PM, pyro111 wrote:
Dont bump year old topics please.
o dang, didnt even notice.Dang now i am going to get banned...

Bumping old AS: topics is fine (since it means that some new people might see them), but it would be preferable if you had something a bit more constructive or substantial to say...


- - Flash - Music - Images - -

BBS Signature