matriax's Recent Forum Activity

  • Hey! SnipG yes, works! I need to test better but yes, seems was a problem with the order and adding a uv -= before.

    Thanks!

  • Thanks, we remade the formula using the bezier function, and now should all works well with nice curves and the option to move the curve points.

  • Got an erros on this: "^" .

    Tried this:

    uv -= -4.65 + 49.38333*scale - 143.5 * pow(scale.x, 2.0) + 126.6667 * pow(scale.x, 3.0);

    And sometimes it get just the center, other times not. :(

    Any help please? Gigatron ?

  • The actual code: 

    #ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : disable

uniform mediump sampler2D samplerBack;
uniform mediump sampler2D samplerFront;
varying mediump vec2 vTex;
uniform mediump vec2 destStart;
uniform mediump vec2 destEnd;
uniform mediump float seconds;
uniform mediump float date;
uniform mediump float pixelWidth;
uniform mediump float pixelHeight;
vec2 iResolution = vec2( 1./pixelWidth, 1./pixelHeight);

uniform float rotate; 
uniform float scaleX; 
uniform float scaleY; 
uniform float offsetX; 
uniform float offsetY; 

vec2 scale = vec2(scaleX,scaleY);
vec2 offset = vec2(offsetX,offsetY);


void main()
{
	// Sprite Area
	vec2 uv= vTex; 


	// rotate
 uv = cos(rotate) * uv + sin(rotate) * vec2(uv.y, -uv.x);

	// scale
 uv /= scale;
	

	// center image in canvas - Not works on C2
 uv += 0.5;
	
	// offset
 uv -= offset;
	
	// Fix the tile thing
 uv = fract(uv);
	 


	gl_FragColor = texture2D(samplerFront, uv);

}

    With this code( uv += 0.5;), i found that to get the center of the image the offset on C2 needs to be for this different scales:

    0.5 > 0 Offset

    0.4 > 0.25 Offset

    0.3 > 0.67 Offset

    0.2 > 0.5 Offset

    If you set that Scales 0.2-0.5 and you set on C2 that offset the image will be center.

    Trying to find the math expresion to fix the problem but no idea :(

  • I can't fix the center image thing.

    On shadertoy works this:

    uv += 0.5;

    But on C2 nope, also i'm using uv = vTex(Need the sprite area)

    Any math expresion for scale/offset to achieve this?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Still there is a small issue, due i want the texture in the center of the image and then repeat over all.

    I mean, actually work great just by default i want that, but well i', gonna test .

    Also thinking to create a C2 page on Itchio with all my shaders, template and all related stuff.

  • 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

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

matriax's avatar

matriax

Member since 22 Jun, 2015

Twitter
matriax has 114 followers

Trophy Case

  • 9-Year Club
  • Forum Contributor Made 100 posts in the forums
  • Forum Patron Made 500 posts in the forums
  • Popular Game One of your games has over 1,000 players
  • Famous Game One of your games has over 10,000 players
  • Viral Game One of your games has over 100,000 players
  • Regular Visitor Visited Construct.net 7 days in a row
  • RTFM Read the fabulous manual
  • Email Verified

Progress

17/44
How to earn trophies