-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
157 lines (115 loc) · 4.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>text2shader</title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="js/includer.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<h1>text2shader</h1>
The large image of pixels is derived from a text document. Each letter is encoded into a channel within a pixel.
<br />
<div>
<label>Type a search term and the shader will find all instances of that term INSTANTLY!</label>
<br /><br />
<input id="myMessage" name="message1"></input>
</div>
<br />
<canvas width="512" height="512" id="positive"></canvas>
<canvas width="512" height="512" id="mainCanvas"></canvas>
<!-- <canvas width="512" height="512" id="outputCanvas"></canvas> -->
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
// uniform mat4 uMVMatrix;
// uniform mat4 uPMatrix;
varying vec2 vTextureCoord;
void main(void) {
gl_Position = /*uPMatrix * uMVMatrix * */vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;// * vec2(1.0,1.0);
// vTextureCoord = aTextureCoord * vec2(-1.0,1.0); // MINUS ONE CAN REVERSE OUR DATA *I>E REVERSE ARRAYS ... blimey. thats very cool
}
</script>
<script>
// load in some image data
var pos = new GTP.Loader();
pos.loadAsImage( "data/generateImageTest.png", "positive", function() {
main();
});
function main()
{
var gl;
var canvas = document.getElementById('mainCanvas');
try {
gl = canvas.getContext('experimental-webgl');
} catch (e) {
throw new Error('no WebGL found');
}
if (gl)
{
gl.clearColor(0.0, 0.0, 1.0, 1.0); // Set clear color to blue, fully opaque
gl.enable(gl.DEPTH_TEST); // Enable depth testing
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // Clear the color as well as the depth buffer.
gl.viewportWidth = 512;
gl.viewportHeight = 512;
}
var glTest = WEBGL;
glTest.gl = gl;
glTest.query = "*"; // forcing a not often used character for init
glTest.run( 'positive' );
// ------------------------------------>>>>> PASS A QUERY
$("#myMessage").keyup(function() {
var value = $(this).val();
if(value.length==0) value="*"; // forcing a not often used character
// pass the query to gl for proccessing
glTest.query = value;
glTest.rerun();
});
/*
METHOD ADDED SO YOU CAN CLICK ON PIXEL AND SEE ITS CHARACTERS>/// .. be good to read a few pixels in
*/
// for tracing the value
jQuery('#positive').mousemove(function(e){ // TODO - need to do one of these for GL.. seems to work fine for canvas though
var position = findPos(this);
var x = e.pageX - position.x;
var y = e.pageY - position.y;
var coordinate = "x=" + x + ", y=" + y;
var canvas = this.getContext('2d');
var p = canvas.getImageData(x, y, 1000, 1).data;
// alert( p[0] +"|"+ p[1] +"|"+ p[2] +"=="+ GTP.map[p[0]] +""+ GTP.map[p[1]] +""+ GTP.map[p[2]] );
var i=0;
var len=p.length;
var arr=[];
for( i; i<len; i+=4 ) {
arr.push( GTP.map[p[i]] );
arr.push( GTP.map[p[i+1]] );
arr.push( GTP.map[p[i+2]] );
// str += map[pix[i+3]]+"";
}
$('p').text(arr.join(""));
});
}
// utils
function findPos(obj){
var current_left = 0, current_top = 0;
if (obj.offsetParent){
do{
current_left += obj.offsetLeft;
current_top += obj.offsetTop;
}while(obj = obj.offsetParent);
return {x: current_left, y: current_top};
}
return undefined;
}
function rgbToHex(r, g, b){
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}
</script>
<!-- <div id="inpsect"></div> -->
<p>Roll over the image to see which characters are encoded into the pixels.</p>
</body>
</html>