Futuristic City Sunset

// Utility function for random numbers export function random(min, max) { return Math.random() * (max - min) + min; } // Utility function for random integer export function randomInt(min, max) { return Math.floor(random(min, max + 1)); } // Utility function for random color export function randomColor(colors) { return colors[Math.floor(Math.random() * colors.length)]; } import { random, randomInt, randomColor } from './utils.js'; const WINDOW_COLORS = ['#FFFF00', '#FFD700', '#FFA500', '#FF8C00', '#FF4500', '#FF00FF', '#00FFFF', '#7FFF00']; export class Building { constructor(x, y, width, height, color, canvasHeight) { this.x = x; this.y = y; this.width = width; this.height = height; this.color = color; this.canvasHeight = canvasHeight; this.windows = this.createWindows(); } createWindows() { const windows = []; const windowSize = Math.min(this.width * 0.1, this.height * 0.05); const gapX = windowSize * 0.8; const gapY = windowSize * 1.2; const numCols = Math.floor((this.width - gapX) / (windowSize + gapX)); const numRows = Math.floor((this.height - gapY) / (windowSize + gapY)); const startX = this.x + (this.width - numCols * (windowSize + gapX) + gapX) / 2; const startY = this.y + gapY; for (let r = 0; r < numRows; r++) { for (let c = 0; c < numCols; c++) { if (Math.random() > 0.3) { // Randomly skip some windows windows.push({ x: startX + c * (windowSize + gapX), y: startY + r * (windowSize + gapY), width: windowSize, height: windowSize, color: randomColor(WINDOW_COLORS), on: Math.random() > 0.1 // 90% chance a window is on }); } } } return windows; } update() { // Randomly flicker windows this.windows.forEach(win => { if (Math.random() < 0.005) { win.on = !win.on; } }); } draw(ctx) { // Draw building body ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); // Draw windows this.windows.forEach(win => { if (win.on) { ctx.fillStyle = win.color; ctx.fillRect(win.x, win.y, win.width, win.height); } }); } drawReflection(ctx, waterLevel) { const reflectionY = waterLevel + (waterLevel - (this.y + this.height)); const reflectionHeight = this.height; ctx.save(); ctx.translate(this.x + this.width / 2, reflectionY + reflectionHeight / 2); ctx.scale(1, -1); // Flip vertically ctx.translate(-(this.x + this.width / 2), -(reflectionY + reflectionHeight / 2)); // Draw slightly darker reflection ctx.fillStyle = this.color; ctx.globalAlpha = 0.4; // Make reflection semi-transparent ctx.fillRect(this.x, reflectionY, this.width, reflectionHeight); // Draw window reflections this.windows.forEach(win => { if (win.on) { ctx.fillStyle = win.color; ctx.fillRect(win.x, reflectionY + (this.y + this.height - win.y - win.height), win.width, win.height); } }); ctx.globalAlpha = 1.0; ctx.restore(); // Add ripple effect (optional, simple version) ctx.save(); ctx.globalAlpha = 0.1; for (let i = 0; i < reflectionHeight; i += 5) { const rippleY = reflectionY + i; const rippleOffset = Math.sin(rippleY * 0.1 + Date.now() * 0.001) * 2; // Simple sine wave ripple ctx.drawImage( ctx.canvas, this.x, this.y, this.width, 5, // Source rect (original building) - this is incorrect, should sample reflection this.x + rippleOffset, rippleY, this.width, 5 // Destination rect (in reflection area) ); // A better ripple would sample the already drawn reflection, but that's more complex. // For now, just drawing lines might be simpler. ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)'; ctx.beginPath(); ctx.moveTo(this.x + rippleOffset, rippleY); ctx.lineTo(this.x + this.width + rippleOffset, rippleY); ctx.stroke(); } ctx.restore(); } } import { random, randomInt, randomColor } from './utils.js'; const CAR_COLORS = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF']; const LIGHT_COLOR = '#FFFFFF'; export class FlyingCar { constructor(canvasWidth, canvasHeight, waterLevel) { this.canvasWidth = canvasWidth; this.canvasHeight = canvasHeight; this.waterLevel = waterLevel; // Cars should fly above water this.width = random(15, 30); this.height = this.width * 0.4; this.speedX = random(-2, 2); // Ensure cars don't start moving straight up/down or too slow horizontally if (Math.abs(this.speedX) < 0.5) this.speedX = this.speedX < 0 ? -0.5 : 0.5; this.speedY = random(-0.2, 0.2); // Slow vertical drift // Start position (either left/right edge, above water) const startLeft = Math.random() < 0.5; this.x = startLeft ? -this.width : this.canvasWidth; this.y = random(this.canvasHeight * 0.1, this.waterLevel - this.height - 50); // Ensure above water and buildings this.color = randomColor(CAR_COLORS); this.lightSize = this.height * 0.3; this.trail = []; this.maxTrailLength = 15; } update() { // Add current position to trail this.trail.push({ x: this.x, y: this.y }); if (this.trail.length > this.maxTrailLength) { this.trail.shift(); // Remove oldest point } this.x += this.speedX; this.y += this.speedY; // Simple hover effect this.y += Math.sin(Date.now() * 0.002 + this.x * 0.1) * 0.3; // Reset if car goes off-screen if ((this.speedX > 0 && this.x > this.canvasWidth) || (this.speedX < 0 && this.x < -this.width)) { this.reset(); } // Keep cars within vertical bounds (above water/buildings) if (this.y < this.canvasHeight * 0.1 || this.y > this.waterLevel - this.height - 20) { this.speedY *= -1; // Bounce vertically softly this.y += this.speedY * 2; // Push away from boundary } } reset() { // Reinitialize most properties for a new car entering const startLeft = Math.random() < 0.5; this.speedX = random(0.5, 2) * (startLeft ? 1 : -1); // Ensure minimum horizontal speed this.x = startLeft ? -this.width : this.canvasWidth; this.y = random(this.canvasHeight * 0.1, this.waterLevel - this.height - 50); this.color = randomColor(CAR_COLORS); this.trail = []; } draw(ctx) { // Draw trail ctx.save(); for (let i = 0; i < this.trail.length; i++) { const point = this.trail[i]; const alpha = (i / this.maxTrailLength) * 0.5; // Fade out trail ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`; ctx.beginPath(); ctx.arc(point.x + this.width / 2, point.y + this.height / 2, this.lightSize * (i / this.maxTrailLength), 0, Math.PI * 2); ctx.fill(); } ctx.restore(); // Draw car body ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, this.width, this.height); // Draw lights (headlight/taillight) ctx.fillStyle = LIGHT_COLOR; const lightX = this.speedX > 0 ? this.x + this.width : this.x - this.lightSize; const lightY = this.y + this.height / 2 - this.lightSize / 2; ctx.fillRect(lightX, lightY, this.lightSize, this.lightSize); // Optional: Small vertical light/glow underneath ctx.fillStyle = `rgba(255, 255, 255, 0.3)`; ctx.beginPath(); ctx.ellipse(this.x + this.width / 2, this.y + this.height * 1.5, this.width * 0.4, this.height * 0.5, 0, 0, Math.PI * 2); ctx.fill(); } drawReflection(ctx, waterLevel) { const reflectionY = waterLevel + (waterLevel - (this.y + this.height)); const reflectionHeight = this.height; ctx.save(); ctx.globalAlpha = 0.3; // Cars are smaller, make reflection fainter // Simple reflection (faded shape) ctx.fillStyle = this.color; ctx.fillRect(this.x, reflectionY, this.width, reflectionHeight); // Reflect light ctx.fillStyle = LIGHT_COLOR; const lightX = this.speedX > 0 ? this.x + this.width : this.x - this.lightSize; const lightY = reflectionY + this.height / 2 - this.lightSize / 2; ctx.fillRect(lightX, lightY, this.lightSize, this.lightSize); ctx.restore(); } } import { Building } from './building.js'; import { FlyingCar } from './car.js'; import { random, randomInt } from './utils.js'; // Canvas setup const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let width, height, waterLevel; let buildings = []; let cars = []; const NUM_BUILDINGS = 25; const NUM_CARS = 10; const BUILDING_COLORS = ['#1a1a1a', '#2a2a2a', '#3a3a3a', '#0d0d0d', '#1f1f1f']; // Set canvas to full window size function resizeCanvas() { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; waterLevel = height * 0.65; // Water takes up lower 35% createCityscape(); // Recreate elements on resize } // Create Buildings function createCityscape() { buildings = []; cars = []; let currentX = 0; while (currentX < width) { const buildingWidth = random(width * 0.03, width * 0.1); // Taller buildings towards the center, shorter near edges const centerFactor = 1 - Math.abs(currentX + buildingWidth / 2 - width / 2) / (width / 2); // 0 at edge, 1 at center const maxHeight = waterLevel * 0.8; // Max height relative to water level const minHeight = waterLevel * 0.2; const buildingHeight = random(minHeight, maxHeight) * (0.5 + centerFactor * 0.8); // Weighted height const buildingY = waterLevel - buildingHeight; const color = BUILDING_COLORS[randomInt(0, BUILDING_COLORS.length - 1)]; buildings.push(new Building(currentX, buildingY, buildingWidth, buildingHeight, color, height)); currentX += buildingWidth + random(5, 15); // Add gap between buildings } // Sort buildings by width for pseudo-3D effect (wider buildings appear closer) buildings.sort((a, b) => a.width - b.width); // Create Cars for (let i = 0; i < NUM_CARS; i++) { cars.push(new FlyingCar(width, height, waterLevel)); } } // Draw Background (Sunset Sky) function drawBackground() { const gradient = ctx.createLinearGradient(0, 0, 0, waterLevel); gradient.addColorStop(0, '#00001a'); // Deep blue/purple top gradient.addColorStop(0.4, '#3a1c4a'); // Purple gradient.addColorStop(0.7, '#ff4500'); // Orange gradient.addColorStop(1, '#ff8c00'); // Lighter orange near horizon ctx.fillStyle = gradient; ctx.fillRect(0, 0, width, waterLevel); } // Draw Water function drawWater() { const gradient = ctx.createLinearGradient(0, waterLevel, 0, height); gradient.addColorStop(0, '#1a1a2a'); // Darker water near horizon reflection gradient.addColorStop(1, '#0d0d1a'); // Very dark blue at bottom ctx.fillStyle = gradient; ctx.fillRect(0, waterLevel, width, height - waterLevel); } // Animation function function animate() { requestAnimationFrame(animate); // Clear canvas (or draw background over everything) // ctx.clearRect(0, 0, width, height); // Use if background doesn't cover everything drawBackground(); drawWater(); // Draw reflections first (behind buildings/cars) buildings.forEach(building => { building.drawReflection(ctx, waterLevel); }); cars.forEach(car => { car.drawReflection(ctx, waterLevel); }); // Draw buildings buildings.forEach(building => { building.update(); // Update window flickering building.draw(ctx); }); // Draw cars cars.forEach(car => { car.update(); car.draw(ctx); }); } // Initial setup window.addEventListener('resize', resizeCanvas); resizeCanvas(); // Initial size and creation animate(); // Start animation