# [Request] Vector / Polygons shapes creation?

0 favourites
• 31 posts
• R0J0hound Your method works great, as usual. :)

The only small correction - "set t to loopindex/9"

• Glad it's useful. Dividing by 9 makes the last sprite be created at the end. 10 stops shy, but that could be preferred if chaining multiple curves together. But you're right, that's probably a better default.

• R0J0hound Thanks! That was actually my second question - how do you chain two curves, or make a curve from 4 or more points?

I tried drawing a second curve from where the first stopped, but it obviously didn't work that well.

• This only considers three points. Doing multiple back to back are basically just independent.

You’d probably want to do something like this to go through multiple points:

Which is multiple cubic beziers placed one by one. It just sets the control points so the slope is the same from one to another. Another option are catmull-rom curves.

• R0J0hound Too maths for us, no idea how to fix this one, can you please help us with that? We are so close to achieve it XD

• Thought this might be handy for setting predefined paths, so had some fun with it.

Modified capx

https://www.sizzle-games.com/pathset.capx

• sizcoz, if you need to move along the curved path, there is a great addon by Rexrainbow:

Unfortunately, it doesn't have an option to instantly draw/visualise the path.

• Well, using the math in that link here is a curve through many points. It's basically a cubic bezier between each.

That's kind of stuck as one curve, so here's a tweak to make it work for multiple. Event's 9-12 need to be spaced out like that. After creating objects you need to wait till the next toplevel event to allow them to be pickable.

To move along these curves you'd either have to save the cubic() parameters or just lerp along the generated points. A plus about the latter is you can make the speed constant.

Here's a dump of other examples that either draw curves, and/or do motion along a curve.

• ## Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.

Construct 3 users don't see these ads
• Thanks! We will try, hope that works as expected on canvas plugin system.

• Hi R0J0hound one question, is possible do a perfect curve using only one simple tension point between two vertices?

The one we get is a bit weird:

Maybe is possible change how the bezier curve is done by default, the math or something to get a perfect rounded curve?

Like in your example of the curve box:

That curve made with that tension point, is possible get a perfect/rounded curve?

• That curve is an arc. You could do it with:

Repeat 10 times

— set a to lerp(90,270, loopindex/10)

Or do the curve with multiple curves.

• Thanks R0J0hound for the reply, but the idea is be able to do any kind of curve like that with the same formula.

---

Have some question, i think inkscape uses the same 4 control points to create a curve as we on C2.

Two points for Start/end of the curve, (Self.XY) and (Next.XY).

Two points to create curves/wave forms: (b1x,b1y) and (b2x,b2y).

If i'm wrong, what i'm missing?

---

Edit: forgot to mention something about the curves but well, better step by step.

• No, you have it right.

The first and fourth parameters are the end points, and the 2nd and third are the control points.

The last parameter is a number 0 through 1. We do the curve by using cubic() for x an y and setting the last to various values between 0 and 1. So for example 0, 0.2, 0.4, 0.6, 0.8, and 1 to make the curve from 5 lines.

• Ok R0J0hound, next question.

Due i was unable to achieve that perfect rounded curves mentioned in previous posts, started to change/edit any values and did this:

Added 4 variables so in runtime i can add/substract via slider to the bx1-2/by1-2 of the curves with X1/X2/Y1/Y2 variables.

bx1 + X1

bx2 + X2

by1 + Y1

by2 + Y2

Tried and the first thing i saw is that due how we do the curves on edit the XY12 values it looks duplicated.

And i found that if i set the tension point over the vertice i can get the perfect/rounded curves i was looking:

With this, i can do the same good looking curves as on inkscape.

But as you can see there is a problem, due how the curve is built it's appear duplicated ¿?.

So, how to draw a curve with that 4 params correctly without that duplicate/broken/glitch thing?

This is how the "Line To" expresions looks now:

(cubic(curx, b1x+X1, b2x+X2 ,nextx, t)-Self.X)

(cubic(cury, b1y+Y1, b2y+Y2 ,nexty, t)-Self.Y)

So, we want to do in a similar way is done on inkscape, and thinking in two options, but we have not idea how to get the algorythm to achieve that, so hope that you are a god in this can help us XD.

1.- Draging the curve

Depens on you drag the curve the values XY12 moves.

It looks that at 25% of start only moves 100% the X1Y1. At 26% of the start 99% X1Y1 and 1% X2Y2. In the midle of the curve both moves fast,etc...

I guess it uses some kind of algorythm that calculates the curve distance where is draged to set that XY12 values.

2.- Visible control points (bx1-by1 (X1Y1) & bx2-by2(X2Y2)) to edit curve:

In this case you have the ability to move one or other, and they are placed in the curve.

What you think? Wonder if you have the skills to get one of this method working.

• I get lost with equations pretty easy. So let’s start over.

If you have 4 points: A, B, C, D

You can make a curve through it where it ends on points A and D and the control points are B and C, but they won’t be on the curve.

So something like this to get the points to to draw the curve along.

Repeat 10 times

— set x to cubic(ax,bx,cx,dx, loopindex/10)

— set y to cubic(ay,by,cy,dy, loopindex/10