matriax's Forum Posts

  • Fixed using this:

    uv = fract(uv);

    Now i have a shader that on a sprite works as tiledbackground on i can use animation, rotate, scale in XY and set the OffsetXY :D

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • This is how the image looks

    And it should repeat the image like the tilebackground does.

    shadertoy.com/view/WsB3D3

    Basically i'm trying to achieve a TiledBackground via shader with the options of rotation, scale XY and Offset XY.

    So it can be added on a sprite that allows animations too,etc...

  • I tried to set to vec2 and add vTex or the resolution or "vec2 res = (samplerFront, uv);",etc... and then the shader works with no errors but not in the same way as in shadertoy does :S

    So i don't know, maybe to be used in C2 needs other stuff to get working¿? , maybe needs another lines of code i'm missing..

  • Seems the error are this lines:

    // fix image aspect ratio

    // vec3 res = iChannelResolution[0];

    // uv.y *= res.x/res.y;

    Commented and shader works with no errors but obviously not works correctly. So wonder what i need to change there. Tried some stuff but noting worked.

    Here the shader conversion to C2:

    pastebin.com/CWn86K4a

  • This one: 

    const float rotate = .0;
const vec2 scale = vec2(1.,1.);
const vec2 offset = vec2(.0,.0);

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
 // square coordinates
 vec2 uv = (-iResolution.xy + 2. * fragCoord.xy) / iResolution.x;
 
 // rotate
 uv = cos(rotate) * uv + sin(rotate) * vec2(uv.y, -uv.x);

 // scale
 uv /= scale;
 
 // fix image aspect ratio
 vec3 res = iChannelResolution[0];
 uv.y *= res.x/res.y;
 
 // center image in canvas
 uv += .5;
 
 // offset
 uv -= offset;
 
 // sample
 vec4 col = texture(iChannel0, uv);

 fragColor = col;
}

    Tried using the ShaderToy conversion tool by Gigatron but still lots of errors and no idea to fix.

    One error i guess is "iChannelResolution[0];" tried to change for Samplefornt, uv, vTex and other stuff but nothing worked.

    Any idea?

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

    i.paste.pics/7ada5433baf46be4814cbb95ed3784e7.png

    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.

    cdn.pbrd.co/images/I0HJonk.gif

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

    cdn.pbrd.co/images/I0HNpyQ.gif

    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

    cdn.pbrd.co/images/I0I2yFu.gif

    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:

    i.paste.pics/022d3873f0b7dde7ff72faad1ff7acd6.png

    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.

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

  • 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?

  • Thanks! We will try, hope that works as expected on canvas plugin system.

  • 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

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

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

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

    cdn.pbrd.co/images/HWA89Bo.gif

    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 .

  • 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

    drive.google.com/file/d/1LI5LCHUSzmXM4tv_hJcKTaF5mJgau2kU/view

    Is there any workaround/math to fix that R0J0hound ?

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

    cdn.pbrd.co/images/HWhkn53.png

    Still needs some tweaks but you get the point.