monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

🎨

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

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

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