diff options
author | Javiya Vivekkumar Dineshbhai <vivek.javiya@collabora.com> | 2024-07-05 20:39:27 +0530 |
---|---|---|
committer | Szymon Kłos <eszkadev@gmail.com> | 2024-07-05 18:07:13 +0200 |
commit | 6a43f1cc197bf430187dc09934443abb75960f13 (patch) | |
tree | 1d6b012958011ce4efce17b2e4539c4081133964 | |
parent | transition: Add Box transition (diff) | |
download | online-6a43f1cc197bf430187dc09934443abb75960f13.tar.gz online-6a43f1cc197bf430187dc09934443abb75960f13.zip |
Transition: Add Wedge transition
Signed-off-by: Javiya Vivekkumar Dineshbhai <vivek.javiya@collabora.com>
Change-Id: I6fa0c053976fb8dcfe67095aaa584ae5ca1e977e
-rw-r--r-- | browser/Makefile.am | 2 | ||||
-rw-r--r-- | browser/src/slideshow/PerformTransition.ts | 8 | ||||
-rw-r--r-- | browser/src/slideshow/transition/WedgeTransition.ts | 82 |
3 files changed, 92 insertions, 0 deletions
diff --git a/browser/Makefile.am b/browser/Makefile.am index 98f5f7c5e5..5f255478da 100644 --- a/browser/Makefile.am +++ b/browser/Makefile.am @@ -416,6 +416,7 @@ COOL_JS_LST =\ src/slideshow/transition/FadeTransition.ts \ src/slideshow/transition/PlusTransition.ts \ src/slideshow/transition/CircleTransition.ts \ + src/slideshow/transition/WedgeTransition.ts \ src/slideshow/transition/OvalTransition.ts \ src/slideshow/transition/BoxTransition.ts \ src/slideshow/transition/DiamondTransition.ts\ @@ -862,6 +863,7 @@ pot: src/slideshow/transition/FadeTransition.ts \ src/slideshow/transition/PlusTransition.ts \ src/slideshow/transition/CircleTransition.ts \ + src/slideshow/transition/WedgeTransition.ts \ src/slideshow/transition/BoxTransition.ts \ src/slideshow/transition/OvalTransition.ts\ src/slideshow/transition/DiamondTransition.ts\ diff --git a/browser/src/slideshow/PerformTransition.ts b/browser/src/slideshow/PerformTransition.ts index 443cd33a5f..ee76265c73 100644 --- a/browser/src/slideshow/PerformTransition.ts +++ b/browser/src/slideshow/PerformTransition.ts @@ -104,6 +104,14 @@ SlideShow.PerformTransition = function ( ).start(1); break; + case 'WEDGE': + new WedgeTransition( + canvas, + image1, + image2, + ).start(); + break; + diff --git a/browser/src/slideshow/transition/WedgeTransition.ts b/browser/src/slideshow/transition/WedgeTransition.ts new file mode 100644 index 0000000000..cebb7a2b96 --- /dev/null +++ b/browser/src/slideshow/transition/WedgeTransition.ts @@ -0,0 +1,82 @@ +/* + * 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/. + */ + +declare var SlideShow: any; + +class WedgeTransition extends SlideShow.Transition2d { + constructor( + canvas: HTMLCanvasElement, + image1: HTMLImageElement, + image2: HTMLImageElement, + ) { + super(canvas, image1, image2); + this.prepareTransition(); + this.animationTime = 2000; + } + + + public start(): void { + 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; + + #define M_PI 3.14159265359 + + + uniform sampler2D leavingSlideTexture; + uniform sampler2D enteringSlideTexture; + uniform float time; + + in vec2 v_texCoord; + out vec4 outColor; + + void main() { + vec2 uv = v_texCoord; + float progress = time; + + vec2 center = vec2(0.5, 0.5); + + vec2 dist = uv - center; + float angle = atan(dist.x, dist.y); + + if (angle < 0.0) { + angle += 2.0 * M_PI; + } + + float wedgeAngle = M_PI * progress; + + float mask = step(angle, wedgeAngle) + step(2.0 * M_PI - wedgeAngle, angle); + + mask = min(mask, 1.0); + + vec4 color1 = texture(leavingSlideTexture, uv); + vec4 color2 = texture(enteringSlideTexture, uv); + + outColor = mix(color1, color2, mask); + } + `; + } +} |