3D Circles

[ptolami]

Can anyone help on this.

I'm trying to create a circle (preferably drawn in realtime with curveto) that will flip and rotate around as if it were in a 3d space or on a 3d planar surface. I want it to behave in a similar fashion to the core on the event horizon (for those whom have seen the movie).

It need only be a simple line.
There are tons of movies on FK using cubes and squares but no simple circles?
It's beyond me but not that tough I'm sure.

Thanks if you can help.

Ptol

[dudeqwerty]

havent seen the movie you speak of, so not sure how you want it to behave.

i made this for ya using my pretty crude 3D engine (oh well, it works);

just bung this code on the frame:

var af:Object = {x:0, y:0, z:0};
var r:Number = 100;
var d_r:Number = Math.PI/180;
function circlePoints(r:Number):Array {
	var toReturn:Array = new Array();
	for (var z = 0; z<=360; z++) {
		toReturn.push({x:Math.cos(z*d_r)*r, y:Math.sin(z*d_r)*r, z:0});
	}
	return toReturn;
}
var points:Array = circlePoints(r);
var cont:MovieClip = _root.createEmptyMovieClip("cont", _root.getNextHighestDepth());
var fl:Number = 300;
var rotDiv:Number = 3000;
cont._x = Stage.width/2;
cont._y = Stage.height/2;
function transPoints(points:Array, ar:Object):Array {
	var toReturn:Array = new Array();
	var temp:Object = {sx:Math.sin(ar.x), cx:Math.cos(ar.x), sy:Math.sin(ar.y), cy:Math.cos(ar.y), sz:Math.sin(ar.z), cz:Math.cos(ar.z)};
	var x:Number, y:Number, z:Number, sf:Number;
	var i:Number = points.length;
	while (i--) {
		x=points[i].x, y=points[i].y, z=points[i].z;
		sf = fl/(fl+(temp.cy*(temp.sx*y+temp.cx*z)-temp.sy*x));
		x = (temp.cz*(temp.sy*(temp.sx*y+temp.cx*z)+temp.cy*x)-temp.sz*(temp.cx*y-temp.sx*z))*sf;
		y = (temp.sz*(temp.sy*(temp.sx*y+temp.cx*z)+temp.cy*x)+temp.cz*(temp.cx*y-temp.sx*z))*sf;
		z = temp.cy*(temp.sx*y+temp.cx*z)-temp.sy*x;
		toReturn.push({x:x, y:y});
	}
	return toReturn;
}
cont.onEnterFrame = function() {
	af.y -= this._xmouse/rotDiv;
	af.x += this._ymouse/rotDiv;
	cont.clear();
	this.lineStyle(0);
	var pp:Array = transPoints(points, af);
	this.moveTo(pp[0].x, pp[0].y);
	for (var z = 1; z<pp.length; z++) {
		this.lineTo(pp[z].x, pp[z].y);
	}
};

HTH,

zlatan

[ptolami]

Wow this is almost perfect!
The only thing i notice is that the circle seems to rotate about a point that is not quite at it's own centre, it's a little off.
I can see how to manipulate the centre creation point and the radius etc but not it's centre of rotation...? Any further help greatly appreciated.

Is it possible to mask parts of this circle by putting it in an MC or similar.

Thankyou very much dudeqwerty, for your response.

U R A *

Ptol

[dudeqwerty]

no worries.

i know the circle seems a bit of center, but it isnt, it looks that way be cause there is no rotation about the z-axis to it looks a little odd. (stick a mc in the middle of the screen and you will see)

sorry about that, but its the extent of my maths, im only 17 ya know.

zlatan.

p.s. if you use an actual 3D shape then it looks ok

[dudeqwerty]

no, bollocks to my last post, i figured it out, i just had to take out the perspective skewing.

here you go:

var af:Object = {x:0, y:0, z:0, rd:3000};
var r:Number = 100;
var d_r:Number = Math.PI/180;
function circlePoints(r:Number):Array {
	var toReturn:Array = new Array();
	for (var z = 0; z<=360; z++) {
		toReturn.push({x:Math.cos(z*d_r)*r, y:0, z:Math.sin(z*d_r)*r});
	}
	return toReturn;
}
var points:Array = circlePoints(r);
var cont:MovieClip = _root.createEmptyMovieClip("cont", _root.getNextHighestDepth());
cont._x=Stage.width/2, cont._y=Stage.height/2;
function transPoints(p:Array, r:Object):Array {
	var toReturn:Array = new Array();
	for (var z = points.length; z--; ) {
		toReturn.unshift({x:Math.cos(r.z)*(Math.sin(r.y)*(Math.sin(r.x)*p[z].y+Math.cos(r.x)*p[z].z)+Math.cos(r.y)*p[z].x)-Math.sin(r.z)*(Math.cos(r.x)*p[z].y-Math.sin(r.x)*p[z].z), y:Math.sin(r.z)*(Math.sin(r.y)*(Math.sin(r.x)*p[z].y+Math.cos(r.x)*p[z].z)+Math.cos(r.y)*p[z].x)+Math.cos(r.z)*(Math.cos(r.x)*p[z].y-Math.sin(r.x)*p[z].z)});
	}
	return toReturn;
}
cont.onEnterFrame = function() {
	af.y -= this._xmouse/af.rd, af.x += this._ymouse/af.rd;
	var pp:Array = transPoints(points, {x:af.x, y:af.y, z:0});
	this.clear();
	this.lineStyle(0);
	this.moveTo(pp[0].x, pp[0].y);
	for (var z = points.length; z--; ) {
		this.lineTo(pp[z].x, pp[z].y);
	}
};

zlatan

[ptolami]

Thats much better. Thank you.
At 17 you put my maths to shame.

Any joy on the ability to mask this line?

Sorry to keep hassling you

[dudeqwerty]

ah, i didnt see that bit, i'll have a go.

what kind of mask though?

you'll have to get back to me today or i cant help you for the next 2 weeks as im going on holiday.

zlatan

[ptolami]

Lets say a mask as one might apply on the timeline.
I actually want to have an additional static elipse which the moving circle appears to be attached to. See image.

The faded lower part is that which would be masked...but this needs to be dynamic too i guess!

Think it may be harder than I originally suspected...

Have a good holiday.

Thanks again if you can help

Ptol

[dudeqwerty]

hey, sorry i havent the time to help you with the oval.

as for the mask, the best way would be just to have a movieClip covering the bottom half of the circle.

its could be done programmatically, but you would have to chech which of the 360 points are at the bottom, this would be pretty processor intensive.

HTH,

zlatan