380 lines
15 KiB
HTML
380 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VCR Playback Time (3D)</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|
<style>
|
|
body {
|
|
background-color: #0d0d10;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script>
|
|
// --- Global Variables ---
|
|
let scene, camera, renderer, vcrDisplayTexture;
|
|
let vcrDisplayLight;
|
|
let simulatedPlaybackTime = 0;
|
|
let lastUpdateTime = 0;
|
|
let blinkState = false; // For blinking colon
|
|
let lastBlinkToggleTime = 0;
|
|
|
|
// --- Segment Display Definitions ---
|
|
|
|
// Define which segments (indexed 0-6: A, B, C, D, E, F, G) are active for each digit
|
|
// A=Top, B=TR, C=BR, D=Bottom, E=BL, F=TL, G=Middle
|
|
const SEGMENTS = {
|
|
'0': [1, 1, 1, 1, 1, 1, 0],
|
|
'1': [0, 1, 1, 0, 0, 0, 0],
|
|
'2': [1, 1, 0, 1, 1, 0, 1],
|
|
'3': [1, 1, 1, 1, 0, 0, 1],
|
|
'4': [0, 1, 1, 0, 0, 1, 1],
|
|
'5': [1, 0, 1, 1, 0, 1, 1],
|
|
'6': [1, 0, 1, 1, 1, 1, 1],
|
|
'7': [1, 1, 1, 0, 0, 0, 0],
|
|
'8': [1, 1, 1, 1, 1, 1, 1],
|
|
'9': [1, 1, 1, 1, 0, 1, 1],
|
|
' ': [0, 0, 0, 0, 0, 0, 0]
|
|
};
|
|
|
|
const SEG_THICKNESS = 3; // Thickness of the segment line in canvas pixels
|
|
const SEG_PADDING = 2; // Padding within a digit segment's box
|
|
|
|
// Colors for active and inactive segments
|
|
const COLOR_ACTIVE = '#00ff44'; // Bright Fluorescent Green
|
|
const COLOR_INACTIVE = '#1a1a1a'; // Dim dark gray for 'ghost' segments
|
|
|
|
/**
|
|
* Draws a single 7-segment digit by drawing active segments.
|
|
* Now includes drawing of inactive (ghost) segments for better readability.
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {string} digit The digit character (0-9).
|
|
* @param {number} x Left position of the digit area.
|
|
* @param {number} y Top position of the digit area.
|
|
* @param {number} H Total height of the digit area.
|
|
*/
|
|
function drawSegmentDigit(ctx, digit, x, y, H) {
|
|
const segments = SEGMENTS[digit] || SEGMENTS[' '];
|
|
const W = H / 2; // Width is half the height for standard aspect ratio
|
|
|
|
// Segment dimensions relative to W and H
|
|
const hLength = W - 2 * SEG_PADDING;
|
|
// Vertical length calculation: (Total height - 2 paddings - 3 horizontal thicknesses) / 2
|
|
const vLength = (H - (2 * SEG_PADDING) - (3 * SEG_THICKNESS)) / 2;
|
|
|
|
// Helper to draw horizontal segment (A, G, D)
|
|
const drawH = (index, x_start, y_start) => {
|
|
ctx.fillStyle = segments[index] ? COLOR_ACTIVE : COLOR_INACTIVE;
|
|
ctx.fillRect(x_start + SEG_PADDING, y_start, hLength, SEG_THICKNESS);
|
|
};
|
|
|
|
// Helper to draw vertical segment (F, B, E, C)
|
|
const drawV = (index, x_start, y_start) => {
|
|
ctx.fillStyle = segments[index] ? COLOR_ACTIVE : COLOR_INACTIVE;
|
|
ctx.fillRect(x_start, y_start, SEG_THICKNESS, vLength);
|
|
};
|
|
|
|
// Define segment positions
|
|
|
|
// Horizontal segments
|
|
// A (Top) - index 0
|
|
drawH(0, x, y + SEG_PADDING);
|
|
// G (Middle) - index 6
|
|
drawH(6, x, y + H/2 - SEG_THICKNESS/2);
|
|
// D (Bottom) - index 3
|
|
drawH(3, x, y + H - SEG_PADDING - SEG_THICKNESS);
|
|
|
|
// Vertical segments (Top Half)
|
|
const topVStart = y + SEG_PADDING + SEG_THICKNESS;
|
|
const rightVStart = x + W - SEG_PADDING - SEG_THICKNESS;
|
|
|
|
// F (Top-Left) - index 5
|
|
drawV(5, x + SEG_PADDING, topVStart);
|
|
|
|
// B (Top-Right) - index 1
|
|
drawV(1, rightVStart, topVStart);
|
|
|
|
// Vertical segments (Bottom Half)
|
|
const bottomVStart = y + H/2 + SEG_THICKNESS/2;
|
|
|
|
// E (Bottom-Left) - index 4
|
|
drawV(4, x + SEG_PADDING, bottomVStart);
|
|
|
|
// C (Bottom-Right) - index 2
|
|
drawV(2, rightVStart, bottomVStart);
|
|
}
|
|
|
|
// Function to draw the colon (two dots), now with blinking logic
|
|
function drawColon(ctx, x, y, H, isVisible) {
|
|
const dotSize = 4;
|
|
ctx.fillStyle = COLOR_ACTIVE;
|
|
|
|
if (isVisible) {
|
|
// Top dot
|
|
ctx.fillRect(x, y + H * 0.3 - dotSize / 2, dotSize, dotSize);
|
|
// Bottom dot
|
|
ctx.fillRect(x, y + H * 0.7 - dotSize / 2, dotSize, dotSize);
|
|
} else {
|
|
// Draw inactive colon if not visible, for consistency
|
|
ctx.fillStyle = COLOR_INACTIVE;
|
|
ctx.fillRect(x, y + H * 0.3 - dotSize / 2, dotSize, dotSize);
|
|
ctx.fillRect(x, y + H * 0.7 - dotSize / 2, dotSize, dotSize);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Draws a simple playback arrow (triangle)
|
|
* @param {CanvasRenderingContext2D} ctx
|
|
* @param {number} x Left position of the arrow area.
|
|
* @param {number} y Top position of the arrow area.
|
|
* @param {number} H Total height of the arrow area.
|
|
*/
|
|
function drawPlaybackArrow(ctx, x, y, H) {
|
|
const arrowWidth = H * 0.4; // Arrow width relative to digit height
|
|
const arrowHeight = H * 0.4; // Arrow height relative to digit height
|
|
|
|
ctx.fillStyle = COLOR_ACTIVE;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y + H * 0.5 - arrowHeight / 2); // Top point
|
|
ctx.lineTo(x + arrowWidth, y + H * 0.5); // Right point (center)
|
|
ctx.lineTo(x, y + H * 0.5 + arrowHeight / 2); // Bottom point
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
}
|
|
|
|
|
|
// Main function to render the entire time string using segments
|
|
function drawSegmentDisplay(ctx, timeString) {
|
|
const canvasWidth = ctx.canvas.width;
|
|
const canvasHeight = ctx.canvas.height;
|
|
const timeStringLength = timeString.length;
|
|
|
|
// Clear display to dark background
|
|
ctx.fillStyle = '#0a0a0a';
|
|
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
|
|
|
|
// Constants for layout
|
|
const charSpacing = 8; // Spacing between digits
|
|
const digitHeight = canvasHeight - 2 * SEG_PADDING;
|
|
const digitWidth = digitHeight / 2 + SEG_PADDING; // Total width slot for one digit
|
|
const colonWidth = 6;
|
|
const arrowWidth = digitHeight * 0.7; // Approx width for the arrow
|
|
const arrowPadding = 10; // Space between arrow and first digit
|
|
|
|
// Calculate total display width including arrow and spaces
|
|
const totalDisplayWidth = arrowWidth + arrowPadding + (4 * digitWidth) + colonWidth + ((timeStringLength - 1) * charSpacing);
|
|
|
|
// Calculate starting X to center the display
|
|
let currentX = (canvasWidth - totalDisplayWidth) / 2;
|
|
const currentY = SEG_PADDING;
|
|
|
|
// Draw Playback Arrow
|
|
drawPlaybackArrow(ctx, currentX, currentY, digitHeight);
|
|
currentX += arrowWidth + arrowPadding; // Move X after arrow and its padding
|
|
|
|
for (let i = 0; i < timeStringLength; i++) {
|
|
const char = timeString[i];
|
|
|
|
if (char === ':') {
|
|
drawColon(ctx, currentX, currentY, digitHeight, blinkState); // Pass blinkState
|
|
currentX += colonWidth;
|
|
} else if (char >= '0' && char <= '9') {
|
|
drawSegmentDigit(ctx, char, currentX, currentY, digitHeight);
|
|
currentX += digitWidth;
|
|
}
|
|
|
|
// Add spacing only if it's not the last element
|
|
if (i < timeStringLength - 1) {
|
|
currentX += charSpacing;
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Initialization ---
|
|
function init() {
|
|
// 1. Scene Setup
|
|
scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0x000000);
|
|
|
|
// 2. Camera Setup
|
|
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
camera.position.set(0, 0.5, 2);
|
|
camera.lookAt(0, 0, 0);
|
|
|
|
// 3. Renderer Setup
|
|
renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
renderer.shadowMap.enabled = true;
|
|
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
// 4. Lighting (Simplified)
|
|
const ambientLight = new THREE.AmbientLight(0x444444);
|
|
scene.add(ambientLight);
|
|
|
|
// Light from the VCR display itself
|
|
vcrDisplayLight = new THREE.PointLight(0x00ff44, 0.5, 1);
|
|
vcrDisplayLight.position.set(0.3, 0.03, 0.35 + 0.005); // Move light slightly closer to VCR surface
|
|
vcrDisplayLight.castShadow = true;
|
|
vcrDisplayLight.shadow.mapSize.width = 256;
|
|
vcrDisplayLight.shadow.mapSize.height = 256;
|
|
scene.add(vcrDisplayLight);
|
|
|
|
// 5. Create the VCR
|
|
createVcr();
|
|
|
|
// 6. Event Listener
|
|
window.addEventListener('resize', onWindowResize, false);
|
|
|
|
// Start the animation loop
|
|
animate();
|
|
}
|
|
|
|
// --- VCR Display Functions ---
|
|
function createVcrDisplay() {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = 160; // Increased width for arrow and better spacing
|
|
canvas.height = 32;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
ctx.fillStyle = '#0a0a0a';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
vcrDisplayTexture = new THREE.CanvasTexture(canvas);
|
|
vcrDisplayTexture.needsUpdate = true;
|
|
|
|
const displayGeometry = new THREE.PlaneGeometry(0.45, 0.1); // Adjust geometry width for new canvas size
|
|
const displayMaterial = new THREE.MeshBasicMaterial({
|
|
map: vcrDisplayTexture,
|
|
side: THREE.FrontSide,
|
|
color: 0xffffff,
|
|
transparent: true,
|
|
emissive: 0x00ff44,
|
|
emissiveIntensity: 0.1
|
|
});
|
|
|
|
const displayMesh = new THREE.Mesh(displayGeometry, displayMaterial);
|
|
return displayMesh;
|
|
}
|
|
|
|
function updateVcrDisplay(time) {
|
|
if (!vcrDisplayTexture) return;
|
|
|
|
const canvas = vcrDisplayTexture.image;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const timeString = formatTime(time);
|
|
|
|
// Uses the new segment drawing function with ghosting, including blinkState for colon
|
|
drawSegmentDisplay(ctx, timeString);
|
|
|
|
vcrDisplayTexture.needsUpdate = true;
|
|
}
|
|
|
|
// --- VCR Model Function ---
|
|
function createVcr() {
|
|
// Materials
|
|
const vcrBodyMaterial = new THREE.MeshPhongMaterial({
|
|
color: 0x222222, // Dark metallic gray
|
|
shininess: 70,
|
|
specular: 0x444444
|
|
});
|
|
const slotMaterial = new THREE.MeshPhongMaterial({
|
|
color: 0x0a0a0a, // Deep black
|
|
shininess: 5,
|
|
specular: 0x111111
|
|
});
|
|
const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x1a1a1a, shininess: 5 });
|
|
|
|
// Floor (for shadows)
|
|
const floorGeometry = new THREE.PlaneGeometry(5, 5);
|
|
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
|
|
floor.rotation.x = -Math.PI / 2;
|
|
floor.position.y = -0.1; // Slightly below VCR
|
|
floor.receiveShadow = true;
|
|
scene.add(floor);
|
|
|
|
|
|
// VCR Body
|
|
const vcrBodyGeometry = new THREE.BoxGeometry(1.0, 0.2, 0.7);
|
|
const vcrBody = new THREE.Mesh(vcrBodyGeometry, vcrBodyMaterial);
|
|
vcrBody.position.y = 0; // Centered
|
|
vcrBody.castShadow = true;
|
|
vcrBody.receiveShadow = true;
|
|
|
|
// Cassette Slot / Front Face
|
|
const slotGeometry = new THREE.BoxGeometry(0.9, 0.05, 0.01);
|
|
const slotMesh = new THREE.Mesh(slotGeometry, slotMaterial);
|
|
slotMesh.position.set(0, -0.05, 0.35 + 0.005);
|
|
slotMesh.castShadow = true;
|
|
slotMesh.receiveShadow = true;
|
|
|
|
// VCR Display
|
|
const displayMesh = createVcrDisplay();
|
|
displayMesh.position.z = 0.35 + 0.005;
|
|
displayMesh.position.x = 0.2; // Adjusted X for arrow
|
|
displayMesh.position.y = 0.03;
|
|
|
|
// VCR Group
|
|
const vcrGroup = new THREE.Group();
|
|
vcrGroup.add(vcrBody, slotMesh, displayMesh);
|
|
vcrGroup.position.set(0, 0.1, 0); // Position the whole VCR slightly above the floor
|
|
|
|
scene.add(vcrGroup);
|
|
}
|
|
|
|
// --- Helper function to format seconds into MM:SS ---
|
|
function formatTime(seconds) {
|
|
if (isNaN(seconds) || seconds < 0) return '00:00';
|
|
const totalSeconds = Math.floor(seconds);
|
|
const minutes = Math.floor(totalSeconds / 60);
|
|
const remainingSeconds = totalSeconds % 60;
|
|
const paddedMinutes = String(minutes).padStart(2, '0');
|
|
const paddedSeconds = String(remainingSeconds).padStart(2, '0');
|
|
return `${paddedMinutes}:${paddedSeconds}`;
|
|
}
|
|
|
|
// --- Animation Loop ---
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
|
|
const currentTime = performance.now() * 0.001; // Time in seconds
|
|
|
|
// Simulate playback time
|
|
if (currentTime - lastUpdateTime > 0.1) {
|
|
simulatedPlaybackTime = currentTime;
|
|
updateVcrDisplay(simulatedPlaybackTime);
|
|
lastUpdateTime = currentTime;
|
|
}
|
|
|
|
// Blink the colon every second
|
|
if (currentTime - lastBlinkToggleTime > 0.5) { // Blink every 0.5 seconds
|
|
blinkState = !blinkState;
|
|
lastBlinkToggleTime = currentTime;
|
|
}
|
|
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
// --- Window Resize Handler ---
|
|
function onWindowResize() {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
}
|
|
|
|
// Start everything on window load
|
|
window.onload = init;
|
|
</script>
|
|
</body>
|
|
</html> |