let cnv; let soundFile; let uploadInput; let playPauseButton; let clearDrawingButton; let freehandToolButton, lineToolButton, circleToolButton, rectToolButton, deleteToolButton; let starToolButton; let colorButton; let toggleSoundReactionButton; let toggleDrawingButton; // New: Shapes/Patterns button let shapesPatternsButton; let isPlaying = false; let lastInteractionTime = 0; let fadeDuration = 3000; let fadeSpeed = 0.05; let uiContainerOpacity = 0; let fft; let amplitude; let allUserDrawings = []; let currentDrawingStroke = null; let isDrawing = false; let currentTool = 'freehand'; let drawingStartPoint; let isDeleteMode = false; let reactToSound = true; let isDrawingEnabled = true; let isShapesPatternsOpen = false; let waveformColors = [ [255, 0, 0], [255, 165, 0], [255, 255, 0], [0, 255, 0], [0, 0, 255], [75, 0, 130], [238, 130, 238] ]; let currentColorIndex = 0; // UI Elements let toolbarDiv; let shapesPatternsDropdownDiv; function setup() { cnv = createCanvas(windowWidth, windowHeight); imageMode(CENTER); window.isMobile = (('ontouchstart' in window) || navigator.maxTouchPoints > 0) && width < 767; cnv.elt.style.touchAction = 'none'; cnv.elt.addEventListener('touchmove', e => { e.preventDefault(); }, { passive: false }); document.body.style.margin = '0'; document.body.style.overflow = 'hidden'; document.body.style.backgroundColor = 'rgb(20, 20, 40)'; toolbarDiv = createDiv(''); toolbarDiv.style('display', 'flex'); toolbarDiv.style('justify-content', 'space-around'); toolbarDiv.style('align-items', 'center'); toolbarDiv.style('background-color', 'rgba(50, 50, 80, 0.7)'); toolbarDiv.style('backdrop-filter', 'blur(5px)'); toolbarDiv.style('-webkit-backdrop-filter', 'blur(5px)'); toolbarDiv.style('border-radius', '25px'); toolbarDiv.style('padding', '10px 15px'); toolbarDiv.style('box-shadow', '0 4px 15px rgba(0, 0, 0, 0.3)'); toolbarDiv.style('position', 'absolute'); toolbarDiv.style('left', '50%'); toolbarDiv.style('transform', 'translateX(-50%)'); toolbarDiv.style('top', '20px'); toolbarDiv.style('z-index', '1000'); toolbarDiv.style('transition', 'opacity 0.3s ease, transform 0.3s ease'); toolbarDiv.style('pointer-events', 'auto'); // Create Shapes/Patterns button shapesPatternsButton = createIconButton('✨', 'Shapes/Patterns', toggleShapesPatternsDropdown); toolbarDiv.child(shapesPatternsButton); colorButton = createIconButton('🎨', 'Color', changeWaveformColor); toggleSoundReactionButton = createIconButton('🎵', 'Toggle Sound Reaction', toggleSoundReaction); toggleDrawingButton = createIconButton('✏️', 'Toggle Drawing', toggleDrawingEnabled); deleteToolButton = createIconButton('🗑️', 'Delete', () => selectTool('delete')); toolbarDiv.child(colorButton); toolbarDiv.child(toggleSoundReactionButton); toolbarDiv.child(toggleDrawingButton); toolbarDiv.child(deleteToolButton); // Create dropdown container for shapes/patterns shapesPatternsDropdownDiv = createDiv(''); shapesPatternsDropdownDiv.style('display', 'none'); // Initially hidden shapesPatternsDropdownDiv.style('flex-direction', 'column'); shapesPatternsDropdownDiv.style('background-color', 'rgba(50, 50, 80, 0.8)'); shapesPatternsDropdownDiv.style('backdrop-filter', 'blur(5px)'); shapesPatternsDropdownDiv.style('-webkit-backdrop-filter', 'blur(5px)'); shapesPatternsDropdownDiv.style('border-radius', '15px'); shapesPatternsDropdownDiv.style('padding', '10px'); shapesPatternsDropdownDiv.style('box-shadow', '0 4px 15px rgba(0, 0, 0, 0.3)'); shapesPatternsDropdownDiv.style('position', 'absolute'); shapesPatternsDropdownDiv.style('z-index', '999'); shapesPatternsDropdownDiv.style('transition', 'opacity 0.3s ease'); shapesPatternsDropdownDiv.style('pointer-events', 'none'); shapesPatternsDropdownDiv.style('opacity', '0'); document.body.appendChild(shapesPatternsDropdownDiv.elt); // Create individual drawing tool buttons and add to shapesPatternsDropdownDiv freehandToolButton = createIconButton('✍️', 'Freehand', () => selectTool('freehand')); lineToolButton = createIconButton('📏', 'Line', () => selectTool('line')); circleToolButton = createIconButton('⚪', 'Circle', () => selectTool('circle')); rectToolButton = createIconButton('▭', 'Rectangle', () => selectTool('rectangle')); starToolButton = createIconButton('⭐', 'Star', () => selectTool('star')); shapesPatternsDropdownDiv.child(freehandToolButton); shapesPatternsDropdownDiv.child(lineToolButton); shapesPatternsDropdownDiv.child(circleToolButton); shapesPatternsDropdownDiv.child(rectToolButton); shapesPatternsDropdownDiv.child(starToolButton); // Create play/pause button (bottom left circular icon) playPauseButton = createIconButton('▶️', 'Play/Pause', togglePlayPause); playPauseButton.style('position', 'absolute'); playPauseButton.style('left', '30px'); playPauseButton.style('bottom', '30px'); playPauseButton.style('z-index', '1000'); playPauseButton.style('opacity', '0'); playPauseButton.style('visibility', 'hidden'); if (isPlaying) { playPauseButton.html('⏸️'); } else { playPauseButton.html('▶️'); } // Create clear drawing button (next to play/pause) clearDrawingButton = createIconButton('✖️', 'Clear Drawing', clearDrawing); clearDrawingButton.style('position', 'absolute'); clearDrawingButton.style('left', '100px'); // Position next to play/pause clearDrawingButton.style('bottom', '30px'); clearDrawingButton.style('z-index', '1000'); clearDrawingButton.style('opacity', '0'); clearDrawingButton.style('visibility', 'hidden'); clearDrawingButton.style('background-color', 'rgba(255, 100, 100, 0.8)'); // Reddish for clear action clearDrawingButton.mouseOver(() => clearDrawingButton.style('background-color', 'rgba(255, 130, 130, 0.9)').style('transform', 'scale(1.1)')); clearDrawingButton.mouseOut(() => clearDrawingButton.style('background-color', 'rgba(255, 100, 100, 0.8)').style('transform', 'scale(1)')); // Create upload button (bottom right circular icon) uploadInput = createFileInput(handleFile); uploadInput.style('display', 'none'); let uploadButtonWrapper = createDiv(''); uploadButtonWrapper.style('position', 'absolute'); uploadButtonWrapper.style('right', '30px'); uploadButtonWrapper.style('bottom', '30px'); uploadButtonWrapper.style('width', '60px'); uploadButtonWrapper.style('height', '60px'); uploadButtonWrapper.style('border-radius', '50%'); uploadButtonWrapper.style('background-color', 'rgba(0, 150, 200, 0.7)'); uploadButtonWrapper.style('box-shadow', '0 4px 15px rgba(0, 0, 0, 0.3)'); uploadButtonWrapper.style('cursor', 'pointer'); uploadButtonWrapper.style('display', 'flex'); uploadButtonWrapper.style('justify-content', 'center'); uploadButtonWrapper.style('align-items', 'center'); uploadButtonWrapper.style('font-size', '28px'); uploadButtonWrapper.style('color', 'white'); uploadButtonWrapper.style('transition', 'all 0.2s ease'); uploadButtonWrapper.style('z-index', '1000'); uploadButtonWrapper.style('opacity', '0'); uploadButtonWrapper.style('visibility', 'hidden'); uploadButtonWrapper.html('📂'); uploadButtonWrapper.attribute('title', 'Choose Audio File'); uploadButtonWrapper.mousePressed(() => uploadInput.elt.click()); uploadButtonWrapper.mouseOver(() => uploadButtonWrapper.style('background-color', 'rgba(0, 180, 230, 0.9)').style('transform', 'scale(1.05)')); uploadButtonWrapper.mouseOut(() => uploadButtonWrapper.style('background-color', 'rgba(0, 150, 200, 0.7)').style('transform', 'scale(1)')); uploadInput.position(uploadButtonWrapper.x, uploadButtonWrapper.y); uploadInput.elt.style.width = uploadButtonWrapper.width + 'px'; uploadInput.elt.style.height = uploadButtonWrapper.height + 'px'; uploadInput.elt.style.opacity = '0'; uploadInput.elt.style.position = 'absolute'; uploadInput.elt.style.left = '0'; uploadInput.elt.style.top = '0'; uploadInput.elt.style.cursor = 'pointer'; uploadInput.elt.style.zIndex = '1001'; uploadInput.wrapper = uploadButtonWrapper; amplitude = new p5.Amplitude(); fft = new p5.FFT(); lastInteractionTime = millis(); selectTool('freehand'); updateColorButtonAppearance(); updateToggleSoundReactionButtonAppearance(); updateDrawingEnabledButtonAppearance(); updateDeleteToolButtonAppearance(); // Call to update delete button appearance cnv.elt.addEventListener('mousemove', () => lastInteractionTime = millis()); cnv.elt.addEventListener('touchmove', () => lastInteractionTime = millis()); document.addEventListener('mousemove', () => lastInteractionTime = millis()); document.addEventListener('touchstart', () => lastInteractionTime = millis()); // Add a click listener to close the dropdown when clicking outside document.addEventListener('click', handleGlobalClick); } function createIconButton(icon, title, callback) { let button = createButton(icon); button.style('width', '50px'); button.style('height', '50px'); button.style('border-radius', '50%'); button.style('background-color', 'rgba(80, 80, 110, 0.8)'); button.style('color', 'white'); button.style('border', 'none'); button.style('font-size', '24px'); button.style('cursor', 'pointer'); button.style('display', 'flex'); button.style('justify-content', 'center'); button.style('align-items', 'center'); button.style('margin', '0 5px'); button.style('box-shadow', '0 2px 8px rgba(0, 0, 0, 0.2)'); button.style('transition', 'all 0.2s ease'); button.attribute('title', title + (['Play/Pause', 'Color', 'Toggle Sound Reaction', 'Toggle Drawing', 'Shapes/Patterns', 'Clear Drawing', 'Delete'].includes(title) ? '' : ' Tool')); button.mousePressed((event) => { event.stopPropagation(); // Prevent canvas click/touch from firing callback(); lastInteractionTime = millis(); }); // For mobile: prevent default touch behavior on the button to avoid background interaction button.elt.addEventListener('touchstart', (e) => e.stopPropagation(), { passive: true }); button.elt.addEventListener('touchend', (e) => e.stopPropagation(), { passive: true }); button.mouseOver(() => button.style('background-color', 'rgba(120, 120, 150, 0.9)').style('transform', 'scale(1.1)')); button.mouseOut(() => { let currentBgColor = 'rgba(80, 80, 110, 0.8)'; if (title === 'Color') { let c = waveformColors[currentColorIndex]; currentBgColor = `rgba(${c[0]}, ${c[1]}, ${c[2]}, 0.9)`; } else if (title === 'Play/Pause') { currentBgColor = 'rgba(80, 80, 110, 0.8)'; } else if (title === 'Toggle Sound Reaction') { if (reactToSound) { currentBgColor = 'rgba(100, 200, 100, 0.9)'; } else { currentBgColor = 'rgba(200, 100, 100, 0.9)'; } } else if (title === 'Toggle Drawing') { if (isDrawingEnabled) { currentBgColor = 'rgba(100, 200, 100, 0.9)'; } else { currentBgColor = 'rgba(200, 100, 100, 0.9)'; } } else if (title === 'Shapes/Patterns') { if (isShapesPatternsOpen) { currentBgColor = 'rgba(0, 150, 200, 0.9)'; } else { currentBgColor = 'rgba(80, 80, 110, 0.8)'; } } else if (title === 'Clear Drawing') { currentBgColor = 'rgba(255, 100, 100, 0.8)'; // Keep clear button red } else if (title === 'Delete') { // Handle delete button specifically if (isDeleteMode) { currentBgColor = 'rgba(255, 100, 100, 0.9)'; } else { currentBgColor = 'rgba(80, 80, 110, 0.8)'; } } else if (currentTool === title.toLowerCase()) { // This handles the drawing tools within the dropdown currentBgColor = 'rgba(0, 200, 255, 0.9)'; } button.style('background-color', currentBgColor).style('transform', 'scale(1)'); }); button.originalTitle = title; return button; } function toggleShapesPatternsDropdown() { isShapesPatternsOpen = !isShapesPatternsOpen; if (isShapesPatternsOpen) { // Position the dropdown directly below the button const buttonRect = shapesPatternsButton.elt.getBoundingClientRect(); shapesPatternsDropdownDiv.style('left', (buttonRect.left + buttonRect.width / 2 - shapesPatternsDropdownDiv.width / 2) + 'px'); shapesPatternsDropdownDiv.style('top', (buttonRect.bottom + 10) + 'px'); shapesPatternsDropdownDiv.style('display', 'flex'); shapesPatternsDropdownDiv.style('opacity', '1'); shapesPatternsDropdownDiv.style('pointer-events', 'auto'); shapesPatternsButton.style('background-color', 'rgba(0, 150, 200, 0.9)'); } else { shapesPatternsDropdownDiv.style('opacity', '0'); shapesPatternsDropdownDiv.style('pointer-events', 'none'); // Use a timeout to hide display after fade out setTimeout(() => { shapesPatternsDropdownDiv.style('display', 'none'); }, 300); // Match CSS transition duration shapesPatternsButton.style('background-color', 'rgba(80, 80, 110, 0.8)'); } lastInteractionTime = millis(); } function handleGlobalClick(event) { // Check if the click was outside the dropdown and the shapes/patterns button if (isShapesPatternsOpen && !shapesPatternsDropdownDiv.elt.contains(event.target) && !shapesPatternsButton.elt.contains(event.target)) { toggleShapesPatternsDropdown(); } } function selectTool(tool) { // If the delete tool is already active and pressed again, deactivate it. if (tool === 'delete' && isDeleteMode) { isDeleteMode = false; currentTool = 'freehand'; // Revert to a default drawing tool } else { currentTool = tool; isDeleteMode = (tool === 'delete'); } let drawingToolButtons = [freehandToolButton, lineToolButton, circleToolButton, rectToolButton, starToolButton]; drawingToolButtons.forEach(btn => { btn.style('background-color', 'rgba(80, 80, 110, 0.8)'); }); deleteToolButton.style('background-color', 'rgba(80, 80, 110, 0.8)'); let activeColor = 'rgba(0, 200, 255, 0.9)'; if (isDeleteMode) { activeColor = 'rgba(255, 100, 100, 0.9)'; deleteToolButton.style('background-color', activeColor); } else { switch (currentTool) { case 'freehand': freehandToolButton.style('background-color', activeColor); break; case 'line': lineToolButton.style('background-color', activeColor); break; case 'circle': circleToolButton.style('background-color', activeColor); break; case 'rectangle': rectToolButton.style('background-color', activeColor); break; case 'star': starToolButton.style('background-color', activeColor); break; case '': // If no specific drawing tool is selected (e.g., after deactivating delete) break; } } // If a drawing tool is selected, close the shapes/patterns menu if (['freehand', 'line', 'circle', 'rectangle', 'star'].includes(tool)) { if (isShapesPatternsOpen) { toggleShapesPatternsDropdown(); } } lastInteractionTime = millis(); } function updateDeleteToolButtonAppearance() { if (isDeleteMode) { deleteToolButton.style('background-color', 'rgba(255, 100, 100, 0.9)'); deleteToolButton.attribute('title', 'Delete Mode Active'); } else { deleteToolButton.style('background-color', 'rgba(80, 80, 110, 0.8)'); deleteToolButton.attribute('title', 'Delete'); } } function changeWaveformColor() { lastInteractionTime = millis(); currentColorIndex = (currentColorIndex + 1) % waveformColors.length; updateColorButtonAppearance(); } function updateColorButtonAppearance() { let c = waveformColors[currentColorIndex]; let rgbaColor = `rgba(${c[0]}, ${c[1]}, ${c[2]}, 0.9)`; colorButton.style('background-color', rgbaColor); } function toggleSoundReaction() { reactToSound = !reactToSound; updateToggleSoundReactionButtonAppearance(); lastInteractionTime = millis(); } function updateToggleSoundReactionButtonAppearance() { if (reactToSound) { toggleSoundReactionButton.style('background-color', 'rgba(100, 200, 100, 0.9)'); toggleSoundReactionButton.attribute('title', 'Shapes react to sound'); } else { toggleSoundReactionButton.style('background-color', 'rgba(200, 100, 100, 0.9)'); toggleSoundReactionButton.attribute('title', 'Shapes do NOT react to sound'); } } function toggleDrawingEnabled() { isDrawingEnabled = !isDrawingEnabled; updateDrawingEnabledButtonAppearance(); if (!isDrawingEnabled) { isDrawing = false; currentDrawingStroke = null; // If drawing is disabled, and delete mode is not active, set currentTool to empty to indicate no active drawing tool if (!isDeleteMode) { selectTool(''); } } else { // If drawing is enabled, and no tool is selected or delete tool is active, revert to freehand if (!currentTool || currentTool === 'delete') { selectTool('freehand'); } } lastInteractionTime = millis(); } function updateDrawingEnabledButtonAppearance() { if (isDrawingEnabled) { toggleDrawingButton.html('✏️'); toggleDrawingButton.style('background-color', 'rgba(100, 200, 100, 0.9)'); toggleDrawingButton.attribute('title', 'Drawing Enabled'); } else { toggleDrawingButton.html('🚫'); toggleDrawingButton.style('background-color', 'rgba(200, 100, 100, 0.9)'); toggleDrawingButton.attribute('title', 'Drawing Disabled'); } } function draw() { background(20, 20, 40); if (isDrawingEnabled && mouseIsPressed && !isOverUI() && (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height)) { if (!isDrawing && !isDeleteMode) { isDrawing = true; drawingStartPoint = createVector(mouseX, mouseY); if (currentTool === 'freehand') { currentDrawingStroke = { type: 'freehand', points: [], colorIndex: currentColorIndex, reactToSound: reactToSound }; allUserDrawings.push(currentDrawingStroke); } } else if (isDrawing && currentTool === 'freehand') { currentDrawingStroke.points.push(createVector(mouseX, mouseY)); } else if (isDrawing && currentTool !== 'freehand') { push(); noFill(); stroke(200, 200, 200, 150); strokeWeight(2); drawShapePreview(currentTool, drawingStartPoint, createVector(mouseX, mouseY)); pop(); } lastInteractionTime = millis(); } else if (isDrawing && !mouseIsPressed) { if (isDrawingEnabled && currentTool !== 'freehand' && !isDeleteMode) { let endPoint = createVector(mouseX, mouseY); let newDrawing = createShapeData(currentTool, drawingStartPoint, endPoint, currentColorIndex); if (newDrawing) { allUserDrawings.push(newDrawing); } } isDrawing = false; currentDrawingStroke = null; lastInteractionTime = millis(); } for (let k = 0; k < allUserDrawings.length; k++) { let drawing = allUserDrawings[k]; let c = waveformColors[drawing.colorIndex]; if (isDeleteMode) { push(); stroke(255, 0, 0, 150); strokeWeight(4); noFill(); if (drawing.type === 'freehand') { beginShape(); for (let p of drawing.points) { vertex(p.x, p.y); } endShape(); } else if (drawing.type === 'line') { line(drawing.start.x, drawing.start.y, drawing.end.x, drawing.end.y); } else if (drawing.type === 'circle') { ellipse(drawing.center.x, drawing.center.y, drawing.radius * 2, drawing.radius * 2); } else if (drawing.type === 'rectangle') { rect(drawing.x, drawing.y, drawing.width, drawing.height); } else if (drawing.type === 'star') { drawStarShape(drawing.center.x, drawing.center.y, drawing.outerRadius, drawing.innerRadius, drawing.numPoints); } pop(); } else if (drawing.reactToSound && isPlaying && soundFile && soundFile.isLoaded()) { drawWaveformOnShape(drawing, fft.waveform()); } else { push(); stroke(c[0], c[1], c[2]); strokeWeight(3); noFill(); if (drawing.type === 'freehand') { beginShape(); for (let p of drawing.points) { vertex(p.x, p.y); } endShape(); } else if (drawing.type === 'line') { line(drawing.start.x, drawing.start.y, drawing.end.x, drawing.end.y); } else if (drawing.type === 'circle') { ellipse(drawing.center.x, drawing.center.y, drawing.radius * 2, drawing.radius * 2); } else if (drawing.type === 'rectangle') { rect(drawing.x, drawing.y, drawing.width, drawing.height); } else if (drawing.type === 'star') { drawStarShape(drawing.center.x, drawing.center.y, drawing.outerRadius, drawing.innerRadius, drawing.numPoints); } pop(); } } if (isPlaying && soundFile && soundFile.isLoaded() && allUserDrawings.length === 0) { let waveform = fft.waveform(); noFill(); strokeWeight(3); push(); let c = waveformColors[currentColorIndex]; stroke(c[0], c[1], c[2]); beginShape(); for (let i = 0; i < waveform.length; i++) { let x = map(i, 0, waveform.length, 0, width); let y = map(waveform[i], -1, 1, height * 0.2, height * 0.8); vertex(x, y); } endShape(); pop(); } let targetOpacity = 0; if (millis() - lastInteractionTime < fadeDuration || isOverUI() || isShapesPatternsOpen) { targetOpacity = 1; } uiContainerOpacity = lerp(uiContainerOpacity, targetOpacity, fadeSpeed); toolbarDiv.style('opacity', uiContainerOpacity); toolbarDiv.style('pointer-events', uiContainerOpacity > 0.1 ? 'auto' : 'none'); // Dropdown visibility is handled separately in toggleShapesPatternsDropdown and draw if (!isShapesPatternsOpen) { shapesPatternsDropdownDiv.style('visibility', 'hidden'); } else { shapesPatternsDropdownDiv.style('visibility', 'visible'); } clearDrawingButton.style('opacity', uiContainerOpacity); clearDrawingButton.style('visibility', uiContainerOpacity > 0.05 ? 'visible' : 'hidden'); clearDrawingButton.style('pointer-events', uiContainerOpacity > 0.1 ? 'auto' : 'none'); playPauseButton.style('opacity', uiContainerOpacity); playPauseButton.style('visibility', uiContainerOpacity > 0.05 ? 'visible' : 'hidden'); playPauseButton.style('pointer-events', uiContainerOpacity > 0.1 ? 'auto' : 'none'); uploadInput.wrapper.style('opacity', uiContainerOpacity); uploadInput.wrapper.style('visibility', uiContainerOpacity > 0.05 ? 'visible' : 'hidden'); uploadInput.wrapper.style('pointer-events', uiContainerOpacity > 0.1 ? 'auto' : 'none'); if (uploadInput.elt) { uploadInput.elt.style.pointerEvents = uiContainerOpacity > 0.1 ? 'auto' : 'none'; } } function drawShapePreview(tool, p1, p2) { push(); noFill(); stroke(200, 200, 200, 150); strokeWeight(2); switch (tool) { case 'line': line(p1.x, p1.y, p2.x, p2.y); break; case 'circle': let radius = dist(p1.x, p1.y, p2.x, p2.y); ellipse(p1.x, p1.y, radius * 2, radius * 2); break; case 'rectangle': rect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y); break; case 'star': let outerRadius = dist(p1.x, p1.y, p2.x, p2.y); let innerRadius = outerRadius * 0.4; let numPoints = 5; drawStarShape(p1.x, p1.y, outerRadius, innerRadius, numPoints); break; } pop(); } function createShapeData(tool, p1, p2, colorIndex) { let shapeData = null; switch (tool) { case 'line': shapeData = { type: 'line', start: { x: p1.x, y: p1.y }, end: { x: p2.x, y: p2.y } }; break; case 'circle': let radius = dist(p1.x, p1.y, p2.x, p2.y); shapeData = { type: 'circle', center: { x: p1.x, y: p1.y }, radius: radius }; break; case 'rectangle': shapeData = { type: 'rectangle', x: min(p1.x, p2.x), y: min(p1.y, p2.y), width: abs(p2.x - p1.x), height: abs(p2.y - p1.y) }; break; case 'star': let outerRadius = dist(p1.x, p1.y, p2.x, p2.y); let innerRadius = outerRadius * 0.4; let numPoints = 5; shapeData = { type: 'star', center: { x: p1.x, y: p1.y }, outerRadius: outerRadius, innerRadius: innerRadius, numPoints: numPoints }; break; } if (shapeData) { shapeData.colorIndex = colorIndex; shapeData.reactToSound = reactToSound; } return shapeData; } function drawStarShape(cx, cy, outerRadius, innerRadius, npoints) { let angle = TWO_PI / npoints; let halfAngle = angle / 2.0; beginShape(); for (let a = 0; a < TWO_PI; a += angle) { let sx = cx + cos(a) * outerRadius; let sy = cy + sin(a) * outerRadius; vertex(sx, sy); sx = cx + cos(a + halfAngle) * innerRadius; sy = cy + sin(a + halfAngle) * innerRadius; vertex(sx, sy); } endShape(CLOSE); } function drawWaveformOnShape(drawing, waveform) { push(); let c = waveformColors[drawing.colorIndex]; stroke(c[0], c[1], c[2]); noFill(); strokeWeight(3); beginShape(); let pathPoints = []; if (drawing.type === 'freehand') { pathPoints = drawing.points; } else if (drawing.type === 'line') { let numSegments = 100; for (let i = 0; i <= numSegments; i++) { let t = i / numSegments; let x = lerp(drawing.start.x, drawing.end.x, t); let y = lerp(drawing.start.y, drawing.end.y, t); pathPoints.push(createVector(x, y)); } } else if (drawing.type === 'circle') { let numSegments = 200; for (let i = 0; i < numSegments; i++) { let angle = map(i, 0, numSegments, 0, TWO_PI); let x = drawing.center.x + drawing.radius * cos(angle); let y = drawing.center.y + drawing.radius * sin(angle); pathPoints.push(createVector(x, y)); } } else if (drawing.type === 'rectangle') { let x1 = drawing.x; let y1 = drawing.y; let x2 = drawing.x + drawing.width; let y2 = drawing.y + drawing.height; let perimeter = 2 * (abs(drawing.width) + abs(drawing.height)); let numSegments = 200; for (let i = 0; i < numSegments; i++) { let p = map(i, 0, numSegments, 0, perimeter); let px, py; if (p < abs(drawing.width)) { px = lerp(x1, x2, p / abs(drawing.width)); py = y1; } else if (p < abs(drawing.width) + abs(drawing.height)) { px = x2; py = lerp(y1, y2, (p - abs(drawing.width)) / abs(drawing.height)); } else if (p < 2 * abs(drawing.width) + abs(drawing.height)) { px = lerp(x2, x1, (p - (abs(drawing.width) + abs(drawing.height))) / abs(drawing.width)); py = y2; } else { px = x1; py = lerp(y2, y1, (p - (2 * abs(drawing.width) + abs(drawing.height))) / abs(drawing.height)); } pathPoints.push(createVector(px, py)); } } else if (drawing.type === 'star') { let starVertices = []; let angle = TWO_PI / drawing.numPoints; let halfAngle = angle / 2.0; for (let a = 0; a < TWO_PI; a += angle) { starVertices.push(createVector(drawing.center.x + cos(a) * drawing.outerRadius, drawing.center.y + sin(a) * drawing.outerRadius)); starVertices.push(createVector(drawing.center.x + cos(a + halfAngle) * drawing.innerRadius, drawing.center.y + sin(a + halfAngle) * drawing.innerRadius)); } starVertices.push(starVertices[0]); let numSegments = 200; for (let i = 0; i < starVertices.length - 1; i++) { let p1 = starVertices[i]; let p2 = starVertices[i + 1]; let segmentLength = dist(p1.x, p1.y, p2.x, p2.y); let segmentSteps = floor(numSegments * (segmentLength / (2 * PI * drawing.outerRadius))); segmentSteps = max(2, segmentSteps); for (let j = 0; j < segmentSteps; j++) { let t = j / (segmentSteps - 1); let x = lerp(p1.x, p2.x, t); let y = lerp(p1.y, p2.y, t); pathPoints.push(createVector(x, y)); } } } if (pathPoints.length > 1) { for (let i = 0; i < pathPoints.length; i++) { let p = pathPoints[i]; let waveformIndex = floor(map(i, 0, pathPoints.length - 1, 0, waveform.length - 1)); let offset = map(waveform[waveformIndex], -1, 1, -50, 50); let x1 = p.x; let y1 = p.y; let x2, y2; if (i < pathPoints.length - 1) { x2 = pathPoints[i + 1].x; y2 = pathPoints[i + 1].y; } else if (i > 0) { x2 = pathPoints[i - 1].x; y2 = pathPoints[i - 1].y; let tempX = x1; x1 = x2; x2 = tempX; let tempY = y1; y1 = y2; y2 = tempY; } else { if (pathPoints.length === 1) { vertex(x1, y1); continue; } else { x2 = pathPoints[i + 1].x; y2 = pathPoints[i + 1].y; } } let angle = atan2(y2 - y1, x2 - x1); let normalAngle = angle + HALF_PI; let distortedX = p.x + cos(normalAngle) * offset; let distortedY = p.y + sin(normalAngle) * offset; vertex(distortedX, distortedY); } } else if (pathPoints.length === 1) { push(); strokeWeight(5); point(pathPoints[0].x, pathPoints[0].y); pop(); } endShape(); pop(); } function handleFile(file) { print('File type:', file.type); if (file.type === 'audio') { if (soundFile) { soundFile.stop(); } soundFile = loadSound(file.data, soundLoaded); } else { print('Not an audio file. Please upload an audio file.'); } } function soundLoaded() { print('Sound loaded successfully!'); soundFile.loop(); amplitude.setInput(soundFile); fft.setInput(soundFile); isPlaying = true; loop(); playPauseButton.html('⏸️'); lastInteractionTime = millis(); } function togglePlayPause() { if (soundFile && soundFile.isLoaded()) { if (isPlaying) { soundFile.pause(); noLoop(); playPauseButton.html('▶️'); } else { soundFile.play(); loop(); playPauseButton.html('⏸️'); } isPlaying = !isPlaying; lastInteractionTime = millis(); } // Removed the uploadInput.elt.click() call } function clearDrawing() { allUserDrawings = []; currentDrawingStroke = null; lastInteractionTime = millis(); } function handleClick() { lastInteractionTime = millis(); if (isDeleteMode) { let deleted = false; for (let i = allUserDrawings.length - 1; i >= 0; i--) { let drawing = allUserDrawings[i]; if (isPointOverDrawing(mouseX, mouseY, drawing)) { allUserDrawings.splice(i, 1); deleted = true; break; } } if (deleted) { lastInteractionTime = millis(); } // After deleting, if delete mode is still active, keep it active. Otherwise, it would have been toggled off by selectTool } // If shapes/patterns menu is open and click is not on a UI element, close it. if (isShapesPatternsOpen && !isOverUI() && !isPointOverElement(shapesPatternsDropdownDiv) && !isPointOverElement(shapesPatternsButton)) { toggleShapesPatternsDropdown(); } } function isPointOverDrawing(px, py, drawing) { const tolerance = 15; if (drawing.type === 'freehand') { for (let i = 0; i < drawing.points.length - 1; i++) { let p1 = drawing.points[i]; let p2 = drawing.points[i + 1]; let d = distToSegment(px, py, p1.x, p1.y, p2.x, p2.y); if (d < tolerance) { return true; } } } else if (drawing.type === 'line') { let d = distToSegment(px, py, drawing.start.x, drawing.start.y, drawing.end.x, drawing.end.y); if (d < tolerance) { return true; } } else if (drawing.type === 'circle') { let d = dist(px, py, drawing.center.x, drawing.center.y); if (abs(d - drawing.radius) < tolerance) { return true; } } else if (drawing.type === 'rectangle') { let x = min(drawing.x, drawing.x + drawing.width) - tolerance; let y = min(drawing.y, drawing.y + drawing.height) - tolerance; let w = abs(drawing.width) + 2 * tolerance; let h = abs(drawing.height) + 2 * tolerance; if (px > x && px < x + w && py > y && py < y + h) { return true; } } else if (drawing.type === 'star') { let starVertices = []; let angle = TWO_PI / drawing.numPoints; let halfAngle = angle / 2.0; for (let a = 0; a < TWO_PI; a += angle) { starVertices.push(createVector(drawing.center.x + cos(a) * drawing.outerRadius, drawing.center.y + sin(a) * drawing.outerRadius)); starVertices.push(createVector(drawing.center.x + cos(a + halfAngle) * drawing.innerRadius, drawing.center.y + sin(a + halfAngle) * drawing.innerRadius)); } starVertices.push(starVertices[0]); for (let i = 0; i < starVertices.length - 1; i++) { let p1 = starVertices[i]; let p2 = starVertices[i + 1]; let d = distToSegment(px, py, p1.x, p1.y, p2.x, p2.y); if (d < tolerance) { return true; } } } return false; } function distToSegment(px, py, x1, y1, x2, y2) { let lineLengthSq = distSq(x1, y1, x2, y2); if (lineLengthSq === 0) return dist(px, py, x1, y1); let t = ((px - x1) * (x2 - x1) + (py - y1) * (y2 - y1)) / lineLengthSq; t = constrain(t, 0, 1); let closestX = x1 + t * (x2 - x1); let closestY = y1 + t * (y2 - y1); return dist(px, py, closestX, closestY); } function distSq(x1, y1, x2, y2) { return (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1); } function mouseClicked(event) { // Only call handleClick if not on mobile OR if on mobile and not interacting with a UI element if (!window.isMobile || (window.isMobile && !isOverAnyP5Element())) { handleClick(); } } function touchEnded(event) { // Prevent default touch behavior on the canvas for drawing interactions if (!isOverAnyP5Element()) { handleClick(); return false; // Prevent default scrolling/zooming } return true; // Allow default behavior for UI elements if needed, though we stopPropagation on buttons } function windowResized() { resizeCanvas(windowWidth, windowHeight); toolbarDiv.style('left', '50%'); toolbarDiv.style('transform', 'translateX(-50%)'); // Recalculate dropdown position on resize if open if (isShapesPatternsOpen) { const buttonRect = shapesPatternsButton.elt.getBoundingClientRect(); shapesPatternsDropdownDiv.style('left', (buttonRect.left + buttonRect.width / 2 - shapesPatternsDropdownDiv.width / 2) + 'px'); shapesPatternsDropdownDiv.style('top', (buttonRect.bottom + 10) + 'px'); } // Update clear drawing button position clearDrawingButton.style('left', '100px'); clearDrawingButton.style('bottom', '30px'); playPauseButton.style('left', '30px'); playPauseButton.style('bottom', '30px'); uploadInput.wrapper.style('right', '30px'); uploadInput.wrapper.style('bottom', '30px'); if (uploadInput.elt) { let wrapperRect = uploadInput.wrapper.elt.getBoundingClientRect(); uploadInput.position(wrapperRect.left + scrollX, wrapperRect.top + scrollY); } lastInteractionTime = millis(); } function isPointOverElement(p5Element) { if (p5Element && p5Element.elt) { let rect = p5Element.elt.getBoundingClientRect(); return mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom; } return false; } function isOverUI() { let uiElements = [ toolbarDiv, clearDrawingButton, playPauseButton, uploadInput.wrapper, shapesPatternsDropdownDiv // Include the dropdown in UI check ]; for (let element of uiElements) { if (isPointOverElement(element)) { return true; } } return false; } function isOverAnyP5Element() { let allP5Elements = [ toolbarDiv, shapesPatternsButton, colorButton, toggleSoundReactionButton, toggleDrawingButton, deleteToolButton, freehandToolButton, lineToolButton, circleToolButton, rectToolButton, starToolButton, shapesPatternsDropdownDiv, clearDrawingButton, playPauseButton, uploadInput.wrapper ]; // Exclude uploadInput.elt itself from this check, as its wrapper handles interaction for (let element of allP5Elements) { if (element && element.elt) { let rect = element.elt.getBoundingClientRect(); if (mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom) { return true; } } } return false; } function mouseMoved() { lastInteractionTime = millis(); } function touchMoved() { lastInteractionTime = millis(); // Only prevent default if touch is over canvas and not over any UI element if (!isOverAnyP5Element()) { return false; // Prevent default scrolling on canvas } return true; // Allow default behavior (like scrolling) if touch is over a UI element that might be scrollable }

FreqDraw Interactive Audio Visual

FreqDraw Interactive Audio Visual