heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2023-05-17 11:08:46 +09:00
parent 5d22e113b2
commit ca2ed0a59b
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/frontend/src/components/MkAnimBg.vue
View File

@ -8,6 +8,14 @@ import isChromatic from 'chromatic/isChromatic';
const canvasEl = shallowRef<HTMLCanvasElement>();
const props = withDefaults(defineProps<{
scale?: number;
focus?: number;
}>(), {
scale: 1.0,
focus: 1.0,
});
function loadShader(gl, type, source) {
const shader = gl.createShader(type);
@ -65,11 +73,13 @@ onMounted(() => {
const shaderProgram = initShaderProgram(gl, `
attribute vec2 vertex;
uniform vec2 u_scale;
varying vec2 v_pos;
void main() {
gl_Position = vec4(vertex, 0.0, 1.0);
v_pos = vertex;
v_pos = vertex / u_scale;
}
`, `
precision mediump float;
@ -191,12 +201,14 @@ onMounted(() => {
const u_warp = gl.getUniformLocation(shaderProgram, 'u_warp');
const u_focus = gl.getUniformLocation(shaderProgram, 'u_focus');
const u_itensity = gl.getUniformLocation(shaderProgram, 'u_itensity');
const u_scale = gl.getUniformLocation(shaderProgram, 'u_scale');
gl.uniform2fv(u_resolution, [canvas.width, canvas.height]);
gl.uniform1f(u_spread, 1.0);
gl.uniform1f(u_speed, 1.0);
gl.uniform1f(u_warp, 1.0);
gl.uniform1f(u_focus, 1.0);
gl.uniform1f(u_focus, props.focus);
gl.uniform1f(u_itensity, 0.5);
gl.uniform2fv(u_scale, [props.scale, props.scale]);
const vertex = gl.getAttribLocation(shaderProgram, 'vertex');
gl.enableVertexAttribArray(vertex);

4
packages/frontend/src/components/MkUserSetupDialog.vue
View File

@ -27,7 +27,7 @@
>
<template v-if="page === 0">
<div :class="$style.centerPage">
<MkAnimBg style="position: absolute; top: 0;"/>
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
<MkSpacer :margin-min="20" :margin-max="28">
<div class="_gaps" style="text-align: center;">
<i class="ti ti-confetti" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>
@ -83,7 +83,7 @@
</template>
<template v-else-if="page === 5">
<div :class="$style.centerPage">
<MkAnimBg style="position: absolute; top: 0;"/>
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
<MkSpacer :margin-min="20" :margin-max="28">
<div class="_gaps" style="text-align: center;">
<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--accent);"></i>