matriax's Forum Posts

  • I see, Thanks!

  • This code actually works and do what i want, simply to know if there is another way to do it more simple.

    I have an Slider, and for each value i assign to enable a FX on a sprite but i want the other gets disable when the value is not their one.

    So the solution is when other is selected create a function that is called at the starts disabling all efects, and then enable the selected one.

    Any other way to solve it or the actual aproach is ok? There are lots of Blend FX, live about 20, so before do all i want to be sure this is the correct way in case is wrong and i have to build again all the FX system.

  • Is based in the ASCII FX by Gigatron , just i'm editing some variables and the Binary matrix chars to get as i want but there is somethng i can't achieve.

    I think i know where is the problem but after some edits still can't get fixed.

    Original code:

    gl_FragColor = vec4(cha*col,1.);[/code:2u8pxu1u]
[img="https://cdn.pbrd.co/images/GU4f61p.png"]

But for each character shows a color+black, and i want to get  Light color+Dark color, something like this:
[code:2u8pxu1u]/gl_FragColor = vec4((cha+col)*col,1.);[/code:2u8pxu1u]
[img="https://cdn.pbrd.co/images/GU4g4yV.png"]

Now each character have two colors without black, but seems also changes the real black color of the entire image to light colors :S.

How can i fix it?

Here is the actual Shader code i'm using:

[code:2u8pxu1u]// Directlyfrom shadertoy ..By FMS_CAT
// Adapted by gigatron // have fun !

// AnsiArt version by Matriax 

precision highp float;

uniform float textureSizeWidth; //width of the texture
uniform float textureSizeHeight; //height of the texture
uniform float texelSizeX; //width of one texel 
uniform float texelSizeY; //height of one texel 
uniform mediump float seconds;
uniform mediump float pixelWidth;
uniform mediump float pixelHeight;
varying mediump vec2 vTex;
uniform sampler2D samplerFront;
vec2 iResolution = vec2( 1.0/pixelWidth, 1.0/pixelHeight);

uniform float zoom;

#define P(id,a,b,c,d,e,f,g,h) if( id == int(pos.y) ){ int pa = a+2*(b+2*(c+2*(d+2*(e+2*(f+2*(g+2*(h))))))); cha = floor(mod(float(pa)/pow(2.,float(pos.x)+0.0),2.0)); }

float gray(vec3 _i)
{
    return (_i.x+_i.y+_i.z)/3.;
}

void main()
{
    vec2 uv = -vec2(floor(gl_FragCoord.x/8./zoom)*8.*zoom,floor(gl_FragCoord.y/12./zoom)*12.*zoom)/iResolution;
    ivec2 pos = ivec2(mod(gl_FragCoord.x/zoom,8.),mod(gl_FragCoord.y/zoom,12.));
    vec4 tex = texture2D(samplerFront,vTex);
    float cha = 0.;
    
    {
        float g = gray(tex.xyz);
        if( g < .05 )
        {
          P(11,0,0,0,0,0,0,0,0);
          P(10,0,0,0,0,0,0,0,0);
            P(9,0,0,0,0,0,0,0,0);
            P(8,0,0,0,0,0,0,0,0);
            P(7,0,0,0,0,0,0,0,0);
            P(6,0,0,0,0,0,0,0,0);
            P(5,0,0,0,0,0,0,0,0);
            P(4,0,0,0,0,0,0,0,0);
            P(3,0,0,0,0,0,0,0,0);
            P(2,0,0,0,0,0,0,0,0);
            P(1,0,0,0,0,0,0,0,0);
            P(0,0,0,0,0,0,0,0,0);
        }
        else if( g < .25 ) // .
        {
            
          P(11,0,0,1,0,0,0,1,0);
          P(10,1,0,0,0,1,0,0,0);
            P(9,0,0,1,0,0,0,1,0);
            P(8,1,0,0,0,1,0,0,0);
            P(7,0,0,1,0,0,0,1,0);
            P(6,1,0,0,0,1,0,0,0);
            P(5,0,0,1,0,0,0,1,0);
            P(4,1,0,0,0,1,0,0,0);
            P(3,0,0,1,0,0,0,1,0);
            P(2,1,0,0,0,1,0,0,0);
            P(1,0,0,1,0,0,0,1,0);
            P(0,1,0,0,0,1,0,0,0);
            
            
        }
        else if( g < .5 ) // ,
        {
        	/*
          P(11,1,0,1,0,1,0,1,0);
          P(10,0,1,0,1,0,1,0,1);
            P(9,1,0,1,0,1,0,1,0);
            P(8,0,1,0,1,0,1,0,1);
            P(7,1,0,1,0,1,0,1,0);
            P(6,0,1,0,1,0,1,0,1);
            P(5,1,0,1,0,1,0,1,0);
            P(4,0,1,0,1,0,1,0,1);
            P(3,1,0,1,0,1,0,1,0);
            P(2,0,1,0,1,0,1,0,1);
            P(1,1,0,1,0,1,0,1,0);
            P(0,0,1,0,1,0,1,0,1);
            */
          P(11,0,1,0,1,0,1,0,1);
          P(10,1,0,1,0,1,0,1,0);
            P(9,0,1,0,1,0,1,0,1);
            P(8,1,0,1,0,1,0,1,0);
            P(7,0,1,0,1,0,1,0,1);
            P(6,1,0,1,0,1,0,1,0);
            P(5,0,1,0,1,0,1,0,1);
            P(4,1,0,1,0,1,0,1,0);
            P(3,0,1,0,1,0,1,0,1);
            P(2,1,0,1,0,1,0,1,0);
            P(1,0,1,0,1,0,1,0,1);
            P(0,1,0,1,0,1,0,1,0);
            
            
            
        }
        else if( g < .75 ) // -
        {
          P(11,1,1,0,1,1,1,0,1);
          P(10,0,1,1,1,0,1,1,1);
            P(9,1,1,0,1,1,1,0,1);
            P(8,0,1,1,1,0,1,1,1);
            P(7,1,1,0,1,1,1,0,1);
            P(6,0,1,1,1,0,1,1,1);
            P(5,1,1,0,1,1,1,0,1);
            P(4,0,1,1,1,0,1,1,1);
            P(3,1,1,0,1,1,1,0,1);
            P(2,0,1,1,1,0,1,1,1);
            P(1,1,1,0,1,1,1,0,1);
            P(0,0,1,1,1,0,1,1,1);
        }
 
         else // 100
        {
          P(11,1,1,1,1,1,1,1,1);
          P(10,1,1,1,1,1,1,1,1);
            P(9,1,1,1,1,1,1,1,1);
            P(8,1,1,1,1,1,1,1,1);
            P(7,1,1,1,1,1,1,1,1);
            P(6,1,1,1,1,1,1,1,1);
            P(5,1,1,1,1,1,1,1,1);
            P(4,1,1,1,1,1,1,1,1);
            P(3,1,1,1,1,1,1,1,1);
            P(2,1,1,1,1,1,1,1,1);
            P(1,1,1,1,1,1,1,1,1);
            P(0,1,1,1,1,1,1,1,1);
        }
	}
    
    //vec3 col = vec3(1.);
    vec3 col = tex.xyz/max(tex.x,max(tex.y,tex.z));
   // gl_FragColor = vec4(cha*col,1.);
    gl_FragColor = vec4((cha+col)*col,1.);

}[/code:2u8pxu1u]

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Wonder if is possible do a Color Quantization plugin to be applied in a layout/layer or sprite.

    Here are some of the best ones i found that already have a javascript port:

    NeuQuant

    https://www.npmjs.com/package/neuquant-js

    K-Means

    https://www.npmjs.com/package/kmeans-js

    What you think? Is possible?

  • R0J0hound Tried various stuff but nothing .

    I guess using the shaders on the sprite instead of the layer and just pasting that object will work on any size, right?

    Made on layer because one of the effects, the pixellate one not works correctly applied on the sprite.

    So, i think if finally want use any size will have to rework all the effects system (22 FX XD) if i can get the pixellate shader fixed.

  • R0J0hound Yes i make the canvas size and NW.JS window size bigger before use the paster but if the monitor resolution is for example 1280x720 and the image imported is 2048 not works, at least on windows i can make a window more big than the resolution is, no problem with the canvas but due the scale makes somethings weirds. I'm using now "LetterBox integer scale" but when i try to export an image on others options, seems catch stuff in the margins or other weird stuff.

    So well, i will try other options and other workarounds if is possible, but if you have more ideas, please let me know.

  • blackhornet No works for my needs, if "Paste Layer" measn simply copy the objects not is what i'm looking for then.

    This is the result:

    I have WebGL effects in the layer that are applied to a sprite.

    But if the photo added is like 2048 or 3000x or whatever, take snapshot or similar not works because only gets the APP canvas or window size depending which option uses.

    So i thought "Paste Layer" was some kind of pasting all the visual on that layer into the plugin, but if are only the objects is not what i need.

    I need some way to get the image/visual/screenshot of a layer to paste in the Paster plugin no matter the APP window size,etc...

    Any solution?

  • Hi R0J0hound , first thanks for the great plugin.

    I'm using actually the Canvas & Paster plugin due the canvas have the option to pick RGB values and paster because accept the shader effects.

    My problem is that i'm using the WebGL shaders on a layer(Due some ones only are available for layer and not sprite).

    I can set the Paster size the same as an image imported like 2048x , but i can't add the image with all the layer effects on paster.

    • With "take a snapshot" only takes the window size but if the image is 2048x or more exports cutted.
    • With "load texture from canvas" same problem. I tried also with events change the canvas size and NW.JS windows size to adapt to the image imported but if the SO/Monitor not have that resolution the size can't be higher.

    I saw the "canvas" plugin have an action that says "Pastes layer" but not works, got an error when try to trigger in runtime, btw the canvas not accepts the WebGL effects.

    Is possible add the "Paste Layer" on Paster plugin? Or there is another way i can try to paste in the Paster plugin all the content of a layer? Or maybe on a Sprite using the LoadingURI get the layer content and then paste that image on Paster?

  • Gigatron I edited the Pixellate Shader on C2 to separate the pixelation on width/height so i can get the 8x12 of the ASCII matrix and then works correctly:

    So, the shader needs some kind of pixelation to get the same size of the chars to avoid the problem that can be a solution, but i don't know how to implement o the ASCII one.

  • Gigatron Still same problem no matter the number of zoom :S . I tried to add this shader to Sprite and a layer and nothing.

    You said the problem is the zoom, but the zoom funtions are the same. What i see this code erases the "gray" function to use full color in letters meanwhile in the real shader only uses 1 color for each letter. ¿? Also there is some wrong on wich chars are chosed because mainly all are "@" the high luminosity.

  • Well i solved the color problem with:

    // vec3 col = vec3(1.);

    By

    vec3 col = tex.xyz/max(tex.x,max(tex.y,tex.z));

    But still can't figure how fix the chars display correctly.

  • Using this shader, i saw the chars are made using a binary matrix, so i can draw any 8x12 thing to be used adding how much light represent from 0 to 1.

    The bad thing are the characters not appears correctly <img src="{SMILIES_PATH}/icon_e_sad.gif" alt=":(" title="Sad"> .

    I mean, seems there have some transition of pixels between one char and other. SOme image:

    The chars on the shader code are: ".,-+*#@" . But if you see the image they are mostly broken/glitched like as i said a transition between one and other.

    Is possible just represent exactly that char defined on the matrix inside the shader code?

    Gigatron can you fix it?

    I saw your shader is based on this one: https://www.shadertoy.com/view/4ll3RB . There works perfectly even with colors. Is possible?

    Also other shader that can be great to port for ascii are:

    https://www.shadertoy.com/view/lssGDj

    Also have their own bitmap editor to add more kind of chars:

    http://thrill-project.com/archiv/coding/bitmap/

  • Nope, to avoid the black background you can solve using the "additive" blend, is the unique way i found sorry

  • dop2000 THANKS !!! Worked perfectly !!!

  • If you move R to 55 then:

    R=55

    G=75

    B=105

    No matter the RGB values. In the moment i set in a valriable they are linked if you move one slider up/down all the linked slider values have to move with the same difference.