BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Hydra canvas order

Browse Source
This commit is contained in:
Raphaël Forment
2024-01-17 10:48:48 +01:00
parent 70b4ce714c
commit f451b81ea7
3 changed files with 55 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -31,6 +31,18 @@
transition: background-color 0.05s ease-in-out;
}
.hydracanvas {
position: fixed; /* ignore margins */
top: 0px;
left: 0px;
width: 100%; /* fill screen */
height: 100%;
background-size: cover;
overflow-y: hidden;
z-index: -5; /* place behind everything else */
display: block;
}
.fullscreencanvas {
position: fixed; /* ignore margins */
top: 0px;
@ -560,9 +572,9 @@
<!-- Here comes the editor itself -->
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
<canvas id="scope" class="fullscreencanvas"></canvas>
<canvas id="hydra-bg" class="fullscreencanvas"></canvas>
<canvas id="feedback" class="fullscreencanvas"></canvas>
<canvas id="drawings" class="fullscreencanvas"></canvas>
<canvas id="hydra-bg" class="hydracanvas"></canvas>
</div>
<p id="error_line" class="hidden w-screen bg-background font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
</div>

29
src/extensions/NumberExtensions.ts
View File

@ -4,6 +4,7 @@ import { Player } from "../classes/ZPlayer";
import { SoundEvent } from "../classes/SoundEvent";
import { SkipEvent } from "../classes/SkipEvent";
declare global {
interface Number {
z(): Player;
@ -30,8 +31,8 @@ declare global {
linexp(a: number, b: number, c: number, d: number): number,
explin(a: number, b: number, c: number, d: number): number,
expexp(a: number, b: number, c: number, d: number): number,
lincurve(inMin: number, inMax: number,
outMin: number, outMax: number,
lincurve(inMin: number, inMax: number,
outMin: number, outMax: number,
curve: number): number;
}
}
@ -57,19 +58,19 @@ export const makeNumberExtensions = (api: UserAPI) => {
};
Number.prototype.lincurve = function(
inMin: number, inMax: number,
outMin: number, outMax: number,
inMin: number, inMax: number,
outMin: number, outMax: number,
curve: number) {
if(this.valueOf() <= inMin) return outMin;
if(this.valueOf() >= inMax) return outMax;
if(Math.abs(curve) < 0.001) {
return (this.valueOf() - inMin) / (inMax - inMin) * (outMax - outMin) + outMin;
};
let grow = Math.exp(curve);
let a = outMax - outMin / (1.0 - grow);
let b = outMin + a;
let scaled = (this.valueOf() - inMin) / (inMax - inMin);
return b - (a * Math.pow(grow, scaled))
if (this.valueOf() <= inMin) return outMin;
if (this.valueOf() >= inMax) return outMax;
if (Math.abs(curve) < 0.001) {
return (this.valueOf() - inMin) / (inMax - inMin) * (outMax - outMin) + outMin;
};
let grow = Math.exp(curve);
let a = outMax - outMin / (1.0 - grow);
let b = outMin + a;
let scaled = (this.valueOf() - inMin) / (inMax - inMin);
return b - (a * Math.pow(grow, scaled))
}
Number.prototype.linexp = function(a: number, b: number, c: number, d: number) {

53
src/main.ts
View File

@ -192,7 +192,7 @@ export class Editor {
// ================================================================================
registerFillKeys(this);
registerOnKeyDown(this);
registerOnKeyDown(this);
installInterfaceLogic(this);
scriptBlinkers();
@ -229,13 +229,13 @@ export class Editor {
replace: (match, p1) => `<${key} class="${this.documentationStyle[key]}" ${p1}>`,
}));
// Get documentation id from hash parameter
const document_id = window.location.hash.slice(1);
if(document_id && document_id !== "" && documentation_pages.includes(document_id)) {
this.currentDocumentationPane = document_id
updateDocumentationContent(this, this.bindings);
showDocumentation(this);
}
// Get documentation id from hash parameter
const document_id = window.location.hash.slice(1);
if (document_id && document_id !== "" && documentation_pages.includes(document_id)) {
this.currentDocumentationPane = document_id
updateDocumentationContent(this, this.bindings);
showDocumentation(this);
}
}
@ -565,7 +565,7 @@ export class Editor {
console.log("Hydra loaded successfully");
this.initializeHydra();
};
script.onerror = function () {
script.onerror = function() {
console.error("Error loading Hydra script");
};
document.head.appendChild(script);
@ -578,12 +578,13 @@ export class Editor {
// @ts-ignore
this.hydra_backend = new Hydra({
canvas: this.interface.hydra_canvas as HTMLCanvasElement,
width: 1280,
height: 768,
detectAudio: false,
enableStreamCapture: false,
});
this.hydra = this.hydra_backend.synth;
(globalThis as any).hydra = this.hydra;
this.hydra.setResolution(1024, 768);
}
private setCanvas(canvas: HTMLCanvasElement): void {
@ -603,25 +604,25 @@ export class Editor {
}
}
private updateInterfaceTheme(selected_theme: {[key: string]: string}): void {
function hexToRgb(hex: string): {r: number, g: number, b: number} | null {
private updateInterfaceTheme(selected_theme: { [key: string]: string }): void {
function hexToRgb(hex: string): { r: number, g: number, b: number } | null {
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
};
for (const [key, value] of Object.entries(selected_theme)) {
let color = hexToRgb(value);
if (color) {
let colorString = `${color.r} ${color.g} ${color.b}`
document.documentElement.style.setProperty("--" + key, colorString);
}
}
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
};
for (const [key, value] of Object.entries(selected_theme)) {
let color = hexToRgb(value);
if (color) {
let colorString = `${color.r} ${color.g} ${color.b}`
document.documentElement.style.setProperty("--" + key, colorString);
}
}
}
getColorScheme(theme_name: string): {[key: string]: string} {
getColorScheme(theme_name: string): { [key: string]: string } {
// Check if the theme exists in colors.json
let themes: Record<string, { [key: string]: any }> = colors;
return themes[theme_name];