A Pen by uriuriuriu.

glsl-text.markdown

glsl text

forked http://glsl.heroku.com/e#13593.0

A Pen by uriuriuriu on CodePen.

License.

index.html

<div class="inputWrapper">
  <h2>only English :<input id="input_text" type="text" maxlength ="30" value="editing" autofocus></h2>
</div>
<script id="fragment" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif

uniform float time;
#define MAX_TXTS 40
uniform int txts[MAX_TXTS];
uniform int txtsLengths;
uniform vec2 resolution;
  
// Source edited by David Hoskins - 2013.

// I took and completed this http://glsl.heroku.com/e#9743.20 - just for fun! 8|
// Locations in 3x7 font grid, inspired by http://www.claudiocc.com/the-1k-notebook-part-i/
// Had to edit it to remove line doubling.
// ABC  a:GIOMJL b:AMOIG c:IGMO d:COMGI e:OMGILJ f:CBN g:OMGIUS h:AMGIO i:EEHN j:GHTS k:AMIKO l:BN m:MGHNHIO n:MGIO
// DEF  o:GIOMG p:SGIOM q:UIGMO r:MGI s:IGJLOM t:BNO u:GMOI v:GJNLI w:GMNHNOI x:GOKMI y:GMOIUS z:GIMO
// GHI
// JKL 
// MNO
// PQR
// STU


#define font_size 20. 
#define font_spacing .05
#define STROKEWIDTH 0.05
#define PI 3.14159265359

#define A_ vec2(0.,0.)
#define B_ vec2(1.,0.)
#define C_ vec2(2.,0.)

#define D_ vec2(0.,1.)
#define E_ vec2(1.,1.)
#define F_ vec2(2.,1.)

#define G_ vec2(0.,2.)
#define H_ vec2(1.,2.)
#define I_ vec2(2.,2.)

#define J_ vec2(0.,3.)
#define K_ vec2(1.,3.)
#define L_ vec2(2.,3.)

#define M_ vec2(0.,4.)
#define N_ vec2(1.,4.)
#define O_ vec2(2.,4.)

#define P_ vec2(0.,5.)
#define Q_ vec2(1.,5.)
#define R_ vec2(1.,5.)

#define S_ vec2(0.,6.)
#define T_ vec2(1.,6.)
#define U_ vec2(2.0,6.)

#define A(p) t(G_,I_,p) + t(I_,O_,p) + t(O_,M_, p) + t(M_,J_,p) + t(J_,L_,p)
#define B(p) t(A_,M_,p) + t(M_,O_,p) + t(O_,I_, p) + t(I_,G_,p)
#define C(p) t(I_,G_,p) + t(G_,M_,p) + t(M_,O_,p) 
#define D(p) t(C_,O_,p) + t(O_,M_,p) + t(M_,G_,p) + t(G_,I_,p)
#define E(p) t(O_,M_,p) + t(M_,G_,p) + t(G_,I_,p) + t(I_,L_,p) + t(L_,J_,p)
#define F(p) t(C_,B_,p) + t(B_,N_,p) + t(G_,I_,p)
#define G(p) t(O_,M_,p) + t(M_,G_,p) + t(G_,I_,p) + t(I_,U_,p) + t(U_,S_,p)
#define H(p) t(A_,M_,p) + t(G_,I_,p) + t(I_,O_,p) 
#define I(p) t(E_,E_,p) + t(H_,N_,p) 
#define J(p) t(E_,E_,p) + t(H_,T_,p) + t(T_,S_,p)
#define K(p) t(A_,M_,p) + t(M_,I_,p) + t(K_,O_,p)
#define L(p) t(B_,N_,p)
#define M(p) t(M_,G_,p) + t(G_,I_,p) + t(H_,N_,p) + t(I_,O_,p)
#define N(p) t(M_,G_,p) + t(G_,I_,p) + t(I_,O_,p)
#define O(p) t(G_,I_,p) + t(I_,O_,p) + t(O_,M_, p) + t(M_,G_,p)
#define P(p) t(S_,G_,p) + t(G_,I_,p) + t(I_,O_,p) + t(O_,M_, p)
#define Q(p) t(U_,I_,p) + t(I_,G_,p) + t(G_,M_,p) + t(M_,O_, p)
#define R(p) t(M_,G_,p) + t(G_,I_,p)
#define S(p) t(I_,G_,p) + t(G_,J_,p) + t(J_,L_,p) + t(L_,O_,p) + t(O_,M_,p)
#define T(p) t(B_,N_,p) + t(N_,O_,p) + t(G_,I_,p)
#define U(p) t(G_,M_,p) + t(M_,O_,p) + t(O_,I_,p)
#define V(p) t(G_,J_,p) + t(J_,N_,p) + t(N_,L_,p) + t(L_,I_,p)
#define W(p) t(G_,M_,p) + t(M_,O_,p) + t(N_,H_,p) + t(O_,I_,p)
#define X(p) t(G_,O_,p) + t(I_,M_,p)
#define Y(p) t(G_,M_,p) + t(M_,O_,p) + t(I_,U_,p) + t(U_,S_,p)
#define Z(p) t(G_,I_,p) + t(I_,M_,p) + t(M_,O_,p)
#define STOP(p) t(N_,N_,p)
vec2 caret_origin = vec2(3.0, .6);
vec2 caret;
//float time = mod(iGlobalTime, 11.0);

//-----------------------------------------------------------------------------------
float minimum_distance(vec2 v, vec2 w, vec2 p){
  // Return minimum distance between line segment vw and point p
  float l2 = (v.x - w.x)*(v.x - w.x) + (v.y - w.y)*(v.y - w.y); //length_squared(v, w);  // i.e. |w-v|^2 -  avoid a sqrt
  if (l2 == 0.0) {
    return distance(p, v);   // v == w case
  }
  // Consider the line extending the segment, parameterized as v + t (w - v).
  // We find projection of point p onto the line.  It falls where t = [(p-v) . (w-v)] / |w-v|^2
  float t = dot(p - v, w - v) / l2;
  if(t < 0.0) {
    // Beyond the 'v' end of the segment
    return distance(p, v);
  } else if (t > 1.0) {
    return distance(p, w);  // Beyond the 'w' end of the segment
  }
  vec2 projection = v + t * (w - v);  // Projection falls on the segment
  return distance(p, projection);
}

//-----------------------------------------------------------------------------------
float textColor(vec2 from, vec2 to, vec2 p){
  p *= font_size;
  float inkNess = 0., nearLine, corner;
  nearLine = minimum_distance(from,to,p); // basic distance from segment, thanks http://glsl.heroku.com/e#6140.0
  inkNess += smoothstep(0., 1., 1.- 14.*(nearLine - STROKEWIDTH)); // ugly still
  inkNess += smoothstep(0., 2.5, 1.- (nearLine  + 5. * STROKEWIDTH)); // glow
  return inkNess;
}

//-----------------------------------------------------------------------------------
vec2 grid(vec2 letterspace){
  return ( vec2( (letterspace.x / 2.) * .65 , 1.0-((letterspace.y / 2.) * .95) ));
}

//-----------------------------------------------------------------------------------
float count = 0.0;
float t(vec2 from, vec2 to, vec2 p){
  count++;
  if (count > time*20.0) return 0.0;
  return textColor(grid(from), grid(to), p);
}

//-----------------------------------------------------------------------------------
vec2 r(){
  vec2 pos = gl_FragCoord.xy/resolution.xy;
  pos.y -= caret.y;
  pos.x -= font_spacing*caret.x;
  return pos;
}

//-----------------------------------------------------------------------------------
void add(){
  caret.x += 1.0;
}

//-----------------------------------------------------------------------------------
void space(){
  caret.x += 1.5;
}

//-----------------------------------------------------------------------------------
void newline(){
  caret.x = caret_origin.x;
  caret.y -= .18;
}

//-----------------------------------------------------------------------------------
void main(void){
  float d = 0.;
  vec3 col = vec3(0.1
		           ,.07+0.07*(.5+sin(gl_FragCoord.y*3.14159*1.1+time*2.0)) + sin(gl_FragCoord.y*.01+time+2.5)*0.05
		           ,0.1);
  caret = caret_origin;

  // use continue; => heavry
  // use many "else if" => exhausted memory
  for (int i=0; i<MAX_TXTS; i++) { if (i == txtsLengths) break;
    if (txts[i] == 0) {d += A(r()); add();}
    if (txts[i] == 1) {d += B(r()); add();}
    if (txts[i] == 2) {d += C(r()); add();}
    if (txts[i] == 3) {d += D(r()); add();}
    if (txts[i] == 4) {d += E(r()); add();}
    if (txts[i] == 5) {d += F(r()); add();}
    if (txts[i] == 6) {d += G(r()); add();}
    if (txts[i] == 7) {d += H(r()); add();}
    if (txts[i] == 8) {d += I(r()); add();}
    if (txts[i] == 9) {d += J(r()); add();}
    if (txts[i] == 10){d += K(r()); add();}
    if (txts[i] == 11){d += L(r()); add();}
    if (txts[i] == 12){d += M(r()); add();}
    if (txts[i] == 13){d += N(r()); add();}
    if (txts[i] == 14){d += O(r()); add();}
    if (txts[i] == 15){d += P(r()); add();}
    if (txts[i] == 16){d += Q(r()); add();}
    if (txts[i] == 17){d += R(r()); add();}
    if (txts[i] == 18){d += S(r()); add();}
    if (txts[i] == 19){d += T(r()); add();}
    if (txts[i] == 20){d += U(r()); add();}
    if (txts[i] == 21){d += V(r()); add();}
    if (txts[i] == 22){d += W(r()); add();}
    if (txts[i] == 23){d += X(r()); add();}
    if (txts[i] == 24){d += Y(r()); add();}
    if (txts[i] == 25){d += Z(r()); add();}
    if (txts[i] == 26){space();}
    if (txts[i] == 27){newline();}
  }
  d = clamp(d* (.75+sin(gl_FragCoord.x*PI*.5-time*4.3)*.5), 0.0, 1.0);
      
  col += vec3(d*.5, d, d*.85);
  vec2 xy = gl_FragCoord.xy / resolution.xy;
  col *= vec3(.4, .4, .3) + 0.5*pow(100.0*xy.x*xy.y*(1.0-xy.x)*(1.0-xy.y), .4 );
  gl_FragColor = vec4( col, 1.0 );
}

</script>

script.js

/*
  util
*/
var strAr = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"," ","\n"];
function combertStr(pre_str){
  for (var i = 0; i < strAr.length; i++) {
    if(strAr[i] == pre_str)return i;
  }
}
var _txts =[];
function setTxts(){
  _txts =[];
  var txt = $("#input_text").val();
  var strs = txt.split('');
  for (var i = 0; i < strs.length; i++) {
    _txts.push(combertStr(strs[i]));
  }
}


/*
  main
*/
// alert
if (!Glsl.supported()) alert("WebGL is not supported.");
// create canvas
var _cvs = document.createElement("canvas");
_cvs.width = window.innerWidth;
_cvs.height = window.innerHeight;
document.body.appendChild(_cvs);
// show glsl
Glsl({
  canvas: _cvs,
  fragment: document.getElementById("fragment").innerHTML,
  variables: {
    time: 0
  },
  init: function () {
  },
  update: function (time) {
    this.set("time", time/1000 - 1);
    setTxts();
    this.set("txts", _txts);
    this.set("txtsLengths", _txts.length);
    this.sync("txts");
    this.sync("txtsLengths");
  }
}).start();

style.scss

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Dosis:400);
*{
  margin:0; padding:0;
}
p{
  position: fixed;
  text-align:center;
  width:100%;
  bottom:10px;
  font-size:30px;
  color:#aaa;
  font-family: 'Dosis', sans-serif;
}


.inputWrapper{
  text-align:center;
  position:fixed;
  bottom:0px;
  padding:4px;
  width:100%;
  z-index:20000000;
  background-color:#000;
}
h2{
  color:#FFF;
  font-family: 'Josefin Slab', serif;
  font-size:20px;
  font-weight:bold;
}
input{
  padding:4px;
  font-size:20px;
  font-family: 'Josefin Slab', serif;
  font-family: 'Dosis', sans-serif;
  color:#777;
  font-weight:bold;
  border:0;
  background-color:rgba(#fff,0.8);
  margin:0 4px;
  width:10em;
  @include border-radius(8px);
}