diff options
author | Javiya Vivekkumar Dineshbhai <vivek.javiya@collabora.com> | 2024-07-05 19:55:32 +0530 |
---|---|---|
committer | Szymon Kłos <eszkadev@gmail.com> | 2024-07-05 18:07:13 +0200 |
commit | c010d3f82bbe917d8bfbd15247e26340794b1820 (patch) | |
tree | d07cc8f4012f8ffba34908f44d8a591a1559fe78 | |
parent | transition: Add Bars transition (diff) | |
download | online-c010d3f82bbe917d8bfbd15247e26340794b1820.tar.gz online-c010d3f82bbe917d8bfbd15247e26340794b1820.zip |
transition: Add Checkers transition
Signed-off-by: Javiya Vivekkumar Dineshbhai <vivek.javiya@collabora.com>
Change-Id: Ia1e88336309974606d0213a8e9c302995a4b1590
-rw-r--r-- | browser/Makefile.am | 2 | ||||
-rw-r--r-- | browser/src/slideshow/PerformTransition.ts | 9 | ||||
-rw-r--r-- | browser/src/slideshow/transition/CheckersTransition.ts | 88 |
3 files changed, 99 insertions, 0 deletions
diff --git a/browser/Makefile.am b/browser/Makefile.am index 3699fcb1b5..80ca287042 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/CheckersTransition.ts \ src/slideshow/transition/BarsTransition.ts \ src/slideshow/transition/WheelTransition.ts \ src/slideshow/transition/UncoverTransition.ts \ @@ -854,6 +855,7 @@ pot: src/slideshow/Transition2d.ts \ src/slideshow/PerformTransition.ts \ src/slideshow/transition/FadeTransition.ts \ + src/slideshow/transition/CheckersTransition.ts \ src/slideshow/transition/BarsTransition.ts \ src/slideshow/transition/WheelTransition.ts \ src/slideshow/transition/UncoverTransition.ts \ diff --git a/browser/src/slideshow/PerformTransition.ts b/browser/src/slideshow/PerformTransition.ts index 8d7a8e6396..c855e4003c 100644 --- a/browser/src/slideshow/PerformTransition.ts +++ b/browser/src/slideshow/PerformTransition.ts @@ -55,6 +55,15 @@ SlideShow.PerformTransition = function ( image2, ).start(1); break; + + case 'CHECKERS': + new CheckersTransition( + canvas, + image1, + image2, + ).start(1); + break; + default: console.error('Unknown transition type'); break; diff --git a/browser/src/slideshow/transition/CheckersTransition.ts b/browser/src/slideshow/transition/CheckersTransition.ts new file mode 100644 index 0000000000..0df488ff9b --- /dev/null +++ b/browser/src/slideshow/transition/CheckersTransition.ts @@ -0,0 +1,88 @@ +/* + * 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 CheckersTransition extends Transition2d { + private direction: 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, 'direction'), + this.direction, + ); + } + + public start(direction: number): void { + this.direction = direction; + 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 direction; // 1 for vertical, 2 for horizontal + + in vec2 v_texCoord; + out vec4 outColor; + + void main() { + vec2 uv = v_texCoord; + + float progress = time * 2.0; + float numSquares = 8.0; + + vec2 squareSize = vec2(1.0 / numSquares, 1.0 / numSquares); + vec2 checkerCoord = floor(uv / squareSize); + + bool isWhiteSquare = mod(checkerCoord.x + checkerCoord.y, 2.0) == 0.0; + vec2 localUV = fract(uv / squareSize); + + bool showEntering = false; + float adjustedProgress = isWhiteSquare ? progress : progress - 1.0; + adjustedProgress = clamp(adjustedProgress, 0.0, 1.0); + + if (direction == 1) { + showEntering = localUV.y < adjustedProgress; // Vertical + } else { + showEntering = localUV.x < adjustedProgress; // Horizontal + } + + vec4 color1 = texture(leavingSlideTexture, uv); + vec4 color2 = texture(enteringSlideTexture, uv); + outColor = mix(color1, color2, float(showEntering)); + } + `; + } +} |