Sign in to follow this  
Ninjadoodle

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

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
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..

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.

Share this post


Link to post
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.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.

 

 

Share this post


Link to post
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!

Share this post


Link to post
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.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?

 

Share this post


Link to post
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 :)

Share this post


Link to post
Share on other sites

@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!

Share this post


Link to post
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();
        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:

1449094686_ScreenShot2018-09-29at10_26_39.png.1cf116f22f09827d29ade61a2c6b4381.png

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

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
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.

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

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.