mirror of
https://activitypub.software/TransFem-org/Sharkey
synced 2024-11-25 15:35:12 +00: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 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);
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue