forked from patriciogonzalezvivo/glslCanvas
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
203 lines (167 loc) · 5.86 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GLSL Shader Gallery</title>
<script type="text/javascript" src="dist/GlslCanvas.js"></script>
<style>
body {
background-color: #101515;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 0;
}
.shader-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
}
.shader-item {
position: relative;
}
canvas {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="shader-grid">
<div class="shader-item">
<canvas id="shader1" data-fragment="
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform float u_time;
vec3 palette(float t){
vec3 a = vec3(0.490,0.037,0.113);//base color
vec3 b = vec3(0.190,0.040,0.167);//color variation
vec3 c = vec3(0.630,0.043,0.025);//frequency of color changes
vec3 d = vec3(0.975,0.884,0.082);//color offset
return a + b * cos (6.0 * (c * t + d));
}
float dot2(vec2 v){
return dot(v,v);
}
float heartShape(vec2 p){
p.x = abs(p.x); //symmetry
if( p.y+p.x>1.0 )
return sqrt(dot2(p-vec2(0.25,0.75))) - sqrt(2.0)/4.0;
return sqrt(min(dot2(p-vec2(0.00,1.00)),
dot2(p-0.5*max(p.x+p.y,0.0)))) * sign(p.x-p.y);
}
void main() {
//SCREEN ADJUSTMENT
vec2 uv = (gl_FragCoord.xy * 2.0 - u_resolution) / u_resolution.y; //to adjust the canvas without sretch
uv.y -= -0.45;
//Shape
float d = heartShape(uv * 1.304); //radius
d = abs(d);
vec3 color = palette(length(d));
d += sin(u_time*3.120) /6.864;
float edge = smoothstep(-0.2,0.076,d);
color *= 1.064 - edge;
gl_FragColor = vec4(color,1.0);
}" width="300" height="300"></canvas>
</div>
<div class="shader-item">
<canvas id="shader2" data-fragment="
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution; // Screen resolution
uniform float u_time; // Time variable
// Function to draw a circle
float circle(in vec2 _st, in float _radius) {
vec2 dist = _st - vec2(0.0); // Center the circle at (0, 0)
return 1.0 - smoothstep(_radius - (_radius * 0.01),
_radius + (_radius * 0.01),
dot(dist, dist) * 4.0);
}
// Function to create the blinking effect
float blink(float yCoord, float blinkSpeed) {
return smoothstep(-1.0, -0.5, yCoord + sin(u_time * blinkSpeed) * 0.5) *
smoothstep(1.0, 0.5, yCoord - sin(u_time * blinkSpeed) * 0.5);
}
void main() {
// Normalize coordinates to range [-1, 1]
vec2 uv = (gl_FragCoord.xy / u_resolution) * 2.0 - 1.0;
// Adjust for aspect ratio
uv.x *= u_resolution.x / u_resolution.y;
// Define circle radii
float radius1 = 0.06 + 0.03 * sin(u_time * 1.5); // Oscillating radius for the first circle
float radius2 = 0.2; // Radius for the second circle
float radius3 = 2.0; // Radius for the third circle
// Calculate visibility for each circle
float c1 = circle(uv, radius1);
float c2 = circle(uv, radius2);
float c3 = circle(uv, radius3);
// Blink effect applied to the first circle
// Use a sin wave for the blink factor but adjust its speed and range
float blinkSpeed = 1.05; // Speed of the blinking
float blinkFactor = step(0.76, 1.0 - abs(uv.y) + sin(u_time * blinkSpeed) * 0.5); // Adjust sin scaling to control blink timing
// Adjust the speed of the blink with 1.5
// Assign colors to each circle
vec3 color1 = vec3(0.000,0.000,0.000); // Color for the first circle (orange)
vec3 color2 = vec3(0.815,0.069,0.014); // Color for the second circle (blue)
vec3 color3 = vec3(1.,1.,1.); // Color for the third circle (dark red)
// Initialize the final color as transparent
vec4 finalColor = vec4(0.0);
// Draw the first circle with blinking effect
if (c1 > 0.0) {
finalColor = vec4(color1, blinkFactor); // Set to the color of the first circle with opacity blink
}
// Draw the second circle (blue)
else if (c2 > 0.0) {
finalColor = vec4(color2, blinkFactor); // Set to the color of the second circle
}
// Draw the third circle (dark red)
else if (c3 > 0.0) {
finalColor = vec4(color3, blinkFactor); // Set to the color of the third circle
}
// Final output
gl_FragColor = finalColor;
}" width="300" height="300"></canvas>
</div>
<div class="shader-item">
<canvas id="shader3" data-fragment="
#ifdef GL_ES
precision mediump float;
#endif
uniform float u_time;
uniform vec2 u_resolution;
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec3 c;
float l, z = u_time; // Use u_time instead of t
for(int i = 0; i <3 ; i++) {
vec2 uv, p = fragCoord.xy / (u_resolution); // Use u_resolution instead of r
uv = p;
//p -= 0.500;
p *= 5.0;
p.x *= u_resolution.x / u_resolution.y; // Use u_resolution
z += 0.07;
l = length(p);
uv += p / l * (cos(z) + 1.0) * abs(cos(l * 9.0 -z - z));
c[i] = 0.04 / length(mod(uv, 0.0) - 0.5);
}
fragColor = vec4(c / l, u_time); // Use u_time instead of t
}
void main() {
mainImage(gl_FragColor, gl_FragCoord.xy); // Call mainImage from main
}" width="300" height="300"></canvas>
</div>
</div>
<script>
document.querySelectorAll('canvas').forEach(function(canvas) {
var sandbox = new GlslCanvas(canvas);
});
</script>
</body>
</html>