Merge pull request #3 from blib-la/feat/erase-and-improve

Feat/erase and improve

CAPTAIN.md

@@ -7,8 +7,34 @@ creatorID: Blibla
 icon: Stream
 iconColor: "#000000"
 parameters:
-    width: 800
+    width: 1080
     height: 800
+    minWidth: 550
+    minHeight: 800
 ---
 
 live visuals
+vj tool
+open the vj app
+I want to create visuals for my audio
+Audio visualizer for Video Jockey
+I'm a VJ, I want to create great visuals
+AI-driven audio-reactive visuals
+Interactive party visual projections
+Generative visual art for live music
+Algorithmic light shows at parties
+Real-time music visualization art
+AI-enhanced pattern generation for events
+Interactive light installations for clubs
+Party-specific generative visuals
+Beat-reactive light sculptures
+Customizable visual experiences for dance floors
+Immersive visual environments with AI
+Audio-interactive LED displays
+Dynamic projection mapping at parties
+AI visual synthesizers for DJs
+Sensor-driven visual patterns in nightclubs
+interactive video walls
+Music-synchronized visual patterns
+visual art installations
+AI-generated visual effects for live sets

src/components/composite-area.tsx

@@ -8,9 +8,10 @@ import { APP_ID } from "@/constants";
 type CompositeParameters = {
 	background?: string;
 	canvas?: OffscreenCanvas | null;
+	isRunning?: boolean;
 };
 
-export function CompositeArea({ background }: CompositeParameters) {
+export function CompositeArea({ background, isRunning }: CompositeParameters) {
 	const canvas = useRef<HTMLCanvasElement>(null);
 
 	const [drawingCanvas_] = useAtom(drawingCanvasAtom);
@@ -25,14 +26,17 @@ export function CompositeArea({ background }: CompositeParameters) {
 		let animationFrameId: number;
 
 		const canvasElement = canvas.current;
-
-		if (!canvasElement || !waveformCanvas_ || !drawingCanvas_) {
+		if (!canvasElement) {
 			return;
 		}
-
 		const dpr = Math.max(window.devicePixelRatio, 1);
 		canvasElement.height = 512 * dpr;
 		canvasElement.width = 512 * dpr;
+
+		if (!waveformCanvas_ || !drawingCanvas_) {
+			return;
+		}
+
 		const context = canvasElement.getContext("2d");
 
 		if (!context) {
@@ -83,24 +87,26 @@ export function CompositeArea({ background }: CompositeParameters) {
 
 				offscreenContext.drawImage(canvasElement, 0, 0);
 
-				// Send the composite canvas data to the backend
-				offscreenCanvas.toBlob(
-					async blob => {
-						if (!blob) {
-							return;
-						}
-
-						const arrayBuffer = await blob.arrayBuffer();
-						const buffer = Buffer.from(arrayBuffer);
-
-						send({
-							action: "livePainting:imageBuffer",
-							payload: { appId: APP_ID, buffer },
-						});
-					},
-					"image/jpeg",
-					0.1
-				);
+				if (isRunning) {
+					// Send the composite canvas data to the backend
+					offscreenCanvas.toBlob(
+						async blob => {
+							if (!blob) {
+								return;
+							}
+
+							const arrayBuffer = await blob.arrayBuffer();
+							const buffer = Buffer.from(arrayBuffer);
+
+							send({
+								action: "livePainting:imageBuffer",
+								payload: { appId: APP_ID, buffer },
+							});
+						},
+						"image/jpeg",
+						0.1
+					);
+				}
 			}
 
 			animationFrameId = requestAnimationFrame(renderLoop);
@@ -113,7 +119,7 @@ export function CompositeArea({ background }: CompositeParameters) {
 		return () => {
 			cancelAnimationFrame(animationFrameId);
 		};
-	}, [drawingCanvas_, waveformCanvas_, send]);
+	}, [drawingCanvas_, waveformCanvas_, send, isRunning]);
 
 	return <canvas ref={canvas} style={{ pointerEvents: "none", background }} />;
 }

src/components/drawing-area.tsx

@@ -7,13 +7,16 @@ import { drawingCanvasAtom, livePaintingOptionsAtom } from "../atoms";
 export function DrawingArea({
 	isOverlay,
 	clearCounter,
+	isErasing: isErasing_,
 }: {
 	isOverlay?: boolean;
+	isErasing?: boolean;
 	clearCounter: number;
 }) {
 	const canvas = useRef<HTMLCanvasElement>(null);
 	const context = useRef<CanvasRenderingContext2D | null>(null);
 	const isDrawing = useRef<boolean>(false);
+	const isErasing = useRef<boolean>(isErasing_ ?? false);
 
 	const canvasContainerReference = useRef<HTMLDivElement>(null);
 	const [, setDrawingCanvas] = useAtom(drawingCanvasAtom);
@@ -74,6 +77,11 @@ export function DrawingArea({
 			}
 
 			if (context.current) {
+				if (isErasing.current) {
+					context.current.globalCompositeOperation = "destination-out";
+				} else {
+					context.current.globalCompositeOperation = "source-over";
+				}
 				context.current.lineTo(event.clientX - rect.left, event.clientY - rect.top);
 				context.current.stroke();
 			}
@@ -135,6 +143,10 @@ export function DrawingArea({
 		}
 	}, [clearCounter]);
 
+	useEffect(() => {
+		isErasing.current = isErasing_ ?? false;
+	}, [isErasing_]);
+
 	return (
 		<Box
 			ref={canvasContainerReference}

src/components/icons.tsx

@@ -0,0 +1,10 @@
+import type { SvgIconProps } from "@mui/joy/SvgIcon";
+import SvgIcon from "@mui/joy/SvgIcon";
+
+export function EraserIcon(properties: SvgIconProps) {
+	return (
+		<SvgIcon {...properties} viewBox="0 0 24 24">
+			<path d="M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z" />
+		</SvgIcon>
+	);
+}

src/components/rendering-area.tsx

@@ -8,7 +8,7 @@ export function RenderingArea() {
 	const canvasReference = useRef<HTMLCanvasElement | null>(null);
 	const imgReference = useRef<HTMLImageElement | null>(null);
 
-	const { send } = useSDK<unknown, string>(APP_ID, {
+	useSDK<unknown, string>(APP_ID, {
 		onMessage(message) {
 			// eslint-disable-next-line default-case
 			switch (message.action) {
@@ -29,26 +29,8 @@ export function RenderingArea() {
 			const canvas = canvasReference.current;
 			const context = canvas?.getContext("2d");
 			if (context && canvas && imgReference.current) {
-				//
-				// context.clearRect(0, 0, canvas.width, canvas.height);
-				// context.globalAlpha = 0.25;
-				// context.globalCompositeOperation = "source-over";
-				// context.fillStyle = "#000";
-				// context.fillRect(0, 0, canvas.width, canvas.height);
 				context.globalAlpha = 0.75;
 				context.drawImage(imgReference.current, 0, 0, canvas.width, canvas.height);
-
-				//
-				// const offscreenCanvas = new OffscreenCanvas(canvas.width, canvas.height);
-				// const offscreenContext = offscreenCanvas.getContext("2d");
-
-				// if (offscreenContext) {
-				// 	offscreenContext.drawImage(canvas, 0, 0);
-
-				// 	window.ipc.send("transfer-offscreen-canvas", offscreenCanvas, [
-				// 		offscreenCanvas,
-				// 	]);
-				// }
 			}
 		});
 	}, []);