mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-10 10:03:08 +02:00
🎨
This commit is contained in:
parent
5d22e113b2
commit
ca2ed0a59b
2 changed files with 16 additions and 4 deletions
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue