tlaternet/tlaternet-webserver
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

templates/src/music: Fix visualizer aspect ratio

Browse source
This commit is contained in:
Tristan Daniël Maat 2022-10-05 12:24:30 +01:00
parent f8b7b45260
commit b1a83cdf2f
Signed by: tlater
GPG key ID: 49670FD774E43268
2 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
templates/src/music/features/visualizer/Renderer.ts
View file

@ -84,8 +84,16 @@ class Renderer {
this.canvas.parentElement.getBoundingClientRect());
}
this.canvas.width = width;
this.canvas.height = height;
// Preserve the aspect ratio
const aspect_ratio = (this.analyser.frequencyBinCount * 2) / 512;
const target_height = width / aspect_ratio;
if (target_height > height) {
this.canvas.width = aspect_ratio * height;
this.canvas.height = height;
} else {
this.canvas.width = width;
this.canvas.height = width / aspect_ratio;
}
gl.viewport(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
this.updateProjection(gl, shader);
@ -230,12 +238,8 @@ class Renderer {
this.rotation += (this.dTime / 1000.0) * ROTATION_SPEED;
const modelViewMatrix = mat4.create();
mat4.translate(modelViewMatrix, modelViewMatrix, [
0.0,
0.025,
-((this.analyser.frequencyBinCount / gl.canvas.clientWidth) * 3),
]);
mat4.rotateX(modelViewMatrix, modelViewMatrix, Math.PI / 16);
mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -0.8]);
mat4.rotateX(modelViewMatrix, modelViewMatrix, Math.PI / 32);
mat4.rotateY(modelViewMatrix, modelViewMatrix, this.rotation);
mat4.translate(modelViewMatrix, modelViewMatrix, [-1.0, 0.0, 0.0]);
gl.uniformMatrix4fv(

10
templates/src/music/features/visualizer/Visualizer.tsx
View file

@ -1,6 +1,7 @@
import React, { useCallback, useState } from "react";
import { Renderer, RendererError } from "./Renderer";
import { ShaderError } from "./Shader";
import classNames from "classnames";
import { useAppSelector } from "../../hooks";
import { PlayState, musicPlayer } from "../musicplayer/musicPlayerSlice";
@ -125,7 +126,14 @@ function Visualizer() {
return (
<div
ref={visualizer}
className="is-flex-grow-1 is-clipped is-relative"
className={classNames({
"is-flex-grow-1": true,
"is-clipped": true,
"is-relative": true,
"is-flex": true,
"is-align-items-center": true,
"is-justify-content-center": true,
})}
>
<canvas className="is-block is-absolute is-border-box"></canvas>
<span className="is-bottom-left"></span>