104 lines
2.9 KiB
JavaScript
104 lines
2.9 KiB
JavaScript
// Initialize processor
|
|
const processor = new MaskProcessor(400, 400, 1.0, 20, 0.01);
|
|
|
|
// Control handlers
|
|
function updateControl(controlId, value, processorProperty, formatValue = v => v) {
|
|
document.getElementById(`${controlId}Value`).textContent = formatValue(value);
|
|
processor[processorProperty] = value;
|
|
processor.processMask();
|
|
}
|
|
|
|
function updateLineLength(value) {
|
|
updateControl('lineLength', value, 'lineLengthRatio', v => (v/1.0).toFixed(2));
|
|
}
|
|
|
|
function updateNumLines(value) {
|
|
updateControl('numLines', value, 'numLines', v => parseInt(v));
|
|
}
|
|
|
|
function updateLineWidth(value) {
|
|
updateControl('lineWidth', (value/1000).toFixed(3), 'lineWidthRatio', v => (v*1000));
|
|
}
|
|
|
|
function regenerateMask() {
|
|
console.log('regenerateMask called');
|
|
try {
|
|
processor.generateRandomMask();
|
|
processor.processMask();
|
|
} catch (error) {
|
|
console.error('Error in regenerateMask:', error);
|
|
}
|
|
}
|
|
|
|
// Initial mask generation
|
|
console.log('Running initial mask generation');
|
|
regenerateMask();
|
|
|
|
// Drag and drop handlers
|
|
const dropZone = document.getElementById('dropZone');
|
|
|
|
dropZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.add('drag-active');
|
|
});
|
|
|
|
dropZone.addEventListener('dragleave', () => {
|
|
dropZone.classList.remove('drag-active');
|
|
});
|
|
|
|
dropZone.addEventListener('drop', async (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('drag-active');
|
|
|
|
// Remove any existing animation classes
|
|
dropZone.classList.remove('error-flash');
|
|
dropZone.classList.remove('success-flash');
|
|
|
|
// Force a reflow to reset the animation
|
|
void dropZone.offsetWidth;
|
|
|
|
const file = e.dataTransfer.files[0];
|
|
if (!file || !file.type.startsWith('image/')) {
|
|
dropZone.classList.add('error-flash');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const img = new Image();
|
|
img.src = URL.createObjectURL(file);
|
|
await img.decode();
|
|
|
|
// Use the new loadMask method
|
|
processor.loadMask(img);
|
|
|
|
dropZone.classList.add('success-flash');
|
|
} catch (error) {
|
|
console.error('Error loading image:', error);
|
|
dropZone.classList.add('error-flash');
|
|
}
|
|
});
|
|
|
|
// Show drop zone on page load
|
|
dropZone.style.display = 'flex';
|
|
|
|
// Add download functionality
|
|
function downloadCanvas(type) {
|
|
const button = event.currentTarget;
|
|
const canvas = type === 'input' ? processor.domInputCanvas : processor.domOutputCanvas;
|
|
|
|
// Create and trigger download
|
|
const link = document.createElement('a');
|
|
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
|
|
link.download = `mask-${type}-${timestamp}.png`;
|
|
link.href = canvas.toDataURL('image/png');
|
|
|
|
// Add explosion animation
|
|
button.classList.add('exploding');
|
|
|
|
// Remove animation class after it completes
|
|
button.addEventListener('animationend', () => {
|
|
button.classList.remove('exploding');
|
|
}, { once: true });
|
|
|
|
link.click();
|
|
}
|