[ZS - Solved] Request - 2D Shape Drawer Help

[Sarah]

Greetings all! As the title says, I am looking for reference material using the 2D shape drawer class. Working code examples would be excellent - especially things like basic shapes. Thank you! I hope everyone is well!

[Sarah]

After much digging and broken links, I came across this PR which has a working demo file!

Seriously, Marisa if you see this I'd love some explanation, that is probably the funniest demo I've seen and I can work with that!

[Sarah]

Greetings! So after some playing around I've gotten it figured out how use the shape drawer. However now I'm having my usual issue: trigonometry

So I need your help. From my understanding of the shape drawer, there's three basic steps:

1. Map texture coordinates
   • Texture coordinates are a normalized value between 0 and 1, where (0,0) is upper left hand corner and (1, 1) is the lower right
2. Triangulate shape
   • All of the coordinates now need connected into triangles.
3. Establish screen vertices
   • These correspond to texture coordinates and determine where the shape is on the screen.

What I've been trying to do, as demonstrated in the example image below is write something that will allow for the creation of any shape, based on the number of vertices. To do this, there is one more vertex than the requested number - for example, if you define 4 vertices (the red ones) there's actually 5. This extra vertex is the center of the shape (the black vertex). What this means is that any shape is considered a circle, regardless of vertices, it's actually the visual result that determines if we think it's a triangle or a square or a dodecahedron.



What I'm stuck on is the trigonometry for doing this. The texture coordinates and the shape vertices must both be calculated this way to "fan" the triangles around the center point. What code I've written is below, it does not work, and any help is very, very much appreciated! Thank you!

Code: Select all

 private void generateShape(int VertCount)
    {
        Vector2 tsiz = TexMan.GetScaledSize(Texture);

        // Gah! Revenge of the circles!  Why do I hear my junior year geometry teacher laughing???  
        float texrad = Sqrt(pow(tsiz.x / 2, 2) + pow(tsiz.y / 2, 2));  // texrad is the radius of the circle
        float coordang = 360.0 / float(VertCount); // angle formed by each coord pair and the center

        array<ShapeVec> rawcoords;
        Shape.PushCoord((0.5, 0.5));    // Center of circle
        for (int i = 0; i < VertCount; i++)
        {
            rawcoords.Push(new("ShapeVec").Init((texrad * Cos(coordang * (i + 1))) / tsiz.x,
                (texrad * Sin(coordang * (i + 1))) / tsiz.y));

            if (rawcoords[rawcoords.Size() - 1].Coords.x < 0.0)
                rawcoords[rawcoords.Size() - 1].Coords.x += 1.0;
            if (rawcoords[rawcoords.Size() - 1].Coords.y < 0.0)
                rawcoords[rawcoords.Size() - 1].Coords.y += 1.0;

            console.printf(string.format("Generated coordinate #%d, x:%f, y:%f", i, rawcoords[rawcoords.Size() - 1].Coords.x, rawcoords[rawcoords.Size() -1].Coords.y));
        }

        for (int i = 0; i < rawcoords.Size(); i++)
            Shape.PushCoord(rawcoords[i].Coords);

        console.printf(string.format("Texture radius is: %f, coordinate angle is: %f, for %d vertices", texrad, coordang, VertCount));

        Shape.PushTriangle(0, 1, VertCount); // indices for the first triangle don't follow the pattern, all the others do.
        console.printf(string.format("Pushed triangle, indices a:0, b:1, c:%d", VertCount));
        for (int i = VertCount; i > 1; i--)
        {
            console.printf(string.format("Pushed triangle, indices a:0, b:%d, c:%d", i, i - 1));

            Shape.PushTriangle(0, i, i - 1);    // we rotate counter-clockwise, 0 - or the center is always the first index
        }

        // Push vertices
        array<ShapeVec> verts;
        // This is the center vertex
        verts.Push(new("ShapeVec").Init(xLocation + ((tsiz.x * ShapeScale) / 2), 
            yLocation + ((tsiz.y * ShapeScale) / 2)));

        for (int i = 0; i < VertCount; i++)
        {
            verts.Push(new("ShapeVec").Init(verts[0].Coords.x + (texrad * Cos(coordang * (i + 1))), 
                verts[0].Coords.y + (texrad + Sin(coordang * (i + 1)))));
        }

        for (int i = 0; i < verts.Size(); i++)
            Shape.PushVertex(verts[i].Coords);
    } 

[Sir Robin]

Did you figure this one out? I'm ok with geometry and trig, maybe I can help. But I haven't done anything with shape drawing so I don't understand what you're trying to do. Are you trying to cut the circle into slices like a pie and then map a triangle onto each slice?

[Sarah]

No I haven't. But essentially yes, I am trying to slice the circle like a pie. Where I'm stuck is calculating those points around the circle. Mostly.

Code: Select all

rawcoords.Push(new("ShapeVec").Init((texrad * Cos(coordang * (i + 1))) / tsiz.x,
                (texrad * Sin(coordang * (i + 1))) / tsiz.y));

This bit of code should generate the vertex coordinates on a circle. The problem I'm currently having is that these coordinates are cartesian - the center of the circle is (0,0), which results in coordinates with negative values. This is normal.

Now, these coordinates must be mapped to a proportional value with a range of 0 and 1. Why? Because texture coordinates are floats between 0 and 1. A coordinate at (0,0) on the texture will be the upper left hand corner, and (1, 1) is the lower right hand corner. Converting between these cartesian coordinates and this normalized range is what's got me stuck.

I updated my code example with my most recent code. Thank you again for the help!

[Sir Robin]

So you're just trying to convert the unit circle (-1 .. 1) to (0 .. 1) ?
That's pretty easy. Sin and Cos return values in the (-1..1) range, so first cut that in half and you've got (-0.5 .. 0.5) and then add 0.5 and you've got (0 .. 1)

Are you wanting to get the vertex coordinates of an N-sided regular polygon whose center is at (0.5, 0.5) and whose outer radius is 0.5 ? It sounds like that's what you're trying to do. Or am I completely misunderstanding?

[Sir Robin]

Code: Select all

    private void RegularPolygon(vector2 center, float radius, int NumSides)
    {
        console.printf("Regular Polygon with %d sides", NumSides);//DEBUG
        float angle = 360 / NumSides;
        console.printf("Angle per side: %.3f", angle);//DEBUG
        for (int i = 0; i <= NumSides; i++)
        {
            float x = radius * cos(i * angle) + center.x;
            float y = radius * sin(i * angle) + center.y;
            console.printf("Coords: (%.3f,%.3f)", x, y);//DEBUG
        }
    }

[Sarah]

I'm going to try your function. From a surface glance it doesn't look like we're doing anything different, but my equations are not producing circles.

Here is my current function. I actually realized last night that the...

Ok, lets name the different vertex types and stick to them.

1. Raw Coordinate - this is a Vector2 that will have X/Y values in a range of -1 to 1, inclusively. These are cartesian coordinates, (0,0), is the center of the projection, splitting the coordinates into 4 quadrants. These coordinates need shifted to become Texture Coordinates.
2. Texture Coordinate - this is a Vector2 with its X/Y values set in a range of 0-1, inclusively. This vertex should be thought of as drawn on the texture itself.
3. Shape Vertex - this is a Vector2 whos X/Y values should be greater than 0. This vertex corresponds to a Texture Coordinate, and determines where that Texture Coordinate appears on the screen. It is the location of a Texture Coordinate.

BTW, I wrote that to keep things straight in my head as much as help communication. I'm not even talking about triangles here, that's actually a bit of the code I've had working from the start - I initially experimented with drawing a square using 4 triangles instead of 2, this gave me the idea to treat all shapes as circles.

So last night I realized that I can shift from Raw Coordinates to Texture Coordinates by doing: (A ShapeVec is a wrapper class for Vector2's so I can use array<>)

Code: Select all

rawcoords.Push(new("ShapeVec").Init((((texrad * Cos(coordang * (i + 1))) / tsiz.x) + 1) / 2,
                (((texrad * Sin(coordang * (i + 1))) / tsiz.y) + 1) / 2));

The conversion happens by taking the result of (texrad * Sin(coordang * (i + 1))) / tsiz.y) and adding 1 to it, and finally dividing that result in half.

My equation for calculating Shape Vertices is basically the same, which is wrong, it was 1:00am What I have done now is export the Shape Vertex array to the entire class, such that I can use those vectors to draw other stuff - in this case text - just draw an 8 or something where the vertex should be. So I'll try your equations, surely I'm just not seeing what I'm doing wrong.

Ok, for a bit more completeness, entire class in the spoiler below, it's only 200 lines. Thank you again for your help!

---

Code: Select all

/*
    ZSWin_Control_ShapeDrawer.zs

    This control allows for an arbitrary shape to
    be drawn to the screen.

*/

/*
    Ok so to use the Shape2D class, there are a couple steps.

    1. Map texture coodinates
        - This is done using Shape2D.PushCoord()
        - This function takes a Vector2
            - The relevant members of the Vector2 class will likely be the X and Y members
            - These members are doubles

    2. Triangulate the shape
        - This is done using Shape2D.PushTriangle()
        - This functions arguments are the indices of each texture coordinate
          of the triangle.
        - From the example it appears that indices should go counter-clockwise

    3. Establish screen vertices
        - There should be as many vertices as texture coordinates
        - They should also be Vector2
        - Once established they should be pushed to the Shape2D with the Shape2D.PushVertex() function.

    4. If anything needs to change
        - Call the Shape2D.Clear() function.
        - This function takes an enumeration representing which array to clear
        - New information may then be pushed to the cleared array

    5. Drawing the shape
        - Call Screen.DrawShape();

*/


class ShapeVec
{
    Vector2 Coords;

    ShapeVec Init(double x, double y)
    {
        Coords = (x, y);
        return self;
    }
}

class ZShape : ZControl
{
    enum SHAPE_PROTOTYPE
    {
        SHP_Square,
        SHP_Circle,
        SHP_Custom,
    };

    SHAPE_PROTOTYPE ShapeType;

    Shape2D Shape;
    TextureId Texture;

    float ShapeScale;

    bool bAnimated;

    ZShape Init(ZObjectBase ControlParent, bool Enabled, bool Show, string Name, int PlayerClient, bool UiToggle,
        CLIPTYP ClipType = CLIP_Parent, SCALETYP ScaleType = SCALE_NONE,
        SHAPE_PROTOTYPE ShapeType = SHP_Square, string ShapeTexture = "", bool bAnimated = false, Shape2D Shape = null, 
        float ShapeScale = 1.0, int VertCount = 4,
        int Width = 0, int Height = 0, float xLocation = 0, float yLocation = 0, float Alpha = 1)
    {
        // Set the type enum - this checks if the enum is custom
        // if it is, there needs to be an initialized shape with everything in it already.
        // If there isn't a given shape reference, default to a square then.
        if ((ShapeType == SHP_Custom && Shape) || (ShapeType != SHP_Custom && !Shape))
            self.ShapeType = ShapeType;
        else
            self.ShapeType = SHP_Square;

        // Set the texture id - default if there isn't one
        if (IsEmpty(ShapeTexture))
            self.Texture = TexMan.CheckForTexture("TGRAY", TexMan.TYPE_Any);
        else
            self.Texture = TexMan.CheckForTexture(ShapeTexture, TexMan.TYPE_Any);
        // Check that there is a valid texture otherwise call up the engine's "noflat", that's a last ditch attempt and should exist.
        if (!self.Texture.IsValid())
            self.Texture = TexMan.CheckForTexture("-noflat-", TexMan.TYPE_Any);

        // If the texture is animated the screen call can account for that.
        self.bAnimated = bAnimated;

        // Is there a shape being given?  This has to be a custom shape
        if (ShapeType == SHP_Custom && Shape)
            self.Shape = Shape;
        else
            self.Shape = new("Shape2D");

        self.ShapeScale = ShapeScale;

        // Width and Height have control over the clipping boundaries of the object
        // So this either defaults to the given texture size or to a given Width and Height
        Vector2 tsiz = TexMan.GetScaledSize(self.Texture);
        if (!Width)
            self.Width = tsiz.x;
        else
            self.Width = Width;
        if (!Height)
            self.Height = tsiz.y;
        else
            self.Height = Height;

        // Standard X/Y locations and alpha
        self.xLocation = ControlParent.xLocation + xLocation;
        self.yLocation = ControlParent.yLocation + yLocation;
        self.Alpha = Alpha;

        generateShape(VertCount);

        return ZShape(super.Init(ControlParent, Enabled, Show, Name, PlayerClient, UiToggle, ScaleType, ClipType:ClipType));
    }

    override void ObjectDraw(ZObjectBase parent)
    {
        ObjectDraw_Shape(self);
    }

    ui static void ObjectDraw_Shape(ZShape shp)
    {
        bool bClipped = GetDrawingControls(shp, shp.DrawParams);

        if (shp.Show)
        {
            if (bClipped)
                Screen.SetClipRect(shp.DrawParams.pclipX + GetLeftClipOff(shp, "main"),
                    shp.DrawParams.pclipY + GetTopClipOff(shp, "main"),
                    shp.DrawParams.pclipWdth + GetTopClipOff(shp, "main"),
                    shp.DrawParams.pclipHght + GetBottomClipOff(shp, "main"));

            Screen.DrawShape(shp.Texture, shp.bAnimated, shp.Shape,
                DTA_Alpha, GetControlAlpha(shp.ControlParent, shp));

            for (int i = 0; i < shp.verts.Size(); i++)
                Screen.DrawText(Font.GetFont('consolefont'), 0, shp.verts[i].Coords.x, shp.verts[i].Coords.y, "8");

            if (bClipped)
                Screen.ClearClipRect();
        }
    }

    /*
        Does ZScript seriously have no pow function????
        Ok, I'll do it myself, I'd like to know if there's
        a way to shift bytes somehow that'd made this much
        faster, this may be linear, but iterative length
        is gonna grow at higher powers.
    */
    private float pow(float a, float b)
    {
        float n = 1;
        for (int i = 0; i < b; i++)
            n *= a;
        return n;
    }

    array<ShapeVec> verts;

    private void generateShape(int VertCount)
    {
        Vector2 tsiz = TexMan.GetScaledSize(Texture);

        // Gah! Revenge of the circles!  Why do I hear my junior year geometry teacher laughing???  
        float texrad = Sqrt(pow(tsiz.x / 2, 2) + pow(tsiz.y / 2, 2));  // texrad is the radius of the circle
        float coordang = 360.0 / float(VertCount); // angle formed by each coord pair and the center

        array<ShapeVec> rawcoords;
        Shape.PushCoord((0.5, 0.5));    // Center of circle
        for (int i = 0; i < VertCount; i++)
        {
            rawcoords.Push(new("ShapeVec").Init((((texrad * Cos(coordang * (i + 1))) / tsiz.x) + 1) / 2,
                (((texrad * Sin(coordang * (i + 1))) / tsiz.y) + 1) / 2));

            console.printf(string.format("Generated coordinate #%d, x:%f, y:%f", i, rawcoords[rawcoords.Size() - 1].Coords.x, rawcoords[rawcoords.Size() -1].Coords.y));
        }

        for (int i = 0; i < rawcoords.Size(); i++)
            Shape.PushCoord(rawcoords[i].Coords);

        console.printf(string.format("Texture radius is: %f, coordinate angle is: %f, for %d vertices", texrad, coordang, VertCount));

        Shape.PushTriangle(0, 1, VertCount); // indices for the first triangle don't follow the pattern, all the others do.
        console.printf(string.format("Pushed triangle, indices a:0, b:1, c:%d", VertCount));
        for (int i = VertCount; i > 1; i--)
        {
            console.printf(string.format("Pushed triangle, indices a:0, b:%d, c:%d", i, i - 1));

            Shape.PushTriangle(0, i, i - 1);    // we rotate counter-clockwise, 0 - or the center is always the first index
        }

        // Push vertices - the array below is global currently so I can draw text where the verts should be
        //array<ShapeVec> verts;
        // This is the center vertex
        verts.Push(new("ShapeVec").Init(xLocation + ((tsiz.x * 1/*ShapeScale*/) / 2), 
            yLocation + ((tsiz.y * 1/*ShapeScale*/) / 2)));

        for (int i = 0; i < VertCount; i++)
        {
            verts.Push(new("ShapeVec").Init(xLocation + ((((texrad * Cos(coordang * (i + 1))) / tsiz.x) + 1) / 2), 
                yLocation + ((((texrad * Sin(coordang * (i + 1))) / tsiz.y) + 1) / 2)));
        }

        for (int i = 0; i < verts.Size(); i++)
            Shape.PushVertex(verts[i].Coords);
    }

    /* END OF METHODS */
}

 

[Sir Robin]

Ok, I'll try to figure out what you're doing in that code.

Meanwhile if you run my function like this: RegularPolygon((0.5,0.5),0.5,4) it will produce the unit circle exactly as you described in your 3rd post.

It sounds like you just need to get your coordinates into different scales. Here's the code to do that as described:

Code: Select all

	private void CalcCoords(int NumSides, float TextureWidth, float TextureHeight)
	{
		console.printf("calculate Regular Polygon with %d sides", NumSides);//DEBUG
		float angle = 360 / NumSides;
		console.printf("Angle per side: %.3f", angle);//DEBUG
		for (int i = 0; i <= NumSides; i++)
		{
			//raw x,y are on the unit circle (-1 .. 1)
			float rawx = cos(i * angle);
			float rawy = sin(i * angle);
			
			//texture x,y are in the range (0 .. 1)
			float texx = (rawx + 1) / 2;
			float texy = (rawy + 1) / 2;
			
			//shape x,y are in the range of (0 .. width),(0 .. height)
			float shapex = texx * TextureWidth;
			float shapey = texy * TextureHeight;

			console.printf("Coords: (%6.3f,%6.3f) (%6.3f,%6.3f) (%.3f,%.3f)", rawx, rawy, texx, texy, shapex, shapey);//DEBUG
		}
	}

[Sarah]

Success! Thank you Sir Robin! Its the same equations again and again, why can't I remember that? Lol thank you!

I can change the shape by simply changing the number of vertices given to the control, as desired! Now, yes the square is a diamond, that's actually expected behavior, I'm going to include both a scale and angle members. Scale I've already played with, it's perfectly feasible to have a multiplier like a TEXTURES lump and make shapes bigger or smaller based on that value. Angle will be similar to scale but require some more trig to calculate where, say, a vertex in a square should actually be.

Ah, I can see writing sliders now just to tie the slider to the vertex count of a shape so I can change it in real time. Odd little satisfying things.




What's the point of all this? Buttons, actually! ZScript Windows defines a handful of button types within a single class, it's a mess, and I want to rewrite it for more flexibility. Right now, one type, a "ZButton" - which is a replication of buttons in ZWindows - the GDCC version of my gui system - can handle a dynamic width, but not a dynamic height. If I have more than one line of text in a button - that's bad gui design anyway, but still - it will wrap and be cut off. My standard button type can handle that, but that button type has issues with clipping and frames and...grr ok start over and write a new button class or classes, so I thought, ok, I wanted a shape drawer control anyway, I'll build it and use it as the basis for the new buttons. The rapid adoption of a circle-based system for drawing shapes is actually due to my own gui design - rounded corners - I did it first Microsoft! - but that is achieved with textures. This shape drawer could allow me to draw shapes like what's in the screenshots without graphics bloating the package! Not like they really do, I use TEXTURES to do stuff like rotate textures and then tile in code.

[Sir Robin]

if you want squares to not be diamonds you can add half an angle to the calculations:

Code: Select all

         float rawx = cos((0.5 + i) * angle);
         float rawy = sin((0.5 + i) * angle);

Now any shape whose sides are a multiple of four will have their edges aligned to the axes.

But that's a square inside a circle inside a square, so it's going to be a bit smaller than the square texture you started with.

If the point of all this is to cut out buttons with round edges, can't you just do that with an alpha channel in the texture?

[Sir Robin]

If you're using n-gons where n is a multiple of 4, this will maximize your texture space:

Code: Select all

    private void CalcCoordsPerQuad(int SegsPerQuad, float TextureWidth, float TextureHeight)
    {
        int NumSides = SegsPerQuad * 4;
        console.printf("calculate Regular Polygon with %d sides", NumSides);//DEBUG

        float angle = 360 / NumSides;
        console.printf("Angle per side: %.3f", angle);//DEBUG

        float newRadius = 1 / cos(angle/2);
        console.printf("new radius: %.3f", newRadius);//DEBUG

        for (int i = 0; i <= NumSides; i++)
        {
            //raw x,y are on the unit circle (-1 .. 1)
            float rawx = newRadius * cos((0.5 + i) * angle);
            float rawy = newRadius * sin((0.5 + i) * angle);

            //texture x,y are in the range (0 .. 1)
            float texx = (rawx + 1) / 2;
            float texy = (rawy + 1) / 2;
            
            //shape x,y are in the range of (0 .. width),(0 .. height)
            float shapex = texx * TextureWidth;
            float shapey = texy * TextureHeight;

            console.printf("Coords: (%6.3f,%6.3f) (%6.3f,%6.3f) (%.3f,%.3f)", rawx, rawy, texx, texy, shapex, shapey);//DEBUG
        }
    }

Just give it the number of sides divided by 4, so 1 for square, 2 for octagon, 3 for dodecagon, etc

I'm sure there is a way to make it for a shape with any number of sides but I don't know the math for that off-hand

[Sarah]

Well you're certainly having fun with this! This quad calculator looks promising, but I think to account for a shape with any number of sides, we're actually talking about a circle, so we're back to the math we were already doing. Thank you though for your help!