-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
116 lines (102 loc) · 3.84 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KCVanilla Joker Pack</title>
<script src="https://xemantic.github.io/shader-web-background/dist/shader-web-background.min.js"></script>
<script type="x-shader/x-fragment" id="image">
precision mediump float;
#define SPIN_EASE 0.8
#define spin_time 5.
#define spin_amount 0.3
#define contrast 3.
// #define PIXEL_SIZE_FAC 700.
// default colours
// #define colour_1 vec4(1.0,0.3725490196,0.3333333333,1.0)
// #define colour_2 vec4(0.0,0.6156862745,1.0,1.0)
// #define colour_3 vec4(0.2156862745,0.2588235294,0.2666666667,1.0)
#define colour_1 vec4(0.75, 0.6, 0.4, 1.0)
#define colour_2 vec4(0.65, 0.5, 0.34, 1)
#define colour_3 vec4(0.85, 0.8, 0.75, 1)
uniform vec2 iResolution;
uniform float iTime;
void main( )
{
// uncomment to enable pixelated bg
// float pixel_size = length(iResolution.xy)/PIXEL_SIZE_FAC;
float pixel_size = 1.0;
vec2 uv = (floor(gl_FragCoord.xy*(1./pixel_size))*pixel_size - 0.5*iResolution.xy)/length(iResolution.xy) - vec2(0.12, 0.);
float uv_len = length(uv);
float speed = (spin_time*SPIN_EASE*0.2) + 302.2;
float new_pixel_angle = (atan(uv.y, uv.x)) + speed - SPIN_EASE*20.*(1.*spin_amount*uv_len + (1. - 1.*spin_amount));
vec2 mid = vec2(0.5, 0.5);
uv = (vec2((uv_len * cos(new_pixel_angle) + mid.x), (uv_len * sin(new_pixel_angle) + mid.y)) - mid);
uv *= 30.;
speed = iTime*(2.);
vec2 uv2 = vec2(uv.x+uv.y);
for(int i=0; i < 5; i++) {
uv2 += sin(max(uv.x, uv.y)) + uv;
uv += 0.5*vec2(cos(5.1123314 + 0.353*uv2.y + speed*0.131121),sin(uv2.x - 0.113*speed));
uv -= 1.0*cos(uv.x + uv.y) - 1.0*sin(uv.x*0.711 - uv.y);
}
float contrast_mod = (0.25*contrast + 0.5*spin_amount + 1.2);
float paint_res =min(2., max(0.,length(uv)*(0.035)*contrast_mod));
float c1p = max(0.,1. - contrast_mod*abs(1.-paint_res));
float c2p = max(0.,1. - contrast_mod*abs(paint_res));
float c3p = 1. - min(1., c1p + c2p);
// Output to screen
gl_FragColor = (0.3/contrast)*colour_1 + (1. - 0.3/contrast)*(colour_1*c1p + colour_2*c2p + vec4(c3p*colour_3.rgb, c3p*colour_1.a));
}
</script>
<link rel="stylesheet" href="site/normalize.css" />
<link rel="stylesheet" href="site/style.css" />
</head>
<body>
<script>
let t = 0;
requestAnimationFrame(function update() {
t += 1 / 120;
requestAnimationFrame(update);
});
shaderWebBackground.shade({
shaders: {
image: {
uniforms: {
iResolution: (gl, loc, ctx) => gl.uniform2f(loc, ctx.width, ctx.height),
iTime: (gl, loc, ctx) => gl.uniform1f(loc, t),
},
},
},
});
</script>
<main>
<h1>KCVanilla Joker Pack</h1>
<div class="desc">
<p>
A small pack of plausible Jokers with a faithful art style.<br />Intended to
look and feel as vanilla as possible.
</p>
<p><a href="https://github.com/kcgidw/kcvanilla">Github</a></p>
</div>
<div class="jokers">
<img src="assets/originals/mondrian.png" />
<img src="assets/originals/fortunecookie.png" />
<img src="assets/originals/robo.png" />
<img src="assets/originals/squid.png" />
<img src="assets/originals/tenpin.png" />
<img src="assets/originals/redenvelope.png" />
<img src="assets/originals/cheese.png" />
<img src="assets/originals/chan.png" />
<img src="assets/originals/5day.png" />
<img src="assets/originals/sock.png" />
<img src="assets/originals/energy.png" />
<img src="assets/originals/powergrid.png" />
<img src="assets/originals/guard.png" />
<img src="assets/originals/collapse.png" />
<img src="assets/originals/irish.png" />
<img src="assets/originals/rakugo.png" />
</div>
</main>
</body>
</html>