-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathorig-index.html
155 lines (130 loc) · 4.54 KB
/
orig-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
<!DOCTYPE html>
<!-- saved from url=(0037)https://twgljs.org/examples/tiny.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--
@license twgl.js Copyright (c) 2015, Gregg Tavares All Rights Reserved.
Available via the MIT license.
see: http://github.com/greggman/twgl.js for details
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta property="og:title" content="TWGL.js - tiny">
<meta property="og:type" content="website">
<meta property="og:image" content="http://twgljs.org/examples/screenshots/tiny.png">
<meta property="og:description" content="TWGL.js - tiny">
<meta property="og:url" content="http://twgljs.org">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@greggman">
<meta name="twitter:creator" content="@greggman">
<meta name="twitter:domain" content="twgljs.org">
<meta name="twitter:title" content="TWGL.js - tiny">
<meta name="twitter:url" content="http://twgljs.org/examples/tiny.html">
<meta name="twitter:description" content="TWGL.js - tiny">
<meta name="twitter:image:src" content="http://twgljs.org/examples/screenshots/tiny.png">
<link href="https://twgljs.org/resources/images/twgljs-icon.png" rel="shortcut icon" type="image/png">
<title>twgl.js - tiny</title>
<style>
body {
margin: 0;
font-family: monospace;
}
canvas {
display: block;
width: 100vw;
height: 100vh;
}
#b {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 2;
}
</style>
</head>
<body>
<canvas id="c" width="1680" height="855"></canvas>
<div id="b"><a href="https://twgljs.org/">twgl.js</a> - tiny</div>
<script id="vs" type="notjs">
attribute vec4 position;
void main() {
gl_Position = position;
}
</script>
<script id="fs" type="notjs">
precision mediump float;
uniform vec2 resolution;
uniform float time;
uniform float yeah;
// TODO slow
float linmap(float a, float b, float c, float d, float x) {
return ((x - a) * ((d - c) / (b - a))) + c;
}
void main() {
// Assumes horizontal
float m = (resolution.x - resolution.y) / 2.0;
vec2 uv = vec2(linmap(resolution.x/2.0, resolution.x - m, 0.0, 1.0, gl_FragCoord.x),
linmap(resolution.y/2.0, resolution.y , 0.0, 1.0, gl_FragCoord.y));
// circle
vec2 center = vec2(0.2 + yeah, 0.2);
float radius = 0.2;
float cdist = (length(uv-center) / radius) - 1.0;
// square
vec2 scenter = vec2(0.0, 0.0);
vec2 sd = abs(uv - scenter);
float sdist = (max(sd.x, sd.y) / radius) - 1.0;
// circle
// float dist = cdist;
// square
// float dist = sdist;
// intersection
// float dist = max(cdist, sdist);
// union
// float dist = min(cdist, sdist);
// difference: s - c
// float dist = max(sdist, -cdist);
float r = 0.3;
float d0 = cdist;
float d1 = sdist;
float md0 = min(d0 - r, 0.0);
float md1 = min(d1 - r, 0.0);
float inside_distance = -(sqrt(md0*md0 + md1*md1));
float simple_union = min(d0, d1);
float outside_distance = max(simple_union, r);
float dist = inside_distance + outside_distance;
if (dist < 0.0) {
gl_FragColor = vec4(vec3(1.0, 0.0, 0.0), 1.0);
} else {
gl_FragColor = vec4(vec3(0.0, 1.0, 0.0), 1.0);
}
// if (uv.x > -0.9 && uv.x < 0.9 && uv.y > -0.9 && uv.y < 0.9) {
// gl_FragColor = vec4(vec3(1.0, 0.0, 0.0), 1.0);
// } else {
// gl_FragColor = vec4(vec3(0.0, 1.0, 0.0), 1.0);
// }
}
</script>
<script type="module">
import * as twgl from './twgl-full.module.js';
const gl = document.querySelector("#c").getContext("webgl");
const programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
const arrays = {
position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0],
};
const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
function render(time) {
twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
const uniforms = {
time: time * 0.001,
resolution: [gl.canvas.width, gl.canvas.height],
yeah: time / 10000.0,
};
gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.setUniforms(programInfo, uniforms);
twgl.drawBufferInfo(gl, bufferInfo);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
</script>
</body></html>