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

[Ninjadoodle]

Hi Panda People / @enpu

I'm trying to create a polygon / arc , in the shape of a U or horseshoe.

Any ideas on how this could be achieved?

I've tried making an arc and using a mask, but it's not really working as I want, because I need the outlines to display properly as well.

Thank you in advance!

[8bitdna]

Looking in the source code SVG's seem supported.  Could you draw one externally and load it in, does that work?

[Ninjadoodle]

@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

square

triangle

circle

semicircle

and the last i need is a U shape

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

 

[8bitdna]

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..

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_arc

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.

[Ninjadoodle]

Hi @8bitdna

That is actually close to what I need, but my version is a little more complex. If it's not possible, I could make changes to make it work with the example you've sent me

[Wolfsbane]

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.beginPath();
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);
//ctx.closePath();
ctx.fill();
ctx.stroke();

 

(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.

 

 

[Ninjadoodle]

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!

[Wolfsbane]

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.beginPath();
            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);
            //ctx.closePath();
            ctx.fill();
            ctx.stroke();
            
            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.position.set(255,255);
            sprite2.anchor.set(25,25);
            sprite2.rotation = rot * Math.PI;
            sprite2.scale.set(2,2);
            sprite2.addTo(game.scene.stage);

 

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?

 

[8bitdna]

Not sure if Panda exposes its canvas 2D context but that might be a route for more flexible drawing.

Pretty sure you would lose the automatic scaling and things like that though   @Wolfsbane agree 100%, this is one for @enpu to help extend the Graphics API with a few more features.

[8bitdna]

drawPolygon can do it as well but you'll need to engage some maths, would be easier having things like the bezierCurves at hand for sure like @Wolfsbane's example.

[Ninjadoodle]

Hi @enpu

Any idea whether something like this is possible in Panda at the moment? If not, I'll think of a workaround

Thanks in advance!

[enpu]

Is there a reason why it needs to be Graphics object? Are you dynamically changing it in the game? If not, then what @Wolfsbane suggested should work ok.

[Ninjadoodle]

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

[enpu]

Makes sense.

I would need to add support for bezier curves to the Graphics. Not just sure yet what would the API for it be. Should it be included somehow in the drawPolygon function. Any suggestions?

[Ninjadoodle]

@enpu

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!

[enpu]

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();
        grap.drawPolygon([
            [0, 50, 70, 50, 70, 0], // Bezier curve
            50, 0, // Point
            [50, 30, 20, 30, 20, 0], // Bezier curve
            0, 0 // Point
        ]);
        grap.scale.set(5);
        grap.position.set(100);
        grap.addTo(this.stage);
    }
});

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

[Ninjadoodle]

Hi @enpu

Thank you very much, you are an absolute legend! I would really like to send you a donation / tip for adding these new features so quickly.

Any chance of setting up a ‘buy me  a coffee/beer’ donation link?

Thanks again, for the help on this

[Wolfsbane]

 

2 hours ago, enpu said:

I have now added support for bezier curves on Polygon.

Fantastic!

Useful topic.