diff options
| -rw-r--r-- | html/simple-shape/index.html | 271 |
1 files changed, 271 insertions, 0 deletions
diff --git a/html/simple-shape/index.html b/html/simple-shape/index.html new file mode 100644 index 0000000..034ff3b --- /dev/null +++ b/html/simple-shape/index.html @@ -0,0 +1,271 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Pattern Generator</title> + <style> + body { + margin: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #f0f0f0; + padding: 40px; /* Add padding to body */ + } + .canvas-container { + width: 100%; + max-width: 800px; /* Visible width in viewport */ + margin: 20px; + padding: 40px; /* Add padding around canvas */ + background: white; + box-shadow: 0 0 20px rgba(0,0,0,0.1); + } + canvas { + width: 100%; + height: auto; + background: white; + } + /* Print styles */ + @media print { + body { + background: none; + padding: 0; + } + .canvas-container { + max-width: none; + width: 8.5in; + margin: 0; + padding: 0; + box-shadow: none; + } + canvas { + width: 8.5in; + height: 11in; + border: none; + } + } + </style> +</head> +<body> + <div class="canvas-container"> + <canvas id="canvas"></canvas> + </div> + <script> + // Set up canvas with print-friendly dimensions (assuming 300 DPI) + const canvas = document.getElementById('canvas'); + const ctx = canvas.getContext('2d'); + + // 8.5 inches * 300 pixels per inch = 2550 pixels + // 11 inches * 300 pixels per inch = 3300 pixels + canvas.width = 2550; + canvas.height = 3300; + + // Utility functions for pattern generation + const random = (min, max) => Math.random() * (max - min) + min; + const randomInt = (min, max) => Math.floor(random(min, max)); + const randomChoice = arr => arr[Math.floor(Math.random() * arr.length)]; + + // Basic shape generators + const shapes = { + circle: (x, y, size, params = {}) => { + const radius = params.radius || size/3; + ctx.beginPath(); + ctx.arc(x, y, radius, 0, Math.PI * 2); + params.fill ? ctx.fill() : ctx.stroke(); + }, + + line: (x1, y1, x2, y2) => { + ctx.beginPath(); + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.stroke(); + }, + + triangle: (x, y, size) => { + ctx.beginPath(); + ctx.moveTo(x, y + size); + ctx.lineTo(x + size/2, y); + ctx.lineTo(x + size, y + size); + ctx.closePath(); + ctx.stroke(); + }, + + square: (x, y, size) => { + ctx.strokeRect(x, y, size, size); + } + }; + + // Pattern generators that are simple to draw + const generatePattern = () => { + const types = [ + // Simple repeating circles + (x, y, size) => { + const spacing = size/3; + for(let i = 0; i < 3; i++) { + for(let j = 0; j < 3; j++) { + if((i + j) % 2 === 0) { // Checkerboard pattern + shapes.circle( + x + spacing/2 + i * spacing, + y + spacing/2 + j * spacing, + spacing/2 + ); + } + } + } + }, + + // Nested squares + (x, y, size) => { + for(let i = 3; i > 0; i--) { + const offset = (3 - i) * size/6; + const squareSize = size - offset * 2; + shapes.square(x + offset, y + offset, squareSize); + } + }, + + // Simple flower pattern + (x, y, size) => { + const center = size/2; + const radius = size/4; + + // Center circle + shapes.circle(x + center, y + center, size/6); + + // Petals + for(let i = 0; i < 6; i++) { + const angle = (i / 6) * Math.PI * 2; + const petalX = x + center + Math.cos(angle) * radius; + const petalY = y + center + Math.sin(angle) * radius; + shapes.circle(petalX, petalY, size/6); + } + }, + + // Triangles in a row + (x, y, size) => { + const triSize = size/3; + for(let i = 0; i < 3; i++) { + shapes.triangle( + x + i * triSize, + y + (i % 2) * triSize/2, + triSize + ); + } + }, + + // Simple grid of squares + (x, y, size) => { + const gridSize = size/2; + for(let i = 0; i < 2; i++) { + for(let j = 0; j < 2; j++) { + shapes.square( + x + i * gridSize + size/8, + y + j * gridSize + size/8, + gridSize * 0.75 + ); + } + } + }, + + // Alternating circles and squares + (x, y, size) => { + const spacing = size/2; + for(let i = 0; i < 2; i++) { + for(let j = 0; j < 2; j++) { + if((i + j) % 2 === 0) { + shapes.circle( + x + spacing/2 + i * spacing, + y + spacing/2 + j * spacing, + spacing/3 + ); + } else { + shapes.square( + x + i * spacing + spacing/6, + y + j * spacing + spacing/6, + spacing * 2/3 + ); + } + } + } + }, + + // Simple star pattern + (x, y, size) => { + const center = size/2; + // Horizontal and vertical lines + shapes.line(x, y + center, x + size, y + center); + shapes.line(x + center, y, x + center, y + size); + // Diagonal lines + shapes.line(x, y, x + size, y + size); + shapes.line(x + size, y, x, y + size); + } + ]; + + // Return a single pattern type (no combinations) + return (x, y, size) => { + ctx.save(); + ctx.translate(x, y); + + // Only rotate in 90-degree increments for predictability + const rotation = Math.PI/2 * randomInt(0, 4); + if(rotation > 0) { + ctx.translate(size/2, size/2); + ctx.rotate(rotation); + ctx.translate(-size/2, -size/2); + } + + randomChoice(types)(0, 0, size); + ctx.restore(); + }; + }; + + // Generate fewer patterns to ensure more repetition + const patterns = Array(10).fill(null).map(generatePattern); + + // Function to shuffle array + const shuffle = arr => [...arr].sort(() => Math.random() - 0.5); + + // Function to draw a row of patterns + const drawPatternRow = (xOffset, y, size) => { + const shuffledPatterns = shuffle(patterns); + for(let i = 0; i < 5; i++) { + shuffledPatterns[i](xOffset + i * size, y, size); + } + }; + + // Modified drawGrid function to add margins and increase spacing + const drawGrid = () => { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + ctx.strokeStyle = '#000'; + ctx.lineWidth = 4; + + const patternSize = 400; + const numRows = 4; + const pageMargin = 300; // Margin around the entire pattern block + + // Calculate available space after margins + const availableHeight = canvas.height - (pageMargin * 2); + + // Calculate row spacing with increased gaps + const totalPatternHeight = numRows * patternSize; + const totalGapHeight = availableHeight - totalPatternHeight; + const rowGap = totalGapHeight / (numRows - 1); // Only count gaps between rows + + // Calculate starting Y position to center the entire block + const startY = pageMargin; + + // Draw each row + for(let i = 0; i < numRows; i++) { + const y = startY + i * (patternSize + rowGap); + // Add horizontal margin to center patterns + drawPatternRow(0, y, patternSize); + } + }; + + drawGrid(); + canvas.addEventListener('click', drawGrid); + </script> +</body> +</html> \ No newline at end of file |