Jump to content

Any ideas on how to create a U shape / horseshoe polygon?


Recommended Posts

@8bitdna Thanks for the reply! I’m using the drawing api for a very specific purpose, but it’s really hard to explain unless I write an article lol.

i have 4 outnof 5 shapes setup





and the last i need is a U shape

this might be a bit beyond the capability of the drawing api tho.


Link to comment
Share on other sites

Panda uses the canvas drawing API in the background and it looks like it actually closes off the path to not form an 'arc' but a 'piechart'.  Go here..


Change the '2 * Math.PI' to '1 * Math.PI' and you'll get the shape I think your looking for.  If thats what your looking for give me a shout and I'll look into the sourcecode.

Link to comment
Share on other sites

Gah, maths... 

I don't know if you can do it using the default Panda API. They have the Polygons, but I don't think there is an option to draw the polygon's 'smoothy'. (you'd get, well, a polygon-y look). So you'll have to write something a bit different.

You can try something like this (in the example 8bitdata posted)

ctx.fillStyle = "red";

ctx.moveTo(10, 10);
ctx.bezierCurveTo(10, 10, 25, 100, 50, 10);
ctx.moveTo(50, 10);
ctx.lineTo(40, 10);
ctx.bezierCurveTo(40, 10, 30, 80, 20, 10);
ctx.moveTo(20, 10);
ctx.lineTo(10, 10);


(You can draw the shape with 2 arcs, but then filling it with colour gets weird). There are some other canvas draw functions (like quadraticCurveTo() which might draw a better shape.. just will have to experiment and see. G'luck.



Link to comment
Share on other sites

Hi @Wolfsbane

Thanks for the tips :) I've tried playing in the console that @8bitdna sent, and it looks like it possibly works differently then Panda. I think it would requite me to to dig deeper into the engine (which is beyond me lol).

I can't get the example working inside Panda at all, but like you, I though that using two arcs (not closed) and joining them, might be possibility.

Might have to wait and see if @enpu has any tips / ideas.

Thanks guys!

Link to comment
Share on other sites

Yeah, enpu could give you some proper advice on how to best implement it. I'm just hacking around.

I followed this post, and did this to add a type of U shape in Panda:

            var canvas = document.createElement('canvas');
            canvas.width = 300;
            canvas.height = 300;
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "red";
            ctx.moveTo(0, 0);
            ctx.bezierCurveTo(0, 0, 25, 100, 50, 0);
            ctx.moveTo(50, 0);
            ctx.lineTo(40, 0);
            ctx.bezierCurveTo(40, 0, 25, 80, 10, 0);
            ctx.moveTo(10, 0);
            ctx.lineTo(0, 0);
            var data = canvas.toDataURL();
            //To create Sprite from Data URI you can just pass it as a parameter:
            var sprite2 = new game.Sprite(data);
            sprite2.rotation = rot * Math.PI;


But this would work differently from how Panda's normally draws shapes. You do your drawing, but then you save it as a sprite, and draw that, which I *think* you don't want to do, right?


Link to comment
Share on other sites

Hi @enpu

Yup there is a very specific reason why I want to use graphic objects.

I need to be able to have a shape class that I can scale to any size, while maintaining it's outline at a set width.

Basically, in my prototype I have 4 shapes so far - Square, Circle, Triangle, and Semicircle (or arc in Panda).

I display the outline of the various graphic objects on the screen and then on user input I 'fill' them / 'color' them.

I can't achieve the same results using png's. The only other way I can think of is using vector graphics, as I did something similar in Flash a long time ago.

Thank you again for you help :)

Link to comment
Share on other sites


I'm pretty happy with the way the current Graphic Objects work, so I'm not sure if it should be included or separate.

Hopefully, a couple of other people will chime in on what they would prefer, but at the end of the day, I guess whatever is the simplest for you to implement / maintain.

Thank you again for your help on this, really appreciate the hard work your putting into the engine!

Link to comment
Share on other sites

I have now added support for bezier curves on Polygon.

drawPolygon API now looks like this:

game.createScene('Main', {
    init: function() {
        var grap = new game.Graphics();
            [0, 50, 70, 50, 70, 0], // Bezier curve
            50, 0, // Point
            [50, 30, 20, 30, 20, 0], // Bezier curve
            0, 0 // Point

This will output shape:


Just modify the values to get what you need.

To understand the values in bezier curve, take a look at this: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...