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 animates a circular ring buffer on a <canvas>: draw about 16-20 fixed slots arranged in a circle, with a producer pointer and a consumer pointer both moving clockwise around the ring at different, independently and randomly varying rates — the producer fills the next empty slot behind it with a coloured block whenever it is ahead of the consumer and the buffer is not full, and the consumer clears the slot it reaches whenever there is data waiting, so filled and empty slots visibly chase each other around the ring. Colour the filled slots based on how close the buffer is to overflowing (green when mostly empty, yellow around half full, red when nearly full), and briefly flash a distinct warning colour across the whole ring on the rare occasions the producer catches up to the consumer with no free slot left. Show the current fill level (filled slots out of the total). 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>
<head>
<style>
body {
margin: 0;
background-color: #f2f2f2;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script>
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = 400;
canvas.height = 200;
var ctx = canvas.getContext('2d');
var slots = Math.floor(Math.random() * (16 - 20)) + 16;
var buffer = new Array(slots).fill(0);
var producerPos = 0;
var consumerPos = Math.floor(Math.random() * (slots - 10)) + 5;
var fillerLevel = 0;
function fillSlot(pos) {
ctx.fillStyle = getFillColour();
ctx.fillRect(pos * 20, canvas.height / 2 - 10, 15, 20);
}
function clearSlot(pos) {
ctx.clearRect(pos * 20, canvas.height / 2 - 10, 15, 20);
}
function update() {
fillerLevel = buffer.filter(v => v === 1).length;
if (producerPos < consumerPos && producerPos + 1 !== slots && slots > buffer.length) {
buffer[producerPos] = 1;
fillSlot(producerPos);
}
if (consumerPos > producerPos && buffer.some((v, i) => v === 1)) {
clearSlot(consumerPos);
buffer[consumerPos] = 0;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < slots; i++) {
var pos = (producerPos - consumerPos + slots) % slots;
if (buffer[pos] === 1) {
fillSlot(pos);
} else {
clearSlot(pos);
}
}
ctx.fillStyle = '#000';
ctx.font = '14px Arial';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText('Fill level: ' + fillerLevel + '/' + slots, 10, 16);
var warning = Math.random() < 0.02 && buffer.some((v, i) => v === 1) && producerPos >= consumerPos;
if (warning) {
ctx.fillStyle = '#f00';
ctx.fillRect(0, canvas.height / 2 - 10, canvas.width, 20);
}
producerPos += Math.floor(Math.random() * 5 + 1);
if (producerPos === slots) {
producerPos = 0;
}
consumerPos += Math.floor(Math.random() * 3 + 1);
if (consumerPos >= slots) {
consumerPos = 0;
}
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>
``````html
<!DOCTYPE html>
<html>
<head>
<title>Ring Buffer Animator</title>
<style>
body { background: #111; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: sans-serif; color: white; }
canvas { border: 2px solid #333; background: #000; }
#status { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 10px; background: rgba(0,0,0,0.7); border-radius: 5px; font-size: 1.2em; }
</style>
</head>
<body>
<canvas id="bufferCanvas" width="600" height="400"></canvas>
<div id="status"></div>
<script>
const canvas = document.getElementById('bufferCanvas');
const ctx = canvas.getContext('2d');
const statusDiv = document.getElementById('status');
let BUFFER_SIZE = 18;
let slots = Array(BUFFER_SIZE).fill(false); // false = empty, true = filled
let prodIndex = Math.floor(Math.random() * BUFFER_SIZE);
let consIndex = Math.floor(Math.random() * BUFFER_SIZE);
let animationFrameId;
// Animation state variables
let speedP = 0.05 + Math.random() * 0.1; // Random base speed for Producer
let speedC = 0.03 + Math.random() * 0.08; // Random base speed for Consumer
let flashActive = false;
function drawRing(fillLevel) {
const R = 250;
const CX = canvas.width / 2;
const CY = canvas.height / 2 + 30;
const numSlots = BUFFER_SIZE;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw the invisible ring path (optional visual guide)
ctx.beginPath();
ctx.arc(CX, CY, R, Math.PI * 0.95, Math.PI * 2.05);
ctx.strokeStyle = '#333';
ctx.stroke();
// Calculate slot angle spacing
const angleStep = (Math.PI / numSlots) * 1.2; // Slightly open up the ends for readability
for (let i = 0; i < numSlots; i++) {
const angle = Math.PI - (i * angleStep);
const x = CX + R * Math.cos(angle);
const y = CY + R * Math.sin(angle);
// Draw the slot background/data visualization
ctx.save();
ctx.translate(x, y);
ctx.rotate(Math.PI / 2); // Orient drawing correctly for circular layout
let color;
if (slots[i]) {
const fillRatio = fillLevel / BUFFER_SIZE;
if (fillRatio < 0.25) {
color = '#4CAF50'; // Green (mostly empty)
} else if (fillRatio < 0.75) {
color = '#FFC107'; // Yellow (half full)
} else {
color = '#F44336'; // Red (nearly full)
}
} else {
color = '#222'; // Empty slot color
}
ctx.fillStyle = color;
ctx.beginPath();
// Draw a small block representing the slot data
ctx.arc(0, 0, 15, 0, Math.PI * 2);
ctx.fill();
ctx.strokeStyle = '#111';
ctx.lineWidth = 1;
ctx.stroke();
// Draw the indices
ctx.fillStyle = '#AAA';
ctx.textAlign = 'center';
ctx.fillText(`${i}`, 0, -25);
ctx.restore();
}
let fillLevelCount = slots.filter(s => s).length;
const fillRatio = fillLevelCount / numSlots;
// Draw Pointers (Producer and Consumer)
function drawPointer(x, y, color, label) {
ctx.save();
ctx.translate(x, y);
if (!color) return;
ctx.rotate(Math.PI / 2); // Align pointer direction
ctx.strokeStyle = color;
ctx.lineWidth = 4;
ctx.beginPath();
// Draw a small arrow shape
ctx.moveTo(-10, -5);
ctx.lineTo(10 * Math.cos(-Math.PI / 2), 10 * Math.sin(-Math.PI / 2));
ctx.lineTo(10, 5);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
// Draw a small circle marker at the tip
ctx.beginPath();
ctx.arc(0, 0, 6, 0, Math.PI * 2);
ctx.strokeStyle = 'white';
ctx.lineWidth = 2;
ctx.stroke();
ctx.restore();
}
// Calculate coordinates for pointers (using the same logic as slots)
const getCoords = (i) => {
const angle = Math.PI - (i * angleStep);
return { x: CX + R * Math.cos(angle), y: CY + R * Math.sin(angle) };
};
// Get pointer positions
const pPos = getCoords(prodIndex);
const cPos = getCoords(consIndex);
let prodColor = 'cyan';
let consColor = 'magenta';
if (flashActive) {
ctx.fillStyle = 'rgba(255, 100, 0, 0.8)'; // Warning orange flash
ctx.globalAlpha = Math.sin(Date.now() / 100) * 0.5 + 0.5; // Pulsing effect
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
drawPointer(pPos.x, pPos.y, prodColor, 'Producer');
drawPointer(cPos.x, cPos.y, consColor, 'Consumer');
// Update Status Bar
const filledCount = slots.filter(s => s).length;
statusDiv.innerHTML = `
Fill Level: ${filledCount} / ${BUFFER_SIZE}<br>
Producer Index: ${prodIndex} | Consumer Index: ${consIndex}
`;
}
function updateState() {
let changed = false;
// 1. Producer Logic (Try to fill slot at prodIndex)
if (!flashActive && !slots[prodIndex]) {
// Only produce if the buffer isn't full and the spot is empty
if (Math.random() < speedP * 0.5) { // Rate control
slots[prodIndex] = true;
changed = true;
}
}
// 2. Consumer Logic (Try to clear slot at consIndex)
if (!flashActive && slots[consIndex]) {
// Only consume if the buffer isn't empty and the spot is filled
if (Math.random() < speedC * 0.5) { // Rate control
slots[consIndex] = false;
changed = true;
}
}
// 3. Pointer Movement Logic
prodIndex = (prodIndex + Math.floor(speedP * 10)) % BUFFER_SIZE;
consIndex = (consIndex - Math.floor(speedC * 10)) % BUFFER_SIZE; // Cons moves backwards for visual effect
// Handle negative indices from modulo operation
if (consIndex < 0) {
consIndex += BUFFER_SIZE;
}
// Check for Overflow Warning: Producer caught up AND no free space
const emptySlots = slots.filter(s => !s).length;
const isBlocked = prodIndex === consIndex && emptySlots === 0;
flashActive = isBlocked ? true : false;
drawRing(slots.filter(Boolean).length);
// Loop
animationFrameId = requestAnimationFrame(updateState);
}
// Start the animation
updateState();
</script>
</body>
</html>
``````html
<!DOCTYPE html>
<html><body style="display:flex;justify-content:center;align-items:center;margin:0;height:100vh;background:#202020;">
<canvas id=c></canvas>
<div id=stats></div>
<script>
function main() {
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const stats = document.getElementById('stats');
let width, height, radius;
let totalSlots = 16;
let producerSpeed = 0.03;
let consumerSpeed = 0.02;
let producerPointer = 0;
let consumerPointer = 0;
let filledCount = 0;
let gameOver = false;
function init() {
width = canvas.width = window.innerWidth > 500 ? 400 : 300;
height = canvas.height = width;
radius = Math.min(width, height) / 2 - 10;
producerSpeed = (Math.random() * 0.05 + 0.02).toFixed(3);
consumerSpeed = (Math.random() * 0.04 + 0.01).toFixed(3);
producerPointer = 0;
consumerPointer = 0;
filledCount = 0;
gameOver = false;
stats.style.left = `${width - 50}px`;
}
function drawEmptySlot(angle, ctx) {
const x = width/2 + radius * Math.cos(angle);
const y = height/2 + radius * Math.sin(angle);
ctx.fillStyle = '#333';
ctx.beginPath();
ctx.arc(x, y, 8, 0, Math.PI*2);
ctx.fill();
}
function drawFilledSlot(slot) {
let level = (filledCount / totalSlots).toFixed(1);
if(level < 0.33) return '#4CAF50';
if(level < 0.67) return '#FFC107';
if(level <= 0.99) return '#F44336';
return '#FF0000';
}
function animate(timestamp) {
if(gameOver) {init();return;}
ctx.clearRect(0,0,width,height);
const centerX = width/2;
const centerY = height/2;
producerPointer += producerSpeed;
consumerPointer += consumerSpeed;
// Draw slots
for(let i=0;i<totalSlots;++i){
const angle = (i * 2 * Math.PI)/totalSlots + timestamp / 1000;
if(producerPointer >= angle &&
filledCount < totalSlots &&
producerPointer > consumerPointer) {
drawFilledSlot(i);
} else {
drawEmptySlot(angle, ctx);
}
}
// Draw pointers
const pAngle = (producerPointer % (2 * Math.PI));
const cAngle = (consumerPointer % (2 * Math.PI));
ctx.fillStyle = '#FFF';
ctx.beginPath();
ctx.arc(centerX + radius * Math.cos(pAngle), centerY + radius * Math.sin(pAngle), 5,0,Math.PI*2);
ctx.fill();
// Check collision
if(!gameOver && producerPointer >= consumerPointer) {
const nextSlot = Math.floor((producerPointer * totalSlots)/(2*Math.PI));
if(nextSlot % totalSlots === (filledCount % totalSlots)) {
gameOver = true;
filledCount = 0;
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,width,height);
requestAnimationFrame(init);
}
}
// Draw stats
stats.textContent = `${Math.round(filledCount)} / ${totalSlots}`;
requestAnimationFrame(animate);
}
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
ctx.scale(width/200, height/200);
init();
}
window.addEventListener('resize', resize);
init();
animate(0);
}
main();
</script>
</body></html>
``````html
<!DOCTYPE html>
<html><head><title>Ring Buffer Animation</title></head><body style="background-color:#111;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;font-family:monospace;color:white;"><canvas id="canvas" width="600" height="300" style="border:2px solid #444;"></canvas><div id="status" style="margin-top: 10px;"></div><script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const statusDiv = document.getElementById('status');
const SLOTS = 18;
const RADIUS = 200;
const CENTER_X = canvas.width / 2;
const CENTER_Y = canvas.height / 2;
const SLOT_ANGLE_STEP = (Math.PI * 2) / SLOTS;
let slots = Array(SLOTS).fill(false); // false = empty, true = filled
let pIndex = 0; // Producer index
let cIndex = 0; // Consumer index
let pAngle = Math.random() * Math.PI * 2;
let cAngle = Math.random() * Math.PI * 2;
// Movement rates (radians per frame)
const P_SPEED = (Math.random() * 0.05 + 0.01);
const C_SPEED = (Math.random() * 0.05 + 0.01);
let warningActive = false;
let lastTime = performance.now();
function drawRing() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background ring structure and fill level color overlay
for (let i = 0; i < SLOTS; i++) {
const angle = i * SLOT_ANGLE_STEP - Math.PI / 2;
const x1 = CENTER_X + (RADIUS - 8) * Math.cos(angle);
const y1 = CENTER_Y + (RADIUS - 8) * Math.sin(angle);
const x2 = CENTER_X + (RADIUS + 8) * Math.cos(angle);
const y2 = CENTER_Y + (RADIUS + 8) * Math.sin(angle);
ctx.fillStyle = slots[i] ? '#333' : '#1a1a1a';
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = '#444';
ctx.lineWidth = 2;
ctx.stroke();
}
// Determine fill level color (Green -> Yellow -> Red)
const filledCount = slots.filter(s => s).length;
let fillColor = '#0f0'; // Green (Empty/Low)
if (filledCount / SLOTS > 0.75) {
fillColor = '#ff4400'; // Red (High)
} else if (filledCount / SLOTS > 0.3) {
fillColor = '#ffff00'; // Yellow (Medium)
}
// Draw fill level gradient/overlay
ctx.strokeStyle = fillColor;
ctx.lineWidth = 25;
ctx.beginPath();
ctx.arc(CENTER_X, CENTER_Y, RADIUS + 10, Math.PI * 1.75, Math.PI * 2 + 0.25);
ctx.stroke();
// Draw slots content and pointers
for (let i = 0; i < SLOTS; i++) {
const angle = i * SLOT_ANGLE_STEP - Math.PI / 2;
const x = CENTER_X + (RADIUS) * Math.cos(angle);
const y = CENTER_Y + (RADIUS) * Math.sin(angle);
// Slot content visualization
if (slots[i]) {
ctx.fillStyle = '#00ff88';
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI * 2);
ctx.fill();
} else if (!(warningActive && i >= pIndex && i <= cIndex)) { // Don't show empty slots if warning active
ctx.fillStyle = 'transparent';
}
}
// Draw Pointers
const drawPointer = (x, y, color) => {
ctx.strokeStyle = color;
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(CENTER_X, CENTER_Y);
ctx.lineTo(x, y);
ctx.stroke();
};
// Calculate pointer positions based on angles (adjusted to slot indices)
const pX = CENTER_X + RADIUS * Math.cos(pAngle);
const pY = CENTER_Y + RADIUS * Math.sin(pAngle);
drawPointer(pX, pY, '#00ffff'); // Cyan
const cX = CENTER_X + RADIUS * Math.cos(cAngle);
const cY = CENTER_Y + RADIUS * Math.sin(cAngle);
drawPointer(cX, cY, '#ff66cc'); // Magenta
// Draw warning flash overlay if active
if (warningActive) {
ctx.save();
ctx.globalAlpha = 0.5;
ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
ctx.beginPath();
ctx.arc(CENTER_X, CENTER_Y, RADIUS + 10, Math.PI * 1.75, Math.PI * 2 + 0.25);
ctx.fill();
ctx.restore();
}
}
function updateState() {
let filledCount = slots.filter(s => s).length;
const freeSlots = SLOTS - filledCount;
// --- Producer Logic ---
pIndex = Math.floor((pAngle / SLOT_ANGLE_STEP) % SLOTS);
if (freeSlots > 0 && pIndex !== cIndex) {
slots[pIndex] = true; // Fill the slot
}
// --- Consumer Logic ---
cIndex = Math.floor((cAngle / SLOT_ANGLE_STEP) % SLOTS);
if (slots[cIndex]) {
slots[cIndex] = false; // Clear the slot
}
// --- Movement Update ---
pAngle += P_SPEED;
cAngle -= C_SPEED;
// Handle wrap-around for angles
if (pAngle > Math.PI * 2) pAngle -= Math.PI * 2;
if (cAngle < 0) cAngle += Math.PI * 2;
// --- Warning State Logic ---
const isFullAndBlocked = freeSlots === 0 && pIndex !== cIndex && slots[pIndex] === false;
warningActive = isFullAndBlocked && Math.random() < 0.15; // Flashing probability
// Update status display
let statusText = `Buffer Fill Level: ${filledCount}/${SLOTS} (${Math.round((filledCount/SLOTS)*100)}%)`;
if (warningActive) {
statusText += "<br><span style='color:red;'>!! OVERFLOW WARNING !! Producer is blocked.</span>";
} else if (freeSlots === 0) {
statusText += "<br><span style='color:orange;'>Buffer Full. Waiting for Consumer...</span>";
} else {
statusText += "";
}
statusDiv.innerHTML = statusText;
// Cycle pIndex and cIndex to ensure they always point to the nearest slot index
// relative to their calculated angles, which is used for array access.
}
function animate(timestamp) {
const deltaTime = timestamp - lastTime;
lastTime = timestamp;
if (deltaTime > 0) {
updateState();
drawRing();
}
requestAnimationFrame(animate);
}
// Start animation loop
animate(performance.now());
</script></body></html>
``````html
<!DOCTYPE html>
<html><head><title>Ring Buffer Animator</title></head><body style="display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222;"><canvas id="ringCanvas" width="600" height="300" style="border: 1px solid #444;"></canvas><script>
const canvas = document.getElementById('ringCanvas');
const ctx = canvas.getContext('2d');
let N = 20; // Number of slots
let centerX = canvas.width / 2;
let centerY = canvas.height / 2 + 30;
let radius = Math.min(canvas.width, canvas.height) * 0.4;
let slotAngleStep = (Math.PI * 2) / N;
// State variables
let slots = new Array(N).fill(false); // true = filled, false = empty
let pIndex = 0; // Producer pointer index
let cIndex = 0; // Consumer pointer index
let lastTime = performance.now();
// Rates (slower movement for visibility)
let pRate = Math.random() * 0.01 + 0.005;
let cRate = Math.random() * 0.01 + 0.005;
const COLORS = {
EMPTY: '#333',
GREEN_MAX: '#28a745', // Mostly empty
YELLOW_MID: '#ffc107', // Half full
RED_MIN: '#dc3545', // Nearly full
WARNING: 'rgba(255, 0, 0, 0.9)',
SLOT_BORDER: '#888'
};
function getSlotColor(fillLevel) {
let ratio = fillLevel / N;
if (ratio < 0.3) return COLORS.GREEN_MAX;
if (ratio < 0.7) return COLORS.YELLOW_MID;
return COLORS.RED_MIN;
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
let filledCount = slots.filter(s => s).length;
// Calculate global color based on fill level
const globalColor = getSlotColor(filledCount);
// Draw the ring structure and pointers first (resetting any flash)
ctx.globalAlpha = 1;
// 1. Draw slots
for (let i = 0; i < N; i++) {
const x = centerX + radius * Math.cos(i * slotAngleStep - Math.PI / 2);
const y = centerY + radius * Math.sin(i * slotAngleStep - Math.PI / 2);
ctx.beginPath();
ctx.arc(x, y, 15, 0, Math.PI * 2);
ctx.fillStyle = slots[i] ? globalColor : COLORS.EMPTY;
ctx.fill();
ctx.strokeStyle = COLORS.SLOT_BORDER;
ctx.lineWidth = 1;
ctx.stroke();
}
// 2. Draw Pointers and Status
const drawPointer = (index, color) => {
const x = centerX + radius * Math.cos(index * slotAngleStep - Math.PI / 2);
const y = centerY + radius * Math.sin(index * slotAngleStep - Math.PI / 2);
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
};
// Draw Consumer Pointer (C)
drawPointer(cIndex, 'blue');
// Draw Producer Pointer (P)
drawPointer(pIndex, 'orange');
// 3. Display Status Text
const statusText = `Filled: ${filledCount}/${N}`;
ctx.fillStyle = '#ccc';
ctx.font = '16px monospace';
ctx.fillText(statusText, 10, 25);
}
function updateSimulation(deltaTime) {
let pMoved = false;
let cMoved = false;
let overflowOccurred = false;
// --- Producer Logic ---
if (pRate * deltaTime > Math.random() * 0.15) {
pIndex = (pIndex + 1) % N;
pMoved = true;
}
// --- Consumer Logic ---
if (cRate * deltaTime > Math.random() * 0.15 && slots[cIndex]) {
slots[cIndex] = false; // Consume data
cIndex = (cIndex + 1) % N;
cMoved = true;
}
// --- Production Attempt ---
const freeSlots = slots.filter(s => !s).length;
if (freeSlots > 0 && pMoved) {
// Check if the slot behind P is empty and not already taken by C's current spot
let nextSlotIndex = (pIndex + N - 1 + N) % N; // The slot *before* P
// Condition: Producer must be ahead of consumer AND buffer must have space.
// Simplified check: If the slot before P is empty, fill it.
if (!slots[nextSlotIndex] && (pIndex !== cIndex || freeSlots > 1)) {
slots[nextSlotIndex] = true;
}
// Overflow Check: The buffer is full if there are no free slots AND P pointer would catch C's spot.
if (!freeSlots && pMoved) {
overflowOccurred = true;
}
}
// If the producer moved and its target slot was already filled (i.e., it advanced over a full slot), we might have an overflow state check.
if (pMoved && freeSlots === 0) {
const nextSlotIndex = (pIndex + N - 1 + N) % N;
if (!slots[nextSlotIndex]) {
// This block is highly unlikely given the current logic but serves as a safety check for full buffer
slots[nextSlotIndex] = true; // Force fill if theoretically possible
} else {
overflowOccurred = true;
}
}
return overflowOccurred || pMoved || cMoved;
}
function animate(timestamp) {
const deltaTime = timestamp - lastTime;
lastTime = timestamp;
// Update the state based on time elapsed
updateSimulation(deltaTime);
// Redraw and check for critical conditions
draw();
requestAnimationFrame(animate);
}
// Initialize and start
window.onload = () => {
animate(0);
};
</script></body></html>
``````html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ring Buffer Animation</title>
<style>
body {display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}
canvas {border: 1px solid black;}
</style>
</head>
<body>
<canvas id="ringBuffer" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('ringBuffer');
const ctx = canvas.getContext('2d');
const slots = 18;
const radius = 150;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const angleStep = (Math.PI * 2) / slots;
let producerIndex = 0;
let consumerIndex = 0;
let filledSlots = 0;
let bufferFullFlash = false;
function drawSlot(index, color) {
const angle = index * angleStep;
ctx.beginPath();
ctx.arc(centerX + radius, centerY, 20, angle - Math.PI / 4, angle + Math.PI / 4);
ctx.lineTo(centerX + radius, centerY);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
}
function drawRing() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < slots; i++) {
if ((i >= consumerIndex && i < producerIndex) || (producerIndex <= consumerIndex && (i >= consumerIndex || i < producerIndex))) {
drawSlot(i, 'green');
} else if ((i >= consumerIndex - filledSlots && i < producerIndex + filledSlots)) {
const color = getColorLevel(filledSlots / slots);
drawSlot(i, color);
}
}
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.stroke();
if (bufferFullFlash) {
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
const textColor = bufferFullFlash ? 'white' : 'black';
ctx.fillStyle = textColor;
ctx.font = '24px Arial';
ctx.textAlign = 'center';
ctx.fillText(`Filled Slots: ${filledSlots}/${slots}`, centerX, canvas.height - 30);
}
function update() {
if (Math.random() < 0.1) producerIndex = (producerIndex + Math.floor(Math.random() * 2)) % slots;
if (Math.random() < 0.15 && filledSlots > 0) consumerIndex = (consumerIndex + Math.floor(Math.random() * 2)) % slots;
const newProducerIndex = producerIndex;
const newConsumerIndex = consumerIndex;
if (newProducerIndex >= newConsumerIndex) {
filledSlots = newProducerIndex - newConsumerIndex;
} else {
filledSlots = slots - (newConsumerIndex - newProducerIndex);
}
if (filledSlots === 0 && producerIndex % slots === newConsumerIndex + 1 % slots) bufferFullFlash = true;
drawRing();
requestAnimationFrame(update);
}
function getColorLevel(level) {
if (level < 0.3) return 'green';
else if (level < 0.7) return 'yellow';
else return 'red';
}
requestAnimationFrame(() => {
update();
});
</script>
</body>
</html>
``````html
<!DOCTYPE html><html><head><title>Ring Buffer Animation</title><style>
body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background:#222}
canvas{border-radius:50%;box-shadow:0 0 20px rgba(0,0,0,.5)}
#info{text-align:center;color:white;font-family:sans-serif;margin-top:20px}
</style></head><body>
<canvas id="buffer"></canvas><div id="info"></div>
<script>
const canvas=document.getElementById('buffer'),ctx=canvas.getContext('2d');
let w=window.innerWidth*.9,h=window.innerHeight*.9,r=Math.min(w*.45,h*.45);
canvas.width=w;canvas.height=h;
let slots=[],fillLevel=0,maxSlots=16,producer=0,consumer=0,animTime=0,lastFrame=0,speeds=[.05,.03],buffer=[];
function initBuffer(){
buffer=new Array(maxSlots).fill(0);
fillLevel=0;
producer=Math.random()*maxSlots;
consumer=(Math.random()+1)*maxSlots;
}
function getColor(frac){
let r,g,b;
if(frac<.4){r=50+frac*250;g=255;b=50}
else if(frac<.6){r=255;g=255-135*(frac-.4)/(.2);b=50}
else{r=255;g=50+135*(frac-.6)/(.4);b=50}
return `rgb(${r},${g},${b})`;
}
function drawSlot(x,y,fill){
ctx.beginPath();
ctx.arc(x,y,r*.1,0,Math.PI*2);
if(fill)ctx.fill();
else ctx.stroke();
}
function update(t){
animTime=t;
let rate=60/1000;
let frameRate=(t-lastFrame)/1000||rate;
lastFrame=t;
producer+=speeds[0]*frameRate*maxSlots;
consumer+=speeds[1]*frameRate*maxSlots;
if(producer-consumer>maxSlots)producer-=maxSlots;
else if(consumer-producer>maxSlots)consumer-=maxSlots;
let nextSlot=(Math.floor((producer+1)%maxSlots));
if(buffer[nextSlot]===0&&fillLevel<maxSlots){
buffer[nextSlot]=1;
fillLevel++;
}
let consSlot=Math.floor(consumer%maxSlots);
if(buffer[consSlot]===1)buffer[consSlot]=0;else fillLevel--;
ctx.clearRect(0,0,w,h);
for(let i=0;i<maxSlots;i++){
let theta=(i*2*Math.PI)/maxSlots;
let x=w/2+r*(Math.cos(theta)+.5),y=h/2+r*Math.sin(theta);
if(buffer[i])drawSlot(x,y,true);else drawSlot(x,y,false);
}
ctx.beginPath();
ctx.arc(w/2,h/2,r*1.2,0,Math.PI*2);
ctx.strokeStyle='white';
ctx.lineWidth=3;
ctx.stroke();
let prodPos=w/2+r*.85*(Math.cos((producer%maxSlots)*2*Math.PI/maxSlots)+.5),
prodY=h/2+r*.85*Math.sin((producer%maxSlots)*2*Math.PI/maxSlots);
ctx.beginPath();
ctx.arc(prodPos,prodY,r*0.15,0,Math.PI*2);
ctx.fillStyle='blue';
ctx.fill();
let consPos=w/2+r*.6*(Math.cos((consumer%maxSlots)*2*Math.PI/maxSlots)+.5),
consY=h/2+r*.6*Math.sin((consumer%maxSlots)*2*Math.PI/maxSlots);
ctx.beginPath();
ctx.arc(consPos,consY,r*0.15,0,Math.PI*2);
ctx.fillStyle='red';
ctx.fill();
document.getElementById('info').textContent=`Fill Level: ${fillLevel}/${maxSlots}`;
if(fillLevel>=maxSlots){
ctx.fillStyle='yellow';
ctx.beginPath();
ctx.arc(w/2,h/2,r*1.3,0,Math.PI*2);
ctx.fill();
}
requestAnimationFrame(update);
}
window.addEventListener('resize',()=>{
w=window.innerWidth*.9;h=window.innerHeight*.9;r=Math.min(w*.45,h*.45);
canvas.width=w;canvas.height=h;
initBuffer();
});
initBuffer();
requestAnimationFrame(update);
</script></body></html>
```<think>
Okay, I need to create a self-contained HTML file that animates a circular ring buffer on a canvas. Let me start by understanding the requirements. The user wants 16-20 fixed slots arranged in a circle. There should be a producer and a consumer pointer moving clockwise at different, randomly varying rates. The producer fills the next slot when it's ahead and the buffer isn't full, while the consumer clears when it reaches a filled slot. The colors of the filled slots should change based on how full the buffer is—green when mostly empty, yellow around half, red when nearly full. Also, there's a warning flash when the producer catches up to the consumer without a free slot. The current fill level should be displayed, and the animation should loop with requestAnimationFrame. No user input, starts immediately, and restarts when finished. No external libraries.
First, I'll structure the HTML with a canvas element and some basic setup. The canvas will need to be sized appropriately. Let's go with 16 slots for simplicity. The canvas width and height can be 500x500 pixels. The center of the circle will be at (250, 250).
Next, the JavaScript part. I'll need to set up variables for the canvas context, the number of slots (let's say 20), the radius of the ring, the size of each slot's arc. The producer and consumer have angles that increase over time. Their rates should be random, but different. Maybe the producer is slightly faster than the consumer on average, but with some variation. The rates can be set as random numbers between 0.1 and 0.3 or something, with a small delta for variation.
The fill level is tracked with an array that has the filled status of each slot. Or perhaps a simple counter for filled slots. Wait, since the ring is circular, maybe an array where each index represents a slot, and when filled, it's marked as filled, and the producer moves ahead. But the pointers are moving continuously, not step by step. Hmm. Maybe the filled slots are tracked by their positions between the producer and consumer? Or perhaps each slot's state is determined by whether it's between the consumer and producer (since the buffer is a ring).
Alternatively, maybe it's better to track the number of filled slots (fillCount) and the positions of the producer and consumer. The slots themselves are in a fixed circular arrangement. The producer and consumer pointers are moving angles. When the producer moves to a new slot, if that slot is empty, it fills it (if there's space). The consumer moves and when it reaches a filled slot, it clears it. The fillCount is adjusted accordingly.
Wait, but since they are moving continuously, perhaps the slots are tracked in an array where each slot's state is either empty or filled. The producer and consumer are pointers moving along the circumference. The producer tries to fill the next empty slot in its path, while the consumer clears when it reaches filled slots.
Alternatively, since they move at different rates, their positions are tracked as continuous angles (mod 360 or 2π radians). The buffer fills up when the producer overtakes the consumer. So the filled slots are the ones between consumer and producer. The number of filled slots is (producerAngle - consumerAngle)/spacing, but mod the total slots.
Hmm, this might be tricky. Maybe the slots are numbered 0 to 19 arranged in a circle. Each has a state: filled or not. The producer and consumer are at a position along the circumference which maps to a slot index. The producer can only fill a slot if it's the next empty one after its current position. But with continuous motion, we need to track their positions more precisely.
Alternatively, use angles (in radians) for the producer and consumer. Each slot is an arc of 2π/numSlots. The position of each slot can be calculated from the angle. The producer's current slot would be Math.floor(producerAngle / (2π/numSlots)). But with modulo operations to wrap around.
Wait, perhaps using angles in degrees for simplicity. Let's say each slot is 360/20 = 18 degrees. The producer and consumer have current positions in degrees. Their positions are incremented each frame by their respective rates.
The key is to calculate which slot each pointer is currently over. The producer tries to fill the next empty slot clockwise from where it is, if possible. The consumer tries to clear the current slot it's over, but only if that slot is filled.
Hmm. Let's think of the buffer as an array of filled booleans, each corresponding to a slot. The filled slots between the consumer and producer positions. The fill count is the number of filled slots.
The producer moves clockwise. When it moves to a new slot (modulo the number of slots), if the next slot (the one in the direction of movement) is empty, it can fill it. The next slot is (current producer slot +1) mod numSlots. Wait, but since they are moving, perhaps we need to track their exact positions and when they pass a slot, then decide.
Alternatively, each time the animation frame is drawn, we update the positions and check for these conditions.
So here's a plan:
Initialize:
- numSlots = 20 (since between 16-20, 20 is a nice number)
- buffer is an array of 20 elements, each a boolean indicating if filled
- producerAngle and consumerAngle are floats between 0 and 360 degrees.
- producerSpeed and consumerSpeed are random numbers. Maybe producer is 0.5 + random up/down, consumer is 0.3 + similar. Need to ensure their speeds can vary, but on average, producer is faster, but not always. Or perhaps they can sometimes slow down or speed up.
Wait the problem says "independently and randomly varying rates". Hmm, maybe their speed is not constant. So perhaps each frame, their speed is adjusted by a small random value. Or maybe the speed varies over time with some stochastic processes. Alternatively, their base speed is random and then each has a small random fluctuation each frame. But that might complicate things.
Alternatively, set them to have a base speed plus a random delta every few frames. Alternatively, just set their initial speeds to different values, and let them be constant, but with different rates. The user said "random varying rates"—maybe their base speed is randomly set each time, and not changing during the animation? Or perhaps each has a speed that changes over time.
Hmm, the problem says "independently and randomly varying rates". So maybe their speeds change every frame slightly. So for example, each has a speed variable that is updated each frame by adding a tiny random value. But to keep it simple, perhaps they start with a random speed between a min and max, and then each frame, add a small random perturbation. That way their speeds vary over time.
But for simplicity, maybe for the code, I'll set their speeds to random initial values, and each frame, they can have a small random change. But perhaps that's too much. Alternatively, just have their base speeds as random numbers between, say 0.1 and 0.5, so that they have different rates.
Alternatively, to make it really simple, set the producer's speed to be a random number between 0.1 and 0.3, the consumer's between 0.05 and 0.2, so that producer is generally faster but not always, and sometimes their rates could cross, leading to potential overflow.
But the problem says "random varying"—so perhaps their speed is a random number each frame? That might be too jumpy. Maybe better to have them start with a speed, and then each frame, their speed is adjusted slightly (like +/- 0.01 * random()). But that might be better for smoothness. Hmm. Let's think of the code.
Alternatively, for simplicity, perhaps just set the speeds to be random numbers once, and that's their rate. So each animation instance (when restarted) has random speeds. That would satisfy "independently and randomly varying rates". Maybe that's acceptable.
So:
// setup:
var producerSpeed = Math.random() * 0.3 + 0.1;
var consumerSpeed = Math.random() * 0.3 + 0.1;
Wait but the rates should be different. Maybe ensure that producerSpeed is not equal to consumerSpeed. But that's not necessary, but if they end up same, the animation might not work well. So maybe better to have producerSpeed and consumerSpeed be set to different ranges, like producer is 0.1-0.3, consumer is 0.05-0.2. That way they are different in general.
Alternatively, set producerSpeed = Math.random() * 0.2 +0.1; consumerSpeed = Math.random() * 0.2 +0.05;
Okay, moving on.
Now, the positions of the pointers are angles (in degrees or radians). Let's use radians because Canvas uses radians for trigonometric functions. Let's define the radius of the ring, say 200 pixels. The center is at (250, 250) for a 500x500 canvas.
Each slot is spaced at 2π / numSlots radians. So for 20 slots, each slot spans π/10 radians (about 18 degrees).
The pointer positions are the angles where the producer and consumer are pointing. We can represent these as angles in radians from 0 to 2π.
Now, the producer and consumer move each frame by their speed (in radians per frame). So each frame, their angles are increased by speed * delta time? Or since we're using requestAnimationFrame which is time-based, but for simplicity, maybe just increase by their speed each frame, but since requestAnimationFrame calls are roughly at 60fps, the actual speed would be in radians per second? Hmm, perhaps better to have the speed in radians per frame. So the producer's angle += producerSpeed each frame. Similarly for consumer. But then the speed needs to be such that they make progress around the circle over time. For example, if producerSpeed is 0.1 radians per frame (about 5.7 degrees per frame), then after 10 frames (assuming 60fps, ~0.16 seconds), it would have moved 1 radian (about 57 degrees). That might be okay.
Alternatively, to make the animation smoother, perhaps calculate using time delta. But for simplicity, maybe not. Let's proceed with per-frame increments.
So each frame:
producerAngle += producerSpeed;
consumerAngle += consumerSpeed;
After each addition, we can mod the angles by 2*PI to keep them between 0 and 2π.
Now, the key part is managing the buffer. The buffer is an array of filled booleans. The producer fills the next slot when possible, and the consumer empties when it reaches a filled slot.
The next slot for the producer is the slot at the angle just ahead of its current position. Wait, how to determine which slot the producer is in? Each slot can be thought of as a segment between two angles. For example, the first slot is from 0 to (2π / numSlots), the second from there to next, etc.
We can calculate the current slot of the producer by:
currentProducerSlot = Math.floor(producerAngle / (2 * Math.PI / numSlots)) % numSlots;
But since angle increases, when the angle is exactly at a multiple, it might land on the next slot. Alternatively, use modulo to get the position.
Wait, perhaps it's better to represent each slot's start angle and end angle. For each slot i, startAngle[i] = i * (2π / numSlots), endAngle[i] = (i+1)* (2π / numSlots). The current slot is the one where startAngle <= producerAngle < endAngle.
Alternatively, the current slot can be calculated as (producerAngle * numSlots / (2 * Math.PI)) % numSlots, then floored.
Wait, let me do this:
slotWidth = 2 * Math.PI / numSlots;
producerSlot = Math.floor(producerAngle / slotWidth) % numSlots;
Same with consumerSlot.
But angles wrap around, so mod is okay.
Once we have their current slots, we can determine if the producer can fill the next slot. The next slot is (producerSlot +1) % numSlots. The next slot must be empty, and the total filled slots must be less than numSlots -1 (since filling that slot would require it's empty).
Wait, the filled slots are tracked by an array. So:
// Check if the producer can fill the next slot:
if (buffer[producerNextSlot] == false && fillCount < numSlots) {
buffer[producerNextSlot] = true;
fillCount++;
}
But the producer isn't just in one slot, but moving. Hmm, perhaps the slots are considered filled when the producer moves into a new slot and can fill it.
Alternatively, every frame, we check if the producer has moved into a new slot, then decide to fill the next slot if possible.
Alternatively, every frame, the producer is trying to fill the next slot (the one after its current slot) when possible.
Wait, perhaps the process should be:
1. Update the producer and consumer angles.
2. Calculate their current slots.
3. Check if the producer can fill the next slot (the next in the direction of movement).
- The next slot is (producerSlot +1) mod numSlots.
- if buffer[nextSlot] is false, and fillCount < numSlots, then fill it.
- The producer may not be able to fill immediately, but must be in the position where it can.
Hmm, maybe the producer can only fill when it has moved into a new slot, so each time the slot changes, it can fill the next one.
So, perhaps track the previous producer slot and check if it has moved to a new slot. When it does, then check if the next slot can be filled.
Same with the consumer: when it moves into a new slot, if that slot was filled, it can clear it.
Alternatively, maybe this is overcomplicating, and just use the current slot positions and their next slots.
Alternatively, the fill/check is based on their current slots:
At each frame:
If the producer's next slot (current slot +1 mod numSlots) is empty and there is space, then fill it.
Wait that's possible, but maybe the producer can only fill once per slot passage.
Alternatively, the producer is trying to fill as much as possible as it moves.
Hmm, perhaps the logic is:
The producer wants to fill the next slot when it hasn't been filled yet, and there is space. But how to track that.
Alternatively, the buffer is tracked by fillCount, and each time the producer moves beyond a slot, it can fill the next if possible.
Alternatively, maybe the slots are considered to be filled if between consumer and producer positions. Since the buffer is a ring, the filled slots are those between consumer and producer (assuming producer is ahead). The count is (producerAngle - consumerAngle) / slotWidth mod numSlots. But that might not be accurate.
Alternatively, the number of filled slots is (producerSlot - consumerSlot + numSlots) % numSlots, but only if producer is ahead.
Wait, let me think:
Imagine the ring has slots arranged from 0 to 19. The producer is at slot P, consumer at slot C. The number of filled slots is (P - C) mod numSlots. But that's only if the producer is ahead. If the consumer is ahead, it would give a negative number mod numSlots, but that's okay.
Wait, if producer is ahead, like P=5, C=3: 2 filled. If C=7 and P=3, then (3-7 mod 20) is 16, but that would mean it's wrapping around. So the actual filled slots would be 20 - (7-3) = 16? That might be. So filledCount is (P - C) mod numSlots.
So the filledCount is (producerSlot - consumerSlot + numSlots) % numSlots.
But this assumes that the producer is moving ahead of the consumer.
So whenever the producerSlot is ahead, the count is correct. But when the consumer overtakes the producer, the count drops.
Wait, but if the consumer is moving faster than the producer, the count can decrease. So filledCount is (producerSlot - consumerSlot + numSlots) % numSlots. That formula gives the correct number between 0 and numSlots-1.
So using this, we can track the filledCount without needing an array. That would be more efficient and simpler.
Wait, perhaps that's the way to go. Let me think:
producerSlot is the current slot of the producer.
consumerSlot is the current slot of the consumer.
filledCount = (producerSlot - consumerSlot + numSlots) % numSlots.
But we need to ensure that the producer and consumer are moving in such a way that they don't pass each other without filling or emptying.
Hmm, perhaps this approach is better.
But how does that work with filling and emptying?
Wait, the producer fills the next slot when it moves, and the consumer empties when it moves.
Wait, perhaps the filledCount is the number of filled slots between the consumer and producer. So whenever the producer moves beyond a slot, it fills it, and when the consumer moves beyond, it empties.
Alternatively, this formula can directly give the number of filled slots. So when the producer is ahead of the consumer, filledCount is the difference. So, using this formula, the filledCount is automatically updated as the pointers move.
But to track whether a slot is filled or not, maybe we don't need an array. The filledCount is sufficient for the color coding and the warning.
Wait, but the problem says "filled and empty slots visibly chase each other around the ring." So we need to draw each slot as filled or not, depending on whether it is between the consumer and producer.
Therefore, we can't rely solely on filledCount. We need to know for each slot whether it is in the filled region.
Hence, the filled array is necessary.
Alternatively, for rendering, we can determine for each slot whether it is between consumer and producer.
So for each slot i:
if (consumerSlot <= producerSlot) {
filled = (i >= consumerSlot && i < producerSlot);
} else {
filled = (i >= consumerSlot || i < producerSlot);
}
This way, the filled array can be computed on the fly without needing to track it, which is more efficient.
But since the slots are moving smoothly through the angles, not jumping by slots, perhaps the slot positions are continuous, so the filled region is between the current positions of the pointers?
Wait, maybe this is getting too complicated. Let me think of another approach.
Alternatively, for visual purposes, each slot's position is determined by its start and end angles. The producer and consumer are points on the ring. The filled slots are those between the consumer and producer along the direction of the producer.
So, to determine if a slot i is filled:
- The start angle of slot i is i * slotWidth.
- The end angle is (i+1)*slotWidth.
We can check if the start angle of the slot is between the consumer's angle and the producer's angle, considering the circular nature.
Alternatively, perhaps this is manageable.
Alternatively, perhaps it's better to track the filled array, updating it each frame based on the movement of the pointers.
So every frame:
1. Move the pointers.
2. Check if the producer has moved to a new slot. If so, check if the next slot can be filled.
3. Similarly, check if the consumer has moved to a new slot, and if so, clear the current slot if it was filled.
But how to track when the producer has moved to a new slot?
We can track the previous slot of the producer and consumer.
Let me try to outline the steps:
Variables:
- producerAngle, consumerAngle (radians)
- producerSlot, consumerSlot (current slots)
- filled array (size numSlots), booleans
- previousProducerSlot, previousConsumerSlot (to detect changes)
Every frame:
Update producer and consumer angles:
producerAngle += producerSpeed;
consumerAngle += consumerSpeed;
Wrap angles:
producerAngle %= (2 * Math.PI);
consumerAngle %= (2 * Math.PI);
Calculate current slots:
slotWidth = 2 * Math.PI / numSlots;
producerSlot = Math.floor(producerAngle / slotWidth) % numSlots;
consumerSlot = Math.floor(consumerAngle / slotWidth) % numSlots;
Now, check if the producer has moved into a new slot (producerSlot != previousProducerSlot):
if (producerSlot != previousProducerSlot) {
// Check if next slot can be filled
nextSlot = (producerSlot + 1) % numSlots;
if ( !filled[nextSlot] && filledCount < numSlots ) {
filled[nextSlot] = true;
filledCount++;
}
previousProducerSlot = producerSlot;
}
Similarly, for consumer:
if (consumerSlot != previousConsumerSlot) {
// Check if current slot is filled, then empty it
currentSlot = consumerSlot;
if (filled[currentSlot]) {
filled[currentSlot] = false;
filledCount--;
}
previousConsumerSlot = consumerSlot;
}
This way, every time the producer moves into a new slot, they attempt to fill the next slot if possible.
Similarly, when the consumer moves into a new slot, they empty the previous one if it was filled.
This setup would ensure that the filled array is maintained.
Now, the filledCount can also be computed by summing the filled array, but using the filledCount variable is more efficient.
Now, for drawing:
Each slot is represented by an arc or a segment. For each slot i:
- Determine if it is filled (filled[i]).
- Color it based on its status.
Additionally, the warning condition (filledCount == numSlots) must be checked to trigger a visual warning (e.g., red color).
Now, for the color coding based on filledCount:
The color gradient can be determined by the ratio of filledCount / numSlots.
If filledCount is 0, it's green (or not filled), as it's empty.
As it fills up, the color transitions to yellow, then red when full (or near full).
The problem states to "visibly chase each other," so the filled regions should move as the pointers move.
Now, implementing this in code.
But I need to be careful with the modulo and the slot calculations.
Potential issues:
- When the producer is moving, the next slot may already be filled, so it can't fill it again.
- The filledCount must stay between 0 and numSlots.
- The consumer can only empty a slot if it was previously filled.
Now, the warning when the buffer is full: when filledCount reaches numSlots, we need to trigger some visual cue (like changing color to red).
The user also mentioned "create" the system, so I need to write the code for it.
Now, considering the canvas setup:
The canvas has a center at (250, 250), radius 200.
Each slot is a segment around the circle.
Drawing each segment:
For each slot i from 0 to numSlots-1:
- startAngle is i * slotWidth
- endAngle is (i+1)*slotWidth
- if filled[i], draw the segment with color based on filledCount, else a different color.
The pointers (producer and consumer) can be drawn as pointers (lines) pointing to their current angle.
Alternatively, maybe the pointers are small triangles or markers at their current angles.
But the main focus is on the slots.
Now, putting this together in code:
First, set up the canvas and context.
Then initialize variables:
const numSlots = 20;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let producerAngle = 0;
let consumerAngle = 0;
let filled = new Array(numSlots).fill(false);
let filledCount = 0;
let producerSpeed = 0.05; // radians per frame
let consumerSpeed = 0.03; // radians per frame
let previousProducerSlot = 0;
let previousConsumerSlot = 0;
// Initial setup:
producerAngle = 0;
consumerAngle = Math.PI * 2 / numSlots * numSlots * 0.5; // start opposite?
Wait, maybe start them at different positions.
Alternatively, starting both at 0, but that would cause issues. Maybe start consumer ahead?
Alternatively, not a big deal; code can handle it.
Now, the draw function:
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.width);
// Draw all slots
const centerX = 250;
const centerY = 250;
const radius = 200;
const slotWidth = 2 * Math.PI / numSlots;
for (let i = 0; i < numSlots; i++) {
const filled = filledArray[i]; // assume filledArray is the array
const startAngle = i * slotWidth;
const endAngle = (i + 1) * slotWidth;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
ctx.lineTo(centerX, centerY);
ctx.closePath();
const color = filled ? 'blue' : 'gray';
// or gradient based on filledCount
let percentFilled = filledCount / numSlots;
let colorGradient;
if (percentFilled <= 0.5) {
const green = (1 - percentFilled * 2) * 255;
const yellow = percentFilled * 2 * 255;
colorGradient = `rgb(${yellow}, ${green}, 0)`;
} else {
const red = 255;
const yellow = (1 - (percentFilled - 0.5)*2) * 255;
colorGradient = `rgb(${red}, ${yellow}, 0)`;
}
if (filled) {
ctx.fillStyle = colorGradient;
} else {
ctx.fillStyle = 'gray';
}
ctx.fill();
}
// Draw producer and consumer pointers
ctx.fillStyle = 'red';
drawPointer(producerAngle, 'red');
ctx.fillStyle = 'green';
drawPointer(consumerAngle, 'green');
requestAnimationFrame(draw);
}
function drawPointer(angle, color) {
const centerX = 250;
const centerY = 250;
const length = 200;
const tipX = centerX + Math.cos(angle) * length;
const tipY = centerY + Math.sin(angle) * length;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(tipX, tipY);
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.stroke();
}
But this is incomplete, because the filledArray and other variables need to be updated each frame.
Wait, the draw function is separate from the update. So perhaps the update is done in the animation frame step.
Wait, better structure would be to have the main animation loop:
function animate() {
update();
draw();
requestAnimationFrame(animate);
}
function update() {
// Update angles
producerAngle += producerSpeed;
consumerAngle += consumerSpeed;
producerAngle %= (2 * Math.PI);
consumerAngle %= (2 * Math.PI);
// Get current slots
const slotWidth = 2 * Math.PI / numSlots;
const producerSlot = Math.floor(producerAngle / slotWidth) % numSlots;
const consumerSlot = Math.floor(consumerAngle / slotWidth) % numSlots;
// Check producer movement to new slot
if (producerSlot !== previousProducerSlot) {
const nextSlot = (producerSlot + 1) % numSlots;
if (!filled[nextSlot] && filledCount < numSlots) {
filled[nextSlot] = true;
filledCount++;
}
previousProducerSlot = producerSlot;
}
// Check consumer movement to new slot
if (consumerSlot !== previousConsumerSlot) {
const currentSlot = consumerSlot;
if (filled[currentSlot]) {
filled[currentSlot] = false;
filledCount--;
}
previousConsumerSlot = consumerSlot;
}
}
function draw() {
// drawing code as before
}
But in this way, the filled array is updated every time the pointer moves into a new slot.
Potential problem: The slots are determined by the angle divided by slotWidth, but due to floating point precision, there might be cases where angles land exactly on a slot boundary, causing inconsistent slot calculations.
To mitigate this, perhaps using a small epsilon or ensuring the modulo is properly handled.
Another issue is that when the producer moves into a new slot, it tries to fill the next slot, but if that slot is already filled, it can't. Similarly, the consumer can only empty its current slot if it was filled.
This should prevent overflows (filledCount exceeding numSlots).
Now, the color gradient is based on the overall filledCount, but the user might want each filled slot to have a color indicating its position in the buffer (e.g., red near full). Alternatively, the color could be based on the local status (filled or not), but the problem says "visibly chase each other", so maybe just green for filled, red when full.
Alternatively, perhaps the buffer's filled regions are green, and when full, it turns red.
The problem statement says "Create a system where two pointers move around a circular buffer...", so the key elements are the two pointers, the buffer slots, and the visual indicator of the buffer's state.
The exact colors might be up to interpretation, but the main idea is to show the filled portion between the pointers.
Now, putting all the code together with the variables properly managed.
Also, note that the producer and consumer speeds can be adjusted to see the movement.
Potential adjustments:
- The initial angles for producer and consumer can be set apart to start the simulation.
- The filled array needs to be initialized.
Wait, in the code above, the filled array is initialized as all false, so initially, the buffer is empty.
Testing:
When the producer moves ahead, it fills the next slot.
The consumer moving will empty the current slot.
If the producer is faster than the consumer, over time, the buffer will fill up until it's full, at which point the producer can't fill any more, so filledCount stays at numSlots.
The consumer can then start to catch up, emptying slots.
This should create the chasing effect.
Now, in the drawing function, the color for each slot could be a standard green if filled, and gray otherwise, but the problem mentions "visibly chase", so the color might need to indicate the buffer's state.
Alternatively, the entire buffer could have a gradient based on how full it is.
Alternatively, when the buffer is full, the color turns red.
Perhaps when filledCount reaches numSlots, the filled slots are red, others green.
Alternatively, the buffer is green when empty, turns yellow when half full, and red when full.
In any case, the color can be adjusted in the draw function.
Now, putting together the full code:
Here's the complete code with all the required components:
```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const numSlots = 20;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 200;
let producerAngle = 0;
let consumerAngle = 0;
let filled = new Array(numSlots).fill(false);
let filledCount = 0;
let producerSpeed = 0.05; // radians per frame
let consumerSpeed = 0.03; // radians per frame
let previousProducerSlot = 0;
let previousConsumerSlot = 0;
function update() {
// Update angles
producerAngle += producerSpeed;
consumerAngle += consumerSpeed;
// Wrap angles to 0-2PI
producerAngle %= (2 * Math.PI);
consumerAngle %= (2 * Math.PI);
// Calculate current slots
const slotWidth = 2 * Math.PI / numSlots;
const currentProducerSlot = Math.floor(producerAngle / slotWidth) % numSlots;
const currentConsumerSlot = Math.floor(consumerAngle / slotWidth) % numSlots;
// Update producer's slot
if (currentProducerSlot !== previousProducerSlot) {
const nextSlot = (currentProducerSlot + 1) % numSlots;
if (!filled[nextSlot] && filledCount < numSlots) {
filled[nextSlot] = true;
filledCount++;
}
previousProducerSlot = currentProducerSlot;
}
// Update consumer's slot
if (currentConsumerSlot !== previousConsumerSlot) {
const currentSlot = currentConsumerSlot;
if (filled[currentSlot]) {
filled[currentSlot] = false;
filledCount--;
}
previousConsumerSlot = currentConsumerSlot;
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw buffer slots
const slotWidth = 2 * Math.PI / numSlots;
for (let i = 0; i < numSlots; i++) {
const filledStatus = filled[i];
const startAngle = i * slotWidth;
const endAngle = (i + 1) * slotWidth;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.lineTo(centerX, centerY);
ctx.closePath();
// Determine color based on fill status
let color;
if (filledStatus) {
// If buffer is full, turn red; otherwise green
if (filledCount === numSlots) {
color = 'red';
} else {
color = 'green';
}
} else {
color = 'gray';
}
ctx.fillStyle = color;
ctx.fill();
}
// Draw pointers
drawPointer(producerAngle, 'red', 'Producer');
drawPointer(consumerAngle, 'blue', 'Consumer');
}
function drawPointer(angle, color, label) {
const length = 220;
const tipX = centerX + Math.cos(angle) * length;
const tipY = centerY + Math.sin(angle) * length;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(tipX, tipY);
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.stroke();
// Draw label
ctx.font = '12px Arial';
ctx.fillStyle = color;
ctx.fillText(label, tipX + 5, tipY + 5);
}
function animate() {
update();
draw();
requestAnimationFrame(animate);
}
// Initialize and start animation
canvas.width = 500;
canvas.height = 500;
animate();
```
This code sets up a canvas, defines the producer and consumer angles, and animates their movement around the buffer. The buffer slots are colored green when filled, gray when empty, and turn red when the buffer is full. The pointers are drawn with labels for identification.
The update function handles the slot transitions and buffer management. The draw function renders each slot with appropriate colors and the pointers with labels.
The producer moves faster than the consumer by default, so over time, the buffer will fill up to red, and then start emptying as the consumer catches up.
Potential adjustments:
- The canvas size and center coordinates might need to be adjusted based on the actual canvas element's dimensions.
- The speeds can be tweaked (producerSpeed and consumerSpeed) to control how quickly the pointers move.
- The color scheme can be modified for better visual distinction.
- Adding a legend or text to indicate the filled count could add clarity.
- Handling edge cases where angles exactly hit the slot boundaries may require more precise calculations, but modulo operations usually handle this.
Overall, this code creates a visual representation of a circular buffer with two pointers, showing filled slots and their states as the pointers move.<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Ring Buffer</title>
<style>
html,body{margin:0;height:100%;background:#080c11;display:grid;place-items:center;overflow:hidden;
font:14px/1.4 ui-sans-serif,system-ui,sans-serif;color:#8fa6bd}
canvas{display:block;max-width:100vw;max-height:100vh}
</style></head><body>
<canvas id="c" width="760" height="760"></canvas>
<script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
const W=760,H=760,CX=380,CY=372,R=228,TAU=6.2831853;
const rnd=(a,b)=>a+Math.random()*(b-a);
let N,buf,pp,cp,vp,vc,tp,tc,flash,life,last=0;
function reset(){
N=16+(Math.random()*5|0);buf=new Array(N).fill(0);
pp=0;cp=0;vp=rnd(.8,2);vc=rnd(.7,1.8);tp=0;tc=0;flash=0;life=0;
}
function ang(p){return p/N*TAU-1.5707963}
function step(dt){
life+=dt;
tp-=dt;if(tp<=0){tp=rnd(.35,1.5);vp=rnd(.5,3.2);}
tc-=dt;if(tc<=0){tc=rnd(.35,1.5);vc=rnd(.35,3.0);}
let i=Math.floor(pp),ni=(i+1)%N,np=pp+vp*dt;
if(np>=i+1){
if(!buf[ni]&&ni!==Math.floor(cp)){buf[ni]=1;pp=np%N;}
else{pp=i+.985;flash=1;}
}else pp=np;
let j=Math.floor(cp),nj=(j+1)%N,nc=cp+vc*dt;
if(nc>=j+1){
if(buf[nj]){buf[nj]=0;cp=nc%N;}else cp=j+.985;
}else cp=nc;
if(flash>0)flash=Math.max(0,flash-dt*2.2);
if(life>32)reset();
}
function ptr(p,col,lab,d){
const a=ang(p),co=Math.cos(a),si=Math.sin(a),r0=R+d*24;
g.strokeStyle=col;g.lineWidth=3;g.lineCap='round';
g.beginPath();g.moveTo(CX+co*r0,CY+si*r0);g.lineTo(CX+co*(r0+d*28),CY+si*(r0+d*28));g.stroke();
g.fillStyle=col;g.beginPath();g.arc(CX+co*r0,CY+si*r0,6,0,TAU);g.fill();
g.font='bold 12px ui-sans-serif,system-ui,sans-serif';g.textAlign='center';
g.fillText(lab,CX+co*(r0+d*48),CY+si*(r0+d*48)+4);
}
function draw(){
g.fillStyle='#080c11';g.fillRect(0,0,W,H);
let f=0;for(let i=0;i<N;i++)f+=buf[i];
const cap=N-1,r=f/cap,hue=120-120*Math.min(1,r),fl=flash>.02;
const seg=TAU/N,gap=seg*.17;
g.beginPath();g.arc(CX,CY,R,0,TAU);g.strokeStyle='#111a23';g.lineWidth=34;g.stroke();
g.lineCap='butt';
for(let i=0;i<N;i++){
const a=ang(i);
g.beginPath();g.arc(CX,CY,R,a-seg/2+gap,a+seg/2-gap);g.lineWidth=30;
if(buf[i]){
g.strokeStyle=fl?'#ff2f6d':'hsl('+hue+' 80% 52%)';
g.shadowColor=g.strokeStyle;g.shadowBlur=fl?34:16;
}else{
g.strokeStyle=fl?'#4d0f24':'#17232f';g.shadowBlur=0;
}
g.stroke();g.shadowBlur=0;
const ao=ang(i),ir=R-32;
g.fillStyle=fl?'#ff8fb0':'#3d566d';g.font='10px ui-monospace,monospace';g.textAlign='center';
g.fillText(i,CX+Math.cos(ao)*ir,CY+Math.sin(ao)*ir+3);
}
ptr(pp,'#63e6ff','PROD',1);
ptr(cp,'#ffd166','CONS',-1);
g.textAlign='center';
g.fillStyle=fl?'#ff2f6d':'hsl('+hue+' 75% 62%)';
g.font='bold 62px ui-sans-serif,system-ui,sans-serif';
g.fillText(f+' / '+N,CX,CY+10);
g.fillStyle='#6b8299';g.font='12px ui-monospace,monospace';
g.fillText('SLOTS FILLED',CX,CY+36);
g.fillStyle=fl?'#ff2f6d':'#40566b';g.font='bold 13px ui-monospace,monospace';
g.fillText(fl?'! OVERFLOW — PRODUCER BLOCKED !':'CIRCULAR RING BUFFER',CX,CY-72);
const bw=260,bx=CX-bw/2,by=H-42;
g.fillStyle='#131e28';g.fillRect(bx,by,bw,8);
g.fillStyle=fl?'#ff2f6d':'hsl('+hue+' 80% 52%)';g.fillRect(bx,by,bw*Math.min(1,r),8);
g.fillStyle='#5b7near';
g.fillStyle='#5b7288';g.font='11px ui-monospace,monospace';
g.fillText('prod '+vp.toFixed(2)+' slots/s · cons '+vc.toFixed(2)+' slots/s',CX,by-12);
if(fl){
g.strokeStyle='rgba(255,47,109,'+(flash*.5)+')';g.lineWidth=6;
g.beginPath();g.arc(CX,CY,R+58,0,TAU);g.stroke();
}
}
function frame(t){
if(!last)last=t;
let dt=(t-last)/1000;last=t;
if(dt>.05)dt=.05;
step(dt);draw();
requestAnimationFrame(frame);
}
reset();requestAnimationFrame(frame);
</script></body></html><!doctype html><html><head><meta charset=utf-8><title>Ring Buffer</title><style>html,body{margin:0;height:100%;overflow:hidden;background:#101318;color:#e8edf2;font:16px system-ui,Segoe UI,Arial}canvas{display:block;width:100vw;height:100vh}.hud{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;text-shadow:0 2px 12px #000}.n{font-size:clamp(38px,9vw,92px);font-weight:750;line-height:1}.t{font-size:clamp(13px,2.2vw,18px);letter-spacing:.08em;text-transform:uppercase;color:#aab4bf}</style></head><body><canvas id=c></canvas><div class=hud><div class=n id=n></div><div class=t>filled slots</div></div><script>
const c=document.getElementById("c"),x=c.getContext("2d"),n=document.getElementById("n");
let W,H,D,slots,prod,cons,fill,pr,cr,pt,ct,flash,end;
function rand(a,b){return a+Math.random()*(b-a)}
function fresh(){
slots=18;prod=0;cons=0;fill=0;pr=rand(5,11);cr=rand(4,9);pt=0;ct=0;flash=0;end=performance.now()+rand(42000,62000)
}
function size(){D=devicePixelRatio||1;W=c.width=innerWidth*D;H=c.height=innerHeight*D;x.setTransform(D,0,0,D,0,0)}
function shade(){
let r=fill/slots,a=[45,210,105],b=r<.55?[235,206,72]:[236,72,72],t=r<.55?r/.55:(r-.55)/.45;
if(r<.55)b=[235,206,72],a=[45,210,105];else a=[235,206,72],b=[236,72,72];
return`rgb(${a.map((v,i)=>v+(b[i]-v)*t|0).join()})`
}
function slot(cx,cy,ang,on,col,warn){
let R=Math.min(innerWidth,innerHeight)*.34,r=Math.max(11,Math.min(25,R*.1)),px=cx+Math.cos(ang)*R,py=cy+Math.sin(ang)*R;
x.save();x.translate(px,py);x.rotate(ang+Math.PI/2);x.beginPath();x.roundRect(-r,-r*1.35,r*2,r*2.7,6);x.fillStyle=warn?"#ff4de3":on?col:"#202833";x.fill();x.lineWidth=2;x.strokeStyle=on?"#f7ffe8":"#53606d";x.stroke();x.restore()
}
function pointer(cx,cy,idx,col,label){
let R=Math.min(innerWidth,innerHeight)*.43,a=-Math.PI/2+idx/slots*6.283,px=cx+Math.cos(a)*R,py=cy+Math.sin(a)*R;
x.beginPath();x.arc(px,py,14,0,6.283);x.fillStyle=col;x.fill();x.lineWidth=3;x.strokeStyle="#fff";x.stroke();x.fillStyle="#101318";x.font="700 12px system-ui";x.textAlign="center";x.textBaseline="middle";x.fillText(label,px,py)
}
function tick(t){
if(!pt)pt=ct=t;
let warn=flash>t,dt=(t-pt)/1000;pt=t;pr+=rand(-.015,.015);pr=Math.max(3,Math.min(15,pr));
if(t>ct+1000/cr){ct=t;cr+=rand(-1.6,1.6);cr=Math.max(2.5,Math.min(13,cr));if(fill){fill--;cons=(cons+1)%slots}}
let step=1000/pr;
while(dt>0&&t>pt-step){break}
if(t%step<16){
if(fill<slots){fill++;prod=(prod+1)%slots}else flash=t+420
}
if(t>end)fresh();
x.clearRect(0,0,innerWidth,innerHeight);let cx=innerWidth/2,cy=innerHeight/2,col=shade();
x.beginPath();x.arc(cx,cy,Math.min(innerWidth,innerHeight)*.34,0,6.283);x.lineWidth=Math.max(7,Math.min(innerWidth,innerHeight)*.012);x.strokeStyle=warn?"#ff4de3":"#2b3440";x.stroke();
for(let i=0;i<slots;i++){let k=(i-cons+slots)%slots;slot(cx,cy,-Math.PI/2+i/slots*6.283,k<fill,col,warn)}
pointer(cx,cy,prod,"#69b7ff","P");pointer(cx,cy,cons,"#ffb15a","C");n.textContent=fill+" / "+slots;requestAnimationFrame(tick)
}
CanvasRenderingContext2D.prototype.roundRect|| (CanvasRenderingContext2D.prototype.roundRect=function(x,y,w,h,r){this.moveTo(x+r,y);this.arcTo(x+w,y,x+w,y+h,r);this.arcTo(x+w,y+h,x,y+h,r);this.arcTo(x,y+h,x,y,r);this.arcTo(x,y,x+w,y,r)});
addEventListener("resize",size);size();fresh();requestAnimationFrame(tick);
</script></body></html><!DOCTYPE html><html><head><meta charset="utf-8"><title>Ring Buffer</title><style>
html,body{margin:0;background:#111;height:100%;display:flex;align-items:center;justify-content:center;font-family:sans-serif;color:#eee}
#info{position:absolute;top:10px;left:10px;font-size:16px}
</style></head><body>
<div id="info"></div>
<canvas id="c" width="500" height="500"></canvas>
<script>
(function(){
const cv=document.getElementById('c'),ctx=cv.getContext('2d');
const info=document.getElementById('info');
const N=18, cx=250, cy=250, R=170, sr=16;
let slots,pAngle,cAngle,pSpeed,cSpeed,pIndex,cIndex,flash,last,elapsed;
function reset(){
slots=new Array(N).fill(0);
pAngle=0; cAngle=0;
pSpeed=0.6+Math.random()*0.4;
cSpeed=0.5+Math.random()*0.4;
pIndex=0; cIndex=0;
flash=0; elapsed=0;
}
reset();
last=performance.now();
function wander(s,min,max){
s+= (Math.random()-0.5)*0.6;
if(s<min)s=min; if(s>max)s=max;
return s;
}
function step(dt){
pSpeed=wander(pSpeed,0.15,1.6);
cSpeed=wander(cSpeed,0.15,1.6);
pAngle+=pSpeed*dt;
cAngle+=cSpeed*dt;
const slotAng=2*Math.PI/N;
const newP=Math.floor(pAngle/slotAng)%N;
const newC=Math.floor(cAngle/slotAng)%N;
if(newP!==pIndex){
pIndex=newP;
if(slots[pIndex]===0){slots[pIndex]=1;}
else{flash=0.35;}
}
if(newC!==cIndex){
cIndex=newC;
if(slots[cIndex]===1){slots[cIndex]=0;}
}
if(flash>0) flash-=dt;
elapsed+=dt;
if(elapsed>40) reset();
}
function colorFor(ratio){
const hue=120*(1-ratio);
return 'hsl('+hue+',85%,50%)';
}
function draw(){
ctx.clearRect(0,0,500,500);
const filled=slots.reduce((a,b)=>a+b,0);
const ratio=filled/N;
if(flash>0){
ctx.fillStyle='rgba(255,0,150,'+(0.15+0.35*Math.sin(flash*30))+')';
ctx.beginPath();ctx.arc(cx,cy,R+30,0,7);ctx.fill();
}
for(let i=0;i<N;i++){
const ang=i*2*Math.PI/N - Math.PI/2;
const x=cx+R*Math.cos(ang), y=cy+R*Math.sin(ang);
ctx.beginPath();
ctx.arc(x,y,sr,0,7);
if(slots[i]){
ctx.fillStyle=colorFor(ratio);
} else {
ctx.fillStyle='#222';
}
ctx.fill();
ctx.strokeStyle='#555';ctx.stroke();
}
drawPointer(pAngle,'#3fa9ff','P');
drawPointer(cAngle,'#c084fc','C');
info.textContent='Filled: '+filled+' / '+N;
}
function drawPointer(angle,color,label){
const slotAng=2*Math.PI/N;
const idx=Math.floor(angle/slotAng)%N;
const a=idx*slotAng - Math.PI/2;
const x=cx+R*Math.cos(a), y=cy+R*Math.sin(a);
ctx.beginPath();
ctx.arc(x,y,sr+8,0,7);
ctx.strokeStyle=color;ctx.lineWidth=3;ctx.stroke();
ctx.lineWidth=1;
ctx.fillStyle=color;
ctx.font='bold 12px sans-serif';
ctx.fillText(label, x-4, y-sr-12);
}
function loop(now){
const dt=Math.min((now-last)/1000,0.05);
last=now;
step(dt);
draw();
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
})();
</script></body></html><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Ring Buffer</title>
<style>
html,body{margin:0;height:100%;background:#0b0f14;display:flex;align-items:center;justify-content:center;overflow:hidden}
canvas{width:min(96vmin,640px);height:min(96vmin,640px)}
</style>
</head>
<body>
<canvas id="c" width="640" height="640"></canvas>
<script>
var cv=document.getElementById('c'),x=cv.getContext('2d');
var N=18,CX=320,CY=320,R=210,TAU=Math.PI*2;
var slots,p,cn,cnt,pt,ct,pr,cr,flash,wasFull,t0,dur,last=0;
function reset(){
slots=new Array(N).fill(0);
p=0;cn=0;cnt=0;pt=0;ct=0;
pr=1.2+Math.random()*2.5;
cr=1.2+Math.random()*2.5;
flash=0;wasFull=false;
t0=performance.now();
dur=40000+Math.random()*30000;
}
function clamp(v,a,b){return v<a?a:v>b?b:v}
function step(dt){
pr=clamp(pr+(Math.random()-.5)*dt*7,.35,5.5);
cr=clamp(cr+(Math.random()-.5)*dt*7,.35,5.5);
if(Math.random()<dt*.25)pr=.4+Math.random()*5;
if(Math.random()<dt*.25)cr=.4+Math.random()*5;
pt+=dt*pr;ct+=dt*cr;
while(pt>=1){
if(cnt<N){slots[p]=1;cnt++;p=(p+1)%N;pt-=1;wasFull=false;}
else{if(!wasFull){flash=1;wasFull=true;}pt=0;break;}
}
while(ct>=1){
if(slots[cn]){slots[cn]=0;cnt--;cn=(cn+1)%N;ct-=1;}
else{ct=0;break;}
}
flash=Math.max(0,flash-dt*1.6);
}
function slotColor(){
var f=cnt/N,h=120*(1-f);
return 'hsl('+h+',85%,52%)';
}
function ang(pos){return -Math.PI/2+pos*TAU/N}
function arrow(pos,r,col,inward,lbl){
var a=ang(pos);
x.save();
x.translate(CX+r*Math.cos(a),CY+r*Math.sin(a));
x.rotate(a);
x.fillStyle=col;
x.beginPath();
if(inward){x.moveTo(-16,0);x.lineTo(7,-10);x.lineTo(7,10);}
else{x.moveTo(16,0);x.lineTo(-7,-10);x.lineTo(-7,10);}
x.closePath();x.fill();
x.rotate(-a);
x.font='bold 15px monospace';
x.textAlign='center';x.textBaseline='middle';
x.fillText(lbl,0,inward?24:-24);
x.restore();
}
function draw(){
x.fillStyle='#0b0f14';
x.fillRect(0,0,640,640);
if(flash>0){
x.fillStyle='rgba(255,0,200,'+(flash*.22)+')';
x.fillRect(0,0,640,640);
}
x.strokeStyle='#222c38';
x.lineWidth=2;
x.beginPath();x.arc(CX,CY,R,0,TAU);x.stroke();
var fc=slotColor(),i,a,sx,sy;
for(i=0;i<N;i++){
a=ang(i);sx=CX+R*Math.cos(a);sy=CY+R*Math.sin(a);
x.beginPath();x.arc(sx,sy,17,0,TAU);
if(slots[i]){
x.fillStyle=fc;x.fill();
x.shadowColor=fc;x.shadowBlur=12;
x.fill();x.shadowBlur=0;
x.strokeStyle='rgba(255,255,255,.5)';
}else{
x.fillStyle='#151d27';x.fill();
x.strokeStyle='#33414f';
}
x.lineWidth=2;x.stroke();
if(flash>0){
x.strokeStyle='rgba(255,0,200,'+flash+')';
x.lineWidth=3+flash*3;
x.beginPath();x.arc(sx,sy,21,0,TAU);x.stroke();
}
}
arrow(p+Math.min(pt,1),R+46,'#ffb020',true,'P');
arrow(cn+Math.min(ct,1),R-46,'#28c8ff',false,'C');
x.textAlign='center';x.textBaseline='middle';
x.fillStyle=flash>0?'rgba(255,80,220,1)':'#e8eef4';
x.font='bold 44px monospace';
x.fillText(cnt+' / '+N,CX,CY-12);
x.fillStyle='#7a8a99';
x.font='14px monospace';
x.fillText('buffer fill',CX,CY+22);
if(flash>0){
x.fillStyle='rgba(255,0,200,'+Math.min(1,flash*1.4)+')';
x.font='bold 16px monospace';
x.fillText('OVERFLOW',CX,CY+46);
}
x.textAlign='left';
x.fillStyle='#ffb020';
x.font='13px monospace';
x.fillText('P producer '+pr.toFixed(1)+'/s',16,608);
x.fillStyle='#28c8ff';
x.fillText('C consumer '+cr.toFixed(1)+'/s',16,626);
}
function loop(now){
if(!last)last=now;
var dt=Math.min(.05,(now-last)/1000);
last=now;
if(now-t0>dur)reset();
step(dt);
draw();
requestAnimationFrame(loop);
}
reset();
requestAnimationFrame(loop);
</script>
</body>
</html><!DOCTYPE html><html><head><title>Ring Buffer</title><style>body{margin:0;height:100vh;display:flex;justify-content:center;align-items:center;background:#1a1a1a}canvas{display:block}#i{position:absolute;top:20px;color:white}</style></head><body><canvas id="c"></canvas><div id="i">Fill: <span id="f">0</span>/18</div><script>const c=document.getElementById('c');const x=c.getContext('2d');c.width=800;c.height=800;(function(){let n=18,z=40,r=200,p=0,q=0,ps=0.02+Math.random()*0.03,qs=0.015+Math.random()*0.025,w=0;function frame(){p=(p+ps)%n;q=(q+qs)%n;let d=(p-q+n)%n;let fl=Math.round(d);if(fl>=n-1&&d<1)w=30;x.fillStyle='#1a1a1a';x.fillRect(0,0,800,800);let cx=400,cy=400;if(w>0){x.fillStyle=`rgba(255,0,255,${w/30*0.4})`;x.fillRect(0,0,800,800);w--}for(let i=0;i<n;i++){let a=(i/n)*Math.PI*2-Math.PI/2,px=cx+Math.cos(a)*r,py=cy+Math.sin(a)*r,filled=((i-Math.floor(q)+n)%n)<fl,col=filled?(fl<6?'#0f0':fl<12?'#ff0':'#f00'):'#333';x.fillStyle=col;x.fillRect(px-z/2,py-z/2,z,z);x.strokeStyle='#666';x.lineWidth=1;x.strokeRect(px-z/2,py-z/2,z,z)}let pa=(p/n)*Math.PI*2-Math.PI/2,px=cx+Math.cos(pa)*r,py=cy+Math.sin(pa)*r;x.fillStyle='#0ff';x.beginPath();x.arc(px,py,8,0,Math.PI*2);x.fill();let qa=(q/n)*Math.PI*2-Math.PI/2,qx=cx+Math.cos(qa)*r,qy=cy+Math.sin(qa)*r;x.fillStyle='#f0f';x.beginPath();x.arc(qx,qy,8,0,Math.PI*2);x.fill();document.getElementById('f').textContent=fl;ps+=(Math.random()-0.5)*0.002;qs+=(Math.random()-0.5)*0.002;ps=Math.max(0.005,Math.min(0.08,ps));qs=Math.max(0.003,Math.min(0.07,qs));requestAnimationFrame(frame)}frame()})()</script></body></html>| Model | Blind score | Latency | Status |
|---|---|---|---|
| gemma4:26b | — | — | harness |
| llama3.1:8b | — | 74.5 s | OK |
| qwen3-coder:30b | — | 30.7 s | OK |
| deepseek-r1:14b | — | 36.3 s | OK |
| qwen3:14b | — | 35.6 s | OK |
| qwen3.5:9b | — | 60.2 s | OK |
| qwen3:8b | — | — | harness |
| mistral-small:24b | — | 79.7 s | OK |
| deepseek-r1:32b | — | 67.8 s | OK |
| qwq:32b | — | 268.5 s | OK |
| command-r:35b | — | — | DNF |