import React, { useState, useRef, useEffect, useCallback } from "react"; import * as Tone from "tone"; // Available shape templates const SHAPE_TEMPLATES = [ { id: "circle", label: "Circle", icon: ( ), getVisual: (x, y, size, color, active) => ( ), color: "#f472b6", // pink synthConfig: { synthType: "Synth", options: { oscillator: { type: "sine" }, envelope: { attack: 0.1, release: 1 } }, pattern: ["C5", "E5", "G5", "A5"], duration: 0.5, }, }, { id: "triangle", label: "Triangle", icon: ( ), getVisual: (x, y, size, color, active) => ( ), color: "#fb923c", // orange synthConfig: { synthType: "FM", options: { oscillator: { type: "triangle" }, envelope: { attack: 0.05, release: 0.6 } }, pattern: ["E4", "A4", "D5"], duration: 0.4, }, }, { id: "rect", label: "Square", icon: ( ), getVisual: (x, y, size, color, active) => ( ), color: "#38bdf8", // blue synthConfig: { synthType: "Duo", options: { oscillator: { type: "square" }, envelope: { attack: 0.08, release: 0.8 } }, pattern: ["G4", "B4", "D5"], duration: 0.45, }, }, { id: "hex", label: "Hexagon", icon: ( ), getVisual: (x, y, size, color, active) => { // Hexagon points const cx = x + size / 2, cy = y + size / 2, r = size / 2 - 3; const points = Array.from({ length: 6 }).map((_, i) => { const a = (Math.PI / 3) * i - Math.PI / 6; return `${cx + r * Math.cos(a)},${cy + r * Math.sin(a)}`; }).join(' '); return ( ); }, color: "#a7f3d0", // mint synthConfig: { synthType: "Membrane", options: {}, pattern: ["C3", "E3", "A2"], duration: 0.5, }, }, ]; // Helper: Generate a random available shape from templates function randomShape() { const idx = Math.floor(Math.random() * SHAPE_TEMPLATES.length); return SHAPE_TEMPLATES[idx]; } // Helper: For pleasant drag feedback function getDropHighlight(color) { return { boxShadow: `0 0 0 6px ${color}88`, transition: 'box-shadow 0.25s', }; } // Utility: Get new shape instance function createShapeInstance(id, x, y) { const shape = SHAPE_TEMPLATES.find(s => s.id === id); return { key: `${id}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`, ...shape, x, y, size: 96 + Math.random() * 32, // 96–128 rotation: Math.random() * 360, isActive: false, }; } // Sound engine for synesthetic effects function playShapeSound(shape, { velocity = 0.8, detune = 0 } = {}) { // Ensure audio context unlocked (Tone.js hack) Tone.start(); let synth; const { synthType, options, pattern, duration } = shape.synthConfig; if (synthType === "Synth") { synth = new Tone.Synth(options).toDestination(); } else if (synthType === "FM") { synth = new Tone.FMSynth(options).toDestination(); } else if (synthType === "Duo") { synth = new Tone.DuoSynth(options).toDestination(); } else if (synthType === "Membrane") { synth = new Tone.MembraneSynth(options).toDestination(); } else { synth = new Tone.Synth().toDestination(); } const time = "+0.05"; let patternIdx = 0; pattern.forEach(note => { synth.triggerAttackRelease(note, duration, `+${0.08 * patternIdx}`, velocity); patternIdx++; }); setTimeout(() => { synth.dispose(); }, 500); } const PALETTE_SIZE = 80; const CANVAS_WIDTH = 440; const CANVAS_HEIGHT = 540; export default function App() { // Shapes on the canvas const [shapes, setShapes] = useState([]); // Drag state const [dragging, setDragging] = useState(null); // { id, offsetX, offsetY } const [dragOver, setDragOver] = useState(false); const [actives, setActives] = useState([]); // shape keys being animated const svgRef = useRef(); // Sound/animation on drop or click const triggerShape = useCallback((key) => { // Animate + play sound setActives((prev) => [...prev, key]); const shape = shapes.find(s => s.key === key); if (shape) playShapeSound(shape); setTimeout(() => setActives(a => a.filter(k => k !== key)), 720); }, [shapes]); // Drag and drop logic: // 1. Drag from palette to canvas → add new shape // 2. Drag shape inside canvas → move const handlePaletteDragStart = (shapeId, e) => { e.dataTransfer.effectAllowed = "copy"; setDragging({ id: shapeId, type: 'palette' }); }; const handlePaletteDragEnd = (e) => { setDragging(null); }; const handleShapeDragStart = (key, e) => { const shape = shapes.find(s => s.key === key); if (!shape) return; setDragging({ id: shape.id, key, offsetX: e.nativeEvent.offsetX - shape.x, offsetY: e.nativeEvent.offsetY - shape.y, type: 'canvas', }); }; const handleShapeDragEnd = (e) => { setDragging(null); }; // Canvas drop (add or move) const handleDrop = (e) => { const rect = svgRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; if (!dragging) return; if (dragging.type === 'palette') { const s = createShapeInstance(dragging.id, x - PALETTE_SIZE / 2, y - PALETTE_SIZE / 2); setShapes(prev => [...prev, s]); triggerShape(s.key); } else if (dragging.type === 'canvas') { setShapes(prev => prev.map(s => s.key === dragging.key ? { ...s, x: x - (dragging.offsetX || s.size/2), y: y - (dragging.offsetY || s.size/2) } : s )); triggerShape(dragging.key); } setDragging(null); setDragOver(false); }; // Allow dropping const handleDragOver = (e) => { e.preventDefault(); setDragOver(true); }; const handleDragLeave = (e) => { setDragOver(false); }; // Click shape to play const handleShapeClick = (key) => { triggerShape(key); }; // Remove shape on long-press const longPressTimeout = useRef(); const handleShapePointerDown = (key, e) => { longPressTimeout.current = setTimeout(() => { setShapes(prev => prev.filter(s => s.key !== key)); }, 690); }; const handleShapePointerUp = () => { clearTimeout(longPressTimeout.current); }; // Shuffle shapes (randomizes all shapes' position and triggers all) const shuffleShapes = () => { setShapes(prev => prev.map(s => ({ ...s, x: Math.random() * (CANVAS_WIDTH - s.size - 20) + 8, y: Math.random() * (CANVAS_HEIGHT - s.size - 18) + 8, rotation: Math.random() * 360, }))); setTimeout(() => { shapes.forEach((s) => triggerShape(s.key)); }, 280); }; // Random "inspire me" (add a random shape) const addRandomShape = () => { const s = randomShape(); const x = Math.random() * (CANVAS_WIDTH - 112) + 24; const y = Math.random() * (CANVAS_HEIGHT - 112) + 24; const inst = createShapeInstance(s.id, x, y); setShapes(prev => [...prev, inst]); triggerShape(inst.key); }; // Remove all const clearCanvas = () => setShapes([]); return (

Synesthesia Soundwave Visualizer

Drag colorful shapes onto the canvas below.
Each shape comes alive with a playful sound & dazzling visuals—move or remix them into your own 'music painting'.
Tip: Click or drag existing shapes for wild effects. Hold a shape for 0.7s to delete.

{/* Shape palette */}

{SHAPE_TEMPLATES.map((shape, idx) => (

handlePaletteDragStart(shape.id, e)} onDragEnd={handlePaletteDragEnd} tabIndex={0} >

{shape.icon}

{shape.label}

))}

{/* The canvas surface for composition */}

{/* Empty state? */} {!shapes.length && (

🎨 Drop shapes here
to compose a synesthetic music painting!

) } {/* Drag indicator */} {dragOver && (

Release to drop shape

)}

{/* Controls */}

How it works: Drag shapes on, click or drag for synesthetic sound + light.
Try rearranging for dynamic audio-visual changes. Hold a shape (0.7s) to delete.

); }