Tạo Assets Đồ Họa
Chuyên Nghiệp & Nhanh Chóng
Được phát triển bởi VanTai Design
Quay lại Hub
Đang tải...
Mở thẻ mới
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Trình Tạo Vệt Sáng Chuyên Nghiệp v4.0</title> <script src="https://cdn.tailwindcss.com"></script> <style> body { margin: 0; overflow: hidden; background-color: #050505; color: white; } canvas { touch-action: none; cursor: crosshair; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #111; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #555; } input[type="range"] { -webkit-appearance: none; width: 100%; height: 4px; background: #2a2a2a; border-radius: 5px; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 0 10px rgba(255,255,255,0.5); } #toast { position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.8); border: 1px solid #333; padding: 10px 20px; border-radius: 8px; font-size: 14px; transform: translateY(100px); opacity: 0; transition: all 0.3s ease; pointer-events: none; z-index: 50; } #toast.show { transform: translateY(0); opacity: 1; } @keyframes shimmer { 100% { transform: translateX(100%); } } </style> </head> <body class="flex h-screen font-sans selection:bg-purple-500/30"> <aside class="w-[350px] bg-[#0a0a0a] border-r border-[#1a1a1a] flex flex-col shadow-2xl z-10 shrink-0"> <div class="p-5 border-b border-[#1a1a1a] flex justify-between items-center"> <div> <h1 class="text-xl font-bold bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-text text-transparent flex items-center gap-2"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="url(#brand-grad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <defs><linearGradient id="brand-grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ec4899"></stop><stop offset="50%" stop-color="#a855f7"></stop><stop offset="100%" stop-color="#6366f1"></stop></linearGradient></defs> <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path> </svg>Light Streak V1 </h1> <p class="text-[10px] text-gray-400 mt-1 uppercase tracking-widest font-semibold">design by Van Tai</p> </div> <div class="flex gap-1"> <button id="btn-undo" class="p-1.5 bg-[#1a1a1a] rounded hover:bg-[#333] text-gray-400 hover:text-white transition" title="Undo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7v6h6"></path><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"></path></svg></button> <button id="btn-redo" class="p-1.5 bg-[#1a1a1a] rounded hover:bg-[#333] text-gray-400 hover:text-white transition" title="Redo"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 7v6h-6"></path><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"></path></svg></button> </div> </div> <div class="p-5 flex-1 overflow-y-auto space-y-6"> <div class="space-y-2"> <label class="text-sm font-semibold text-gray-200">Công cụ vẽ (Draw Mode)</label> <div class="flex gap-2 bg-[#1a1a1a] p-1 rounded-lg"> <button id="tool-brush" class="flex-1 py-1.5 px-2 rounded bg-[#333] text-white text-xs font-bold transition-all shadow-md">🖌️ Vẽ Tự Do</button> <button id="tool-pen" class="flex-1 py-1.5 px-2 rounded text-gray-400 hover:text-gray-200 text-xs font-bold transition-all flex items-center justify-center gap-1"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.586 7.586"></path><circle cx="11" cy="11" r="2"></circle></svg> Bezier Pen</button> </div> <div id="pen-controls" class="hidden mt-2 bg-[#111] border border-[#222] p-3 rounded-lg text-[11px] text-gray-400 space-y-1"> <p>• <b>Click</b>: Tạo góc nhọn.</p><p>• <b>Click & Kéo</b>: Tạo đường cong mượt.</p><p>• <b>Nắm tay đòn</b>: Điều chỉnh độ cong.</p> <button id="btn-commit-pen" class="w-full mt-2 py-2 bg-gradient-to-r from-green-600 to-emerald-500 hover:from-green-500 text-white rounded text-xs font-bold transition">✅ Render Đường Này</button> </div> </div> <div class="space-y-4"> <label class="text-sm font-semibold text-gray-200">Trộn Màu Sắc (Color Blending)</label> <div class="flex gap-4"> <div class="flex-1 space-y-1"><label class="text-xs text-gray-500">Màu 1 (Ngoài)</label><input type="color" id="color1" value="#aa00ff" class="w-full h-8 rounded cursor-pointer bg-black border-0 p-0"></div> <div class="flex-1 space-y-1"><label class="text-xs text-gray-500">Màu 2 (Trong)</label><input type="color" id="color2" value="#ffaa00" class="w-full h-8 rounded cursor-pointer bg-black border-0 p-0"></div> </div> <div class="flex gap-2"> <button class="preset-btn w-6 h-6 rounded-full bg-gradient-to-br from-[#aa00ff] to-[#ffaa00]" data-c1="#aa00ff" data-c2="#ffaa00"></button> <button class="preset-btn w-6 h-6 rounded-full bg-gradient-to-br from-[#ff0055] to-[#00d4ff]" data-c1="#ff0055" data-c2="#00d4ff"></button> <button class="preset-btn w-6 h-6 rounded-full bg-gradient-to-br from-[#ff3300] to-[#ffff00]" data-c1="#ff3300" data-c2="#ffff00"></button> <button class="preset-btn w-6 h-6 rounded-full bg-gradient-to-br from-[#0044ff] to-[#00ffcc]" data-c1="#0044ff" data-c2="#00ffcc"></button> </div> </div> <div class="space-y-5"> <div class="space-y-2"><label class="text-sm font-medium text-gray-300 flex justify-between">Độ phức tạp (Strands) <span id="val-strands">12</span></label><input type="range" id="param-strands" min="1" max="30" value="12"></div> <div class="space-y-2"><label class="text-sm font-medium text-gray-300 flex justify-between">Độ bung rộng (Spread) <span id="val-spread">40</span></label><input type="range" id="param-spread" min="5" max="100" value="40"></div> <div class="space-y-2"><label class="text-sm font-medium text-gray-300 flex justify-between">Độ xoắn bện (Weave/Twist) <span id="val-weave">3</span></label><input type="range" id="param-weave" min="0" max="10" step="0.5" value="3"></div> <div class="space-y-2"><label class="text-sm font-medium text-gray-300 flex justify-between">Kích thước Lõi (Core Size) <span id="val-thick">2</span></label><input type="range" id="param-thick" min="0.5" max="8" step="0.5" value="2"></div> <div class="space-y-2"><label class="text-sm font-medium text-gray-300 flex justify-between">Độ chói Hào quang (Bloom) <span id="val-bloom">40</span></label><input type="range" id="param-bloom" min="10" max="150" value="40"></div> <div class="space-y-2"><label class="text-sm font-medium text-gray-300">Phối cảnh (Perspective)</label> <div class="flex gap-1 bg-[#1a1a1a] p-1 rounded-lg h-10"> <button class="taper-btn flex-1 rounded bg-[#333] text-white flex items-center justify-center transition-all shadow-md" data-value="far-near"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M3 12 Q 10 7 21 6 L 21 18 Q 10 17 3 12 Z"></path></svg></button> <button class="taper-btn flex-1 rounded text-gray-500 hover:text-gray-300 hover:bg-[#222] flex items-center justify-center" data-value="symmetric"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M2 12 Q 12 4 22 12 Q 12 20 2 12 Z"></path></svg></button> <button class="taper-btn flex-1 rounded text-gray-500 hover:text-gray-300 hover:bg-[#222] flex items-center justify-center" data-value="near-far"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M21 12 Q 14 7 3 6 L 3 18 Q 14 17 21 12 Z"></path></svg></button> </div> </div> </div> </div> <div class="p-5 border-t border-[#1a1a1a] space-y-3"> <button id="btn-export-svg" class="w-full py-2.5 px-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 text-white rounded text-sm font-bold transition-all shadow-md flex justify-center items-center gap-2 relative overflow-hidden group"> <span class="relative z-10 flex items-center gap-2"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg> Xuất Vector (SVG / AI)</span> </button> <button id="btn-export-4k" class="w-full py-2.5 px-4 bg-gradient-to-r from-yellow-600 to-orange-600 hover:from-yellow-500 text-white rounded text-sm font-bold transition-all shadow-md flex justify-center items-center gap-2 relative overflow-hidden group"> <span class="relative z-10 flex items-center gap-2"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> Xuất Ảnh 4K Ultra HD</span> </button> <button id="btn-clear" class="w-full py-2 text-red-500 hover:text-red-400 text-xs font-medium transition-colors">Thùng rác (Xóa toàn bộ)</button> </div> </aside> <main class="flex-1 relative bg-[radial-gradient(circle_at_center,#111_0%,#000_100%)]" id="canvas-container"> <div class="absolute inset-0 opacity-[0.15]" style="background-image: linear-gradient(45deg, #333 25%, transparent 25%), linear-gradient(-45deg, #333 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #333 75%), linear-gradient(-45deg, transparent 75%, #333 75%); background-size: 20px 20px;"></div> <canvas id="main-canvas" class="absolute inset-0 w-full h-full"></canvas> <div id="hint-box" class="absolute inset-0 flex items-center justify-center pointer-events-none transition-opacity duration-500"><p id="hint-text" class="text-gray-400 font-light tracking-wide text-sm border border-gray-800 bg-black/60 px-6 py-3 rounded-full backdrop-blur-sm">Nhấp và vẽ tự do một đường cong</p></div> </main> <div id="toast">Thông báo</div> <script> const canvas = document.getElementById('main-canvas'); const ctx = canvas.getContext('2d', { willReadFrequently: true }); const container = document.getElementById('canvas-container'); const hintBox = document.getElementById('hint-box'); const hintText = document.getElementById('hint-text'); let activeTool = 'brush'; let isDrawing = false; let paths = []; let history = []; let historyIndex = -1; function saveState() { if (historyIndex < history.length - 1) history = history.slice(0, historyIndex + 1); history.push(JSON.parse(JSON.stringify(paths))); historyIndex++; } function undo() { if (historyIndex > 0) { historyIndex--; paths = JSON.parse(JSON.stringify(history[historyIndex])); showToast("Hoàn tác"); render(); } else if (historyIndex === 0) { historyIndex--; paths = []; showToast("Hoàn tác"); render(); } } function redo() { if (historyIndex < history.length - 1) { historyIndex++; paths = JSON.parse(JSON.stringify(history[historyIndex])); showToast("Làm lại"); render(); } } let rawPoints = []; let bezierNodes = []; let selectedNodeIdx = -1; let activeHandle = null; const ui = { c1: document.getElementById('color1'), c2: document.getElementById('color2'), strands: document.getElementById('param-strands'), spread: document.getElementById('param-spread'), weave: document.getElementById('param-weave'), thick: document.getElementById('param-thick'), bloom: document.getElementById('param-bloom') }; let currentTaperMode = 'far-near'; const taperBtns = document.querySelectorAll('.taper-btn'); taperBtns.forEach(btn => { btn.addEventListener('click', (e) => { taperBtns.forEach(b => { b.classList.remove('bg-[#333]', 'text-white', 'shadow-md'); b.classList.add('text-gray-500'); }); const target = e.currentTarget; target.classList.add('bg-[#333]', 'text-white', 'shadow-md'); target.classList.remove('text-gray-500'); currentTaperMode = target.dataset.value; if (paths.length > 0) render(); }); }); Object.keys(ui).forEach(key => { if(ui[key]) { ui[key].addEventListener('input', () => { const label = document.getElementById(`val-${key}`); if(label) label.textContent = ui[key].value; if (paths.length > 0) render(); }); } }); document.querySelectorAll('.preset-btn').forEach(btn => { btn.addEventListener('click', (e) => { ui.c1.value = e.target.dataset.c1; ui.c2.value = e.target.dataset.c2; if (paths.length > 0) render(); }); }); function resize() { canvas.width = container.clientWidth * window.devicePixelRatio; canvas.height = container.clientHeight * window.devicePixelRatio; render(); } window.addEventListener('resize', resize); const btnBrush = document.getElementById('tool-brush'); const btnPen = document.getElementById('tool-pen'); const penControls = document.getElementById('pen-controls'); btnBrush.addEventListener('click', () => { activeTool = 'brush'; btnBrush.classList.add('bg-[#333]', 'text-white', 'shadow-md'); btnBrush.classList.remove('text-gray-400'); btnPen.classList.remove('bg-[#333]', 'text-white', 'shadow-md'); btnPen.classList.add('text-gray-400'); penControls.classList.add('hidden'); bezierNodes = []; hintText.textContent = "Nhấp và vẽ tự do một đường cong"; hintBox.style.opacity = paths.length === 0 ? '1' : '0'; render(); }); btnPen.addEventListener('click', () => { activeTool = 'pen'; btnPen.classList.add('bg-[#333]', 'text-white', 'shadow-md'); btnPen.classList.remove('text-gray-400'); btnBrush.classList.remove('bg-[#333]', 'text-white', 'shadow-md'); btnBrush.classList.add('text-gray-400'); penControls.classList.remove('hidden'); hintText.textContent = "Click hoặc Drag để tạo các điểm Neo (Anchor)"; hintBox.style.opacity = '1'; }); document.getElementById('btn-commit-pen').addEventListener('click', () => { if (bezierNodes.length > 1) { let spline = extractBezierPath(bezierNodes); let resampled = resamplePath(spline, 2); paths.push(resampled); saveState(); } bezierNodes = []; hintBox.style.opacity = '0'; render(); }); window.addEventListener('keydown', (e) => { if (e.ctrlKey && e.key === 'z') { e.preventDefault(); undo(); } if ((e.ctrlKey && e.shiftKey && (e.key === 'z' || e.key === 'Z')) || (e.ctrlKey && e.key === 'y')) { e.preventDefault(); redo(); } }); document.getElementById('btn-undo').addEventListener('click', undo); document.getElementById('btn-redo').addEventListener('click', redo); function showToast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2000); } function hexToRgb(hex) { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : {r:255,g:255,b:255}; } function mixColor(c1, c2, ratio) { const r1 = hexToRgb(c1), r2 = hexToRgb(c2); return { r: Math.round(r1.r * (1 - ratio) + r2.r * ratio), g: Math.round(r1.g * (1 - ratio) + r2.g * ratio), b: Math.round(r1.b * (1 - ratio) + r2.b * ratio) }; } function distance(p1, p2) { return Math.sqrt((p2.x - p1.x)**2 + (p2.y - p1.y)**2); } function seededRandom(seed) { let x = Math.sin(seed * 9999) * 10000; return x - Math.floor(x); } function getBezierPoint(t, p0, p1, p2, p3) { let mt = 1 - t, mt2 = mt * mt, t2 = t * t; return { x: mt2*mt*p0.x + 3*mt2*t*p1.x + 3*mt*t2*p2.x + t*t2*p3.x, y: mt2*mt*p0.y + 3*mt2*t*p1.y + 3*mt*t2*p2.y + t*t2*p3.y }; } function extractBezierPath(nodes, ptsPerSegment = 30) { if (nodes.length < 2) return []; let path = []; for (let i = 0; i < nodes.length - 1; i++) { let p0 = nodes[i]; let p1 = nodes[i].cpOut; let p2 = nodes[i+1].cpIn; let p3 = nodes[i+1]; for (let j = 0; j <= ptsPerSegment; j++) { if (j === 0 && i > 0) continue; path.push(getBezierPoint(j / ptsPerSegment, p0, p1, p2, p3)); } } return path; } function hitTestNodes(pos) { for (let i = 0; i < bezierNodes.length; i++) { if (distance(pos, bezierNodes[i].cpOut) < 8) return { idx: i, handle: 'out' }; if (distance(pos, bezierNodes[i].cpIn) < 8) return { idx: i, handle: 'in' }; } for (let i = 0; i < bezierNodes.length; i++) { if (distance(pos, bezierNodes[i]) < 10) return { idx: i, handle: 'anchor' }; } return null; } function resamplePath(points, spacing = 5) { if(points.length < 2) return points; let resampled = [points[0]]; let curr = 0, next = 1, distCovered = 0; while(next < points.length) { let d = distance(points[curr], points[next]); if(distCovered + d >= spacing) { let ratio = (spacing - distCovered) / d; let nx = points[curr].x + (points[next].x - points[curr].x) * ratio; let ny = points[curr].y + (points[next].y - points[curr].y) * ratio; let newPt = {x: nx, y: ny}; resampled.push(newPt); points.splice(next, 0, newPt); curr = next; next++; distCovered = 0; } else { distCovered += d; curr++; next++; } } return resampled; } function smoothPath(points, iterations = 3) { let pts = [...points]; for(let j=0; j<iterations; j++) { let smoothed = [pts[0]]; for(let i=0; i<pts.length-1; i++) { let p0 = pts[i], p1 = pts[i+1]; smoothed.push({ x: 0.75*p0.x + 0.25*p1.x, y: 0.75*p0.y + 0.25*p1.y }); smoothed.push({ x: 0.25*p0.x + 0.75*p1.x, y: 0.25*p0.y + 0.75*p1.y }); } smoothed.push(pts[pts.length-1]); pts = smoothed; } return pts; } function getNormals(points, smoothRadius = 8) { let normals = []; for(let i=0; i<points.length; i++) { let prev = Math.max(0, i - smoothRadius); let next = Math.min(points.length - 1, i + smoothRadius); let dx = points[next].x - points[prev].x; let dy = points[next].y - points[prev].y; let len = Math.sqrt(dx*dx + dy*dy) || 1; normals.push({ x: -dy/len, y: dx/len }); } return normals; } function getPointer(e) { const rect = canvas.getBoundingClientRect(); const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; return { x: clientX - rect.left, y: clientY - rect.top }; } canvas.addEventListener('mousedown', (e) => { let pos = getPointer(e); if (activeTool === 'brush') { isDrawing = true; rawPoints = [pos]; hintBox.style.opacity = '0'; } else if (activeTool === 'pen') { hintBox.style.opacity = '0'; let hit = hitTestNodes(pos); if (hit) { selectedNodeIdx = hit.idx; activeHandle = hit.handle; } else { let newNode = { x: pos.x, y: pos.y, cpIn: {x: pos.x, y: pos.y}, cpOut: {x: pos.x, y: pos.y} }; bezierNodes.push(newNode); selectedNodeIdx = bezierNodes.length - 1; activeHandle = 'new'; } render(); } }); canvas.addEventListener('mousemove', (e) => { let pos = getPointer(e); if (activeTool === 'brush' && isDrawing) { e.preventDefault(); if(distance(rawPoints[rawPoints.length-1], pos) > 2) rawPoints.push(pos); render(); const dpr = window.devicePixelRatio; ctx.save(); ctx.scale(dpr, dpr); ctx.strokeStyle = 'rgba(255,255,255,0.4)'; ctx.lineWidth = 1.5; ctx.beginPath(); rawPoints.forEach((p, i) => i===0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y)); ctx.stroke(); ctx.restore(); } else if (activeTool === 'pen') { let hit = hitTestNodes(pos); canvas.style.cursor = hit ? (hit.handle === 'anchor' ? 'move' : 'crosshair') : 'crosshair'; if (activeHandle && selectedNodeIdx > -1) { let node = bezierNodes[selectedNodeIdx]; if (activeHandle === 'new' || activeHandle === 'out') { node.cpOut = pos; node.cpIn = { x: 2 * node.x - node.cpOut.x, y: 2 * node.y - node.cpOut.y }; } else if (activeHandle === 'in') { node.cpIn = pos; node.cpOut = { x: 2 * node.x - node.cpIn.x, y: 2 * node.y - node.cpIn.y }; } else if (activeHandle === 'anchor') { let dx = pos.x - node.x; let dy = pos.y - node.y; node.x = pos.x; node.y = pos.y; node.cpIn.x += dx; node.cpIn.y += dy; node.cpOut.x += dx; node.cpOut.y += dy; } render(); } } }); window.addEventListener('mouseup', () => { if (activeTool === 'brush' && isDrawing) { isDrawing = false; if (rawPoints.length > 5) { let smoothed = smoothPath(rawPoints, 3); let resampled = resamplePath(smoothed, 2); paths.push(resampled); saveState(); } rawPoints = []; render(); } else if (activeTool === 'pen') { activeHandle = null; } }); canvas.addEventListener('touchstart', (e) => { canvas.dispatchEvent(new MouseEvent('mousedown', {clientX: e.touches[0].clientX, clientY: e.touches[0].clientY})) }, {passive: false}); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); canvas.dispatchEvent(new MouseEvent('mousemove', {clientX: e.touches[0].clientX, clientY: e.touches[0].clientY})) }, {passive: false}); window.addEventListener('touchend', () => { window.dispatchEvent(new MouseEvent('mouseup')) }); function fillTaperedPolygon(targetCtx, pts, maxThick, colorObj, opacity, blur, scaleMultiplier, taperMode) { if(pts.length < 2) return; let strandNormals = getNormals(pts, 8); let topEdge = [], bottomEdge = [], thickArr = []; let scaledThick = maxThick * scaleMultiplier; let scaledBlur = blur * scaleMultiplier; for(let i=0; i<pts.length; i++) { let p = pts[i]; let n = strandNormals[i]; let progress = i / (pts.length - 1); let envelope = 1; if (taperMode === 'symmetric') envelope = Math.pow(Math.sin(progress * Math.PI), 1.2); else if (taperMode === 'far-near') envelope = Math.pow(progress, 1.5); else if (taperMode === 'near-far') envelope = Math.pow(1 - progress, 1.5); let tipFade = 1; if (progress < 0.05) tipFade = Math.pow(progress / 0.05, 0.8); else if (progress > 0.95) tipFade = Math.pow((1 - progress) / 0.05, 0.8); let currentThick = scaledThick * envelope * tipFade; thickArr.push(currentThick); topEdge.push({ x: (p.x * scaleMultiplier) + n.x * (currentThick/2), y: (p.y * scaleMultiplier) + n.y * (currentThick/2) }); bottomEdge.push({ x: (p.x * scaleMultiplier) - n.x * (currentThick/2), y: (p.y * scaleMultiplier) - n.y * (currentThick/2) }); } targetCtx.beginPath(); targetCtx.moveTo(topEdge[0].x, topEdge[0].y); for(let i=1; i<topEdge.length; i++) targetCtx.lineTo(topEdge[i].x, topEdge[i].y); let last = pts.length - 1; let fdx = pts[last].x - pts[last-1].x; let fdy = pts[last].y - pts[last-1].y; let flen = Math.sqrt(fdx*fdx + fdy*fdy) || 1; let cpxEnd = (pts[last].x * scaleMultiplier) + (fdx/flen) * (thickArr[last] * 0.6); let cpyEnd = (pts[last].y * scaleMultiplier) + (fdy/flen) * (thickArr[last] * 0.6); targetCtx.quadraticCurveTo(cpxEnd, cpyEnd, bottomEdge[last].x, bottomEdge[last].y); for(let i=bottomEdge.length-2; i>=0; i--) targetCtx.lineTo(bottomEdge[i].x, bottomEdge[i].y); let bdx = pts[0].x - pts[1].x; let bdy = pts[0].y - pts[1].y; let blen = Math.sqrt(bdx*bdx + bdy*bdy) || 1; let cpxStart = (pts[0].x * scaleMultiplier) + (bdx/blen) * (thickArr[0] * 0.6); let cpyStart = (pts[0].y * scaleMultiplier) + (bdy/blen) * (thickArr[0] * 0.6); targetCtx.quadraticCurveTo(cpxStart, cpyStart, topEdge[0].x, topEdge[0].y); targetCtx.closePath(); targetCtx.fillStyle = `rgba(${colorObj.r}, ${colorObj.g}, ${colorObj.b}, ${opacity})`; targetCtx.shadowBlur = scaledBlur; targetCtx.shadowColor = `rgb(${colorObj.r}, ${colorObj.g}, ${colorObj.b})`; targetCtx.fill(); } function renderSceneToContext(targetCtx, scaleMultiplier, drawUI = false) { const strandsCount = parseInt(ui.strands.value); const spreadParam = parseInt(ui.spread.value); const weaveParam = parseFloat(ui.weave.value); const thickParam = parseFloat(ui.thick.value); const bloomParam = parseInt(ui.bloom.value); const taperMode = currentTaperMode; targetCtx.globalCompositeOperation = 'lighter'; paths.forEach(basePath => { const normals = getNormals(basePath, 8); let allStrands = []; for(let s = 0; s < strandsCount; s++) { let ratio = strandsCount > 1 ? (s / (strandsCount - 1)) - 0.5 : 0; let strandPts = []; let phase = s * Math.PI * 0.7; let c = mixColor(ui.c1.value, ui.c2.value, (s / (strandsCount-1 || 1))); let r1 = seededRandom(s * 12.34); let r2 = seededRandom(s * 56.78); let coreFactor = 1 - Math.abs(ratio) * 2; let startOffset = r1 * 0.15 * (1 - coreFactor); let endOffset = r2 * 0.35 * (1 - coreFactor + 0.2); let sIdx = Math.floor(startOffset * basePath.length); let eIdx = Math.floor((1 - endOffset) * basePath.length); if (eIdx <= sIdx + 10) eIdx = sIdx + 10; for(let i = sIdx; i < eIdx; i++) { let pt = basePath[i]; let normal = normals[i]; let localProgress = (i - sIdx) / (eIdx - sIdx - 1); let origProgress = i / basePath.length; let envelope = 1; if (taperMode === 'symmetric') envelope = Math.pow(Math.sin(localProgress * Math.PI), 0.5); else if (taperMode === 'far-near') envelope = Math.pow(localProgress, 1.2); else if (taperMode === 'near-far') envelope = Math.pow(1 - localProgress, 1.2); let baseOffset = ratio * spreadParam * envelope; let weaveOffset = 0; if(weaveParam > 0) weaveOffset = Math.sin(origProgress * Math.PI * weaveParam * 5 + phase) * (spreadParam * 0.3) * envelope; strandPts.push({ x: pt.x + normal.x * (baseOffset + weaveOffset), y: pt.y + normal.y * (baseOffset + weaveOffset) }); } allStrands.push({ points: strandPts, color: c, thicknessMod: 1 - Math.abs(ratio) }); } allStrands.forEach(strand => fillTaperedPolygon(targetCtx, strand.points, thickParam * 12, strand.color, 0.05, bloomParam, scaleMultiplier, taperMode)); allStrands.forEach(strand => fillTaperedPolygon(targetCtx, strand.points, thickParam * 3.5 * (0.5 + strand.thicknessMod), strand.color, 0.3, bloomParam / 2, scaleMultiplier, taperMode)); allStrands.forEach(strand => { let coreColor = { r: Math.min(255, strand.color.r+150), g: Math.min(255, strand.color.g+150), b: Math.min(255, strand.color.b+150) }; fillTaperedPolygon(targetCtx, strand.points, thickParam * 1.5, coreColor, 0.8, bloomParam / 4, scaleMultiplier, taperMode); }); targetCtx.shadowBlur = 0; allStrands.forEach((strand, idx) => { if(idx % 2 === 0) { let sparkColor = { r: 255, g: 255, b: 255 }; fillTaperedPolygon(targetCtx, strand.points, thickParam * 0.6, sparkColor, 0.9, 0, scaleMultiplier, taperMode); } }); }); if (drawUI) { targetCtx.globalCompositeOperation = 'source-over'; if (bezierNodes.length > 1) { let previewPath = extractBezierPath(bezierNodes); targetCtx.beginPath(); targetCtx.moveTo(previewPath[0].x * scaleMultiplier, previewPath[0].y * scaleMultiplier); for(let i=1; i<previewPath.length; i++) targetCtx.lineTo(previewPath[i].x * scaleMultiplier, previewPath[i].y * scaleMultiplier); targetCtx.strokeStyle = 'rgba(255, 255, 255, 0.5)'; targetCtx.lineWidth = 2 * scaleMultiplier; targetCtx.stroke(); } bezierNodes.forEach((node, idx) => { targetCtx.beginPath(); targetCtx.moveTo(node.cpIn.x * scaleMultiplier, node.cpIn.y * scaleMultiplier); targetCtx.lineTo(node.cpOut.x * scaleMultiplier, node.cpOut.y * scaleMultiplier); targetCtx.strokeStyle = 'rgba(100, 150, 255, 0.7)'; targetCtx.lineWidth = 1 * scaleMultiplier; targetCtx.stroke(); [node.cpIn, node.cpOut].forEach(cp => { targetCtx.beginPath(); targetCtx.arc(cp.x * scaleMultiplier, cp.y * scaleMultiplier, 4 * scaleMultiplier, 0, Math.PI*2); targetCtx.fillStyle = '#fff'; targetCtx.fill(); targetCtx.strokeStyle = '#3b82f6'; targetCtx.stroke(); }); targetCtx.beginPath(); let s = 8 * scaleMultiplier; targetCtx.rect((node.x * scaleMultiplier) - s/2, (node.y * scaleMultiplier) - s/2, s, s); targetCtx.fillStyle = idx === selectedNodeIdx ? '#3b82f6' : '#fff'; targetCtx.fill(); targetCtx.strokeStyle = '#000'; targetCtx.stroke(); }); } } function render() { const dpr = window.devicePixelRatio; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height); renderSceneToContext(ctx, dpr, true); } class MockSVGContext { constructor(width, height) { this.width = width; this.height = height; this.defsStr = ""; this.defsSet = new Set(); this.elements = []; this.d = ""; this.fillStyle = "#000"; this.strokeStyle = "#000"; this.lineWidth = 1; this.shadowBlur = 0; this.shadowColor = "transparent"; this.lineCap = "butt"; this.lineJoin = "miter"; this.globalCompositeOperation = "source-over"; } beginPath() { this.d = ""; } moveTo(x, y) { this.d += `M ${x.toFixed(2)} ${y.toFixed(2)} `; } lineTo(x, y) { this.d += `L ${x.toFixed(2)} ${y.toFixed(2)} `; } quadraticCurveTo(cx, cy, x, y) { this.d += `Q ${cx.toFixed(2)} ${cy.toFixed(2)} ${x.toFixed(2)} ${y.toFixed(2)} `; } closePath() { this.d += "Z "; } fill() { let opacity = 1; let fillCol = this.fillStyle; const rgbaMatch = fillCol.match(/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9.]+)\s*\)/); if(rgbaMatch) { fillCol = `rgb(${rgbaMatch[1]},${rgbaMatch[2]},${rgbaMatch[3]})`; opacity = rgbaMatch[4]; } let blendMode = this.globalCompositeOperation === 'lighter' ? 'screen' : 'normal'; if (this.shadowBlur > 0) { let stdDev = this.shadowBlur / 2; let id = `blur_${stdDev.toFixed(1)}`.replace('.', '_'); if(!this.defsSet.has(id)) { this.defsSet.add(id); this.defsStr += `<filter id="${id}" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="${stdDev}" /></filter>\n`; } this.elements.push(`<path d="${this.d}" fill="${this.shadowColor}" fill-opacity="${opacity}" filter="url(#${id})" style="mix-blend-mode: ${blendMode};" />`); } this.elements.push(`<path d="${this.d}" fill="${fillCol}" fill-opacity="${opacity}" style="mix-blend-mode: ${blendMode};" />`); } stroke() { let blendMode = this.globalCompositeOperation === 'lighter' ? 'screen' : 'normal'; let strokeCol = this.strokeStyle; let opacity = 1; const rgbaMatch = strokeCol.match(/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9.]+)\s*\)/); if(rgbaMatch) { strokeCol = `rgb(${rgbaMatch[1]},${rgbaMatch[2]},${rgbaMatch[3]})`; opacity = rgbaMatch[4]; } this.elements.push(`<path d="${this.d}" fill="none" stroke="${strokeCol}" stroke-opacity="${opacity}" stroke-width="${this.lineWidth.toFixed(2)}" stroke-linecap="${this.lineCap}" stroke-linejoin="${this.lineJoin}" style="mix-blend-mode: ${blendMode};" />`); } getSVG() { return `<svg xmlns="http://www.w3.org/2000/svg" width="${this.width}" height="${this.height}" viewBox="0 0 ${this.width} ${this.height}" style="background-color: transparent;"><defs>${this.defsStr}</defs><g>${this.elements.join('\n')}</g></svg>`; } } document.getElementById('btn-clear').addEventListener('click', () => { paths = []; bezierNodes = []; saveState(); render(); hintBox.style.opacity = '1'; }); document.getElementById('btn-export-svg').addEventListener('click', () => { if(paths.length === 0) return alert("Vui lòng vẽ ánh sáng trước nhé!"); showToast("Đang tạo file Vector SVG..."); setTimeout(() => { const logicalWidth = canvas.clientWidth; const logicalHeight = canvas.clientHeight; const svgCtx = new MockSVGContext(logicalWidth, logicalHeight); renderSceneToContext(svgCtx, 1, false); const svgData = svgCtx.getSVG(); const blob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"}); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.download = `LightStreak_Vector_${Date.now()}.svg`; link.href = url; link.click(); URL.revokeObjectURL(url); showToast("Đã tải xong file Vector (SVG)!"); }, 100); }); document.getElementById('btn-export-4k').addEventListener('click', () => { if(paths.length === 0) return alert("Vui lòng vẽ ánh sáng trước nhé!"); showToast("Đang render 4K UHD. Vui lòng đợi..."); setTimeout(() => { const offCanvas = document.createElement('canvas'); const logicalWidth = canvas.clientWidth; const logicalHeight = canvas.clientHeight; const maxLogical = Math.max(logicalWidth, logicalHeight); const scaleTo4K = 3840 / maxLogical; offCanvas.width = logicalWidth * scaleTo4K; offCanvas.height = logicalHeight * scaleTo4K; const oCtx = offCanvas.getContext('2d'); renderSceneToContext(oCtx, scaleTo4K, false); const link = document.createElement('a'); link.download = `LightStreak_4K_UHD_${Date.now()}.png`; link.href = offCanvas.toDataURL('image/png', 1.0); link.click(); showToast("Đã tải xong ảnh 4K!"); }, 100); }); saveState(); resize(); </script> </body> </html>
<!DOCTYPE html> <html lang="vi"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Trình Tạo Ruy Băng 3D (Ribbon Studio)</title> <script src="https://cdn.tailwindcss.com"></script> <style> body { margin: 0; overflow: hidden; background-color: #050505; color: white; font-family: system-ui, -apple-system, sans-serif; } canvas { touch-action: none; cursor: crosshair; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #111; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #555; } input[type="range"] { -webkit-appearance: none; width: 100%; height: 4px; background: #2a2a2a; border-radius: 5px; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 0 10px rgba(255,255,255,0.5); } #toast { position: fixed; bottom: 20px; right: 20px; background: rgba(0,0,0,0.8); color: white; border: 1px solid #333; padding: 10px 20px; border-radius: 8px; font-size: 14px; transform: translateY(100px); opacity: 0; transition: all 0.3s ease; pointer-events: none; z-index: 50; } #toast.show { transform: translateY(0); opacity: 1; } </style> </head> <body class="flex h-screen font-sans selection:bg-purple-500/30"> <aside class="w-[350px] bg-[#0a0a0a] border-r border-[#1a1a1a] flex flex-col shadow-2xl z-10 shrink-0"> <div class="p-5 border-b border-[#1a1a1a] flex justify-between items-center"> <div> <h1 class="text-xl font-bold bg-gradient-to-r from-red-500 to-orange-500 bg-clip-text text-transparent flex items-center gap-2"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="url(#brand-grad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <defs><linearGradient id="brand-grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ef4444"></stop><stop offset="100%" stop-color="#f97316"></stop></linearGradient></defs> <path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4"></path><polyline points="14 2 14 8 20 8"></polyline><path d="M4 14.5c2-1.5 4-1.5 6 0 2 1.5 4 1.5 6 0"></path> </svg>Ribbon Studio </h1> <p class="text-[10px] text-gray-400 mt-1 uppercase tracking-widest font-semibold">Design By VanTai</p> </div> <div class="flex gap-1"> <button id="btn-undo" class="p-1.5 bg-[#1a1a1a] rounded hover:bg-[#333] text-gray-400 hover:text-white transition" title="Undo (Ctrl+Z)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"></path><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"></path></svg></button> <button id="btn-redo" class="p-1.5 bg-[#1a1a1a] rounded hover:bg-[#333] text-gray-400 hover:text-white transition" title="Redo (Ctrl+Shift+Z)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6"></path><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"></path></svg></button> </div> </div> <div class="p-5 flex-1 overflow-y-auto space-y-6"> <div class="space-y-2"> <div class="flex items-center gap-2 mb-2"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-red-500"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.586 7.586"></path><circle cx="11" cy="11" r="2"></circle></svg><label class="text-sm font-semibold text-gray-200">Cách vẽ Ruy Băng (Bezier)</label></div> <div class="bg-[#111] border border-[#222] p-3 rounded-lg text-[11px] text-gray-400 space-y-1"><p>• <b>Click:</b> Chấm để tạo điểm neo liên tục.</p><p>• <b>Kéo tay đòn:</b> Tinh chỉnh độ lật mặt và uốn cong ruy băng theo thời gian thực.</p></div> </div> <div class="space-y-4"> <label class="text-sm font-semibold text-gray-200">Màu Sắc Lụa (Silk Color)</label> <div class="flex gap-4"> <div class="flex-1 space-y-1"><label class="text-xs text-gray-500">Mặt trước (Sáng)</label><input type="color" id="color-front" value="#ff0000" class="w-full h-8 rounded cursor-pointer bg-black border-0 p-0"></div> <div class="flex-1 space-y-1"><label class="text-xs text-gray-500">Mặt sau (Tối)</label><input type="color" id="color-back" value="#8b0000" class="w-full h-8 rounded cursor-pointer bg-black border-0 p-0"></div> </div> <div class="flex gap-2"> <button class="preset-btn w-6 h-6 rounded-full border border-[#222] bg-gradient-to-r from-[#ff0000] to-[#8b0000]" data-cf="#ff0000" data-cb="#8b0000"></button> <button class="preset-btn w-6 h-6 rounded-full border border-[#222] bg-gradient-to-r from-[#1E90FF] to-[#000080]" data-cf="#1E90FF" data-cb="#000080"></button> <button class="preset-btn w-6 h-6 rounded-full border border-[#222] bg-gradient-to-r from-[#FFD700] to-[#B8860B]" data-cf="#FFD700" data-cb="#B8860B"></button> <button class="preset-btn w-6 h-6 rounded-full border border-[#222] bg-gradient-to-r from-[#FF69B4] to-[#C71585]" data-cf="#FF69B4" data-cb="#C71585"></button> <button class="preset-btn w-6 h-6 rounded-full border border-[#222] bg-gradient-to-r from-[#ffffff] to-[#a0a0a0]" data-cf="#ffffff" data-cb="#a0a0a0"></button> </div> </div> <hr class="border-[#1a1a1a]"> <div class="space-y-5"> <div class="space-y-2"><label class="text-sm font-medium text-gray-300 flex justify-between">Bản rộng ruy băng <span id="val-width" class="text-xs text-gray-500">80px</span></label><input type="range" id="param-width" min="20" max="200" value="80" class="transition-all duration-300"></div> <div class="space-y-2"><label class="text-sm font-medium text-gray-300 flex justify-between">Độ nhạy xoắn lật mặt <span id="val-twist" class="text-xs text-gray-500">1.2x</span></label><input type="range" id="param-twist" min="0" max="5" step="0.1" value="1.2" class="transition-all duration-300"></div> <div class="space-y-2"><label class="text-sm font-medium text-gray-300 flex justify-between">Độ bóng bẩy (Shininess) <span id="val-shine" class="text-xs text-gray-500">85%</span></label><input type="range" id="param-shine" min="0" max="100" value="85" class="transition-all duration-300"></div> <div class="space-y-2"><label class="text-sm font-medium text-gray-300 flex justify-between">Độ dày ruy băng (Thickness) <span id="val-thickness" class="text-xs text-gray-500">2px</span></label><input type="range" id="param-thickness" min="0" max="40" value="2" class="transition-all duration-300"></div> </div> <hr class="border-[#1a1a1a]"> <div class="space-y-4"> <div class="flex items-center justify-between"> <label class="text-sm font-medium text-gray-300">Cắt đuôi én chữ V (Fishtail)</label> <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" id="toggle-vcut" checked class="sr-only peer"> <div class="w-11 h-6 bg-[#333] rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-[#111] after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-200 after:border-transparent after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-500"></div> </label> </div> </div> </div> <div class="p-5 border-t border-[#1a1a1a] space-y-3"> <button id="btn-export-svg" class="w-full py-2.5 px-4 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white rounded text-sm font-bold transition-all shadow-md flex justify-center items-center gap-2 relative overflow-hidden group"> <span class="relative z-10 flex items-center gap-2"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg> Xuất Vector (AI / SVG)</span> </button> <button id="btn-export-4k" class="w-full py-2.5 px-4 bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-500 hover:to-orange-500 text-white rounded text-sm font-bold transition-all shadow-md flex justify-center items-center gap-2 relative overflow-hidden group"> <span class="relative z-10 flex items-center gap-2"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> Xuất Ảnh 4K Ultra HD</span> </button> <button id="btn-clear" class="w-full py-2 text-red-500 hover:text-red-400 text-xs font-medium transition-colors">Thùng rác (Tạo Mới)</button> </div> </aside> <main class="flex-1 relative bg-[radial-gradient(circle_at_center,#111_0%,#000_100%)]" id="canvas-container"> <div class="absolute inset-0 opacity-[0.15]" style="background-image: linear-gradient(45deg, #333 25%, transparent 25%), linear-gradient(-45deg, #333 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #333 75%), linear-gradient(-45deg, transparent 75%, #333 75%); background-size: 20px 20px;"></div> <canvas id="main-canvas" class="absolute inset-0 w-full h-full"></canvas> <div id="hint-box" class="absolute inset-0 flex items-center justify-center pointer-events-none transition-opacity duration-500"><p id="hint-text" class="text-gray-400 font-light tracking-wide text-sm border border-gray-800 bg-black/60 px-6 py-3 rounded-full backdrop-blur-sm">Click chuột để tạo điểm neo đầu tiên cho Ruy Băng</p></div> </main> <div id="toast">Thông báo</div> <script> const canvas = document.getElementById('main-canvas'); const ctx = canvas.getContext('2d', { willReadFrequently: true }); const container = document.getElementById('canvas-container'); const hintBox = document.getElementById('hint-box'); let bezierNodes = []; let selectedNodeIdx = -1; let activeHandle = null; let isDragging = false; let history = []; let historyIndex = -1; function saveState() { if (historyIndex < history.length - 1) history = history.slice(0, historyIndex + 1); const currentState = JSON.stringify(bezierNodes); if (historyIndex >= 0 && JSON.stringify(history[historyIndex]) === currentState) return; history.push(JSON.parse(currentState)); historyIndex++; } function undo() { if (historyIndex > 0) { historyIndex--; bezierNodes = JSON.parse(JSON.stringify(history[historyIndex])); render(); } } function redo() { if (historyIndex < history.length - 1) { historyIndex++; bezierNodes = JSON.parse(JSON.stringify(history[historyIndex])); render(); } } const ui = { cFront: document.getElementById('color-front'), cBack: document.getElementById('color-back'), width: document.getElementById('param-width'), twist: document.getElementById('param-twist'), shine: document.getElementById('param-shine'), thickness: document.getElementById('param-thickness'), vCut: document.getElementById('toggle-vcut') }; ['width', 'twist', 'shine', 'thickness'].forEach(key => { if (ui[key]) { ui[key].addEventListener('input', () => { const label = document.getElementById(`val-${key}`); if (label) { let val = ui[key].value; if(key === 'width' || key === 'thickness') val += 'px'; if(key === 'twist') val += 'x'; if(key === 'shine') val += '%'; label.textContent = val; } render(); }); } }); ['cFront', 'cBack'].forEach(key => { if (ui[key]) ui[key].addEventListener('input', render); }); if (ui.vCut) ui.vCut.addEventListener('change', render); document.querySelectorAll('.preset-btn').forEach(btn => { btn.addEventListener('click', (e) => { if (ui.cFront && ui.cBack) { ui.cFront.value = e.target.dataset.cf; ui.cBack.value = e.target.dataset.cb; render(); } }); }); function resize() { if (!container || !canvas) return; canvas.width = container.clientWidth * window.devicePixelRatio; canvas.height = container.clientHeight * window.devicePixelRatio; render(); } window.addEventListener('resize', resize); window.addEventListener('keydown', (e) => { const isCtrlOrCmd = e.ctrlKey || e.metaKey; if (isCtrlOrCmd && !e.shiftKey && e.key.toLowerCase() === 'z') { e.preventDefault(); undo(); } if (isCtrlOrCmd && (e.key.toLowerCase() === 'y' || (e.shiftKey && e.key.toLowerCase() === 'z'))) { e.preventDefault(); redo(); } }); document.getElementById('btn-undo')?.addEventListener('click', undo); document.getElementById('btn-redo')?.addEventListener('click', redo); document.getElementById('btn-clear')?.addEventListener('click', () => { bezierNodes = []; saveState(); render(); if(hintBox) hintBox.style.opacity = '1'; }); function showToast(msg) { const t = document.getElementById('toast'); if(!t) return; t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2000); } function hexToRgb(hex) { let h = (hex || '#ff0000').replace('#', ''); if (h.length === 3) h = h.split('').map(c => c + c).join(''); return { r: parseInt(h.substring(0, 2), 16) || 0, g: parseInt(h.substring(2, 4), 16) || 0, b: parseInt(h.substring(4, 6), 16) || 0 }; } function distance(p1, p2) { return Math.sqrt((p2.x - p1.x)**2 + (p2.y - p1.y)**2); } function getBezierPoint(t, p0, p1, p2, p3) { let mt = 1 - t, mt2 = mt * mt, t2 = t * t; return { x: mt2*mt*p0.x + 3*mt2*t*p1.x + 3*mt*t2*p2.x + t*t2*p3.x, y: mt2*mt*p0.y + 3*mt2*t*p1.y + 3*mt*t2*p2.y + t*t2*p3.y }; } function extractBezierPath(nodes, ptsPerSegment = 150) { if (nodes.length < 2) return []; let path = []; for (let i = 0; i < nodes.length - 1; i++) { let p0 = nodes[i], p1 = nodes[i].cpOut, p2 = nodes[i+1].cpIn, p3 = nodes[i+1]; for (let j = 0; j <= ptsPerSegment; j++) { if (j === 0 && i > 0) continue; path.push(getBezierPoint(j / ptsPerSegment, p0, p1, p2, p3)); } } return path; } function resamplePath(points, spacing = 1.5) { if (!points || points.length < 2) return points || []; let resampled = [points[0]]; let currentPoint = points[0]; let targetIndex = 1; let currentDist = 0; while (targetIndex < points.length) { let targetPoint = points[targetIndex]; let distToTarget = distance(currentPoint, targetPoint); if (currentDist + distToTarget >= spacing) { let ratio = (spacing - currentDist) / (distToTarget || 1); let nx = currentPoint.x + (targetPoint.x - currentPoint.x) * ratio; let ny = currentPoint.y + (targetPoint.y - currentPoint.y) * ratio; let newPoint = { x: nx, y: ny }; resampled.push(newPoint); currentPoint = newPoint; currentDist = 0; } else { currentDist += distToTarget; currentPoint = targetPoint; targetIndex++; } } let lastOriginal = points[points.length - 1]; if (resampled.length > 0 && distance(resampled[resampled.length - 1], lastOriginal) > 0.1) resampled.push(lastOriginal); return resampled; } function smoothArray(arr, windowSize) { if (!arr || arr.length === 0) return []; let result = new Array(arr.length); for (let i = 0; i < arr.length; i++) { let sum = 0, count = 0; let start = Math.max(0, i - windowSize), end = Math.min(arr.length - 1, i + windowSize); for (let j = start; j <= end; j++) { sum += arr[j]; count++; } result[i] = sum / count; } return result; } function hitTestNodes(pos) { for (let i = 0; i < bezierNodes.length; i++) { if (distance(pos, bezierNodes[i].cpOut) < 10) return { idx: i, handle: 'out' }; if (distance(pos, bezierNodes[i].cpIn) < 10) return { idx: i, handle: 'in' }; } for (let i = 0; i < bezierNodes.length; i++) { if (distance(pos, bezierNodes[i]) < 12) return { idx: i, handle: 'anchor' }; } return null; } function createRibbonSegments(path2D) { if(!path2D || path2D.length < 2) return []; let maxWidth = parseFloat(ui.width.value) || 80; let twistFactor = parseFloat(ui.twist.value) || 1.2; let segments = []; let tangentsX = new Array(path2D.length); let tangentsY = new Array(path2D.length); let step = 6; for(let i=0; i<path2D.length; i++) { let prevIdx = Math.max(0, i - step); let nextIdx = Math.min(path2D.length - 1, i + step); let dx = path2D[nextIdx].x - path2D[prevIdx].x; let dy = path2D[nextIdx].y - path2D[prevIdx].y; let len = Math.sqrt(dx*dx + dy*dy) || 1; tangentsX[i] = dx/len; tangentsY[i] = dy/len; } tangentsX = smoothArray(tangentsX, 15); tangentsY = smoothArray(tangentsY, 15); let twistAngles = new Array(path2D.length); let currentTwistAngle = 0; let lastTangentAngle = null; for(let i=0; i<path2D.length; i++) { let tx = tangentsX[i], ty = tangentsY[i]; let len = Math.sqrt(tx*tx + ty*ty) || 1; tx /= len; ty /= len; let tangentAngle = Math.atan2(ty, tx); if (lastTangentAngle !== null) { let deltaAngle = tangentAngle - lastTangentAngle; while (deltaAngle > Math.PI) deltaAngle -= Math.PI * 2; while (deltaAngle < -Math.PI) deltaAngle += Math.PI * 2; currentTwistAngle += deltaAngle * twistFactor; } lastTangentAngle = tangentAngle; twistAngles[i] = currentTwistAngle; } twistAngles = smoothArray(twistAngles, 25); for(let i=0; i<path2D.length; i++) { let p = path2D[i], tx = tangentsX[i], ty = tangentsY[i], nx = -ty, ny = tx, tw = twistAngles[i], cosTwist = Math.cos(tw); let projectedWidth = maxWidth * Math.abs(cosTwist); let isFront = cosTwist > 0; segments.push({ center: {x: p.x, y: p.y}, left: { x: p.x - nx * projectedWidth/2, y: p.y - ny * projectedWidth/2 }, right: { x: p.x + nx * projectedWidth/2, y: p.y + ny * projectedWidth/2 }, normal: {x: nx, y: ny}, tangent: {x: tx, y: ty}, twist: tw, isFront: isFront, cosTwist: Math.abs(cosTwist) }); } return segments; } function getPointer(e) { const rect = canvas.getBoundingClientRect(); return { x: e.clientX - rect.left, y: e.clientY - rect.top }; } canvas.addEventListener('pointerdown', (e) => { e.preventDefault(); canvas.setPointerCapture(e.pointerId); let pos = getPointer(e); if(hintBox) hintBox.style.opacity = '0'; let hit = hitTestNodes(pos); if (hit) { selectedNodeIdx = hit.idx; activeHandle = hit.handle; isDragging = true; } else { let newNode = { x: pos.x, y: pos.y, cpIn: {x: pos.x, y: pos.y}, cpOut: {x: pos.x, y: pos.y} }; bezierNodes.push(newNode); selectedNodeIdx = bezierNodes.length - 1; activeHandle = 'out'; isDragging = true; } render(); }); canvas.addEventListener('pointermove', (e) => { if (!isDragging) { let pos = getPointer(e); let hit = hitTestNodes(pos); canvas.style.cursor = hit ? (hit.handle === 'anchor' ? 'move' : 'crosshair') : 'crosshair'; return; } let pos = getPointer(e); if (activeHandle && selectedNodeIdx > -1) { let node = bezierNodes[selectedNodeIdx]; if (activeHandle === 'out') { node.cpOut = pos; node.cpIn = { x: 2 * node.x - node.cpOut.x, y: 2 * node.y - node.cpOut.y }; } else if (activeHandle === 'in') { node.cpIn = pos; node.cpOut = { x: 2 * node.x - node.cpIn.x, y: 2 * node.y - node.cpIn.y }; } else if (activeHandle === 'anchor') { let dx = pos.x - node.x; let dy = pos.y - node.y; node.x = pos.x; node.y = pos.y; node.cpIn.x += dx; node.cpIn.y += dy; node.cpOut.x += dx; node.cpOut.y += dy; } render(); } }); canvas.addEventListener('pointerup', (e) => { if (isDragging) { isDragging = false; activeHandle = null; saveState(); render(); } canvas.releasePointerCapture(e.pointerId); }); canvas.addEventListener('contextmenu', e => e.preventDefault()); function getShadedColor(hexBaseColor, cosTwist, shineFactor, isDarkened = false) { let rgb = hexToRgb(hexBaseColor); let brightness = 0.25 + 0.75 * Math.pow(cosTwist, 0.9); let specular = 0; if (shineFactor > 0 && !isDarkened) { let specDist = Math.abs(cosTwist - 0.7); specular = Math.exp(-(specDist * specDist) / 0.04) * shineFactor * 140; } if (isDarkened) brightness *= 0.45; return `rgb(${Math.floor(Math.min(255, Math.max(0, rgb.r * brightness + specular)))},${Math.floor(Math.min(255, Math.max(0, rgb.g * brightness + specular)))},${Math.floor(Math.min(255, Math.max(0, rgb.b * brightness + specular)))})`; } function drawQuad(ctx, p1L, p1R, p2R, p2L, fillStyle, scaleMultiplier) { ctx.beginPath(); ctx.moveTo(p1L.x * scaleMultiplier, p1L.y * scaleMultiplier); ctx.lineTo(p1R.x * scaleMultiplier, p1R.y * scaleMultiplier); ctx.lineTo(p2R.x * scaleMultiplier, p2R.y * scaleMultiplier); ctx.lineTo(p2L.x * scaleMultiplier, p2L.y * scaleMultiplier); ctx.closePath(); ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.fillStyle = fillStyle; ctx.strokeStyle = fillStyle; ctx.lineWidth = 1.5; ctx.fill(); ctx.stroke(); } function drawVCutMask(ctx, segment, isStart, vDepth, thickness, scaleMultiplier) { let dir = isStart ? 1 : -1; let tipX = segment.center.x + segment.tangent.x * vDepth * dir; let tipY = segment.center.y + segment.tangent.y * vDepth * dir; ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = '#000'; ctx.strokeStyle = '#000'; ctx.lineWidth = 1; for (let t = -2; t <= thickness + 2; t += 0.5) { ctx.beginPath(); ctx.moveTo(segment.left.x * scaleMultiplier, (segment.left.y + t) * scaleMultiplier); ctx.lineTo(tipX * scaleMultiplier, (tipY + t) * scaleMultiplier); ctx.lineTo(segment.right.x * scaleMultiplier, (segment.right.y + t) * scaleMultiplier); ctx.closePath(); ctx.fill(); ctx.stroke(); } ctx.globalCompositeOperation = 'source-over'; } function drawRibbonPass(ctx, segments, offsetY, isDarkened, scaleMultiplier) { let cFront = ui.cFront.value; let cBack = ui.cBack.value; let shine = (parseFloat(ui.shine.value) || 85) / 100; for (let i = 0; i < segments.length - 1; i++) { let s1 = segments[i], s2 = segments[i+1]; let fillStyle = getShadedColor(s1.isFront ? cFront : cBack, s1.cosTwist, shine, isDarkened); drawQuad(ctx, { x: s1.left.x, y: s1.left.y + offsetY }, { x: s1.right.x, y: s1.right.y + offsetY }, { x: s2.right.x, y: s2.right.y + offsetY }, { x: s2.left.x, y: s2.left.y + offsetY }, fillStyle, scaleMultiplier); } } function renderSceneToContext(targetCtx, scaleMultiplier, drawUI = false) { if (bezierNodes.length === 0) return; let isSVG = !(targetCtx instanceof CanvasRenderingContext2D); let renderCtx = isSVG ? targetCtx : document.createElement('canvas').getContext('2d', { willReadFrequently: true }); if (!isSVG) { renderCtx.canvas.width = targetCtx.canvas.width; renderCtx.canvas.height = targetCtx.canvas.height; } if (bezierNodes.length === 1 && drawUI) { let node = bezierNodes[0]; renderCtx.beginPath(); renderCtx.rect((node.x * scaleMultiplier) - 4, (node.y * scaleMultiplier) - 4, 8, 8); renderCtx.fillStyle = '#ef4444'; renderCtx.fill(); if (!isSVG) targetCtx.drawImage(renderCtx.canvas, 0, 0); return; } let segments = createRibbonSegments(resamplePath(extractBezierPath(bezierNodes, 150), 1.5)); if (segments.length < 2) return; let thickness = parseFloat(ui.thickness.value) || 2; if (thickness > 0) { for (let t = thickness; t > 0; t -= 1.0) drawRibbonPass(renderCtx, segments, t, true, scaleMultiplier); } drawRibbonPass(renderCtx, segments, 0, false, scaleMultiplier); if (ui.vCut.checked) { let vDepth = parseFloat(ui.width.value) * 0.65; drawVCutMask(renderCtx, segments[0], true, vDepth, thickness, scaleMultiplier); drawVCutMask(renderCtx, segments[segments.length - 1], false, vDepth, thickness, scaleMultiplier); } if (!isSVG) targetCtx.drawImage(renderCtx.canvas, 0, 0); // Bổ sung chỉnh màu giao diện điều khiển để nhìn rõ trên nền đen if (drawUI && !isSVG) { targetCtx.beginPath(); targetCtx.moveTo(bezierNodes[0].x * scaleMultiplier, bezierNodes[0].y * scaleMultiplier); for(let i=1; i<bezierNodes.length; i++) targetCtx.bezierCurveTo(bezierNodes[i-1].cpOut.x * scaleMultiplier, bezierNodes[i-1].cpOut.y * scaleMultiplier, bezierNodes[i].cpIn.x * scaleMultiplier, bezierNodes[i].cpIn.y * scaleMultiplier, bezierNodes[i].x * scaleMultiplier, bezierNodes[i].y * scaleMultiplier); targetCtx.strokeStyle = 'rgba(255, 255, 255, 0.4)'; targetCtx.lineWidth = 1.5 * scaleMultiplier; targetCtx.setLineDash([5, 5]); targetCtx.stroke(); targetCtx.setLineDash([]); bezierNodes.forEach((node, idx) => { if (idx === selectedNodeIdx) { targetCtx.beginPath(); targetCtx.moveTo(node.cpIn.x * scaleMultiplier, node.cpIn.y * scaleMultiplier); targetCtx.lineTo(node.cpOut.x * scaleMultiplier, node.cpOut.y * scaleMultiplier); targetCtx.strokeStyle = 'rgba(239, 68, 68, 0.8)'; targetCtx.lineWidth = 1 * scaleMultiplier; targetCtx.stroke(); [node.cpIn, node.cpOut].forEach(cp => { targetCtx.beginPath(); targetCtx.arc(cp.x * scaleMultiplier, cp.y * scaleMultiplier, 4 * scaleMultiplier, 0, Math.PI*2); targetCtx.fillStyle = '#111'; targetCtx.fill(); targetCtx.strokeStyle = '#ef4444'; targetCtx.stroke(); }); } targetCtx.beginPath(); let s = 8 * scaleMultiplier; targetCtx.rect((node.x * scaleMultiplier) - s/2, (node.y * scaleMultiplier) - s/2, s, s); targetCtx.fillStyle = idx === selectedNodeIdx ? '#ef4444' : '#111'; targetCtx.fill(); targetCtx.strokeStyle = '#ef4444'; targetCtx.stroke(); }); } } function render() { const dpr = window.devicePixelRatio; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height); renderSceneToContext(ctx, dpr, true); } class MockSVGContext { constructor(width, height) { this.width = width; this.height = height; this.defsStr = ""; this.defsSet = new Set(); this.elements = []; this.d = ""; this.fillStyle = "#000"; this.strokeStyle = "#000"; this.lineWidth = 1; this.shadowBlur = 0; this.shadowColor = "transparent"; this.lineCap = "butt"; this.lineJoin = "miter"; this.globalCompositeOperation = "source-over"; } beginPath() { this.d = ""; } moveTo(x, y) { this.d += `M ${x.toFixed(2)} ${y.toFixed(2)} `; } lineTo(x, y) { this.d += `L ${x.toFixed(2)} ${y.toFixed(2)} `; } quadraticCurveTo(cx, cy, x, y) { this.d += `Q ${cx.toFixed(2)} ${cy.toFixed(2)} ${x.toFixed(2)} ${y.toFixed(2)} `; } closePath() { this.d += "Z "; } fill() { let opacity = 1; let fillCol = this.fillStyle; const rgbaMatch = fillCol.match(/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9.]+)\s*\)/); if(rgbaMatch) { fillCol = `rgb(${rgbaMatch[1]},${rgbaMatch[2]},${rgbaMatch[3]})`; opacity = rgbaMatch[4]; } let blendMode = this.globalCompositeOperation === 'lighter' ? 'screen' : 'normal'; if (this.shadowBlur > 0) { let stdDev = this.shadowBlur / 2; let id = `blur_${stdDev.toFixed(1)}`.replace('.', '_'); if(!this.defsSet.has(id)) { this.defsSet.add(id); this.defsStr += `<filter id="${id}" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="${stdDev}" /></filter>\n`; } this.elements.push(`<path d="${this.d}" fill="${this.shadowColor}" fill-opacity="${opacity}" filter="url(#${id})" style="mix-blend-mode: ${blendMode};" />`); } this.elements.push(`<path d="${this.d}" fill="${fillCol}" fill-opacity="${opacity}" style="mix-blend-mode: ${blendMode};" />`); } stroke() { let blendMode = this.globalCompositeOperation === 'lighter' ? 'screen' : 'normal'; let strokeCol = this.strokeStyle; let opacity = 1; const rgbaMatch = strokeCol.match(/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9.]+)\s*\)/); if(rgbaMatch) { strokeCol = `rgb(${rgbaMatch[1]},${rgbaMatch[2]},${rgbaMatch[3]})`; opacity = rgbaMatch[4]; } this.elements.push(`<path d="${this.d}" fill="none" stroke="${strokeCol}" stroke-opacity="${opacity}" stroke-width="${this.lineWidth.toFixed(2)}" stroke-linecap="${this.lineCap}" stroke-linejoin="${this.lineJoin}" style="mix-blend-mode: ${blendMode};" />`); } getSVG() { return `<svg xmlns="http://www.w3.org/2000/svg" width="${this.width}" height="${this.height}" viewBox="0 0 ${this.width} ${this.height}" style="background-color: transparent;"><defs>${this.defsStr}</defs><g>${this.elements.join('\n')}</g></svg>`; } } document.getElementById('btn-clear').addEventListener('click', () => { paths = []; bezierNodes = []; saveState(); render(); hintBox.style.opacity = '1'; }); document.getElementById('btn-export-svg').addEventListener('click', () => { if(paths.length === 0) return alert("Vui lòng vẽ ruy băng trước nhé!"); showToast("Đang tạo file Vector SVG..."); setTimeout(() => { const logicalWidth = canvas.clientWidth; const logicalHeight = canvas.clientHeight; const svgCtx = new MockSVGContext(logicalWidth, logicalHeight); renderSceneToContext(svgCtx, 1, false); const svgData = svgCtx.getSVG(); const blob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"}); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.download = `RibbonStudio_Vector_${Date.now()}.svg`; link.href = url; link.click(); URL.revokeObjectURL(url); showToast("Đã tải xong file Vector (SVG)!"); }, 100); }); document.getElementById('btn-export-4k').addEventListener('click', () => { if(paths.length === 0) return alert("Vui lòng vẽ ruy băng trước nhé!"); showToast("Đang render 4K UHD. Vui lòng đợi..."); setTimeout(() => { const offCanvas = document.createElement('canvas'); const logicalWidth = canvas.clientWidth; const logicalHeight = canvas.clientHeight; const maxLogical = Math.max(logicalWidth, logicalHeight); const scaleTo4K = 3840 / maxLogical; offCanvas.width = logicalWidth * scaleTo4K; offCanvas.height = logicalHeight * scaleTo4K; const oCtx = offCanvas.getContext('2d'); renderSceneToContext(oCtx, scaleTo4K, false); const link = document.createElement('a'); link.download = `RibbonStudio_4K_UHD_${Date.now()}.png`; link.href = offCanvas.toDataURL('image/png', 1.0); link.click(); showToast("Đã tải xong ảnh 4K!"); }, 100); }); saveState(); resize(); </script> </body> </html>