Embedded Files
this is an experiment to create somehting repesent some elements of the art.
inspired by the vibe coding mentioned by guest speakers. the AI tool used for this experiment is Claude.
limitation
- the download bottom has no real function , if user click it nothing will happen.
- the color of the line or shape are random the user cannot choose what color they wish to use.
Possible excerxise using the following games:
- make a work based on first _ lines generated from the line art generator
- create a work inspired by your favorite screenshot from the line art generator
- write a short paragraph based on how you feel of the lines from the line art generator
- creating a drawing using the shape generator
- creating a work based on the color from shape art generator
- use shape art generator for creating/represeing form and value
- use line art generator for texure
click the image to acess the line art generator or go to https://claude.ai/public/artifacts/88ebfb24-6890-4194-9054-ceef22130032
prompt:
Make a codepne game represent one of element of art (Line), each time the player click the page a line appear randomly in the givin area. The basic function need to include click for a line, reset and download the lines.
click the image to acess the line art generator or go to https://claude.ai/public/artifacts/533d7c1f-c69d-49f9-a341-918db49fb907
prompt:
Make a codepne game represent one of element of art (shape), each time the player click t a line appear in the givin area when click multiple times a shape forms. The basic function need to include click for a shape, reset and download the image.
code for Line Art Generator : <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Line Art Generator</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px; }
h1 { color: white; margin-bottom: 10px; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.subtitle { color: rgba(255,255,255,0.9); margin-bottom: 20px; font-size: 1.1em; }
#canvas { background: white; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); cursor: crosshair; margin-bottom: 20px; }
.controls { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
button { padding: 12px 30px; font-size: 16px; border: none; border-radius: 25px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
button:active { transform: translateY(0); }
#resetBtn { background: #ff6b6b; color: white; }
#resetBtn:hover { background: #ff5252; }
#downloadBtn { background: #4ecdc4; color: white; }
#downloadBtn:hover { background: #45b7b0; }
.info { color: white; margin-top: 15px; text-align: center; font-size: 0.9em; opacity: 0.8; } </style></head><body> <h1>Line Art Generator</h1> <p class="subtitle">Click anywhere on the canvas to create lines!</p> <canvas id="canvas" width="800" height="600"></canvas> <div class="controls"> <button id="resetBtn">Reset Canvas</button> <button id="downloadBtn">Download Art</button> </div> <p class="info">Each click creates a unique line with random properties</p>
<script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const resetBtn = document.getElementById('resetBtn'); const downloadBtn = document.getElementById('downloadBtn');
const lines = [];
// Line types for variety const lineTypes = ['straight', 'curved', 'zigzag', 'dotted']; const lineStyles = ['solid', 'dashed'];
function getRandomColor() { const colors = [ '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2', '#2C3E50', '#E74C3C', '#3498DB', '#1ABC9C' ]; return colors[Math.floor(Math.random() * colors.length)]; }
function drawLine(x, y) { const lineType = lineTypes[Math.floor(Math.random() * lineTypes.length)]; const angle = Math.random() * Math.PI * 2; const length = 50 + Math.random() * 200; const thickness = 1 + Math.random() * 5; const color = getRandomColor();
const endX = x + Math.cos(angle) * length; const endY = y + Math.sin(angle) * length;
ctx.strokeStyle = color; ctx.lineWidth = thickness; ctx.lineCap = 'round';
if (lineType === 'straight') { ctx.setLineDash([]); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(endX, endY); ctx.stroke(); } else if (lineType === 'curved') { ctx.setLineDash([]); const cpX = x + Math.cos(angle + Math.PI/4) * length * 0.7; const cpY = y + Math.sin(angle + Math.PI/4) * length * 0.7; ctx.beginPath(); ctx.moveTo(x, y); ctx.quadraticCurveTo(cpX, cpY, endX, endY); ctx.stroke(); } else if (lineType === 'zigzag') { ctx.setLineDash([]); const segments = 5; ctx.beginPath(); ctx.moveTo(x, y); for (let i = 1; i <= segments; i++) { const segX = x + (endX - x) * (i / segments); const segY = y + (endY - y) * (i / segments); const offset = (i % 2 === 0 ? 1 : -1) * 20; const perpAngle = angle + Math.PI / 2; ctx.lineTo( segX + Math.cos(perpAngle) * offset, segY + Math.sin(perpAngle) * offset ); } ctx.stroke(); } else if (lineType === 'dotted') { ctx.setLineDash([5, 10]); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(endX, endY); ctx.stroke(); ctx.setLineDash([]); }
lines.push({ x, y, endX, endY, lineType, thickness, color }); }
function redrawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); lines.forEach(line => { ctx.strokeStyle = line.color; ctx.lineWidth = line.thickness; ctx.lineCap = 'round';
if (line.lineType === 'straight') { ctx.setLineDash([]); ctx.beginPath(); ctx.moveTo(line.x, line.y); ctx.lineTo(line.endX, line.endY); ctx.stroke(); } else if (line.lineType === 'curved') { ctx.setLineDash([]); const angle = Math.atan2(line.endY - line.y, line.endX - line.x); const length = Math.sqrt(Math.pow(line.endX - line.x, 2) + Math.pow(line.endY - line.y, 2)); const cpX = line.x + Math.cos(angle + Math.PI/4) * length * 0.7; const cpY = line.y + Math.sin(angle + Math.PI/4) * length * 0.7; ctx.beginPath(); ctx.moveTo(line.x, line.y); ctx.quadraticCurveTo(cpX, cpY, line.endX, line.endY); ctx.stroke(); } else if (line.lineType === 'zigzag') { ctx.setLineDash([]); const segments = 5; const angle = Math.atan2(line.endY - line.y, line.endX - line.x); ctx.beginPath(); ctx.moveTo(line.x, line.y); for (let i = 1; i <= segments; i++) { const segX = line.x + (line.endX - line.x) * (i / segments); const segY = line.y + (line.endY - line.y) * (i / segments); const offset = (i % 2 === 0 ? 1 : -1) * 20; const perpAngle = angle + Math.PI / 2; ctx.lineTo( segX + Math.cos(perpAngle) * offset, segY + Math.sin(perpAngle) * offset ); } ctx.stroke(); } else if (line.lineType === 'dotted') { ctx.setLineDash([5, 10]); ctx.beginPath(); ctx.moveTo(line.x, line.y); ctx.lineTo(line.endX, line.endY); ctx.stroke(); ctx.setLineDash([]); } }); }
canvas.addEventListener('click', (e) => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; drawLine(x, y); });
resetBtn.addEventListener('click', () => { ctx.clearRect(0, 0, canvas.width, canvas.height); lines.length = 0; });
downloadBtn.addEventListener('click', () => { const link = document.createElement('a'); link.download = 'line-art.png'; link.href = canvas.toDataURL(); link.click(); }); </script></body></html>
body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px; }
h1 { color: white; margin-bottom: 10px; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.subtitle { color: rgba(255,255,255,0.9); margin-bottom: 20px; font-size: 1.1em; }
#canvas { background: white; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); cursor: crosshair; margin-bottom: 20px; }
.controls { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
button { padding: 12px 30px; font-size: 16px; border: none; border-radius: 25px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
button:active { transform: translateY(0); }
#resetBtn { background: #ff6b6b; color: white; }
#resetBtn:hover { background: #ff5252; }
#downloadBtn { background: #4ecdc4; color: white; }
#downloadBtn:hover { background: #45b7b0; }
.info { color: white; margin-top: 15px; text-align: center; font-size: 0.9em; opacity: 0.8; } </style></head><body> <h1>Line Art Generator</h1> <p class="subtitle">Click anywhere on the canvas to create lines!</p> <canvas id="canvas" width="800" height="600"></canvas> <div class="controls"> <button id="resetBtn">Reset Canvas</button> <button id="downloadBtn">Download Art</button> </div> <p class="info">Each click creates a unique line with random properties</p>
<script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const resetBtn = document.getElementById('resetBtn'); const downloadBtn = document.getElementById('downloadBtn');
const lines = [];
// Line types for variety const lineTypes = ['straight', 'curved', 'zigzag', 'dotted']; const lineStyles = ['solid', 'dashed'];
function getRandomColor() { const colors = [ '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2', '#2C3E50', '#E74C3C', '#3498DB', '#1ABC9C' ]; return colors[Math.floor(Math.random() * colors.length)]; }
function drawLine(x, y) { const lineType = lineTypes[Math.floor(Math.random() * lineTypes.length)]; const angle = Math.random() * Math.PI * 2; const length = 50 + Math.random() * 200; const thickness = 1 + Math.random() * 5; const color = getRandomColor();
const endX = x + Math.cos(angle) * length; const endY = y + Math.sin(angle) * length;
ctx.strokeStyle = color; ctx.lineWidth = thickness; ctx.lineCap = 'round';
if (lineType === 'straight') { ctx.setLineDash([]); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(endX, endY); ctx.stroke(); } else if (lineType === 'curved') { ctx.setLineDash([]); const cpX = x + Math.cos(angle + Math.PI/4) * length * 0.7; const cpY = y + Math.sin(angle + Math.PI/4) * length * 0.7; ctx.beginPath(); ctx.moveTo(x, y); ctx.quadraticCurveTo(cpX, cpY, endX, endY); ctx.stroke(); } else if (lineType === 'zigzag') { ctx.setLineDash([]); const segments = 5; ctx.beginPath(); ctx.moveTo(x, y); for (let i = 1; i <= segments; i++) { const segX = x + (endX - x) * (i / segments); const segY = y + (endY - y) * (i / segments); const offset = (i % 2 === 0 ? 1 : -1) * 20; const perpAngle = angle + Math.PI / 2; ctx.lineTo( segX + Math.cos(perpAngle) * offset, segY + Math.sin(perpAngle) * offset ); } ctx.stroke(); } else if (lineType === 'dotted') { ctx.setLineDash([5, 10]); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(endX, endY); ctx.stroke(); ctx.setLineDash([]); }
lines.push({ x, y, endX, endY, lineType, thickness, color }); }
function redrawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); lines.forEach(line => { ctx.strokeStyle = line.color; ctx.lineWidth = line.thickness; ctx.lineCap = 'round';
if (line.lineType === 'straight') { ctx.setLineDash([]); ctx.beginPath(); ctx.moveTo(line.x, line.y); ctx.lineTo(line.endX, line.endY); ctx.stroke(); } else if (line.lineType === 'curved') { ctx.setLineDash([]); const angle = Math.atan2(line.endY - line.y, line.endX - line.x); const length = Math.sqrt(Math.pow(line.endX - line.x, 2) + Math.pow(line.endY - line.y, 2)); const cpX = line.x + Math.cos(angle + Math.PI/4) * length * 0.7; const cpY = line.y + Math.sin(angle + Math.PI/4) * length * 0.7; ctx.beginPath(); ctx.moveTo(line.x, line.y); ctx.quadraticCurveTo(cpX, cpY, line.endX, line.endY); ctx.stroke(); } else if (line.lineType === 'zigzag') { ctx.setLineDash([]); const segments = 5; const angle = Math.atan2(line.endY - line.y, line.endX - line.x); ctx.beginPath(); ctx.moveTo(line.x, line.y); for (let i = 1; i <= segments; i++) { const segX = line.x + (line.endX - line.x) * (i / segments); const segY = line.y + (line.endY - line.y) * (i / segments); const offset = (i % 2 === 0 ? 1 : -1) * 20; const perpAngle = angle + Math.PI / 2; ctx.lineTo( segX + Math.cos(perpAngle) * offset, segY + Math.sin(perpAngle) * offset ); } ctx.stroke(); } else if (line.lineType === 'dotted') { ctx.setLineDash([5, 10]); ctx.beginPath(); ctx.moveTo(line.x, line.y); ctx.lineTo(line.endX, line.endY); ctx.stroke(); ctx.setLineDash([]); } }); }
canvas.addEventListener('click', (e) => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; drawLine(x, y); });
resetBtn.addEventListener('click', () => { ctx.clearRect(0, 0, canvas.width, canvas.height); lines.length = 0; });
downloadBtn.addEventListener('click', () => { const link = document.createElement('a'); link.download = 'line-art.png'; link.href = canvas.toDataURL(); link.click(); }); </script></body></html>
code for Shape Art Generator : <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shape Art Generator</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px; }
h1 { color: white; margin-bottom: 10px; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.subtitle { color: rgba(255,255,255,0.9); margin-bottom: 20px; font-size: 1.1em; text-align: center; }
#canvas { background: white; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); cursor: crosshair; margin-bottom: 20px; }
.controls { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; margin-bottom: 15px; }
button { padding: 12px 30px; font-size: 16px; border: none; border-radius: 25px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
button:active { transform: translateY(0); }
#completeBtn { background: #52c41a; color: white; }
#completeBtn:hover { background: #45a816; }
#completeBtn:disabled { background: #ccc; cursor: not-allowed; transform: none; }
#resetBtn { background: #ff6b6b; color: white; }
#resetBtn:hover { background: #ff5252; }
#downloadBtn { background: #4ecdc4; color: white; }
#downloadBtn:hover { background: #45b7b0; }
.info { color: white; text-align: center; font-size: 0.9em; opacity: 0.9; max-width: 600px; line-height: 1.5; }
.status { background: rgba(255,255,255,0.2); color: white; padding: 10px 20px; border-radius: 20px; margin-bottom: 15px; font-weight: bold; } </style></head><body> <h1>Shape Art Generator</h1> <p class="subtitle">Click to place points and create shapes!</p> <div class="status" id="status">Points placed: 0 | Click to start your shape</div> <canvas id="canvas" width="800" height="600"></canvas> <div class="controls"> <button id="completeBtn" disabled>Complete Shape</button> <button id="resetBtn">Reset Canvas</button> <button id="downloadBtn">Download Art</button> </div> <p class="info"> Click 3+ times to place points, then click "Complete Shape" to close it.<br> Each completed shape will have a random color with transparency! </p>
<script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const completeBtn = document.getElementById('completeBtn'); const resetBtn = document.getElementById('resetBtn'); const downloadBtn = document.getElementById('downloadBtn'); const status = document.getElementById('status');
let currentPoints = []; let completedShapes = [];
const colors = [ 'rgba(255, 107, 107, 0.6)', 'rgba(78, 205, 196, 0.6)', 'rgba(69, 183, 209, 0.6)', 'rgba(255, 160, 122, 0.6)', 'rgba(152, 216, 200, 0.6)', 'rgba(247, 220, 111, 0.6)', 'rgba(187, 143, 206, 0.6)', 'rgba(133, 193, 226, 0.6)', 'rgba(231, 76, 60, 0.6)', 'rgba(52, 152, 219, 0.6)', 'rgba(26, 188, 156, 0.6)', 'rgba(155, 89, 182, 0.6)' ];
function getRandomColor() { return colors[Math.floor(Math.random() * colors.length)]; }
function updateStatus() { const pointCount = currentPoints.length; if (pointCount === 0) { status.textContent = 'Points placed: 0 | Click to start your shape'; } else if (pointCount < 3) { status.textContent = `Points placed: ${pointCount} | Need ${3 - pointCount} more to complete`; } else { status.textContent = `Points placed: ${pointCount} | Ready to complete!`; } completeBtn.disabled = pointCount < 3; }
function drawPoint(x, y) { ctx.fillStyle = '#333'; ctx.beginPath(); ctx.arc(x, y, 5, 0, Math.PI * 2); ctx.fill(); }
function drawCurrentLines() { if (currentPoints.length < 2) return; ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.setLineDash([5, 5]); ctx.beginPath(); ctx.moveTo(currentPoints[0].x, currentPoints[0].y); for (let i = 1; i < currentPoints.length; i++) { ctx.lineTo(currentPoints[i].x, currentPoints[i].y); } ctx.stroke(); ctx.setLineDash([]); }
function drawCompletedShapes() { completedShapes.forEach(shape => { if (shape.points.length < 3) return; // Fill the shape ctx.fillStyle = shape.color; ctx.beginPath(); ctx.moveTo(shape.points[0].x, shape.points[0].y); for (let i = 1; i < shape.points.length; i++) { ctx.lineTo(shape.points[i].x, shape.points[i].y); } ctx.closePath(); ctx.fill(); // Draw the outline ctx.strokeStyle = shape.color.replace('0.6', '1'); ctx.lineWidth = 2; ctx.stroke(); }); }
function redrawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawCompletedShapes(); drawCurrentLines(); currentPoints.forEach(point => drawPoint(point.x, point.y)); }
canvas.addEventListener('click', (e) => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; currentPoints.push({ x, y }); redrawCanvas(); updateStatus(); });
completeBtn.addEventListener('click', () => { if (currentPoints.length < 3) return; const color = getRandomColor(); completedShapes.push({ points: [...currentPoints], color: color }); currentPoints = []; redrawCanvas(); updateStatus(); });
resetBtn.addEventListener('click', () => { ctx.clearRect(0, 0, canvas.width, canvas.height); currentPoints = []; completedShapes = []; updateStatus(); });
downloadBtn.addEventListener('click', () => { const link = document.createElement('a'); link.download = 'shape-art.png'; link.href = canvas.toDataURL(); link.click(); });
updateStatus(); </script></body></html>
body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px; }
h1 { color: white; margin-bottom: 10px; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.subtitle { color: rgba(255,255,255,0.9); margin-bottom: 20px; font-size: 1.1em; text-align: center; }
#canvas { background: white; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); cursor: crosshair; margin-bottom: 20px; }
.controls { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; margin-bottom: 15px; }
button { padding: 12px 30px; font-size: 16px; border: none; border-radius: 25px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
button:active { transform: translateY(0); }
#completeBtn { background: #52c41a; color: white; }
#completeBtn:hover { background: #45a816; }
#completeBtn:disabled { background: #ccc; cursor: not-allowed; transform: none; }
#resetBtn { background: #ff6b6b; color: white; }
#resetBtn:hover { background: #ff5252; }
#downloadBtn { background: #4ecdc4; color: white; }
#downloadBtn:hover { background: #45b7b0; }
.info { color: white; text-align: center; font-size: 0.9em; opacity: 0.9; max-width: 600px; line-height: 1.5; }
.status { background: rgba(255,255,255,0.2); color: white; padding: 10px 20px; border-radius: 20px; margin-bottom: 15px; font-weight: bold; } </style></head><body> <h1>Shape Art Generator</h1> <p class="subtitle">Click to place points and create shapes!</p> <div class="status" id="status">Points placed: 0 | Click to start your shape</div> <canvas id="canvas" width="800" height="600"></canvas> <div class="controls"> <button id="completeBtn" disabled>Complete Shape</button> <button id="resetBtn">Reset Canvas</button> <button id="downloadBtn">Download Art</button> </div> <p class="info"> Click 3+ times to place points, then click "Complete Shape" to close it.<br> Each completed shape will have a random color with transparency! </p>
<script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const completeBtn = document.getElementById('completeBtn'); const resetBtn = document.getElementById('resetBtn'); const downloadBtn = document.getElementById('downloadBtn'); const status = document.getElementById('status');
let currentPoints = []; let completedShapes = [];
const colors = [ 'rgba(255, 107, 107, 0.6)', 'rgba(78, 205, 196, 0.6)', 'rgba(69, 183, 209, 0.6)', 'rgba(255, 160, 122, 0.6)', 'rgba(152, 216, 200, 0.6)', 'rgba(247, 220, 111, 0.6)', 'rgba(187, 143, 206, 0.6)', 'rgba(133, 193, 226, 0.6)', 'rgba(231, 76, 60, 0.6)', 'rgba(52, 152, 219, 0.6)', 'rgba(26, 188, 156, 0.6)', 'rgba(155, 89, 182, 0.6)' ];
function getRandomColor() { return colors[Math.floor(Math.random() * colors.length)]; }
function updateStatus() { const pointCount = currentPoints.length; if (pointCount === 0) { status.textContent = 'Points placed: 0 | Click to start your shape'; } else if (pointCount < 3) { status.textContent = `Points placed: ${pointCount} | Need ${3 - pointCount} more to complete`; } else { status.textContent = `Points placed: ${pointCount} | Ready to complete!`; } completeBtn.disabled = pointCount < 3; }
function drawPoint(x, y) { ctx.fillStyle = '#333'; ctx.beginPath(); ctx.arc(x, y, 5, 0, Math.PI * 2); ctx.fill(); }
function drawCurrentLines() { if (currentPoints.length < 2) return; ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.setLineDash([5, 5]); ctx.beginPath(); ctx.moveTo(currentPoints[0].x, currentPoints[0].y); for (let i = 1; i < currentPoints.length; i++) { ctx.lineTo(currentPoints[i].x, currentPoints[i].y); } ctx.stroke(); ctx.setLineDash([]); }
function drawCompletedShapes() { completedShapes.forEach(shape => { if (shape.points.length < 3) return; // Fill the shape ctx.fillStyle = shape.color; ctx.beginPath(); ctx.moveTo(shape.points[0].x, shape.points[0].y); for (let i = 1; i < shape.points.length; i++) { ctx.lineTo(shape.points[i].x, shape.points[i].y); } ctx.closePath(); ctx.fill(); // Draw the outline ctx.strokeStyle = shape.color.replace('0.6', '1'); ctx.lineWidth = 2; ctx.stroke(); }); }
function redrawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawCompletedShapes(); drawCurrentLines(); currentPoints.forEach(point => drawPoint(point.x, point.y)); }
canvas.addEventListener('click', (e) => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; currentPoints.push({ x, y }); redrawCanvas(); updateStatus(); });
completeBtn.addEventListener('click', () => { if (currentPoints.length < 3) return; const color = getRandomColor(); completedShapes.push({ points: [...currentPoints], color: color }); currentPoints = []; redrawCanvas(); updateStatus(); });
resetBtn.addEventListener('click', () => { ctx.clearRect(0, 0, canvas.width, canvas.height); currentPoints = []; completedShapes = []; updateStatus(); });
downloadBtn.addEventListener('click', () => { const link = document.createElement('a'); link.download = 'shape-art.png'; link.href = canvas.toDataURL(); link.click(); });
updateStatus(); </script></body></html>
Page updated
Report abuse