# [Request] Vector / Polygons shapes creation?

0 favourites
• 31 posts
• Is possible create some shader to do this?

Start with a Triangle, Square,etc... and then edit the vertices position, and between each vertice a tension point for curves.

Tried with canvas plugin but, or can't be done or to make this needs lots of math skills i not have :(

Any idea?

• How do you expect it to work? I mean besides the regular method.

Also, are you expecting collision polygons to be included?

• ## Try Construct 3

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

Construct 3 users don't see these ads
• Is for drawing purposes, no colissions needed.

Here the main idea:

(This is from some animation graph program)

But imagine you start with a square, triangle,etc.. and you add/remove/edit vertices. Between each vertice there is a tension point to generate the curves

• Well ok, but Im not sure what you expect the end product to be.

We have all the necessities to do that, but yeah it's pretty mathy.

If all you want is something to make shapes using splines, then there are lots of vector applications to do that.

• That looks great, i guess using the canvas plugin? Or just events?

The idea is create my own program to create 2D assets, so drawing the polygon and then add gradients, textures, shaders,etc... this is a first sketch of the app i have in mind:

Still needs some tweaks but you get the point.

• Yeah, that can all be done, but that's sort of why they make editors, to make it easier to do that stuff without the math. There's no way around that when making an editor I'm afraid.

• The curve can be done with qarp(). It's a quadratic bezier curve. A little extra math was used to make the middle control point on the curve.

Then it's just a matter of making a curve per edge. I guess there's many ways to go about it. This example uses one.

Basically it's just creating a bunch of points along the curve, then used stretched sprites for lines. Anyways you probably could use the canvas to draw it filled. Just add the points to the polygon instead of creating sprites.

• With dop2000 help, using canvas plugin i achieved this, each shape(canvas) needs to be on his own layer for FX/Texture purposes.

With "move to layer" and "move behind" i can change their order in real time.

The thing we can't fix it is the control point. For the line they are ok, they go from one point to another. But for the bezier curve, when more higher is, more far the control point is from the curve, instead of set over the curve, like in the line control points.

Here is the .capx

Is there any workaround/math to fix that R0J0hound ?

• Well, found the expresion at least when the line is a 90º

For X:

WaterControl(1).x+((WaterControl(1).x-WaterControl(2).x)+(WaterControl(1).x-WaterControl(2).x)/4)

For Y:

WaterControl(1).y+((WaterControl(1).y-WaterControl(2).y)+(WaterControl(1).y+WaterControl(2).y)/4)

But when the line is not 90º then not looks good:

too much maths for me :S , Any idea?

Also when i move the line the beizer curves changes and it not should. I mean, you move the bezier curve to some point and if you move one of the line points the beziers curve not should change but adapt to the new line point like in the gif reference of how should works: cdn.pbrd.co/images/HTWNHMh.gif .

• Look in the capx I posted. In the curve function there are 3 control points x0,y0, x1,y1, and x2,y2.

The first action that sets them sets them from the function parameters. The second actions that set x1,y1 correct the math so that control point is on the curve.

I haven’t tried the new canvas function, but you should be able to do multiple objects without layers. Just juggle the visibility of things when drawing to the canvas with a blend mode.

• About canvas and multiple objects i need layers due:

1.- To apply shaders. They can't be added to canvas. Also not on textures due for example OUTLINE needs the texture have space around to work, same for glow and others like that.

2.- Using blend DestinationIn or Atop for textures that works to make only the canvas shape textured they make background black, with shader on their layer background become transparent(I don't know why), and then textures and all looks correctly.

3.- Move them easily in an order with their texture on each one have their unique shaders and X visuals added.

-

About the math behind your .capx, sincerely no understand nothing. I found that fix on my one(that only works in one scenario) just with trial&error adding numbers and looking how far is the point from the curve to fix the difference no idea why i have to divide by 4 the distance or similar just is what it works XD

I don't know how much complex will be fix it but if you are available i'm willing to pay. After fix that i'm gonna need the system to add/remove vertices/tension points to create in real time any shape.

• Ah. I withdraw my idea about no layers. The canvas plugin is more restricted than I thought.

I salute you for trying trial and error, I just did mine with some math. I googled “Bézier curve through three points”, or something like that and found a nice solution.

Say your three control points are: x0,y0, x1,y1, x2,y2

And you use qarp() to do the curve:

Repeat 10 times

— set t to loopindex/10

— X = qarp(x0, x1, x2, t)

— ... same for y...

The curve won’t pass over x1 though. To correct it do this:

X = qarp(x0, (4*x1-x0-x2)/2, x2, t)

... same for y ...

Now the curve will hit all three.

• My question would be how do you get something useable other than a png out of such an editor?

Ideally you would have the steps you used to make it as data to render it elsewhere.

Something like svg, but without all the points from splines baked in.

• I will try to see what can i do with that R0J0hound , thanks.

newt , yes, export in transparent .png is what i'm looking for.

• Well Im thinking about C3, and its new one file add export.

Making vector type images using Drawing Canvas actions could be a good way to reduce package size.