Advanced Procreate Clone

I'll create a more advanced Procreate-like drawing app with pressure sensitivity (using mouse velocity as a proxy), blending modes, and a more sophisticated UI. Advanced Procreate Clone

:root { --primary-color: #007AFF; --dark-bg: #2C2C2E; --darker-bg: #1C1C1E; --light-bg: #3A3A3C; --text-color: #FFFFFF; --border-color: #48484A; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; color: var(--text-color); background-color: var(--darker-bg); height: 100vh; overflow: hidden; } .app { display: flex; flex-direction: column; height: 100vh; } .header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: var(--dark-bg); border-bottom: 1px solid var(--border-color); } .header-center h1 { font-size: 1.2rem; font-weight: 500; } .btn { background: none; border: none; color: var(--text-color); font-size: 1.2rem; padding: 8px; border-radius: 5px; cursor: pointer; transition: all 0.2s; } .btn:hover { background-color: var(--light-bg); } .main-content { display: flex; flex: 1; overflow: hidden; } .sidebar-left { width: 250px; background-color: var(--dark-bg); border-right: 1px solid var(--border-color); padding: 15px; display: flex; flex-direction: column; gap: 20px; } .tool-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .tool-btn { background-color: var(--light-bg); border: none; color: var(--text-color); font-size: 1.2rem; padding: 15px; border-radius: 8px; cursor: pointer; transition: all 0.2s; } .tool-btn:hover { background-color: #4A4A4C; } .tool-btn.active { background-color: var(--primary-color); } .brush-settings { display: flex; flex-direction: column; gap: 15px; } .brush-settings label { font-size: 0.9rem; color: #AAAAAA; margin-bottom: 5px; display: block; } input[type="range"] { width: 100%; height: 5px; background: var(--light-bg); border-radius: 5px; -webkit-appearance: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; background: var(--primary-color); border-radius: 50%; cursor: pointer; } select { width: 100%; padding: 8px; background-color: var(--light-bg); border: 1px solid var(--border-color); border-radius: 5px; color: var(--text-color); font-size: 0.9rem; } .canvas-area { flex: 1; display: flex; justify-content: center; align-items: center; background-color: var(--darker-bg); position: relative; } .canvas-container { position: relative; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } #canvas { background-color: white; cursor: crosshair; display: block; } .sidebar-right { width: 250px; background-color: var(--dark-bg); border-left: 1px solid var(--border-color); padding: 15px; display: flex; flex-direction: column; gap: 20px; } .color-picker { display: flex; flex-direction: column; align-items: center; gap: 10px; } input[type="color"] { width: 50px; height: 50px; border: none; border-radius: 50%; cursor: pointer; } input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; } .color-history { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; } .color-history-item { width: 25px; height: 25px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; } .color-history-item:hover { border-color: var(--primary-color); } .layer-panel { display: flex; flex-direction: column; gap: 10px; } .layer-header { display: flex; justify-content: space-between; align-items: center; } .layers-list { display: flex; flex-direction: column; gap: 5px; } .layer-item { display: flex; align-items: center; padding: 8px; background-color: var(--light-bg); border-radius: 5px; cursor: pointer; } .layer-item.active { background-color: var(--primary-color); } .layer-thumbnail { width: 30px; height: 30px; background-color: white; margin-right: 10px; border-radius: 3px; } .footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: var(--dark-bg); border-top: 1px solid var(--border-color); } .history-controls, .zoom-controls { display: flex; align-items: center; gap: 10px; } #zoom-level { font-size: 0.9rem; min-width: 50px; text-align: center; } class ProcreateClone { constructor() { // DOM Elements this.canvas = document.getElementById('canvas'); this.ctx = this.canvas.getContext('2d'); this.toolButtons = document.querySelectorAll('.tool-btn'); this.colorPicker = document.getElementById('color'); this.sizeSlider = document.getElementById('size'); this.opacitySlider = document.getElementById('opacity'); this.flowSlider = document.getElementById('flow'); this.blendModeSelect = document.getElementById('blend-mode'); this.sizeValue = document.getElementById('size-value'); this.opacityValue = document.getElementById('opacity-value'); this.flowValue = document.getElementById('flow-value'); this.zoomLevel = document.getElementById('zoom-level'); this.layersList = document.getElementById('layers-list'); this.addLayerBtn = document.getElementById('add-layer'); this.undoBtn = document.getElementById('undo'); this.redoBtn = document.getElementById('redo'); this.zoomInBtn = document.getElementById('zoom-in'); this.zoomOutBtn = document.getElementById('zoom-out'); this.saveBtn = document.getElementById('save'); this.newBtn = document.getElementById('new'); // App State this.isDrawing = false; this.currentTool = 'brush'; this.currentColor = '#000000'; this.currentSize = 15; this.currentOpacity = 1; this.currentFlow = 1; this.currentBlendMode = 'source-over'; this.zoom = 1; this.lastX = 0; this.lastY = 0; this.lastTime = 0; this.velocity = 0; // History and Layers this.history = []; this.historyIndex = -1; this.layers = []; this.currentLayerIndex = 0; this.colorHistory = []; this.init(); } init() { this.setupCanvas(); this.setupEventListeners(); this.createInitialLayer(); this.updateUI(); } setupCanvas() { // Set initial canvas size (adjust as needed) this.canvas.width = 800; this.canvas.height = 600; this.ctx.imageSmoothingEnabled = true; } setupEventListeners() { // Tool selection this.toolButtons.forEach(btn => { btn.addEventListener('click', () => this.selectTool(btn.dataset.tool)); }); // Color and brush settings this.colorPicker.addEventListener('input', (e) => { this.currentColor = e.target.value; this.addToColorHistory(this.currentColor); }); this.sizeSlider.addEventListener('input', (e) => { this.currentSize = parseInt(e.target.value); this.sizeValue.textContent = `${this.currentSize}px`; }); this.opacitySlider.addEventListener('input', (e) => { this.currentOpacity = parseInt(e.target.value) / 100; this.opacityValue.textContent = `${parseInt(e.target.value)}%`; }); this.flowSlider.addEventListener('input', (e) => { this.currentFlow = parseInt(e.target.value) / 100; this.flowValue.textContent = `${parseInt(e.target.value)}%`; }); this.blendModeSelect.addEventListener('change', (e) => { this.currentBlendMode = e.target.value; }); // Canvas drawing events this.canvas.addEventListener('mousedown', (e) => this.startDrawing(e)); this.canvas.addEventListener('mouseup', () => this.stopDrawing()); this.canvas.addEventListener('mouseout', () => this.stopDrawing()); this.canvas.addEventListener('mousemove', (e) => this.draw(e)); // Layer management this.addLayerBtn.addEventListener('click', () => this.addLayer()); // History controls this.undoBtn.addEventListener('click', () => this.undo()); this.redoBtn.addEventListener('click', () => this.redo()); // Zoom controls this.zoomInBtn.addEventListener('click', () => this.adjustZoom(0.1)); this.zoomOutBtn.addEventListener('click', () => this.adjustZoom(-0.1)); // File operations this.saveBtn.addEventListener('click', () => this.saveCanvas()); this.newBtn.addEventListener('click', () => this.newCanvas()); // Keyboard shortcuts document.addEventListener('keydown', (e) => this.handleKeyboardShortcuts(e)); } createInitialLayer() { this.addLayer('Layer 1'); } addLayer(name = `Layer ${this.layers.length + 1}`) { const layer = { id: Date.now(), name, canvas: document.createElement('canvas'), visible: true, opacity: 1, blendMode: 'source-over' }; layer.canvas.width = this.canvas.width; layer.canvas.height = this.canvas.height; layer.ctx = layer.canvas.getContext('2d'); this.layers.push(layer); this.currentLayerIndex = this.layers.length - 1; this.renderLayers(); this.saveState(); } selectTool(tool) { this.currentTool = tool; this.toolButtons.forEach(btn => btn.classList.remove('active')); document.querySelector(`.tool-btn[data-tool="${tool}"]`).classList.add('active'); // Change cursor based on tool switch (tool) { case 'brush': case 'eraser': this.canvas.style.cursor = 'crosshair'; break; case 'smudge': this.canvas.style.cursor = 'grab'; break; case 'selection': this.canvas.style.cursor = 'default'; break; default: this.canvas.style.cursor = 'default'; } } startDrawing(e) { this.isDrawing = true; const pos = this.getCanvasPosition(e); this.lastX = pos.x; this.lastY = pos.y; this.lastTime = Date.now(); // For smudge tool, we need to save the initial state if (this.currentTool === 'smudge') { this.smudgeStart(); } this.ctx.beginPath(); this.ctx.moveTo(this.lastX, this.lastY); } stopDrawing() { if (!this.isDrawing) return; this.isDrawing = false; this.saveState(); } draw(e) { if (!this.isDrawing) return; const pos = this.getCanvasPosition(e); const currentTime = Date.now(); const timeDiff = currentTime - this.lastTime; // Calculate velocity (pixels per millisecond) if (timeDiff > 0) { const distance = Math.sqrt( Math.pow(pos.x - this.lastX, 2) + Math.pow(pos.y - this.lastY, 2) ); this.velocity = distance / timeDiff; } // Adjust size based on velocity (simulating pressure sensitivity) const velocityFactor = Math.min(1, Math.max(0.3, 1 - this.velocity * 5)); const dynamicSize = this.currentSize * velocityFactor; const dynamicOpacity = this.currentOpacity * velocityFactor; this.ctx.globalAlpha = dynamicOpacity * this.currentFlow; this.ctx.globalCompositeOperation = this.currentBlendMode; this.ctx.lineWidth = dynamicSize; this.ctx.lineCap = 'round'; this.ctx.lineJoin = 'round'; const currentLayer = this.layers[this.currentLayerIndex]; switch (this.currentTool) { case 'brush': currentLayer.ctx.strokeStyle = this.currentColor; currentLayer.ctx.lineTo(pos.x, pos.y); currentLayer.ctx.stroke(); break; case 'eraser': currentLayer.ctx.strokeStyle = 'rgba(0,0,0,0)'; currentLayer.ctx.globalCompositeOperation = 'destination-out'; currentLayer.ctx.lineTo(pos.x, pos.y); currentLayer.ctx.stroke(); currentLayer.ctx.globalCompositeOperation = 'source-over'; break; case 'smudge': this.smudgeDraw(pos.x, pos.y); break; case 'fill': currentLayer.ctx.fillStyle = this.currentColor; currentLayer.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); this.stopDrawing(); break; } this.lastX = pos.x; this.lastY = pos.y; this.lastTime = currentTime; this.renderLayers(); } smudgeStart() { // For smudge tool, we need to save the initial canvas state this.smudgeBuffer = document.createElement('canvas'); this.smudgeBuffer.width = this.canvas.width; this.smudgeBuffer.height = this.canvas.height; this.smudgeBufferCtx = this.smudgeBuffer.getContext('2d'); // Copy the visible canvas to the buffer this.renderLayersToBuffer(this.smudgeBufferCtx); } smudgeDraw(x, y) { // This is a simplified smudge effect const currentLayer = this.layers[this.currentLayerIndex]; const size = this.currentSize; // Get the area to smudge this.smudgeBufferCtx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.renderLayersToBuffer(this.smudgeBufferCtx); // Apply smudge effect currentLayer.ctx.save(); currentLayer.ctx.globalCompositeOperation = 'copy'; currentLayer.ctx.drawImage( this.smudgeBuffer, x - size/2, y - size/2, size, size, x - size/2 + (x - this.lastX)*0.3, y - size/2 + (y - this.lastY)*0.3, size, size ); currentLayer.ctx.restore(); } renderLayers() { // Clear the main canvas this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // Draw all visible layers this.layers.forEach(layer => { if (layer.visible) { this.ctx.globalAlpha = layer.opacity; this.ctx.globalCompositeOperation = layer.blendMode; this.ctx.drawImage(layer.canvas, 0, 0); } }); // Reset to default this.ctx.globalAlpha = 1; this.ctx.globalCompositeOperation = 'source-over'; } renderLayersToBuffer(ctx) { // Draw all visible layers to a buffer context ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.layers.forEach(layer => { if (layer.visible) { ctx.globalAlpha = layer.opacity; ctx.globalCompositeOperation = layer.blendMode; ctx.drawImage(layer.canvas, 0, 0); } }); ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over'; } getCanvasPosition(e) { const rect = this.canvas.getBoundingClientRect(); return { x: (e.clientX - rect.left) / this.zoom, y: (e.clientY - rect.top) / this.zoom }; } saveState() { // Remove any states after current index (for redo) this.history = this.history.slice(0, this.historyIndex + 1); // Save current canvas state of all layers const state = this.layers.map(layer => ({ id: layer.id, imageData: layer.ctx.getImageData(0, 0, layer.canvas.width, layer.canvas.height) })); this.history.push(state); this.historyIndex++; this.updateHistoryButtons(); } restoreState() { if (this.historyIndex < 0 || this.historyIndex >= this.history.length) return; const state = this.history[this.historyIndex]; state.forEach(layerState => { const layer = this.layers.find(l => l.id === layerState.id); if (layer) { layer.ctx.putImageData(layerState.imageData, 0, 0); } }); this.renderLayers(); } undo() { if (this.historyIndex <= 0) return; this.historyIndex--; this.restoreState(); } redo() { if (this.historyIndex >= this.history.length - 1) return; this.historyIndex++; this.restoreState(); } updateHistoryButtons() { this.undoBtn.disabled = this.historyIndex <= 0; this.redoBtn.disabled = this.historyIndex >= this.history.length - 1; } adjustZoom(amount) { this.zoom = Math.max(0.1, Math.min(3, this.zoom + amount)); this.zoomLevel.textContent = `${Math.round(this.zoom * 100)}%`; // Scale the canvas container const container = this.canvas.parentElement; container.style.transform = `scale(${this.zoom})`; container.style.transformOrigin = 'center center'; } addToColorHistory(color) { if (!this.colorHistory.includes(color)) { this.colorHistory.unshift(color); if (this.colorHistory.length > 10) { this.colorHistory.pop(); } this.renderColorHistory(); } } renderColorHistory() { const container = document.querySelector('.color-history'); container.innerHTML = ''; this.colorHistory.forEach(color => { const item = document.createElement('div'); item.className = 'color-history-item'; item.style.backgroundColor = color; item.addEventListener('click', () => { this.currentColor = color; this.colorPicker.value = color; }); container.appendChild(item); }); } renderLayersUI() { this.layersList.innerHTML = ''; this.layers.forEach((layer, index) => { const layerItem = document.createElement('div'); layerItem.className = `layer-item ${index === this.currentLayerIndex ? 'active' : ''}`; layerItem.innerHTML = `

${layer.name} `; layerItem.addEventListener('click', () => { this.currentLayerIndex = index; this.renderLayersUI(); }); this.layersList.appendChild(layerItem); }); } saveCanvas() { const link = document.createElement('a'); link.download = 'procreate-clone.png'; link.href = this.canvas.toDataURL('image/png'); link.click(); } newCanvas() { if (confirm('Are you sure you want to start a new canvas? All unsaved changes will be lost.')) { this.layers.forEach(layer => { layer.ctx.clearRect(0, 0, layer.canvas.width, layer.canvas.height); }); this.history = []; this.historyIndex = -1; this.saveState(); this.renderLayers(); } } handleKeyboardShortcuts(e) { // Don't trigger shortcuts when typing in inputs if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return; // Tool shortcuts if (e.key === 'b') this.selectTool('brush'); if (e.key === 'e') this.selectTool('eraser'); if (e.key === 's') this.selectTool('smudge'); if (e.key === 'm') this.selectTool('selection'); if (e.key === 'f') this.selectTool('fill'); // History shortcuts if (e.ctrlKey && e.key === 'z') { e.preventDefault(); this.undo(); } if (e.ctrlKey && e.shiftKey && e.key === 'z') { e.preventDefault(); this.redo(); } // Zoom shortcuts if (e.ctrlKey && e.key === '=') { e.preventDefault(); this.adjustZoom(0.1); } if (e.ctrlKey && e.key === '-') { e.preventDefault(); this.adjustZoom(-0.1); } } updateUI() { this.renderColorHistory(); this.renderLayersUI(); } } // Initialize the app when DOM is loaded document.addEventListener('DOMContentLoaded', () => { new ProcreateClone(); });