Question

I would like to draw a grid in perspective and draw a circle in in te left bottom corner.
But I am not able to get it right.

So, first I draw the grid and circle without perspective.

public class test extends MovieClip
    {
        private var _gridSprite:Sprite;
        private var _xLineHolder:Sprite;
        private var _yLineHolder:Sprite;
        private var _circle:Sprite;

        public function test()
        {
            init();
        }

        private function init()
        {
            _gridSprite = new Sprite();
            this.addChild(_gridSprite);

            _xLineHolder = new Sprite();
            _gridSprite.addChild(_xLineHolder);
            _yLineHolder = new Sprite();
            _gridSprite.addChild(_yLineHolder);

            draw();

            _circle = new Sprite();         
            _circle.graphics.beginFill(0xFF0000);
            _circle.graphics.drawCircle(0, 0, 5);
            this.addChild(_circle);

                   //Here do I set the position of the circle
            _circle.x = _gridSprite.width + _gridSprite.x;
            _circle.y = _gridSprite.height + _gridSprite.y;
        }

        private function draw()
        {
            var spaceXDiv:Number = 160/20;
            var spaceYDiv:Number = 160/20;

            _xLineHolder.graphics.clear();
            _yLineHolder.graphics.clear();

            _xLineHolder.graphics.lineStyle(1);
            _yLineHolder.graphics.lineStyle(1);

            for(var i:int = 0; i <= spaceXDiv; i++){
                _xLineHolder.graphics.moveTo(i * 20, 0);
                _xLineHolder.graphics.lineTo(i * 20, 160);
            }

            for(var j:int = 0; j <= spaceYDiv; j++){
                _yLineHolder.graphics.moveTo( 0, j * 20);
                _yLineHolder.graphics.lineTo(160, j * 20);
            }
        }
    }

With this code, I get the following result

This is all ok, the circle is in te bottom left corner.

Now I set the perspective of the grid in init(). I use rotationY (I don’t know if this is the proper way). The angle is 20 degrees.

_gridSprite = new Sprite();
this.addChild(_gridSprite);
_gridSprite.rotationY = -20;

The result is not ok anymore. The circle isn’t anymore in the bottom left corner of the grid.

My question is: how do I change the position of the circle, so that it is in the bottom left corner of the grid in perspective?

I tried a lot, but my mathematics aren’t that good anymore.
This is example code that doesn’t put the circle at the bottom left corner.

var gridLeft:Number = _gridSprite.width + _gridSprite.x;
_circle.x = gridLeft - gridLeft * Math.tan(20 * Math.PI / 180);

var gridBottom:Number = _gridSprite.height + _gridSprite.y;
_circle.y = gridBottom - gridBottom * Math.tan(20 * Math.PI / 180);

I hope you understand my question and that you can help me.

Thanks,

Vincent

Answer 1

I think you’re over-complicating the problem. You only need to rotate both the grid and the circle in the same container. In this case, your ‘test’ class is the container, but you could always create another sprite as the container.

So, if you want to rotate both grid and circle, just do this.rotationY = -20 instead of _gridSprite.rotationY = -20;