[effect] Ascii Art FX

Post reply

❤Follow Topic(6)

0 favourites

10 posts

From the Asset Store

Mixed Martial Arts Announcer Voice Pack

$6.99 USD

322 audio files (.wav and mp3) with everything you need for your MMA project.

B. Squid

- Gigatron
- - Joined 8 Jan, 2012
  - 150 topics • 948 posts
- 1
- 9 Jun, 2015
- Quote
So for the end of this day here is another fx called Ascii FX;

It's convert sprite to "selected ascii chars on glsls code" like .*/+-; etc ..;

Parameter: Zoom for chars factor. 1 normal 2.0 more zoom ...

Demo:

http://gigatron3k.free.fr/html5/C2/FX/Ascii

Fx file:

http://gigatron3k.free.fr/html5/C2/FX/ascii.rar

Have Fun
- TiAm
- - Joined 24 Nov, 2011
  - 70 topics • 1,084 posts
- 1
- 12 Jun, 2015
- Quote
Whoa, awesome! To modulate it, hold ctrl and roll your mouse wheel to zoom; the rez of the ascii field will change.
- Havok
- - Joined 20 Jul, 2011
  - 28 topics • 260 posts
- 1
- 2 Jul, 2015
- Quote
AWESOME, thanks!
- Vilehead
- - Joined 9 Nov, 2010
  - 49 topics • 640 posts
- 1
- 23 Jun, 2016
- Quote
This is creepy AF

I love it
- matriax
- - Joined 22 Jun, 2015
  - 153 topics • 796 posts
- 1
- 10 Nov, 2017
- Quote
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/
- matriax
- - Joined 22 Jun, 2015
  - 153 topics • 796 posts
- 1
- 10 Nov, 2017
- Quote
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.

Gigatron
- Joined 8 Jan, 2012
- 150 topics • 948 posts
1

11 Nov, 2017
Quote

matriax

The zoom parameters cause this problem... i have an another version of this fx on my SSD;

this one must work now with zoom to 1 or 2;

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)-1.),2.)); }

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 = tex.r+tex.g+tex.b;

			if( g < .125 )
			{
			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,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,1,1,0,0,0);
			P(3,0,0,0,1,1,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 < .375 ) // ,
			{
			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,1,1,0,0,0);
			P(3,0,0,0,1,1,0,0,0);
			P(2,0,0,0,0,1,0,0,0);
			P(1,0,0,0,1,0,0,0,0);
			P(0,0,0,0,0,0,0,0,0);
			}
			else if( g < .5 ) // -
			{
			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,1,1,1,1,1,1,1,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 < .625 ) // +
			{
			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,1,0,0,0,0);
			P(8, 0,0,0,1,0,0,0,0);
			P(7, 0,0,0,1,0,0,0,0);
			P(6, 1,1,1,1,1,1,1,0);
			P(5, 0,0,0,1,0,0,0,0);
			P(4, 0,0,0,1,0,0,0,0);
			P(3, 0,0,0,1,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 < .75 ) // *
			{
			P(11,0,0,0,0,0,0,0,0);
			P(10,0,0,0,1,0,0,0,0);
			P(9,1,0,0,1,0,0,1,0);
			P(8,0,1,0,1,0,1,0,0);
			P(7,0,0,1,1,1,0,0,0);
			P(6,0,0,0,1,0,0,0,0);
			P(5,0,0,1,1,1,0,0,0);
			P(4,0,1,0,1,0,1,0,0);
			P(3,1,0,0,1,0,0,1,0);
			P(2,0,0,0,1,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 < .875 ) // #
			{
			P(11,0,0,0,0,0,0,0,0);
			P(10,0,0,1,0,0,1,0,0);
			P(9,0,0,1,0,0,1,0,0);
			P(8,1,1,1,1,1,1,1,0);
			P(7,0,0,1,0,0,1,0,0);
			P(6,0,0,1,0,0,1,0,0);
			P(5,0,1,0,0,1,0,0,0);
			P(4,0,1,0,0,1,0,0,0);
			P(3,1,1,1,1,1,1,1,0);
			P(2,0,1,0,0,1,0,0,0);
			P(1,0,1,0,0,1,0,0,0);
			P(0,0,0,0,0,0,0,0,0);
			}
			else // @
			{
			P(11,0,0,0,0,0,0,0,0);
			P(10,0,0,1,1,1,1,0,0);
			P(9,0,1,0,0,0,0,1,0);
			P(8,1,0,0,0,1,1,1,0);
			P(7,1,0,0,1,0,0,1,0);
			P(6,1,0,0,1,0,0,1,0);
			P(5,1,0,0,1,0,0,1,0);
			P(4,1,0,0,1,0,0,1,0);
			P(3,1,0,0,1,1,1,1,0);
			P(2,0,1,0,0,0,0,0,0);
			P(1,0,0,1,1,1,1,1,0);
			P(0,0,0,0,0,0,0,0,0);
			}
    
vec3 col = vec3(tex.xyz);
gl_FragColor = vec4(cha*col,1.);
}

[/code:i1chtnow]

- matriax
- - Joined 22 Jun, 2015
  - 153 topics • 796 posts
- 1
- 11 Nov, 2017
- Quote
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.
- matriax
- - Joined 22 Jun, 2015
  - 153 topics • 796 posts
- 1
- 11 Nov, 2017
- Quote
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.
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads
- iceangel
- - Joined 20 Apr, 2013
  - 18 topics • 918 posts
- 1
- 13 Nov, 2017
- Quote
Amazing! Gigatron