Skip to content

Commit 995dc56

Browse files
zesamerizesameri
committed
Add tile2.html for square grid pattern visualization
- Introduced a new HTML file, tile2.html, featuring a dynamic canvas that displays a square grid pattern. - Implemented JavaScript functions to draw squares with varying colors based on their position, creating a visually engaging design. - Added responsive canvas resizing to ensure the grid adapts to different screen sizes.
1 parent 358172e commit 995dc56

File tree

1 file changed

+209
-0
lines changed

1 file changed

+209
-0
lines changed

‎tile2.html‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Square Grid Pattern</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
overflow: hidden;
12+
background: #f5e6d3;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
width: 100vw;
17+
height: 100vh;
18+
}
19+
canvas {
20+
display: block;
21+
transform: rotate(45deg);
22+
transform-origin: center center;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<canvas id="canvas"></canvas>
28+
<script>
29+
const canvas = document.getElementById('canvas');
30+
const ctx = canvas.getContext('2d');
31+
32+
const CONFIG = {
33+
squareSize: 50,
34+
borderWidth: 12,
35+
borderColor: '#f5e6d3',
36+
navy: ['#0f1f2f', '#1a2838', '#142430', '#1f3040'],
37+
green: ['#2d5540', '#3d6a55', '#4a7a65', '#5a8575', '#6a9a8a', '#7aaa9a', '#3a5f4a', '#557f6a'],
38+
gold: ['#6b4423', '#7a5530', '#8b6f47', '#9a7a52', '#a67c3d', '#b68c4d', '#5a3820', '#8a6442'],
39+
lightBlue: ['#4a7595', '#5a85a5', '#6a95b5', '#7aa5c5', '#4a6a85', '#5a7a95', '#6a8aa5', '#7a9ab5']
40+
};
41+
42+
function resizeCanvas() {
43+
const diagonal = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2);
44+
canvas.width = diagonal;
45+
canvas.height = diagonal;
46+
}
47+
48+
function calculateGridDimensions() {
49+
return {
50+
cols: Math.ceil(canvas.width / CONFIG.squareSize) + 1,
51+
rows: Math.ceil(canvas.height / CONFIG.squareSize) + 1
52+
};
53+
}
54+
55+
function isNavySquare(row, col) {
56+
return row % 3 === 0 || col % 3 === 0;
57+
}
58+
59+
function getNavyVariation(row, col) {
60+
const index = (row * 7 + col * 13) % 4;
61+
return CONFIG.navy[index];
62+
}
63+
64+
function calculateBlockPosition(row, col) {
65+
return {
66+
blockRow: Math.floor((row - 1) / 3),
67+
blockCol: Math.floor((col - 1) / 3)
68+
};
69+
}
70+
71+
function calculateGroupPosition(blockRow, blockCol) {
72+
return {
73+
groupRow: Math.floor(blockRow / 2),
74+
groupCol: Math.floor(blockCol / 2)
75+
};
76+
}
77+
78+
function selectColorPalette(groupRow, groupCol) {
79+
const palettes = [CONFIG.gold, CONFIG.lightBlue, CONFIG.green];
80+
const index = (groupCol + groupRow) % 3;
81+
return palettes[index];
82+
}
83+
84+
function getColorVariation(palette, row, col) {
85+
const index = (row * 3 + col * 5) % 4;
86+
return palette[index];
87+
}
88+
89+
function getColoredSquareColor(row, col) {
90+
const { blockRow, blockCol } = calculateBlockPosition(row, col);
91+
const { groupRow, groupCol } = calculateGroupPosition(blockRow, blockCol);
92+
const palette = selectColorPalette(groupRow, groupCol);
93+
return getColorVariation(palette, row, col);
94+
}
95+
96+
function determineSquareColor(row, col) {
97+
if (isNavySquare(row, col)) {
98+
return getNavyVariation(row, col);
99+
}
100+
return getColoredSquareColor(row, col);
101+
}
102+
103+
function fillSquare(x, y, color) {
104+
ctx.fillStyle = color;
105+
ctx.fillRect(x, y, CONFIG.squareSize, CONFIG.squareSize);
106+
}
107+
108+
function strokeSquareBorder(x, y) {
109+
ctx.strokeStyle = CONFIG.borderColor;
110+
ctx.lineWidth = CONFIG.borderWidth;
111+
ctx.strokeRect(x, y, CONFIG.squareSize, CONFIG.squareSize);
112+
}
113+
114+
function getAllColors() {
115+
return [
116+
...CONFIG.navy,
117+
...CONFIG.green,
118+
...CONFIG.gold,
119+
...CONFIG.lightBlue
120+
];
121+
}
122+
123+
function getRandomColor(x, y) {
124+
const allColors = getAllColors();
125+
const seed = x * 7919 + y * 7907;
126+
const index = Math.abs(seed) % allColors.length;
127+
return allColors[index];
128+
}
129+
130+
function drawEightPointedStar(centerX, centerY, outerRadius, innerRadius, color) {
131+
const points = 8;
132+
const totalPoints = points * 2;
133+
134+
ctx.fillStyle = color;
135+
ctx.beginPath();
136+
137+
for (let i = 0; i < totalPoints; i++) {
138+
const angle = (i * Math.PI) / points - Math.PI / 2;
139+
const radius = i % 2 === 0 ? outerRadius : innerRadius;
140+
const x = centerX + radius * Math.cos(angle);
141+
const y = centerY + radius * Math.sin(angle);
142+
143+
if (i === 0) {
144+
ctx.moveTo(x, y);
145+
} else {
146+
ctx.lineTo(x, y);
147+
}
148+
}
149+
150+
ctx.closePath();
151+
ctx.fill();
152+
}
153+
154+
function renderSquare(row, col) {
155+
const x = col * CONFIG.squareSize;
156+
const y = row * CONFIG.squareSize;
157+
const color = determineSquareColor(row, col);
158+
159+
fillSquare(x, y, color);
160+
strokeSquareBorder(x, y);
161+
}
162+
163+
function renderStarAtIntersection(x, y) {
164+
const outerRadius = CONFIG.borderWidth * 0.75;
165+
const innerRadius = outerRadius * 0.5;
166+
const color = getRandomColor(x, y);
167+
168+
drawEightPointedStar(x, y, outerRadius, innerRadius, color);
169+
}
170+
171+
function renderAllStars() {
172+
const { rows, cols } = calculateGridDimensions();
173+
174+
for (let row = 0; row <= rows; row++) {
175+
for (let col = 0; col <= cols; col++) {
176+
const x = col * CONFIG.squareSize;
177+
const y = row * CONFIG.squareSize;
178+
renderStarAtIntersection(x, y);
179+
}
180+
}
181+
}
182+
183+
function renderGrid() {
184+
const { rows, cols } = calculateGridDimensions();
185+
186+
for (let row = 0; row < rows; row++) {
187+
for (let col = 0; col < cols; col++) {
188+
renderSquare(row, col);
189+
}
190+
}
191+
192+
renderAllStars();
193+
}
194+
195+
function initializeCanvas() {
196+
resizeCanvas();
197+
renderGrid();
198+
}
199+
200+
function handleResize() {
201+
resizeCanvas();
202+
renderGrid();
203+
}
204+
205+
initializeCanvas();
206+
window.addEventListener('resize', handleResize);
207+
</script>
208+
</body>
209+
</html>

0 commit comments

Comments
 (0)