So I have a circle of planes which get constructed as:
plane.x = Math.cos(angle) * radius;
plane.z = Math.sin(angle) * radius;
plane.rotationY = (-360 / numItems) * i - 90;
which calculates how many angular slices there are for total number of planes (rotationY) and places each plane into it's place on a circle of radius.
then to update their rotation around the circle I have:
var rotateTo:Number = (-360 / numItems) * currentItem + 90;
TweenLite.to(planesHolder, 1, { rotationY:rotateTo, ease:Quint.easeInOut } );
as you can see planes are circling and each is oriented 90 degrees out from the circle.
I'm using this as a reference - it's pretty much that: http://papervision2.com/a-simple-papervision-carousel/
Now, what I'd like to find out is how could I calculate degree of orientation for each individual plane to always face camera without normal, if it's possible at all. I've tried plane.LookAt(camera), but that doesn't work. Basically every plane should have orientation as the one facing camera in the middle.
Somehow I think I can't modify that example from link to do that.
edit: OK I answered my own question after I wrote it. Helps to read your own thoughts written. So as I'm orienting planes individually and rotating them all as a group, what I did after tween of the group in code above, was to loop through each plane and orient it to the Y orientation of the forward plane as so:
for (var i:int = 0; i < planes.length; i++) {
TweenLite.to(planes[i], 1, { rotationY:(-360 / numItems * rotoItem - 90), ease:Quint.easeInOut } );
}
rotoItem is the one at the front. Case closed.
OK I answered my own question after I wrote it. Helps to read your own thoughts written. So as I'm orienting planes individually and rotating them all as a group, what I did after tween of the group in code above, was to loop through each plane and orient it to the Y orientation of the forward plane as so:
for (var i:int = 0; i < planes.length; i++) {
TweenLite.to(planes[i], 1, { rotationY:(-360 / numItems * rotoItem - 90), ease:Quint.easeInOut } );
}
rotoItem is the one at the front. Case closed.
Related
So I have this isometric map, and I want to draw sprites on top of tiles.
but ofcourse if I get the position of the isometric tile, and I draw a sprite on that position, it wont draw on top of the tile since the isomap is rotated.
here if I draw a color cube for each tile position....
##
So my question is, what I have to do to draw this sprite on top of the tile?
Im using IsometricTiledMapRenderer
Thanks in advance, I have been searching for this the whole day and my lack of english vocabulary is not helping for searching
EDIT: #dfour answer almost did the trick.. heres how it looks now...
What you need is to convert Cartesian values to isometric values.
This Isometric Tutorial should help.
//Cartesian to isometric:
isoX = cartX - cartY;
isoY = (cartX + cartY) / 2;
//Isometric to Cartesian:
cartX = (2 * isoY + isoX) / 2;
cartY = (2 * isoY - isoX) / 2;
These functions show how you can convert from one system to another:
function isoTo2D(pt:Point):Point{
var tempPt:Point = new Point(0, 0);
tempPt.x = (2 * pt.y + pt.x) / 2;
tempPt.y = (2 * pt.y - pt.x) / 2;
return(tempPt);
}
function twoDToIso(pt:Point):Point{
var tempPt:Point = new Point(0,0);
tempPt.x = pt.x - pt.y;
tempPt.y = (pt.x + pt.y) / 2;
return(tempPt);
}
I'm making a top down shooter game. I've got my character moving. All I want to do next is make a bullet shoot from the center of my character to the direction my cursor is at. How would i go about doing this?
I'm really struggling to think of the code i need to make this work.
This will involve simple vector math. There are tons of resources online about this. Here's the basic gist:
1) First, calculate the angle (in radians) between your character and your target (in this case the mouse location). You can use Math.atan2() to perform this calculation.
var angle:Number = Math.atan2(mouseY - playerY, mouseX - playerX);
2) Next, use that angle to create a vector (x,y delta) which represents the direction of travel for your bullet. You use Math.cos() and Math.sin() to compute the x and y value:
var speed:Number = 5;
var vector:Point = new Point(Math.cos(angle) * speed, Math.sin(angle) * speed);
3) Now you can update the bullets position each frame by that vector:
bullet.x += vector.x;
bullet.y += vector.y;
4) And if you want to make your bullet sprite point in the direction of travel, convert that angle to degrees and set the bullet sprite's rotation:
var degrees:Number = angle * (180 / Math.PI);
bullet.rotation = degrees;
Note that for the purpose of the math here, 0 degrees is considered to be right-facing along the x-axis, not up-facing like you might naturally think of 0 degrees (at least I do). What this means is your sprites unrotated orientation should be facing right-ward.
I am trying to replicate this effect: http://hakim.se/experiments/html5/trail/03/
I have this as a Particle constructor:
function Particle(x, y) {
this.x = x;
this.y = y;
this.radius = 4;
this.color = '#f0f';
this.speed = 15;
this.angle = 0;
}
And I'm using this loop to animate all particle instances:
for (var i = 0, len = particles.length; i < len; i++) {
var dx = mouse.x - particles[i].x,
dy = mouse.y - particles[i].y,
angle = Math.atan2(dy, dx);
particles[i].vx = Math.cos(angle) * particles[i].speed;
particles[i].vy = Math.sin(angle) * particles[i].speed;
particles[i].x += particles[i].vx;
particles[i].y += particles[i].vy;
particles[i].draw(ctx);
}
The particles follow the mouse, but reach the cursor and start flickering around it, which is not a desired behaviour. I'd like to circle around the cursor, as in the example.. The interesting part is that if I set the particle.speed to something like 30 and add 1000 to the angle, the particles rotate around the cursor, but really fast and ruin the effect...
You can see a live example here: http://codepen.io/gbnikolov/pen/EwafI
All suggestions are more then welcome, thanks in advance!
P.S. I know that the code for the pointed example is easily findable, but I'm relatively new to javascript and I'm not that good at reading other people code and can't quite understand the logic behind it..
Currently the target of your particles is the mouse cursor. But that's not the target you want. You want a target that's moving around your cursor. And you want for every particle a different target, so they don't hover all at the same place.
There are also some other things that the original does and you don't:
in the original, the particle speed depends on the distance to the target
it seems they can't change the direction instantly, but change the direction of their movement relatively slowly.
i have polygon say (Hexagonal with 6 lines) this Hexagonal connected from center with 6 point That make 6 triangles
I need when move any point(cause to move triangles) ,, other points move like this point i mean if the left point move to lift other points move to the left and so on
the code I want like this ptcP1.x and ptcP1.y the point that i moving it other point move depend on ptcP1 movement note that, this equations work fine in square shape ,, put in Penta and hexa ..etc this equations in valid so can any one help me
function button1_triggeredHandler( event:Event ):void
{
mode="mode2";
//trace(list.selectedIndex);
if(list.selectedIndex==1)
{
DrawSqure.ptcP1.x = Math.random() + 50;
DrawSqure.ptcP1.y = Math.random() + 50;
DrawSqure.ptcP2.y = 50-DrawSqure.ptcP1.x;
DrawSqure.ptcP2.x = DrawSqure.ptcP1.y;
DrawSqure.ptcP3.x = 50-DrawSqure.ptcP1.y;
DrawSqure.ptcP3.y = DrawSqure.ptcP1.x;
DrawSqure.ptcP4.x = 50-DrawSqure.ptcP1.x;
DrawSqure.ptcP4.y = 50-DrawSqure.ptcP1.y;
}
As stated in the comments, storing the vertices/points into a container (Array or Vector) and then adjusting those positions when you move is the best way to do it. Here is an example of how that might work:
//setup array or vector of vertices
var polygonVertices:Array = [DrawPolygon.ptcP1, DrawPolygon.ptcP2, DrawPolygon.ptcP3, DrawPolygon.ptcP4];
This method will take all the vertices and apply the translation:
//function for adjusting all the vertices based on the distance you pass
function moveShape( vertices:Array, dx:Number, dy:Number ) {
var i:int;
for ( ; i < vertices.length; i++ ) {
vertices[i].x += dx;
vertices[i].y += dy;
}
}
Then you would just need to know your distance X & Y your shape has moved and you can call moveShape( polygonVertices, 100, 100 );
I inserted 100,100 as the distance parameters as an example, but this should give you the results you are looking for.
I'm building a 3D spinning carousel in AS3, basing it on Keith Peter's example.
I've got the carousel up and spinning and all is well, so far, but I can't for the life of me determine how to control it so that it spins to a specific element. I know it's just math, but right now, under tight deadline, I'm not grokking it. Any help appreciated.
I set it up with code below — there are currently 10 elements so each is spaced 36 degrees from the rest -- but ultimately there may be more or less elements, so it needs to work with a variable number. I want, for instance, to say 'spin to element 4' and it will spin there.
Thus I'm looking to set _container.rotationY, based on the specific element to which I want to go. So (pseudocode)
function gotoElement($element:int):void {
_container.rotationY = ?
}
I also need to figure out how to keep _container.rotationY between 0 and 360, but I suppose that's a simple modulus?
Any help GREATLY appreciated! Thanks!
private function createCarousel():void
{
_container.z = 0;
addChild(_container);
for (var i:int = 0; i<_numberOfImages; i++) {
var angle:Number = Math.PI * 2/_numberOfImages*i;
var item:JukeBoxAlbum = _images[i];
item.x = Math.cos(angle) * RADIUS;
item.z = Math.sin(angle) * RADIUS;
item.rotationY = (-360/_numberOfImages)*i + 270;
_items.push(item)
}
sortItems();
addEventListener(Event.ENTER_FRAME,loop,false,0,true);
stage.addEventListener(MouseEvent.CLICK,click,false,0,true);
}