I wish to add the ability to zoom-in, zoom-out, rotate and move the view in a top-down view over a collection of points and lines in a large 2d map. I split the map into a grid so I only need to render the points that are 'near' the camera. My question is, how do I render a point A(Xp,Yp) assuming the following details:

Offset of the camera pov from the origin of the map is:

Xc, Yc

Meaning the camera center is positioned on top of that point. If there's a point in Xc, Yc it is positioned in the center of the screen.

The rotation angle is:


The scale is:


Read my answer first. I am thinking there is more optimized solution, thanks.

My question is how to include the following improvement:

I read in the AS3 Bible book that: In regards to ShaderInput, You can use these methods to coerce Pixel Bender to crunch huge sets of data masquerading as images, without doing too much work on the ActionScript side to make them look like images.

Meaning if I am performing the same linear function on a lot of items, I can do it all at once if I use Shaders correctly and save processing time.

Does anyone know how that is accomplished?

Here is a sample of what I mean:


  • \$\begingroup\$ I think you're doing the "Answer your own question" thing wrong. It's not "Here's a question and answer, how do I improve the answer" it's "Here's a question, and the answer". Since they way you've written it, your own answer doesn't answer your question because it's part of the question. Inception. \$\endgroup\$
    – House
    Commented Oct 10, 2012 at 14:07
  • \$\begingroup\$ And I can't seem to figure out what the last half of your question has to do with the first. I thought you were asking about camera functionality, then you talk about shader processing for particles? \$\endgroup\$
    – House
    Commented Oct 10, 2012 at 14:11
  • \$\begingroup\$ @Byte56 The answer is correct. It's there to save people's time from retyping the 'less optimized' answer. I am hoping someone can share the most optimized answer and maybe show a benchmark? What does "processing for particles" has to do with it: Well the particles in the demo are an "array" of 2d-Points, same as the IO for the 'scale rotate offset' function I mention. The person who wrote that example says you can maximize performance using that tactic because the order of the processing is not important. I'm betting the same technique can be used with my very common situation. \$\endgroup\$
    – AturSams
    Commented Oct 12, 2012 at 15:26

1 Answer 1


The best answer I found so far as seen on the: How to use Pixel Bender (pbj) in ActionScript3 on large Vectors to make fast calculations? question is:

Use pixel bender to do the movement, rotation and scaling:

<languageVersion : 1.0;>

kernel linear
<   namespace : "il.co.elbowroom";
    vendor : "ArthurWulfWhite";
    version : 1;
    description : "Y = ax + b";
    parameter float4 xyrs <defaultValue: float4(0.0, 0.0, 0.0, 1.0);>;
    parameter float2 halfStage <defaultValue: float2(0.0, 0.0);>;
        // offsetX, offSetY, rotate, scale

    input image4 src;
    output pixel4 dst;

        float2 vals = sampleNearest(src, outCoord()).xy;
        float2 ovals = sampleNearest(src, outCoord()).zw;
        vals -= xyrs.xy;
        float len = length(vals) * xyrs.w;
        float ang = atan(vals.y / vals.x) + xyrs.z;
        if(sign(vals.x) == -1.0) ang += 3.14159265358979 / 2.0;
        vals = float2(len * cos(ang), len * sin(ang)) + halfStage;
        dst = float4(vals.x, vals.y, 0.0, 0.0);

How to use pixel bender is covered in the question I mentioned in the beginning.

Explaining the math:

Assuming the screen is Width wide and Height tall and the position of the camera is Xc and Yc, we'll render a point A(Xp,Yp) like this:

The screen center will be:

center = new Point(width/2, height/2);

Deduct the camera position:

offsetPos = A.subtract(camera); // offsetPos = (Xp - Xc, Yp - Yc);

To include scale we'll multiply:

offsetPos = A.subtract(camera); // offsetPos = (S * (Xp - Xc), S * (Yp - Yc));

Now rotate :

distance = offsetPoint.length;
angle = Math.atan2(offsetPos.y, offsetPos.x);

renderPos = Point.(distance, angle + alpha).add(Center);
  • \$\begingroup\$ Why did you ask a question and then answer it immediately? \$\endgroup\$ Commented Oct 10, 2012 at 22:28
  • 3
    \$\begingroup\$ @JustinSkiles - blog.stackoverflow.com/2011/07/… \$\endgroup\$
    – AturSams
    Commented Oct 12, 2012 at 15:29
  • \$\begingroup\$ I updated the answer to reflect the usage of pixelbender \$\endgroup\$
    – AturSams
    Commented Oct 13, 2012 at 22:26
  • \$\begingroup\$ I recently learned a way to do that with matrices instead of the complete computation... I think this could potentially speed things up \$\endgroup\$
    – AturSams
    Commented Apr 7, 2014 at 8:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .