diff options
author | Javiya Vivekkumar Dineshbhai <vivek.javiya@collabora.com> | 2024-07-05 16:29:37 +0530 |
---|---|---|
committer | Szymon Kłos <eszkadev@gmail.com> | 2024-07-05 18:07:13 +0200 |
commit | 77d3126714d62490bf4836d0bb9f7830e71223c7 (patch) | |
tree | 27dc6df19f8fcb54d555b13460813f00d69a808c | |
parent | Refactor code for integrate multiple transition (diff) | |
download | online-77d3126714d62490bf4836d0bb9f7830e71223c7.tar.gz online-77d3126714d62490bf4836d0bb9f7830e71223c7.zip |
transition: add wheel transition with variants
Signed-off-by: Javiya Vivekkumar Dineshbhai <vivek.javiya@collabora.com>
Change-Id: Ic72da9383f30f395d07021cd860acb44f2494e13
-rw-r--r-- | browser/Makefile.am | 2 | ||||
-rw-r--r-- | browser/src/slideshow/PerformTransition.ts | 8 | ||||
-rw-r--r-- | browser/src/slideshow/transition/WheelTransition.ts | 74 |
3 files changed, 84 insertions, 0 deletions
diff --git a/browser/Makefile.am b/browser/Makefile.am index eaacad46be..8d84ea720e 100644 --- a/browser/Makefile.am +++ b/browser/Makefile.am @@ -414,6 +414,7 @@ COOL_JS_LST =\ src/slideshow/Transition2d.ts \ src/slideshow/PerformTransition.ts \ src/slideshow/transition/FadeTransition.ts \ + src/slideshow/transition/WheelTransition.ts \ src/slideshow/transition/WipeTransition.ts \ src/dom/PosAnimation.js \ src/map/anim/Map.PanAnimation.js \ @@ -851,6 +852,7 @@ pot: src/slideshow/Transition2d.ts \ src/slideshow/PerformTransition.ts \ src/slideshow/transition/FadeTransition.ts \ + src/slideshow/transition/WheelTransition.ts \ src/core/Socket.js \ src/core/Debug.js \ src/docstate.js \ diff --git a/browser/src/slideshow/PerformTransition.ts b/browser/src/slideshow/PerformTransition.ts index 1d858f142e..c61ddbce22 100644 --- a/browser/src/slideshow/PerformTransition.ts +++ b/browser/src/slideshow/PerformTransition.ts @@ -20,6 +20,14 @@ app.definitions.PerformTransition = function ( image2, ).start(1); break; + case 'WHEEL': + // 1,2,3, 4, 8 + new WheelTransition( + canvas, + image1, + image2, + ).start(2); + break; default: console.error('Unknown transition type'); break; diff --git a/browser/src/slideshow/transition/WheelTransition.ts b/browser/src/slideshow/transition/WheelTransition.ts new file mode 100644 index 0000000000..eb0aeec070 --- /dev/null +++ b/browser/src/slideshow/transition/WheelTransition.ts @@ -0,0 +1,74 @@ +/* + * Copyright the Collabora Online contributors. + * + * SPDX-License-Identifier: MPL-2.0 + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +class WheelTransition extends Transition2d { + private stocks: number = 0; + constructor( + canvas: HTMLCanvasElement, + image1: HTMLImageElement, + image2: HTMLImageElement, + ) { + super(canvas, image1, image2); + this.prepareTransition(); + this.animationTime = 1500; + } + + public renderUniformValue(): void { + this.gl.uniform1i( + this.gl.getUniformLocation(this.program, 'stocks'), + this.stocks, + ); + } + + public start(stocks: number): void { + this.stocks = stocks; + this.startTransition(); + } + + public getVertexShader(): string { + return `#version 300 es + in vec4 a_position; + in vec2 a_texCoord; + out vec2 v_texCoord; + + void main() { + gl_Position = a_position; + v_texCoord = a_texCoord; + } + `; + } + + public getFragmentShader(): string { + return `#version 300 es + precision mediump float; + + uniform sampler2D leavingSlideTexture; + uniform sampler2D enteringSlideTexture; + uniform float time; + uniform int stocks; // Number of stocks + + in vec2 v_texCoord; + out vec4 outColor; + + void main() { + vec2 uv = v_texCoord; + float angle = atan(uv.y - 0.5, uv.x - 0.5) + 3.14159265359; + float slice = 6.28318530718 / float(stocks); // 2 * PI divided by number of stocks + float progress = time; + + if (mod(angle , slice) < slice * progress) { + outColor = texture(enteringSlideTexture, uv); + } else { + outColor = texture(leavingSlideTexture, uv); + } + } + `; + } +} |