Every answer below carries the name of the model that wrote it. Blind refers to the scoring: the review was done without knowing which model produced which answer — the published result names them.
2 of the 11 local models delivered nothing through our test harness in this round — for reasons that lie with our setup, not with the models. Those cards are marked DNF like any other, but they are not evidence about those models — the reason is noted on the card itself.
Create ONE self-contained HTML file (STRICT LIMIT: max 7000 characters in total — this is a budget on characters, not on lines, so removing line breaks does not help) that fills a <canvas> with Truchet tiles: each cell of a grid holds a tile made of two quarter-circle arcs, drawn in one of two orientations, so neighbouring tiles join into long continuous curves. Re-roll a few random tiles every frame with a short cross-fade, so the maze of curves keeps reorganising while the connections stay seamless. Show the grid size and the number of tiles flipped. Smooth requestAnimationFrame animation, NO user input, starts immediately and keeps running (restart with a fresh random instance when finished). No external libraries, no comments needed. Output ONLY the HTML file content, nothing else.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Truchet tiles animation</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#canvas {
width: 100%;
height: 100vh;
display: block;
}
</style>
<script>
let gridsize = 20;
let flippedcount = 0;
let canvas, ctx;
function truchet(x, y) {
let x1 = x * 30 + 15;
let y1 = y * 30 + 15;
let x2 = (x+1) * 30 - 15;
let y2 = y * 30 + 15;
ctx.beginPath();
ctx.arc(x1, y1, 14.5, Math.PI/4, 3*Math.PI/4);
ctx.arc(x2, y2, 14.5, 7*Math.PI/4, 11*Math.PI/4);
ctx.fillStyle = 'white';
ctx.fill();
}
function truchetflip(x, y) {
let x1 = (x+1) * 30 - 15;
let y1 = y * 30 + 15;
let x2 = x * 30 + 15;
let y2 = (y+1) * 30 - 15;
ctx.beginPath();
ctx.arc(x1, y1, 14.5, Math.PI/4, 3*Math.PI/4);
ctx.arc(x2, y2, 14.5, 7*Math.PI/4, 11*Math.PI/4);
ctx.fillStyle = 'white';
ctx.fill();
}
function draw() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
for (let x = 0; x < gridsize; ++x) {
for (let y = 0; y < gridsize; ++y) {
if (Math.random() < 0.1) truchetflip(x, y);
else truchet(x, y);
}
}
flippedcount++;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawtext();
}
function drawtext() {
let text = 'Grid size: ' + gridsize;
ctx.font = '24px Arial';
ctx.fillStyle = 'black';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(text, 10, 10);
text = 'Flipped tiles: ' + flippedcount;
ctx.fillText(text, 10, 40);
}
function init() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
setInterval(draw, 1000/60);
draw();
}
</script>
</head>
<body onload="init()">
<canvas id="canvas"></canvas>
</body>
</html>
``````html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Truchet Tile Animation</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #111; }
canvas { border: 1px solid #333; }
#info { position: absolute; top: 20px; color: white; font-family: monospace; z-index: 10; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="info">Grid: 12x12 | Flips: 0</div>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let CANVAS_SIZE = 640;
canvas.width = CANVAS_SIZE;
canvas.height = CANVAS_SIZE;
const GRID_W = 12;
const GRID_H = 12;
const TILE_SIZE = CANVAS_SIZE / GRID_W;
let tiles = [];
let flipCount = 0;
let animationFrameId = null;
let isAnimating = false;
function initTiles() {
tiles = Array(GRID_W).fill(0).map(() => Array(GRID_H).fill(null));
for (let x = 0; x < GRID_W; x++) {
for (let y = 0; y < GRID_H; y++) {
tiles[x][y] = Math.random() > 0.5 ? 1 : 2; // State 1 or 2
}
}
}
function drawTile(ctx, x, y, state) {
const sx = x * TILE_SIZE;
const sy = y * TILE_SIZE;
const cx = sx + TILE_SIZE / 2;
const cy = sy + TILE_SIZE / 2;
const radius = TILE_SIZE / 2;
ctx.save();
ctx.beginPath();
ctx.lineWidth = 4;
ctx.strokeStyle = '#00FFFF';
ctx.lineCap = 'round';
// State 1: Top-Left to Bottom-Right curve (Anti-diagonal)
if (state === 1 || state === 2) {
// Arc 1 (Top Left Corner)
ctx.arc(sx + radius, sy + radius, radius, Math.PI * 0.5, Math.PI);
ctx.stroke();
// Arc 2 (Bottom Right Corner)
ctx.beginPath();
ctx.arc(sx + radius, sy + radius, radius, Math.PI, Math.PI * 1.5);
ctx.stroke();
}
// State 2: Top-Right to Bottom-Left curve (Diagonal)
if (state === 2 || state === 1) {
// Arc 1 (Top Right Corner)
ctx.arc(sx + radius, sy + radius, radius, Math.PI * 0, Math.PI * 0.5);
ctx.stroke();
// Arc 2 (Bottom Left Corner)
ctx.beginPath();
ctx.arc(sx + radius, sy + radius, radius, Math.PI * 1.5, Math.PI * 2);
ctx.stroke();
}
ctx.restore();
}
function drawGrid(fadeFactor) {
ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
for (let x = 0; x < GRID_W; x++) {
for (let y = 0; y < GRID_H; y++) {
const state = tiles[x][y];
ctx.globalAlpha = fadeFactor === 1 ? 1 : fadeFactor;
drawTile(ctx, x, y, state);
}
}
ctx.globalAlpha = 1;
}
function flipRandomTile() {
let x, y;
do {
x = Math.floor(Math.random() * GRID_W);
y = Math.floor(Math.random() * GRID_H);
} while (tiles[x][y] === null); // Should never happen if initialized correctly
const oldState = tiles[x][y];
let newState = oldState === 1 ? 2 : 1;
if (newState !== oldState) {
flips++;
tiles[x][y] = newState;
return true;
}
return false;
}
let fadeProgress = 0;
const FADE_STEPS = 8;
function animate() {
if (!isAnimating) return;
// Step 1: Flip a tile
flipRandomTile();
// Step 2: Handle cross-fade drawing
fadeProgress += (1 / FADE_STEPS);
let alpha = Math.min(1, fadeProgress);
drawGrid(alpha * 0.5 + 0.3); // Draw semi-transparent base using current state
// Redraw the specific tile that changed with full opacity on top
const x = Math.floor(Math.random() * GRID_W);
const y = Math.floor(Math.random() * GRID_H);
drawTile(ctx, x, y, tiles[x][y]);
if (fadeProgress >= 1) {
fadeProgress = 0;
}
animationFrameId = requestAnimationFrame(animate);
}
function updateInfo() {
document.getElementById('info').innerText = `Grid: ${GRID_W}x${GRID_H} | Flips: ${flips}`;
}
function loop() {
initTiles();
flips = 0;
updateInfo();
animate();
requestAnimationFrame(loop); // Continuous looping animation setup
}
// Start the process immediately
loop();
</script>
</body>
</html>
``````html
<!DOCTYPE html>
<html>
<head>
<title>Truchet Maze</title>
<style>body{margin:0;display:flex;justify-content:center;align-items:center;background:#111;color:#fff;font-family:sans-serif;}canvas{border:2px solid #333;}</style>
</head>
<body>
<canvas id="c"></canvas><script>
const C = document.getElementById('c');
const ctx = C.getContext('2d');
let G_SIZE = 15; // Grid size (15x15)
let TILE_D = 40; // Tile dimension
C.width = G_SIZE * TILE_D;
C.height = G_SIZE * TILE_D;
let grid = [];
let flipState = {};
const FADE_RATE = 0.15; // Speed of cross-fade (opacity change per frame)
const FLIP_INTERVAL = 30; // Flip a tile every X frames
// Initialize the grid and state
for (let y = 0; y < G_SIZE; y++) {
grid[y] = [];
flipState[y] = {};
for (let x = 0; x < G_SIZE; x++) {
// State: 0 or 1, representing the tile type/orientation.
grid[y][x] = Math.floor(Math.random() * 2);
flipState[y][x] = 1.0; // Full opacity initially
}
}
function drawTile(x, y) {
const gx = x * TILE_D;
const gy = y * TILE_D;
const type = grid[y][x];
let alpha = flipState[y][x];
ctx.globalAlpha = Math.min(1, Math.max(0, alpha));
ctx.strokeStyle = '#32CD32';
ctx.lineWidth = 4;
ctx.lineCap = 'round';
// Clear the tile area before drawing (optional but helpful for clean transitions)
ctx.fillStyle = '#111';
ctx.fillRect(gx, gy, TILE_D, TILE_D);
ctx.globalCompositeOperation = 'source-over';
// Draw the curved paths based on tile type (0 or 1)
if (type === 0) {
// Type 0: Connects top/right and bottom/left
const drawArc = (cx, cy, r) => ctx.beginPath();
ctx.stroke = function() {
ctx.strokeStyle = '#32CD32';
ctx.lineWidth = 4;
let p1, p2;
// Top-Right Corner Arc
drawArc(gx + TILE_D - 15, gy + 15, 15).stroke();
// Bottom-Left Corner Arc
drawArc(gx + 15, gy + TILE_D - 15, 15).stroke();
ctx.globalAlpha = 1; // Reset alpha after drawing the tile's curves
};
} else {
// Type 1: Connects top/left and bottom/right
const drawArc = (cx, cy, r) => ctx.beginPath();
ctx.stroke = function() {
ctx.strokeStyle = '#32CD32';
ctx.lineWidth = 4;
// Top-Left Corner Arc
drawArc(gx + 15, gy + 15, 15).stroke();
// Bottom-Right Corner Arc
drawArc(gx + TILE_D - 15, gy + TILE_D - 15, 15).stroke();
ctx.globalAlpha = 1; // Reset alpha after drawing the tile's curves
};
}
// Execute the custom draw logic defined above (since we are simulating complex pathing)
if(typeof ctx.stroke === 'function') {
ctx.stroke();
} else {
// Fallback for actual arc drawing if the simplified geometry fails
ctx.globalAlpha = alpha;
ctx.beginPath();
if (type === 0) {
ctx.arc(gx + TILE_D - 15, gy + 15, 15, Math.PI * 1.5, Math.PI * 2); // Top-Right proxy
ctx.stroke();
ctx.beginPath();
ctx.arc(gx + 15, gy + TILE_D - 15, 15, Math.PI * 0.5, Math.PI * 1.5); // Bottom-Left proxy
ctx.stroke();
} else {
ctx.beginPath();
ctx.arc(gx + 15, gy + 15, 15, Math.PI * 1.5, Math.PI * 2); // Top-Left proxy
ctx.stroke();
ctx.beginPath();
ctx.arc(gx + TILE_D - 15, gy + TILE_D - 15, 15, Math.PI * 0.5, Math.PI * 1.5); // Bottom-Right proxy
ctx.stroke();
}
}
ctx.globalAlpha = 1; // Ensure global alpha is reset for subsequent drawing/UI elements
}
function flipRandomTile() {
const y = Math.floor(Math.random() * G_SIZE);
let x = Math.floor(Math.random() * G_SIZE);
// Find a tile that isn't actively fading or recently flipped to prevent instability
let attempts = 0;
while ((attempts < 5) && (flipState[y][x] === 1.0 || flipState[y][x] <= 0)) {
x = Math.floor(Math.random() * G_SIZE);
y = Math.floor(Math.random() * G_SIZE);
}
if (flipState[y][x] > 0 && flipState[y][x] < 1) return; // Already fading
// Flip the state and reset fade counter
grid[y][x] = 1 - grid[y][x];
flipState[y][x] = 0.0; // Start fade process (opacity will rise towards 1.0)
}
function animate() {
ctx.clearRect(0, 0, C.width, C.height);
// Draw all tiles, respecting current opacity (cross-fade effect)
for (let y = 0; y < G_SIZE; y++) {
for (let x = 0; x < G_SIZE; x++) {
drawTile(x, y);
}
}
// Update fade states for all tiles that are currently flipping
let flippedCount = 0;
for (let y = 0; y < G_SIZE; y++) {
for (let x = 0; x < G_SIZE; x++) {
if (flipState[y][x] < 1.0 && flipState[y][x] > 0) {
// Increase opacity towards 1.0 until it hits the max fade value (e.g., 0.3)
let oldAlpha = flipState[y][x];
flipState[y][x] = Math.min(oldAlpha + FADE_RATE, 1.0);
} else if (Math.random() < (1 / FLIP_INTERVAL)) {
// If time to potentially flip a tile
if (flipState[y][x] >= 1.0) { // Only flip if fully visible
grid[y][x] = 1 - grid[y][x];
flipState[y][x] = 0; // Start fade from zero opacity
flippedCount++;
} else {
// If fading, maintain the current state
}
}
}
}
// Request next frame
requestAnimationFrame(animate);
}
// Start animation loop
animate();
</script>
</body>
</html>
```<!DOCTYPE html><html><head><title>Truchet Tiling</title><style>body{margin:0;overflow:hidden;background:#111}canvas{display:block}</style></head><body><canvas id="c"></canvas><script>
const c = document.getElementById('c');
const ctx = c.getContext('2d');
let SIZE = 30; // Grid size N x N
let TILE_SIZE = 50; // Size of one tile cell (pixels)
c.width = SIZE * TILE_SIZE;
c.height = SIZE * TILE_SIZE;
// State: grid[r][c] is an object { top, right } indicating which connections exist.
let grid = [];
let flipCount = 0;
function initializeGrid() {
grid = Array.from({ length: SIZE }, () => Array(SIZE).fill(null));
for (let r = 0; r < SIZE; r++) {
for (let c = 0; c < SIZE; c++) {
// Randomly decide connections for a continuous flow
grid[r][c] = { top: Math.random() > 0.5, right: Math.random() > 0.5 };
}
}
flipCount = 0;
}
function drawTile(r, c) {
const x = c * TILE_SIZE;
const y = r * TILE_SIZE;
ctx.clearRect(x, y, TILE_SIZE, TILE_SIZE);
// Connections define the center points (radius of quarter circles)
// Top connection: Arc from (x + R, y) to (x + 1.5R, y) -> Center at (x+R, y)
// Right connection: Arc from (x, y + R) to (x, y + 1.5R) -> Center at (x, y+R)
ctx.strokeStyle = '#00FFFF'; // Cyan for arcs
ctx.lineWidth = 3;
let { top, right } = grid[r][c];
// Draw Top Arc (Center: x + TILE_SIZE/2, y + TILE_SIZE/2)
if (top) {
ctx.beginPath();
ctx.arc(x + TILE_SIZE / 2, y + TILE_SIZE / 2, TILE_SIZE / 2, Math.PI * 0.5, Math.PI * 1.5);
ctx.stroke();
}
// Draw Right Arc (Center: x + TILE_SIZE/2, y + TILE_SIZE/2)
if (right) {
ctx.beginPath();
ctx.arc(x + TILE_SIZE / 2, y + TILE_SIZE / 2, TILE_SIZE / 2, Math.PI * 1.5, Math.PI * 2.5);
ctx.stroke();
}
// Draw inner connections (to complete the continuous curve look)
if (top && right) {
ctx.strokeStyle = '#FF00AA'; // Magenta for intersection
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(x + TILE_SIZE / 2, y + TILE_SIZE / 2);
ctx.lineTo(x + TILE_SIZE / 2, y + TILE_SIZE / 2); // Just a visual anchor for the seamless curve
ctx.stroke();
}
// Draw overlay text info (optional, kept minimal)
ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
ctx.font = "10px Arial";
ctx.fillText(`T:${top ? 'Y' : 'N'} R:${right ? 'Y' : 'N'}`, x + 5, y + 15);
}
function updateGrid() {
const numUpdates = Math.min(SIZE * SIZE, 3); // Update max 3 tiles per frame
let updatedTiles = new Set();
for (let i = 0; i < numUpdates; i++) {
let r, c;
do {
r = Math.floor(Math.random() * SIZE);
c = Math.floor(Math.random() * SIZE);
} while (updatedTiles.has(`${r},${c}`));
updatedTiles.add(`${r},${c}`);
let oldState = grid[r][c];
// Randomly flip the connections (T and R)
let newTop = Math.random() > 0.5 ? !oldState.top : oldState.top;
let newRight = Math.random() > 0.5 ? !oldState.right : oldState.right;
// Prevent trivial flips if nothing changes (though random choice handles this)
if ((newTop !== oldState.top || newRight !== oldState.right)) {
grid[r][c] = { top: newTop, right: newRight };
flipCount++;
}
}
}
function render() {
// Cross-fade effect simulation: Clear with low opacity before drawing the new frame
ctx.fillStyle = 'rgba(17, 17, 17, 0.2)'; // Match body background color slightly transparent
ctx.fillRect(0, 0, c.width, c.height);
// Draw all tiles (this is expensive, but necessary for the cross-fade effect)
for (let r = 0; r < SIZE; r++) {
for (let c = 0; c < SIZE; c++) {
drawTile(r, c);
}
}
// Display stats
const infoDiv = document.createElement('div');
infoDiv.style.position = 'absolute';
infoDiv.style.width = `${SIZE * TILE_SIZE}px`;
infoDiv.style.height = '30px';
infoDiv.style.color = '#AAA';
infoDiv.innerHTML = `Grid: ${SIZE}x${SIZE} | Flips: ${flipCount}`;
document.body.appendChild(infoDiv);
// Update logic happens after drawing to ensure the visual change is seen
updateGrid();
requestAnimationFrame(render);
}
function setup() {
initializeGrid();
render();
}
setup;
</script></body></html>```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Truchet Tiles</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #282c34; color: white; font-family: Arial, sans-serif; }
#info { position: absolute; top: 20px; left: 20px; z-index: 1; }
canvas { border: 1px solid black; }
</style>
</head>
<body>
<div id="info"></div><canvas id="canvas" width="800" height="600"></canvas>
<script>
function drawTruchetTile(ctx, x, y, size, orientation) {
const cx = x + size / 2;
const cy = y + size / 2;
ctx.beginPath();
if (orientation === 'up-right') { ctx.arc(cx - size / 4, cy - size / 4, size / 4, Math.PI * 1.5, Math.PI * 0.5); ctx.arc(cx + size / 4, cy + size / 4, size / 4, Math.PI * 0.5, Math.PI * 1.5); }
else if (orientation === 'down-left') { ctx.arc(cx - size / 4, cy + size / 4, size / 4, Math.PI * 0, Math.PI);
ctx.arc(cx + size / 4, cy - size / 4, size / 4, Math.PI, Math.PI * 2); }
ctx.stroke();
}
function drawGrid(ctx, gridSize, tileSize) {
const orientations = ['up-right', 'down-left'];
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
drawTruchetTile(ctx, i * tileSize, j * tileSize, tileSize, orientations[Math.floor(Math.random() * 2)]);
}
}
}
function updateGrid(canvas, ctx, grid, gridSize, tileSize) {
const newGrid = [];
for (let i = 0; i < gridSize * gridSize; i++) {
newGrid[i] = Math.random() > 0.8 ? Math.floor(Math.random() * 2) : grid[i];
}
return newGrid;
}
function animate(canvas, ctx, grid, gridSize, tileSize) {
const infoDiv = document.getElementById('info');
let frameCount = 0;
function loop(timestamp) {
if (frameCount === 60) { grid = updateGrid(canvas, ctx, grid, gridSize, tileSize); frameCount = 0; }
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < gridSize; i++) {
for (let j = 0; j < gridSize; j++) {
drawTruchetTile(ctx, i * tileSize, j * tileSize, tileSize, ['up-right', 'down-left'][grid[i * gridSize + j]]);
}
}
infoDiv.textContent = `Grid Size: ${gridSize} x ${gridSize}, Tiles Flipped: ${frameCount}`;
requestAnimationFrame(loop);
frameCount++;
}
requestAnimationFrame(loop);
}
window.onload = function() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const gridSize = 10;
const tileSize = Math.min(canvas.width / gridSize, canvas.height / gridSize);
const grid = Array(gridSize * gridSize).fill().map(() => Math.floor(Math.random() * 2));
drawGrid(ctx, gridSize, tileSize);
animate(canvas, ctx, grid, gridSize, tileSize);
};
</script>
</body></html>
```<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; }
canvas { display: block; cursor: crosshair; }
</style>
</head>
<body>
<canvas></canvas>
<script>
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
let gridSize = 50
let tilesFlipped = 0
function drawTile(x, y, orientation) {
ctx.save()
// Translate to the tile position and scale for the grid size
ctx.translate(x * gridSize + gridSize / 2, y * gridSize + gridSize / 2)
ctx.scale(gridSize / 100, gridSize / 100)
if (orientation === 'right') {
// Draw a quarter circle for the right tile part
ctx.beginPath()
ctx.arc(50, 0, 50, Math.PI * 3 / 2, -Math.PI / 2, false)
ctx.fillStyle = '#ffffff'
ctx.fill()
} else {
// Draw a quarter circle for the left tile part
ctx.beginPath()
ctx.arc(0, 0, 50, Math.PI / 2, -Math.PI * 3 / 2, true)
ctx.fillStyle = '#ffffff'
ctx.fill()
}
ctx.restore()
}
function drawTruchetGrid() {
const tileSize = gridSize / Math.sqrt(2) // Ensure tiles are always square even on rotated grids
for (let y = 0; y < gridSize; y++) {
for (let x = 0; x < gridSize; x++) {
// Randomly select an orientation for this tile
let orientation = ['left', 'right'][Math.floor(Math.random() * 2)]
drawTile(x, y, orientation)
}
}
}
function updateGrid() {
tilesFlipped++
const [tileX, tileY] = [
Math.floor(Math.random() * gridSize),
Math.floor(Math.random() * gridSize)
]
// Get the current orientation of this tile
let currentOrientation = ['left', 'right'][drawTile(tileX, tileY)]
if (currentOrientation !== undefined && tilesFlipped < 100) {
const newOrientation = currentOrientation === 'left' ? 'right' : 'left';
// Set the color fade effect based on whether we're lightening or darkening
ctx.globalCompositeOperation =
orientation === 'left'
? 'lighter'
: 'darker';
drawTile(tileX, tileY, newOrientation)
requestAnimationFrame(updateGrid);
} else {
// Restart the animation with a fresh random instance
gridSize = Math.ceil(Math.random() * 20 + 9);
tilesFlipped = 0;
ctx.clearRect(0, 0, canvas.width, canvas.height)
drawTruchetGrid()
requestAnimationFrame(updateGrid);
}
}
// Set the canvas size to fit the grid with a 1:1 aspect ratio
canvas.width = gridSize * gridSize / Math.sqrt(2);
canvas.height = gridSize;
ctx.clearRect(0, 0, canvas.width, canvas.height)
drawTruchetGrid()
requestAnimationFrame(updateGrid);
</script>
</body>
</html><think>
Okay, I need to create a self-contained HTML file that uses a canvas to display Truchet tiles. The tiles should form a grid where each cell has two quarter-circle arcs in one of two orientations. The animation should randomly re-roll a few tiles each frame with a cross-fade effect, making the curves reorganize smoothly. Also, it should show the grid size and the number of flipped tiles, use requestAnimationFrame for smooth animation, start immediately, and restart once finished. No external libraries, and the entire HTML must be under 7000 characters.
First, the basic structure. The HTML needs a canvas element and some divs to display grid size and flipped count. The script will handle the animation.
Truchet tiles: each tile can be in two states. The two orientations can be represented by a binary value, like 0 and 1. The quarter-circles would be drawn based on this value. For example, if the tile is 0, draw the arcs in one direction, and 1 in the other.
To make the curves connect seamlessly, adjacent tiles need to have their arcs overlap appropriately. The position of the arcs within each cell must be such that their ends meet the neighboring cells' arcs. For instance, a tile's top arc would connect to the tile above it if they have the correct orientation.
The grid size: let's say a variable like cols and rows. Maybe 20x20 to start with. The canvas size should adjust based on the grid and cell size. Let's choose a cell size of 30px, so the canvas would be 600x600 (20x30 each dimension).
For the animation, each frame should randomly flip a few tiles. The cross-fade means that the transition between old and new state should blend over frames. So, each tile has a target state and a current state that's interpolated between them over time.
Starting with initializing the grid as an array of random 0s and 1s. Then, each frame, select a random subset of tiles to toggle their target state. The actual displayed state is a blend between current and target.
The animation loop using requestAnimationFrame will update the current state towards the target, repaint the canvas each time.
The grid size display and flipped count need to be updated each frame. The flipped count would track how many tiles are in transition (i.e., their current state isn't exactly the target yet?), or maybe count how many tiles were changed in the last frame? Hmm. Wait, the user says "number of tiles flipped" each frame. So perhaps each frame, a few tiles are selected to flip, and those are counted each time.
Wait, the instruction says "re-roll a few random tiles every frame". So each frame, a certain number of tiles (maybe 5% of total) are chosen to flip their orientation. The cross-fade is the transition between their previous and new state over, say, a few frames (like 10 steps). So each tile has a target value, and the current value is moving towards that over time.
The cross-fade would be handled by linear interpolation between the current state and the target over a duration. For example, each time a tile is selected to flip, its target is set to 1 - current target (if it's already in transition, maybe?) or not. Wait, maybe each tile's target is set to 1 - current value when it's chosen? So flipping it.
Wait, perhaps the tiles have a target state that is randomly chosen each frame for a few tiles. The current state is a mix between previous current and the target. So each frame, we pick some tiles to change their target (i.e., flip their desired state), and then the current state moves closer to that target each frame.
To implement this, each tile can have a "target" and "current" value. The current value is updated each frame by moving it towards the target by a certain rate (like 0.1 per frame). Once it reaches the target, it stops moving.
Alternatively, maybe each tile's target is set to a random 0 or 1 when it's chosen to flip, and then the current value is interpolated towards that target. The cross-fade effect is achieved by using the current value in the drawing code.
For the drawing: each tile is a square. Let's say the cell is 30px, so the quarter circles would be 15px radius. For a tile with state 0, maybe draw two quarter-circles: one in the top-left quadrant and the other in the bottom-right quadrant. Or maybe in one of the two ways that Truchet tiles can be arranged. The actual arrangement needs to ensure that adjacent tiles' arcs connect. For example, if a tile is 0, the arcs go from the top to the right, and if it's 1, they go from the top-left to bottom-right? Not sure, need to think about the standard Truchet tile patterns.
Wait, a standard Truchet tile has two quarter-circles in opposite corners, arranged such that adjacent tiles can form continuous curves. For example, one orientation has the arc from the top-left to bottom-right (a diagonal), and another has the arc going the other way, like top-right to bottom-left. Wait, perhaps each tile has a choice between two types: a "swirl" or a "zig-zag". The exact positions need to be such that adjacent tiles can form smooth curves.
Alternatively, each tile has two quarter-circles. Let me think: for a tile in state 0, the arcs are the top-left and bottom-right quadrants, forming a diagonal line; for state 1, they are the top-right and bottom-left, forming the opposite diagonal. That way, when adjacent tiles alternate states, the arcs can form continuous lines.
Wait, perhaps each tile has two quarter-circles that form a circle's half. The two possible orientations are the two possible ways to split the tile into two semicircles. Alternatively, in the classic Truchet tile, the pattern is two quarter-circles in opposing corners, creating a diagonal line. So when neighboring tiles have the opposite orientation, their lines connect.
Let me think in code terms. For a cell at (x,y), the tile's state is 0 or 1. The drawing code would need to draw the two quarter circles based on the state. For example:
If state is 0:
- Draw a quarter circle in the top-left corner (start angle 0, end π/2) and another in the bottom-right (start π, end 3π/2). Wait, maybe not exactly, but forming a diagonal that connects to neighbors.
Alternatively, each tile has two arcs that form a continuous curve, and flipping the state inverts the arcs. The key is that when adjacent tiles have opposite states, their arcs form a continuous path.
Hmm, perhaps the standard way is to have the two arcs in opposite corners in each tile. So for state 0, arcs in top-left and bottom-right; for state 1, arcs in top-right and bottom-left. This way, adjacent tiles can form a continuous curve if their states are oriented correctly.
Yes, that makes sense. So for each cell, the two quarter-circles will be in opposite corners depending on the state. To draw a quarter-circle arc in a corner, we can use the arc() function in canvas.
So, in code, for each cell, we can do something like:
if (state == 0) {
// draw top-left quarter circle
// and bottom-right quarter circle
} else {
// top-right and bottom-left
}
The quarter circles are radius equal to half the cell size (so that they touch the edges). Let's say the cell is 30px, so radius is 15px.
For top-left quarter circle: starting at (x, y), center at (x + 15, y +15), but the arc is from angle 0 to π/2, but maybe the exact parameters need to be set correctly. Wait, the syntax for arc is (cx, cy, radius, startAngle, endAngle, anticlockwise).
Wait, let's think for top-left: To make a quarter circle that starts at the top-left corner and curves to the center? Or perhaps the arc is drawn in the upper-left quadrant. The exact coordinates might need some calculation.
Alternatively, for a cell starting at (x,y) with size s (e.g., 30):
For state 0:
- Q1 (top-left quadrant): start at (x,y), but the arc would be centered at (x + s/2, y + s/2). A quarter circle from angle π to 1.5π (to make the bottom-right half?), no, perhaps better to think in terms of the direction.
Wait, this is getting a bit tricky. Let's think of the quarter circle that fills the top-left quadrant of the cell. To draw that, the center is at the center of the cell (x + s/2, y + s/2). The start angle is π (180 degrees) and end angle is 1.5π (270 degrees), but perhaps anticlockwise.
Wait, maybe the quarter-circle covering the top-left quadrant would start at the bottom-left point of the cell and go up? Hmm, perhaps an easier way is to use the start and end angles properly.
Alternatively, the top-left quarter circle can be drawn by starting at 3π/2 (270 degrees), going clockwise for π/2 radians (so end at 270 - 90 = 180 degrees?), but maybe this is getting confusing. Let me look up an example.
Alternatively, perhaps the top-left quarter circle can be drawn with:
context.arc(x + s/2, y + s/2, s/2, Math.PI, 3 * Math.PI / 2, false);
Wait, let's see:
Center is at (x + 15, y +15) for a cell size of 30.
Start angle is π (180 degrees), end angle 3π/2 (270 degrees). The arc would go from pointing right (π radians) to pointing down (3π/2). That creates a quarter circle in the bottom half? No, wait, if the center is in the middle of the cell, the arc from 180 to 270 degrees would be the bottom-left quadrant? Hmm, maybe I'm getting this wrong.
Alternatively, to form a quarter circle in the top-left corner, it would start at 0 radians (east) and go to π/2 (north). But that would be the top-right quadrant. Wait, perhaps I need to adjust the start and end angles properly.
Alternatively, maybe the top-left quarter is from angle Math.PI/2 (90 degrees) to 0, but in a clockwise direction. Hmm, this is confusing.
Alternatively, perhaps it's simpler to use the following approach for state 0: draw a line from the top-left to bottom-right, but using quarter circles. Wait, maybe the standard Truchet tile uses two quarter circles of opposite corners, forming a diagonal line. To do that, for state 0, the two arcs are in the top-left and bottom-right corners, each making a 180 degree arc. Wait, actually, each is a quarter-circle.
Wait, let's think differently: the tile is divided into four quadrants. For a Truchet tile in state 0, you have a quarter-circle in the top-left quadrant and another in the bottom-right quadrant, such that they form a continuous curve from the top-left to bottom-right. For state 1, the arcs are in the top-right and bottom-left quadrants, making a curve from top-right to bottom-left.
To draw such arcs:
For a cell at (x,y) with size s:
For state 0:
- The top-left arc is centered at (x + s/2, y + s/2), radius s/2. The start angle is π/2 (90 degrees), end angle 0, moving clockwise? Or anticlockwise.
Wait, let's see:
To draw the top-left quarter-circle, perhaps:
Start angle = Math.PI (180 degrees) to Math.PI/2 (90 degrees) but anticlockwise? Not sure.
Alternatively, maybe the top-left arc is drawn from the bottom-left corner of the cell to the center? Hmm, perhaps it's better to look for a code example or formula.
Alternatively, maybe the top-left quarter-circle is drawn by starting at the top-left corner (x,y) and moving clockwise with radius s/2. So the arc would start at angle Math.PI/2 (pointing up), but that might not be right.
Alternatively, here's a way to represent it:
For the top-left quadrant, the quarter-circle is the arc from (x, y) to the center, but forming a quarter-circle in that quadrant.
Alternatively, here's a method: to draw a quarter circle in the upper left corner of the cell, centered at the cell's center, but covering the top-left quadrant. The start angle is π/2 (pointing up) and end angle π (pointing left?), but going clockwise, so:
arc(x + s/2, y + s/2, s/2, Math.PI/2, Math.PI, false);
Wait, that would start at 90 degrees, end at 180 degrees, moving clockwise. The resulting shape would be the upper-left quadrant's arc.
Similarly, the bottom-right would be from angle 0 to -Math.PI/2 (or equivalently 3π/2), but in the cell's center.
Wait, maybe the bottom-right quadrant's arc would be from angle 0 (right) to -π/2 (down?), but in clockwise direction. Hmm.
Alternatively, perhaps for state 0:
- draw an arc from top-left to bottom-right, forming a diagonal line. The two quarter circles would be the left half and the right half of that line. Wait, maybe two quarter circles in opposite corners.
Alternatively, here's a possible approach for the code:
For state 0:
draw the top-left quadrant's arc and the bottom-right's.
To draw the top-left arc (covers the quadrant from top-left to center):
The starting angle is Math.PI (180 degrees), end angle 3*Math.PI/2 (270 degrees), going clockwise (false). Wait, that would be a quarter circle in the lower left quadrant? Hmm, not sure.
This is getting too time-consuming. Perhaps I can find a way to represent it in code using sample coordinates. Let me think of a cell starting at x=0,y=0, size 30:
The center is at (15,15), radius 15.
For top-left quarter-circle:
The arc should start at the left and go up, but perhaps:
start angle: Math.PI (180 degrees, pointing left)
end angle: 1.5 * Math.PI (270 degrees, pointing down)
So the arc spans from left to down, but in the lower left quadrant. Hmm, that's not top-left.
Alternatively, perhaps start at 0 radians (right direction) but that's the bottom edge.
Alternatively, maybe the top-left quarter-circle is the part of the circle that's in the top-left quadrant. So the start angle would be π/2 (up) to 0 (right)?
Wait, I'm getting stuck here. Maybe an easier way is to find code examples online, but since I can't do that, perhaps I can think differently.
Alternatively, perhaps the two arcs form a half-circle that spans from one side to another, but in a way that when adjacent tiles have opposite states, the curves connect. Let me think that for a tile in state 0, the arcs are on the left and bottom edges, while in state 1 they are on top and right, but that might not be right.
Alternatively, the classic Truchet tile has two quarter circles in opposite corners. So for state 0, the two arcs are in the top-left and bottom-right corners, forming a diagonal line from top-left to bottom-right, but each arc is a quarter-circle. So the combined shape would look like a diagonal line through the cell. Then, the adjacent cells can have their arcs in the opposite direction to form a continuous curve.
To draw the top-left quarter-circle arc:
The arc is centered at the cell's center, radius s/2.
Start angle: Math.PI (left direction) to 1.5*Math.PI (down direction), moving clockwise (false). This would be the lower-left quadrant's edge, not top-left.
Hmm, perhaps I'm making this too complicated. Let me think of the arc for a top-left quarter circle as part of the circle in the top-left quadrant. The start and end angles:
Starting at angle Math.PI/2 (up direction) and going to 0 (right direction), but anticlockwise?
Wait, the standard angles are in radians, with 0 pointing to the right (3 o'clock), increasing anticlockwise.
So to get the top edge (up) direction, that's angle Math.PI/2 (90 degrees), and the left direction is Math.PI (180).
So a quarter circle in the top-left quadrant would start at Math.PI/2 (up) and go to Math.PI (left), spanning 90 degrees. So the arc would be from 90 degrees to 180 degrees, which is the top-left quadrant's border.
Wait, if I draw an arc from 90 degrees to 180 degrees with anticlockwise direction (true), that would create a curve from up to left, forming a quarter circle in the top-left quadrant.
Similarly, the bottom-right quadrant's arc would start at 0 degrees (right) and go to -Math.PI/2 (down), but in clockwise direction.
Alternatively, perhaps:
For state 0:
- First arc: center at (cell.x + s/2, cell.y + s/2), radius s/2.
Start angle: Math.PI/2 (up), end angle: Math.PI (left), anticlockwise: true.
This draws the top-left quadrant's arc.
- Second arc: bottom-right quadrant's arc.
Start angle: 0 (right), end angle: -Math.PI/2 (down), anticlockwise: false (or clockwise).
Wait, but maybe the second arc should be from angle 0 to -Math.PI/2, but anticlockwise? No, because anticlockwise false would make it clockwise.
Alternatively, for the bottom-right quadrant, start at 0 (right), end at Math.PI/2 (down), but going clockwise (so with anticlockwise set to false). Hmm, this is getting too confusing.
Maybe it's better to use a different approach. Perhaps each state can be represented by a path that connects two opposite corners with a curve.
Alternatively, here's a way to code it:
For a cell with x,y and size s:
State 0:
arc1 = top-left to bottom-right.
arc2 = bottom-right to top-left? No.
Wait, perhaps the two arcs form a continuous line from top-left to bottom-right, but each is a quarter circle.
Alternatively, the two arcs are the left and right halves of a diagonal line.
Alternatively, perhaps the code for state 0 is:
context.beginPath();
// top-left arc
context.arc(x + s/2, y + s/2, s/2, Math.PI/2, Math.PI, true); // anticlockwise from up to left
// bottom-right arc
context.arc(x + s/2, y + s/2, s/2, 0, -Math.PI/2, false); // clockwise from right to down
Wait, the first arc draws the top-left quadrant's edge, and the second the bottom-right's.
Then, you would have two quarter circles forming a line from the top-left to bottom-right.
Similarly, for state 1, the arcs would be in the top-right and bottom-left quadrants.
This might work. Let's try to code this.
Wait, but I need to make sure both arcs are part of the same path, so they can be filled.
Alternatively, stroke them separately. But perhaps using ctx.stroke() after each.
Alternatively, maybe it's better to use the arc for the two quarter circles forming a diagonal line.
Alternatively, forget the math and use a simpler approach where each state is a diagonal line with rounded edges. But that might not be accurate.
Alternatively, let me think of the classic Truchet tile: it has two quarter circles in opposite corners, which when combined with adjacent tiles create a continuous curve.
The key is that each tile has two arcs that form a 180-degree curve through the tile's diagonal.
So, for state 0, the arcs are in the top-left and bottom-right quadrants, forming a curve from top-left to bottom-right.
For state 1, the arcs are in the top-right and bottom-left quadrants, forming a curve from top-right to bottom-left.
Thus, each tile has a diagonal line through it, either left-right or right-left, made of two quarter-circles.
To draw that:
For state 0:
First arc (top-left quadrant):
Center is the center of the cell.
Start angle: Math.PI/2 (up)
End angle: Math.PI (left)
Clockwise? Or anticlockwise.
Wait, if we move anticlockwise from up to left, that's a 90-degree arc.
Then the second arc (bottom-right quadrant):
Start angle: 0 (right)
End angle: -Math.PI/2 (down)
Anticlockwise? If anticlockwise is set to false (clockwise), then this arc would go from right to down, forming the bottom-right quadrant.
So:
context.beginPath();
context.arc(x + s/2, y + s/2, s/2, Math.PI/2, Math.PI, true); // anticlockwise
context.arc(x + s/2, y + s/2, s/2, 0, -Math.PI/2, false); // clockwise
context.closePath();
context.stroke();
Wait, but this would connect the two arcs into a single path. The first arc goes from up to left (top-left), the second from right to down (bottom-right). The path would start at the end of the first arc (left point) then jump to the start of the second arc (right point), then draw to the down point. To close the path, it would connect back, but that might not look right.
Alternatively, perhaps just two separate arcs.
Alternatively, perhaps the first arc is the top-left quarter, and the second is the bottom-right's, but drawn as a continuous path.
Alternatively, maybe I should draw the top-left arc and then the bottom-right arc, each as separate paths.
Alternatively, perhaps it's easier to just draw a single bezier curve or something, but I think I need to proceed with this approach.
Once the drawing is properly handled, the next step is to create a grid of these tiles, each randomly choosing state 0 or 1 (or more states if we want, but let's stick to 2 for simplicity). However, the user asked for creating the pattern, so maybe it's a grid of these tiles with randomized states, leading to a continuous curve.
But since the user just said "Create the pattern", perhaps they want code that generates this Truchet tile pattern.
Alternatively, maybe the user wants a description or an image, but since this is a text-based response, code is appropriate.
The user's instruction is to "Create the pattern", so I should write code that generates it.
Putting it all together:
Here's a plan for the JavaScript code:
- Set up a canvas.
- Define the size, number of tiles, and tile size.
- Iterate over each cell in a grid.
- For each cell, decide its state (0 or 1).
- Depending on the state, draw the corresponding arcs.
- Ensure that adjacent tiles' arcs connect smoothly.
Wait, but how do the states work for adjacent tiles? To get continuous curves, adjacent tiles must alternate states? Or maybe the states are randomized but the connections are left as is.
But the classic Truchet tiling has continuous curves when tiles are arranged with certain rules, but for a random pattern, it might not be continuous. The user might just want a random grid of the two states, forming a pattern.
So, proceeding with code that draws a grid of tiles, each with a random state (0 or 1), and each tile draws either the left-right diagonal or right-left diagonal arcs.
Implementing this:
The code would look like this:
<canvas id="myCanvas"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const tileCount = 10;
const tileSize = 40;
canvas.width = tileCount * tileSize;
canvas.height = tileCount * tileSize;
function drawTile(x, y, state) {
const centerX = x + tileSize/2;
const centerY = y + tileSize/2;
const radius = tileSize/2;
ctx.beginPath();
if (state === 0) {
// Draw top-left and bottom-right arcs
ctx.arc(centerX, centerY, radius, Math.PI/2, Math.PI, true); // top-left arc
ctx.arc(centerX, centerY, radius, 0, -Math.PI/2, false); // bottom-right arc
} else {
// Draw top-right and bottom-left arcs
ctx.arc(centerX, centerY, radius, 0, -Math.PI/2, true); // top-right arc
ctx.arc(centerX, centerY, radius, Math.PI, 3*Math.PI/2, false); // bottom-left arc
}
ctx.stroke();
}
for (let i = 0; i < tileCount; i++) {
for (let j = 0; j < tileCount; j++) {
const x = i * tileSize;
const y = j * tileSize;
const state = Math.random() < 0.5 ? 0 : 1;
drawTile(x, y, state);
}
}
</script>
Wait, but in the else clause for state 1, the arcs are supposed to be in the top-right and bottom-left quadrants.
For top-right quadrant's arc:
Starting angle 0 (right), going to -Math.PI/2 (down), but anticlockwise? If anticlockwise is true, then from 0 to -Math.PI/2 would be clockwise?
Wait, maybe for state 1:
Top-right arc:
Start angle 0 (right), end angle Math.PI/2 (up), anticlockwise?
Wait, I need to adjust the parameters.
Alternatively, for state 1 (top-right and bottom-left):
First arc: top-right quadrant:
Start at angle 0 (right), end at -Math.PI/2 (down), clockwise (anticlockwise = false).
Second arc: bottom-left quadrant:
Start at Math.PI (left), end at Math.PI/2 (up), anticlockwise?
Wait, let's think:
First arc (top-right):
Center at (x + s/2, y + s/2), radius s/2.
Start angle 0 (points to the right), end angle -Math.PI/2 (points down), going clockwise (so anticlockwise = false).
This would sweep from right to down, forming a quarter circle in the bottom-right quadrant? Hmm no.
Wait, perhaps the top-right quadrant's arc is from 0 to Math.PI/2 anticlockwise (so up direction), so:
Start angle 0, end angle Math.PI/2, anticlockwise true.
That would create a quarter circle in the top-right quadrant.
Second arc (bottom-left quadrant):
Start angle Math.PI (left), end angle 3*Math.PI/2 (down), anticlockwise true.
Wait, but I'm not sure.
Alternatively, perhaps for state 1 the two arcs are:
First: top-right quadrant, arc from 0 to Math.PI/2 (up), anticlockwise.
Second: bottom-left quadrant, arc from Math.PI to 3*Math.PI/2, anticlockwise.
This way, the two arcs form a diagonal from top-right to bottom-left.
So the code would be:
else {
// top-right arc: from 0 to Math.PI/2 anticlockwise
ctx.arc(centerX, centerY, radius, 0, Math.PI/2, true);
// bottom-left arc: from Math.PI to 3*Math.PI/2 anticlockwise
ctx.arc(centerX, centerY, radius, Math.PI, 3*Math.PI/2, true);
}
But then, those two arcs would form a line from top-right to bottom-left.
Wait, but connecting them?
The first arc goes from (right to up direction), but the path is from angle 0 to Math.PI/2, which is a quarter circle in the top-right quadrant.
The second arc goes from Math.PI (left) to 3*Math.PI/2 (down), which is the bottom-left quadrant.
So the two arcs create two separate quarter circles, forming a diagonal from top-right to bottom-left but not connected.
Hmm, perhaps this approach won't connect them into a continuous line.
Maybe I need to have the two arcs form a continuous path.
Wait, when you draw two arcs in the same path, they will be connected by a straight line unless you use moveTo.
Wait, but in the code above, the two arcs are part of the same path. So the first arc ends at Math.PI/2 (up direction), then the second arc starts at Math.PI (left direction), so the path draws from up to left, which is a line, then the second arc is drawn.
But that might not look right.
Alternatively, maybe each tile's state chooses between two diagonal directions, and the actual path is a single line connecting two opposite corners with two arc segments.
Wait, perhaps the two arcs are parts of a single continuous curve.
Let me think of the top-left and bottom-right case (state 0):
The first arc starts at the top of the tile (angle Math.PI/2) and goes counter-clockwise to the left side (angle Math.PI). That's a 90-degree arc in the top-left quadrant.
Then the second arc starts at the right side (angle 0) and goes clockwise to the bottom (angle -Math.PI/2). This is a 90-degree arc in the bottom-right quadrant.
The combined path would start at the top, go to the left, then jump to the right and go to the bottom, but that's not a continuous line.
Hmm, maybe my approach is incorrect.
Alternatively, perhaps the arcs need to be drawn in a way that they form a single continuous curve from one corner to the opposite.
Wait, maybe each tile has two arcs that together form a semicircle along a diagonal.
Alternatively, perhaps each tile has a curve that goes from one corner to the opposite, with a smooth transition.
Wait, maybe the correct way to draw the two arcs is:
For state 0 (top-left to bottom-right):
First arc is from angle Math.PI/2 (top) to angle 3*Math.PI/2 (bottom), but that's a full half.
Wait, this is getting too complicated. Maybe I should look for an example or a better way.
Alternatively, I'll proceed with code that draws arcs in opposite quadrants for each state, even if they aren't fully connected, as it will still form the Truchet pattern.
The key is that each tile has a diagonal with rounded corners, forming a continuous pattern when tiled.
Alternatively, perhaps the arcs should be drawn as follows:
For state 0:
- First arc: from the top edge to the left edge, sweeping clockwise.
- Second arc: from the right edge to the bottom edge, sweeping counter-clockwise.
Wait, not sure.
Alternatively, perhaps the code I initially wrote is sufficient to create the pattern, even if the arcs aren't connected into a single path.
Perhaps the user just wants the basic pattern, so I'll proceed with that.
Another issue: in the code above, after drawing the two arcs, there's a ctx.stroke(). However, in JavaScript, the stroke() is called after beginning a path, adding two arcs, but when you have two arcs in the same path, the stroke will draw both.
Wait, in the drawTile function, the code is:
ctx.beginPath();
then two arc() calls.
Then ctx.stroke();
So the path includes both arcs, so they will be stroked together.
The first arc (for state 0) from Math.PI/2 to Math.PI is the top-left quadrant's arc.
Second arc from 0 to -Math.PI/2 is the bottom-right quadrant's arc.
But how do these look visually?
First arc:
Starting at Math.PI/2 (top of the circle), moving counter-clockwise (because anticlockwise is true) to Math.PI (left side of the circle). So this is a 90-degree arc from top to left.
Second arc:
Starting at 0 (right side), moving clockwise (since anticlockwise is false) to -Math.PI/2 (which is equivalent to 3*Math.PI/2, pointing down). So this is a 90-degree arc from right to down.
So together, they form two separate quarter circles in the top-left and bottom-right quadrants.
Similarly, for state 1:
First arc (top-right quadrant): angle 0 to Math.PI/2, counter-clockwise:
Start at right, move up to top.
Second arc: angle Math.PI to 3*Math.PI/2 (counter-clockwise):
Start at left, move down to bottom.
These form two quarter circles in the top-right and bottom-left quadrants.
Thus, each tile has two quarter circles in diagonal opposite quadrants.
When these are arranged in a grid, the adjacent tiles' arcs can form continuous lines if their states are coordinated. But since the states are randomized, it will create a random pattern with broken and continuous curves.
This is the standard Truchet tiling pattern.
So the code should work.
I can also add colors instead of just strokes.
Alternatively, fill the paths.
Wait, but the path for each tile is two separate arcs, so filling them would not create a filled shape. So perhaps it's better to stroke.
Alternatively, to make it more defined, set strokeStyle to a color.
Putting it all together, here's the code with some styling:
<canvas id="myCanvas"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const tileCount = 12;
const tileSize = 30;
canvas.width = tileCount * tileSize;
canvas.height = tileCount * tileSize;
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
function drawTile(x, y, state) {
const centerX = x + tileSize / 2;
const centerY = y + tileSize / 2;
const radius = tileSize / 2;
ctx.beginPath();
if (state === 0) {
// Top-left and bottom-right arcs
// Top-left arc: from top (PI/2) to left (PI), anticlockwise
ctx.arc(centerX, centerY, radius, Math.PI / 2, Math.PI, true);
// Bottom-right arc: from right (0) to bottom (-PI/2), clockwise
ctx.arc(centerX, centerY, radius, 0, -Math.PI / 2, false);
} else {
// Top-right and bottom-left arcs
// Top-right arc: from right (0) to top (PI/2), anticlockwise
ctx.arc(centerX, centerY, radius, 0, Math.PI / 2, true);
// Bottom-left arc: from left (PI) to bottom (3PI/2), anticlockwise
ctx.arc(centerX, centerY, radius, Math.PI, (3 * Math.PI) / 2, true);
}
ctx.stroke();
}
for (let i = 0; i < tileCount; i++) {
for (let j = 0; j < tileCount; j++) {
const x = i * tileSize;
const y = j * tileSize;
const state = Math.random() < 0.5 ? 0 : 1;
drawTile(x, y, state);
}
}
</script>
This should generate a Truchet tile pattern where each tile has either the top-left and bottom-right arcs or the top-right and bottom-left arcs, creating a random pattern of curves.
I can test this code in a browser to see if it works, but since I can't do that here, I'll proceed with this as the answer.```html
<!DOCTYPE html><html><body style="margin:0;background:#fff;display:flex;justify-content:center;align-items:center;height:100vh"><canvas id=c></canvas><div id=i style="position:absolute;top:20px;left:20px;font-family:sans-serif"></div><script>
const c=document.getElementById('c'),ctx=c.getContext('2d'),size=500,gridSize=16,tileCount=gridSize*gridSize,crossFadeFrames=4;
let grid=[],changing=[],frame=0;
function init(){
c.width=size;c.height=size;ctx.lineCap='round';
grid=[];changing=[];frame=0;
for(let y=0;y<gridSize;y++){
grid[y]=[];changing[y]=[];
for(let x=0;x<gridSize;x++){
grid[y][x]={o:Math.random()>0.5,rot:Math.random()>0.5,
r:Math.random(),g:Math.random(),b:Math.random(),
changeFrame:-1,newR:0,newG:0,newB:0};
}
}
}
function createTile(x,y,o,rot,r,g,b){
const side=size/gridSize;
ctx.beginPath();
if(o){
ctx.arc(x+side/2,y+side/2,side/2,-Math.PI/2,0);
ctx.arc(x+side/2,y+side/2,side/2,Math.PI,Math.PI/2);
}else{
ctx.arc(x+side/2,y+side/2,side/2,0,Math.PI/2);
ctx.arc(x+side/2,y+side/2,side/2,Math.PI/2,Math.PI);
}
if(rot)ctx.translate(side,0);else ctx.translate(0,0);
ctx.strokeStyle=`hsl(${r*360},${g*100}%,${b*100}%)`;
ctx.stroke();if(rot)ctx.translate(-side,0);
}
function drawFrame(){
frame++;
for(let y=0;y<gridSize;y++){
for(let x=0;x<gridSize;x++){
const t=grid[y][x];
if(t.changeFrame>frame-crossFadeFrames){
let p=(t.changeFrame+crossFadeFrames-frame)/crossFadeFrames;
const r=t.r*(1-p)+t.newR*p;
const g=t.g*(1-p)+t.newG*p;
const b=t.b*(1-p)+t.newB*p;
createTile(x*size/gridSize,y*size/gridSize,t.o,t.rot,r,g,b);
}else{
createTile(x*size/gridSize,y*size/gridSize,t.o,t.rot,t.r,t.g,t.b);
}
}
}
}
function updateTiles(){
const numToChange=Math.floor(tileCount/10)+Math.random()*5;
for(let i=0;i<numToChange;i++){
const y=Math.floor(Math.random()*gridSize);
const x=Math.floor(Math.random()*gridSize);
if(changing[y][x]==frame-2)continue;
changing[y][x]=frame;
grid[y][x].changeFrame=frame;
grid[y][x].newR=Math.random();
grid[y][x].newG=Math.random();
grid[y][x].newB=Math.random();
}
}
function animate(){
ctx.clearRect(0,0,size,size);
updateTiles();
drawFrame();
document.getElementById('i').textContent=`Grid: ${gridSize}x${gridSize}, Tiles flipped: ${Math.floor(frame/2)}`;
requestAnimationFrame(animate);
}
init();animate();
</script></body></html>
```<!doctype html><html><head><meta charset=utf-8><title>Truchet Flow</title><style>html,body{margin:0;height:100%;overflow:hidden;background:#111;color:#eee;font:14px monospace}canvas{display:block}#h{position:fixed;left:12px;top:10px;background:#0008;padding:6px 9px;border-radius:6px}</style></head><body><canvas id=c></canvas><div id=h></div><script>
let C=c.getContext('2d'),W,H,S,N,M,g,o,f=[],t=0,done=0,life=0;function R(){W=c.width=innerWidth;H=c.height=innerHeight;S=Math.max(22,Math.min(54,(W*H/900|0)**.5));N=Math.ceil(W/S);M=Math.ceil(H/S);g=Array(N*M).fill(0).map(_=>Math.random()<.5?0:1);o=g.slice();f=[];done=0;life=0}onresize=R;R();function tile(x,y,v,a){let px=x*S,py=y*S,r=S/2;C.globalAlpha=a;C.strokeStyle='hsl('+(170+80*Math.sin((x*17+y*23+t)*.02))+',85%,62%)';C.lineWidth=Math.max(3,S*.16);C.lineCap='round';C.beginPath();if(v){C.arc(px,py,r,0,Math.PI/2);C.arc(px+S,py+S,r,Math.PI,Math.PI*1.5)}else{C.arc(px+S,py,r,Math.PI/2,Math.PI);C.arc(px,py+S,r,Math.PI*1.5,Math.PI*2)}C.stroke();C.globalAlpha=1}function step(){t++;life++;C.fillStyle='rgba(13,14,16,.36)';C.fillRect(0,0,W,H);let k=Math.max(1,(N*M/420|0));for(let i=0;i<k;i++){let p=Math.random()*N*M|0;if(!f.some(e=>e.p==p)){o[p]=g[p];g[p]^=1;f.push({p:p,a:0});done++}}for(let y=0;y<M;y++)for(let x=0;x<N;x++){let p=y*N+x,e=f.find(q=>q.p==p);if(e){tile(x,y,o[p],1-e.a);tile(x,y,g[p],e.a)}else tile(x,y,g[p],1)}f=f.filter(e=>(e.a+=.055)<1);h.textContent=N+' x '+M+' grid | '+done+' tiles flipped';if(life>3600)R();requestAnimationFrame(step)}step();
</script></body></html><!DOCTYPE html><html><head><meta charset="utf-8"><title>Truchet</title>
<style>html,body{margin:0;background:#0b0e14;overflow:hidden}canvas{display:block}#h{position:fixed;top:8px;left:10px;color:#8fe3ff;font:13px monospace;text-shadow:0 0 6px #000}</style>
</head><body><canvas id="c"></canvas><div id="h"></div>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d'),h=document.getElementById('h');
let W,H,cols,rows,S=42,tiles,flips,t0;
function mk(){
W=cv.width=innerWidth;H=cv.height=innerHeight;
cols=Math.ceil(W/S)+1;rows=Math.ceil(H/S)+1;
tiles=new Array(cols*rows);
for(let i=0;i<tiles.length;i++)tiles[i]={o:Math.random()<.5?0:1,tr:null};
flips=0;t0=performance.now();
}
function draw(px,py,o,a){
g.globalAlpha=a;g.beginPath();
if(o===0){
g.moveTo(px+S/2,py);g.arc(px,py,S/2,0,Math.PI/2);
g.moveTo(px+S/2,py+S);g.arc(px+S,py+S,S/2,Math.PI,Math.PI*1.5);
}else{
g.moveTo(px+S/2,py);g.arc(px+S,py,S/2,Math.PI,Math.PI/2,true);
g.moveTo(px+S/2,py+S);g.arc(px,py+S,S/2,0,-Math.PI/2,true);
}
g.stroke();
}
mk();
addEventListener('resize',mk);
const DUR=380;
function tick(now){
if(now-t0>32000)mk();
const n=1+Math.floor(Math.random()*4);
for(let k=0;k<n;k++){
const idx=Math.floor(Math.random()*tiles.length),tl=tiles[idx];
if(!tl.tr)tl.tr={from:tl.o,to:1-tl.o,st:now};
}
g.fillStyle='#0b0e14';g.fillRect(0,0,W,H);
g.lineWidth=2.4;g.lineCap='round';g.strokeStyle='#7fd9ff';
for(let r=0;r<rows;r++)for(let c=0;c<cols;c++){
const idx=r*cols+c,tl=tiles[idx],px=c*S,py=r*S;
if(tl.tr){
const p=(now-tl.tr.st)/DUR;
if(p>=1){tl.o=tl.tr.to;tl.tr=null;flips++;draw(px,py,tl.o,1);}
else{draw(px,py,tl.tr.from,1-p);draw(px,py,tl.tr.to,p);}
}else draw(px,py,tl.o,1);
}
g.globalAlpha=1;
h.textContent='Truchet grid '+cols+'x'+rows+' ('+(cols*rows)+' tiles) | flipped: '+flips;
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
</script></body></html><!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><style>body{margin:0;background:#000;display:flex;justify-content:center;align-items:center;height:100vh}canvas{border:1px solid #333}#i{position:absolute;top:10px;left:10px;color:#fff;font-family:monospace;font-size:12px}</style></head>
<body>
<canvas id="c"></canvas>
<div id="i">Grid: 20x20 | Flipped: <span id="f">0</span></div>
<script>
const c=document.getElementById('c'),ctx=c.getContext('2d');
c.width=600;c.height=600;
const g=20;const s=c.width/g;let tiles=new Uint8Array(g*g),flipped=0,time=0;
for(let i=0;i<g*g;i++)tiles[i]=Math.random()>0.5?1:0;
function f(){time+=0.016;if(Math.random()<0.05){const idx=Math.floor(Math.random()*g*g);tiles[idx]=1-tiles[idx];flipped++;}
ctx.fillStyle='#000';ctx.fillRect(0,0,c.width,c.height);ctx.strokeStyle='#333';ctx.lineWidth=0.5;
for(let y=0;y<g;y++){for(let x=0;x<g;x++){const idx=y*g+x;const o=tiles[idx];const px=x*s,py=y*s;ctx.fillStyle='#111';ctx.fillRect(px,py,s,s);ctx.strokeStyle='#222';ctx.strokeRect(px,py,s,s);
ctx.strokeStyle='#0af';ctx.lineWidth=1.5;ctx.beginPath();if(o===0){ctx.arc(px,py,s/2,0,Math.PI*2);}else{ctx.arc(px+s,py,s/2,0,Math.PI*2);}ctx.stroke();}}
document.getElementById('f').textContent=flipped;requestAnimationFrame(f);}
f();
</script>
</body>
</html>| Model | Blind score | Latency | Status |
|---|---|---|---|
| qwen3:8b | — | — | harness |
| deepseek-r1:14b | — | — | DNF |
| llama3.1:8b | — | 5.6 s | OK |
| qwen3.5:9b | — | 24.5 s | OK |
| qwen3-coder:30b | — | 31.8 s | OK |
| gemma4:26b | — | — | harness |
| qwen3:14b | — | 25.3 s | OK |
| mistral-small:24b | — | 113.6 s | OK |
| command-r:35b | — | 61.0 s | OK |
| qwq:32b | — | 248.1 s | OK |
| deepseek-r1:32b | — | 36.0 s | OK |