-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
132 lines (118 loc) · 3.95 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
<!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. Intended to look and
feel as vanilla as possible.
</p>
<p><a href="https://github.com/kcgidw/kcvanilla">Github</a></p>
</div>
<div class="jokersfull">
<!-- <h2>jokers</h2> -->
<div class="jokers cards"></div>
</div>
<p>
<a href="https://github.com/notmario/balatrowebsitetemplate"
>Website template by notmario</a
>
</p>
<div class="consumablesfull">
<h2>consumables</h2>
<div class="consumables cards"></div>
</div>
<div class="cardmodsfull">
<h2>card modifications</h2>
<div class="cardmods cards"></div>
</div>
<div class="decksfull">
<h2>decks</h2>
<div class="decks cards"></div>
</div>
<div class="stickersfull">
<h2>stickers</h2>
<div class="stickers cards"></div>
</div>
<div class="blindsfull">
<h2>blinds</h2>
<div class="blinds cards"></div>
</div>
<div class="shopitemsfull">
<h2>shop items</h2>
<div class="shopitems cards"></div>
</div>
</main>
<script src="site/addjokers.js" defer></script>
</body>
</html>