Removing one more canvas
This commit is contained in:
21
index.html
21
index.html
@ -32,26 +32,22 @@
|
||||
}
|
||||
|
||||
.hydracanvas {
|
||||
position: fixed; /* ignore margins */
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%; /* fill screen */
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0px; left: 0px;
|
||||
width: 100%; height: 100%;
|
||||
background-size: cover;
|
||||
overflow-y: hidden;
|
||||
z-index: -5; /* place behind everything else */
|
||||
z-index: -5;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fullscreencanvas {
|
||||
position: fixed; /* ignore margins */
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%; /* fill screen */
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0px; left: 0px;
|
||||
width: 100%; height: 100%;
|
||||
background-size: cover;
|
||||
overflow-y: hidden;
|
||||
z-index: -1; /* place behind everything else */
|
||||
z-index: -1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -576,7 +572,6 @@
|
||||
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
|
||||
<canvas id="scope" 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>
|
||||
|
||||
@ -3,7 +3,7 @@ import { ShapeObject, createConicGradient, createLinearGradient, createRadialGra
|
||||
import { Editor } from "../main";
|
||||
|
||||
export const w = (app: Editor) => (): number => {
|
||||
const canvas: HTMLCanvasElement = app.interface.drawings as HTMLCanvasElement;
|
||||
const canvas: HTMLCanvasElement = app.interface.feedback as HTMLCanvasElement;
|
||||
return canvas.clientWidth;
|
||||
};
|
||||
|
||||
@ -12,7 +12,7 @@ export const pulseLocation = (app: Editor) => (): number => {
|
||||
};
|
||||
|
||||
export const clear = (app: Editor) => (): boolean => {
|
||||
const canvas: HTMLCanvasElement = app.interface.drawings as HTMLCanvasElement;
|
||||
const canvas: HTMLCanvasElement = app.interface.feedback as HTMLCanvasElement;
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
return true;
|
||||
@ -20,7 +20,7 @@ export const clear = (app: Editor) => (): boolean => {
|
||||
|
||||
|
||||
export const h = (app: Editor) => (): number => {
|
||||
const canvas: HTMLCanvasElement = app.interface.drawings as HTMLCanvasElement;
|
||||
const canvas: HTMLCanvasElement = app.interface.feedback as HTMLCanvasElement;
|
||||
return canvas.clientHeight;
|
||||
};
|
||||
|
||||
@ -33,28 +33,28 @@ export const wc = (app: Editor) => (): number => {
|
||||
};
|
||||
|
||||
export const background = (app: Editor) => (color: string | number, ...gb: number[]): boolean => {
|
||||
drawBackground(app.interface.drawings as HTMLCanvasElement, color, ...gb);
|
||||
drawBackground(app.interface.feedback as HTMLCanvasElement, color, ...gb);
|
||||
return true;
|
||||
};
|
||||
export const bg = background;
|
||||
|
||||
export const linearGradient = (app: Editor) => (x1: number, y1: number, x2: number, y2: number, ...stops: (number | string)[]): CanvasGradient => {
|
||||
return createLinearGradient(app.interface.drawings as HTMLCanvasElement, x1, y1, x2, y2, ...stops);
|
||||
return createLinearGradient(app.interface.feedback as HTMLCanvasElement, x1, y1, x2, y2, ...stops);
|
||||
};
|
||||
|
||||
export const radialGradient = (app: Editor) => (x1: number, y1: number, r1: number, x2: number, y2: number, r2: number, ...stops: (number | string)[]) => {
|
||||
return createRadialGradient(app.interface.drawings as HTMLCanvasElement, x1, y1, r1, x2, y2, r2, ...stops);
|
||||
return createRadialGradient(app.interface.feedback as HTMLCanvasElement, x1, y1, r1, x2, y2, r2, ...stops);
|
||||
};
|
||||
|
||||
export const conicGradient = (app: Editor) => (x: number, y: number, angle: number, ...stops: (number | string)[]) => {
|
||||
return createConicGradient(app.interface.drawings as HTMLCanvasElement, x, y, angle, ...stops);
|
||||
return createConicGradient(app.interface.feedback as HTMLCanvasElement, x, y, angle, ...stops);
|
||||
};
|
||||
|
||||
export const draw = (app: Editor) => (func: Function): boolean => {
|
||||
if (typeof func === "string") {
|
||||
drawText(app.interface.drawings as HTMLCanvasElement, func, 24, 0, "Arial", wc(app)(), hc(app)(), "white", "none");
|
||||
drawText(app.interface.feedback as HTMLCanvasElement, func, 24, 0, "Arial", wc(app)(), hc(app)(), "white", "none");
|
||||
} else {
|
||||
const canvas: HTMLCanvasElement = app.interface.drawings as HTMLCanvasElement;
|
||||
const canvas: HTMLCanvasElement = app.interface.feedback as HTMLCanvasElement;
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
func(ctx);
|
||||
}
|
||||
@ -79,7 +79,7 @@ export const balloid = (app: Editor) => (
|
||||
radius = curves.radius || hc(app)() / 2;
|
||||
curves = curves.curves || 6;
|
||||
}
|
||||
drawBalloid(app.interface.drawings as HTMLCanvasElement, curves, radius, curve, fillStyle, secondary, x, y);
|
||||
drawBalloid(app.interface.feedback as HTMLCanvasElement, curves, radius, curve, fillStyle, secondary, x, y);
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -97,7 +97,7 @@ export const equilateral = (app: Editor) => (
|
||||
rotation = radius.rotation || 0;
|
||||
radius = radius.radius || hc(app)() / 3;
|
||||
}
|
||||
drawEquilateral(app.interface.drawings as HTMLCanvasElement, radius, fillStyle, rotation, x, y);
|
||||
drawEquilateral(app.interface.feedback as HTMLCanvasElement, radius, fillStyle, rotation, x, y);
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -117,7 +117,7 @@ export const triangular = (app: Editor) => (
|
||||
height = width.height || hc(app)() / 3;
|
||||
width = width.width || hc(app)() / 3;
|
||||
}
|
||||
drawTriangular(app.interface.drawings as HTMLCanvasElement, width, height, fillStyle, rotation, x, y);
|
||||
drawTriangular(app.interface.feedback as HTMLCanvasElement, width, height, fillStyle, rotation, x, y);
|
||||
return true;
|
||||
};
|
||||
export const pointy = triangular;
|
||||
@ -134,7 +134,7 @@ export const ball = (app: Editor) => (
|
||||
y = radius.y || hc(app)();
|
||||
radius = radius.radius || hc(app)() / 3;
|
||||
}
|
||||
drawBall(app.interface.drawings as HTMLCanvasElement, radius, fillStyle, x, y);
|
||||
drawBall(app.interface.feedback as HTMLCanvasElement, radius, fillStyle, x, y);
|
||||
return true;
|
||||
};
|
||||
export const circle = ball;
|
||||
@ -163,7 +163,7 @@ export const donut = (app: Editor) => (
|
||||
stroke = slices.stroke || "black";
|
||||
slices = slices.slices || 3;
|
||||
}
|
||||
drawDonut(app.interface.drawings as HTMLCanvasElement, slices, eaten, radius, hole, fillStyle, secondary, stroke, rotation, x, y);
|
||||
drawDonut(app.interface.feedback as HTMLCanvasElement, slices, eaten, radius, hole, fillStyle, secondary, stroke, rotation, x, y);
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -189,7 +189,7 @@ export const pie = (app: Editor) => (
|
||||
eaten = slices.eaten || 0;
|
||||
slices = slices.slices || 3;
|
||||
}
|
||||
drawPie(app.interface.drawings as HTMLCanvasElement, slices, eaten, radius, fillStyle, secondary, stroke, rotation, x, y);
|
||||
drawPie(app.interface.feedback as HTMLCanvasElement, slices, eaten, radius, fillStyle, secondary, stroke, rotation, x, y);
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -211,7 +211,7 @@ export const star = (app: Editor) => (
|
||||
outerRadius = points.outerRadius || radius / 100;
|
||||
points = points.points || 5;
|
||||
}
|
||||
drawStar(app.interface.drawings as HTMLCanvasElement, points, radius, fillStyle, rotation, outerRadius, x, y);
|
||||
drawStar(app.interface.feedback as HTMLCanvasElement, points, radius, fillStyle, rotation, outerRadius, x, y);
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -233,7 +233,7 @@ export const stroke = (app: Editor) => (
|
||||
rotation = width.rotation || 0;
|
||||
width = width.width || 1;
|
||||
}
|
||||
drawStroke(app.interface.drawings as HTMLCanvasElement, width, strokeStyle, rotation, x1, y1, x2, y2);
|
||||
drawStroke(app.interface.feedback as HTMLCanvasElement, width, strokeStyle, rotation, x1, y1, x2, y2);
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -253,7 +253,7 @@ export const box = (app: Editor) => (
|
||||
height = width.height || wc(app)() / 4;
|
||||
width = width.width || wc(app)() / 4;
|
||||
}
|
||||
drawBox(app.interface.drawings as HTMLCanvasElement, width, height, fillStyle, rotation, x, y);
|
||||
drawBox(app.interface.feedback as HTMLCanvasElement, width, height, fillStyle, rotation, x, y);
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -275,7 +275,7 @@ export const smiley = (app: Editor) => (
|
||||
radius = happiness.radius || hc(app)() / 3;
|
||||
happiness = happiness.happiness || 0;
|
||||
}
|
||||
drawSmiley(app.interface.drawings as HTMLCanvasElement, happiness, radius, eyeSize, fillStyle, rotation, x, y);
|
||||
drawSmiley(app.interface.feedback as HTMLCanvasElement, happiness, radius, eyeSize, fillStyle, rotation, x, y);
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -299,7 +299,7 @@ export const text = (app: Editor) => (
|
||||
filter = text.filter || "none";
|
||||
text = text.text || "";
|
||||
}
|
||||
drawText(app.interface.drawings as HTMLCanvasElement, text, fontSize, rotation, font, x, y, fillStyle, filter);
|
||||
drawText(app.interface.feedback as HTMLCanvasElement, text, fontSize, rotation, font, x, y, fillStyle, filter);
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -322,7 +322,7 @@ export const image = (app: Editor) => (
|
||||
filter = url.filter || "none";
|
||||
url = url.url || "";
|
||||
}
|
||||
drawImage(app.interface.drawings as HTMLCanvasElement, url, width, height, rotation, x, y, filter);
|
||||
drawImage(app.interface.feedback as HTMLCanvasElement, url, width, height, rotation, x, y, filter);
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
@ -56,7 +56,6 @@ export const singleElements = {
|
||||
error_line: "error_line",
|
||||
hydra_canvas: "hydra-bg",
|
||||
feedback: "feedback",
|
||||
drawings: "drawings",
|
||||
};
|
||||
|
||||
export const buttonGroups = {
|
||||
|
||||
@ -40,7 +40,7 @@ export const blinkScript = (
|
||||
const blinkDuration =
|
||||
(app.clock.bpm / 60 / app.clock.time_signature[1]) * 200;
|
||||
// @ts-ignore
|
||||
const ctx = app.interface.feedback.getContext("2d"); // Assuming a canvas context
|
||||
const ctx = app.interface.feedback.getContext("2d");
|
||||
|
||||
/**
|
||||
* Draws a circle at a given shift.
|
||||
|
||||
@ -45,7 +45,7 @@ export const installWindowBehaviors = (
|
||||
handleResize(app.interface.feedback as HTMLCanvasElement),
|
||||
);
|
||||
window.addEventListener("resize", () =>
|
||||
handleResize(app.interface.drawings as HTMLCanvasElement),
|
||||
handleResize(app.interface.feedback as HTMLCanvasElement),
|
||||
);
|
||||
window.addEventListener("beforeunload", (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
43
src/main.ts
43
src/main.ts
@ -104,6 +104,7 @@ export class Editor {
|
||||
public hydra: any;
|
||||
|
||||
constructor() {
|
||||
|
||||
/**
|
||||
* This is the entry point of the application. The Editor instance is created when the page is loaded.
|
||||
* It is responsible for:
|
||||
@ -124,12 +125,7 @@ export class Editor {
|
||||
this.initializeElements();
|
||||
this.initializeButtonGroups();
|
||||
this.setCanvas(this.interface.feedback as HTMLCanvasElement);
|
||||
this.setCanvas(this.interface.drawings as HTMLCanvasElement);
|
||||
try {
|
||||
this.loadHydraSynthAsync();
|
||||
} catch (error) {
|
||||
console.log("Couldn't start Hydra: ", error);
|
||||
}
|
||||
this.loadHydraSynthAsync();
|
||||
|
||||
// ================================================================================
|
||||
// Loading the universe from local storage
|
||||
@ -137,7 +133,6 @@ export class Editor {
|
||||
|
||||
this.universes = {
|
||||
...this.settings.universes,
|
||||
//...template_universes,
|
||||
};
|
||||
initializeSelectedUniverse(this);
|
||||
|
||||
@ -541,26 +536,40 @@ export class Editor {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private loadHydraSynthAsync(): void {
|
||||
/**
|
||||
* Loads the Hydra Synth asynchronously by creating a script element
|
||||
* and appending it to the document head. * Once the script is
|
||||
* loaded successfully, it initializes the Hydra Synth. If there
|
||||
* is an error loading the script, it logs an error message.
|
||||
*/
|
||||
const timeoutDuration = 1000;
|
||||
var script = document.createElement("script");
|
||||
script.src = "https://unpkg.com/hydra-synth";
|
||||
script.async = true;
|
||||
|
||||
let timeoutHandle = setTimeout(() => {
|
||||
script.onerror = null;
|
||||
script.onload = null;
|
||||
document.head.removeChild(script);
|
||||
console.error("Hydra loading timed out");
|
||||
this.handleLoadingError();
|
||||
}, timeoutDuration);
|
||||
|
||||
script.onload = () => {
|
||||
clearTimeout(timeoutHandle);
|
||||
console.log("Hydra loaded successfully");
|
||||
this.initializeHydra();
|
||||
};
|
||||
script.onerror = function() {
|
||||
}
|
||||
|
||||
script.onerror = () => {
|
||||
clearTimeout(timeoutHandle);
|
||||
console.error("Error loading Hydra script");
|
||||
};
|
||||
this.handleLoadingError();
|
||||
}
|
||||
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
private handleLoadingError(): void {
|
||||
console.error("Handling error after failed script load.");
|
||||
}
|
||||
|
||||
private initializeHydra(): void {
|
||||
/**
|
||||
* Initializes the Hydra backend and sets up the Hydra synth.
|
||||
@ -582,10 +591,8 @@ export class Editor {
|
||||
* Sets the canvas element and configures its size and context.
|
||||
* @param canvas - The HTMLCanvasElement to set.
|
||||
*/
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext("2d");
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
// Assuming the canvas takes up the whole window
|
||||
canvas.width = window.innerWidth * dpr;
|
||||
canvas.height = window.innerHeight * dpr;
|
||||
if (ctx) {
|
||||
|
||||
Reference in New Issue
Block a user