4 models have responded to the "Autonomous Drone Simulator" challenge. Compare their approaches side-by-side on RIVAL. This response is part of RIVAL's open dataset of 5,600+ AI model responses.
Autonomous Drone Simulator
Kimi K2 Thinking's response to the 'Autonomous Drone Simulator' challenge.
Kimi K2 Thinking
February 3, 2026
Website
?Prompt
Create an autonomous drone simulator (drone flies by itself, isometric god like view, optionally interactive. With a custom environment (optionally creative), using ThreeJS, output a single-page self-contained HTML.
Response
Couldn't render this response
This model didn't return a displayable web page for this challenge.
View raw output
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autonomous Drone Simulator</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
background: linear-gradient(135deg, #0a0a2a 0%, #1a1a4a 50%, #0a0a2a 100%);
color: #e0e0ff;
}
#canvas-container {
position: relative;
width: 100vw;
height: 100vh;
}
#info-panel {
position: absolute;
top: 20px;
left: 20px;
background: rgba(10, 15, 40, 0.9);
padding: 20px;
border-radius: 15px;
min-width: 280px;
backdrop-filter: blur(15px);
border: 2px solid rgba(100, 180, 255, 0.4);
box-shadow: 0 8px 32px rgba(0, 20, 80, 0.4);
z-index: 10;
}
#info-panel h2 {
color: #64b4ff;
margin-bottom: 15px;
font-size: 1.4em;
text-shadow: 0 0 15px rgba(100, 180, 255, 0.7);
font-weight: 600;
}
.info-item {
margin: 10px 0;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
}
.info-label {
color: #a0b0ff;
font-weight: 500;
}
.info-value {
color: #64ffda;
font-weight: 600;
font-family: 'Courier New', monospace;
}
.control-button {
background: linear-gradient(45deg, #0066cc, #0099ff);
border: none;
color: white;
padding: 10px 18px;
margin: 8px 5px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.4);
min-width: 120px;
}
.control-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 25px rgba(0, 153, 255, 0.7);
background: linear-gradient(45deg, #0099ff, #00ccff);
}
.control-button.danger {
background: linear-gradient(45deg, #cc3300, #ff6600);
box-shadow: 0 4px 15px rgba(204, 51, 0, 0.4);
}
.control-button.danger:hover {
background: linear-gradient(45deg, #ff6600, #ff9933);
box-shadow: 0 6px 25px rgba(255, 102, 0, 0.7);
}
.control-button.active {
background: linear-gradient(45deg, #00cc66, #00ff99);
box-shadow: 0 4px 15px rgba(0, 204, 102, 0.4);
}
.slider-container {
margin: 15px 0;
}
.slider-label {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 13px;
color: #a0b0ff;
font-weight: 500;
}
input[type="range"] {
width: 100%;
height: 8px;
border-radius: 4px;
background: rgba(100, 180, 255, 0.2);
outline: none;
-webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(45deg, #64b4ff, #00ccff);
cursor: pointer;
box-shadow: 0 0 15px rgba(100, 180, 255, 0.8);
border: 2px solid rgba(255, 255, 255, 0.8);
}
#loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 100;
background: rgba(10, 15, 40, 0.95);
padding: 40px;
border-radius: 20px;
border: 2px solid rgba(100, 180, 255, 0.4);
box-shadow: 0 0 50px rgba(0, 102, 204, 0.6);
}
.loader {
border: 4px solid rgba(100, 180, 255, 0.2);
border-top: 4px solid #64b4ff;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1.2s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
margin: 0 auto 25px;
box-shadow: 0 0 25px rgba(100, 180, 255, 0.6);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.section-title {
color: #64b4ff;
margin: 20px 0 10px 0;
font-size: 1.1em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 0 10px rgba(100, 180, 255, 0.5);
}
#controls {
margin-top: 20px;
padding-top: 20px;
border-top: 2px solid rgba(100, 180, 255, 0.3);
}
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 8px;
box-shadow: 0 0 10px currentColor;
}
.status-active { background: #00ff99; color: #00ff99; }
.status-inactive { background: #ff4444; color: #ff4444; }
.status-idle { background: #ffaa00; color: #ffaa00; }
.mode-selector {
display: flex;
gap: 10px;
margin: 15px 0;
}
.mode-button {
flex: 1;
padding: 10px;
background: rgba(100, 180, 255, 0.1);
border: 2px solid rgba(100, 180, 255, 0.3);
border-radius: 8px;
color: #a0b0ff;
cursor: pointer;
transition: all 0.3s ease;
font-size: 12px;
font-weight: 500;
text-align: center;
}
.mode-button:hover {
background: rgba(100, 180, 255, 0.2);
border-color: rgba(100, 180, 255, 0.5);
}
.mode-button.active {
background: linear-gradient(45deg, #0066cc, #0099ff);
border-color: #64b4ff;
color: white;
box-shadow: 0 0 20px rgba(100, 180, 255, 0.6);
}
</style>
</head>
<body>
<div id="loading">
<div class="loader"></div>
<h2>Initializing Drone Simulator</h2>
<p>Loading advanced systems...</p>
</div>
<div id="canvas-container">
<div id="info-panel">
<h2>🚁 DRONE COMMAND</h2>
<div class="section-title">Flight Status</div>
<div class="info-item">
<span class="info-label">Altitude:</span>
<span class="info-value" id="altitude">0m</span>
</div>
<div class="info-item">
<span class="info-label">Speed:</span>
<span class="info-value" id="speed">0 km/h</span>
</div>
<div class="info-item">
<span class="info-label">Position:</span>
<span class="info-value" id="position">X:0 Z:0</span>
</div>
<div class="info-item">
<span class="info-label">Battery:</span>
<span class="info-value" id="battery">100%</span>
</div>
<div class="info-item">
<span class="info-label">Flight Mode:</span>
<span class="info-value" id="flight-mode">AUTO</span>
</div>
<div class="section-title">Environment</div>
<div class="info-item">
<span class="info-label">Wind Speed:</span>
<span class="info-value" id="wind-speed">5 km/h</span>
</div>
<div class="info-item">
<span class="info-label">Time:</span>
<span class="info-value" id="time">12:00</span>
</div>
<div class="section-title">Control Mode</div>
<div class="mode-selector">
<div class="mode-button active" data-mode="auto">AUTO</div>
<div class="mode-button" data-mode="manual">MANUAL</div>
<div class="mode-button" data-mode="waypoint">WAYPOINT</div>
</div>
<div class="section-title">Drone Controls</div>
<div id="controls">
<button class="control-button" id="takeoff-btn">🚀 Takeoff</button>
<button class="control-button danger" id="land-btn">🛬 Land</button>
<button class="control-button" id="rtl-btn">🏠 Return Home</button>
<div class="slider-container">
<div class="slider-label">
<span>Flight Speed</span>
<span id="speed-value">50%</span>
</div>
<input type="range" id="speed-slider" min="10" max="100" value="50">
</div>
<div class="slider-container">
<div class="slider-label">
<span>Altitude Limit</span>
<span id="altitude-value">100m</span>
</div>
<input type="range" id="altitude-slider" min="20" max="200" value="100">
</div>
<button class="control-button" id="camera-btn">📷 Toggle Camera</button>
<button class="control-button" id="lights-btn">💡 Lights</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Global variables
let scene, camera, renderer, drone, environment, clock;
let droneController, physicsEngine, environmentManager;
let isInitialized = false;
let currentMode = 'auto';
let animationId;
// Hide loading screen
function hideLoading() {
const loading = document.getElementById('loading');
loading.style.opacity = '0';
setTimeout(() => {
loading.style.display = 'none';
isInitialized = true;
}, 500);
}
// Initialize ThreeJS scene
function initScene() {
// Scene setup
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x0a0a2a, 100, 2000);
// Camera setup (isometric view)
camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
0.1,
10000
);
camera.position.set(300, 400, 300);
camera.lookAt(0, 0, 0);
// Renderer setup
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
powerPreference: "high-performance"
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
const container = document.getElementById('canvas-container');
container.appendChild(renderer.domElement);
// Clock for animations
clock = new THREE.Clock();
// Initialize systems
initLighting();
initEnvironment();
initDrone();
initControls();
initEventListeners();
// Start render loop
animate();
// Hide loading screen
setTimeout(hideLoading, 1000);
}
// Initialize lighting system
function initLighting() {
// Ambient light
const ambientLight = new THREE.AmbientLight(0x404080, 0.3);
scene.add(ambientLight);
// Main directional light (sun)
const sunLight = new THREE.DirectionalLight(0xffffff, 1.2);
sunLight.position.set(200, 300, 100);
sunLight.castShadow = true;
sunLight.shadow.mapSize.width = 4096;
sunLight.shadow.mapSize.height = 4096;
sunLight.shadow.camera.near = 0.5;
sunLight.shadow.camera.far = 1000;
sunLight.shadow.camera.left = -300;
sunLight.shadow.camera.right = 300;
sunLight.shadow.camera.top = 300;
sunLight.shadow.camera.bottom = -300;
sunLight.shadow.bias = -0.0001;
scene.add(sunLight);
// Hemisphere light for natural lighting
const hemisphereLight = new THREE.HemisphereLight(0x87CEEB, 0x1a1a4a, 0.6);
scene.add(hemisphereLight);
// Point lights for dramatic effect
const pointLight1 = new THREE.PointLight(0x64b4ff, 0.8, 200);
pointLight1.position.set(-100, 50, -100);
scene.add(pointLight1);
const pointLight2 = new THREE.PointLight(0xff6b6b, 0.6, 150);
pointLight2.position.set(100, 30, 100);
scene.add(pointLight2);
}
// Initialize environment
function initEnvironment() {
environmentManager = new EnvironmentManager(scene);
environmentManager.createTerrain();
environmentManager.createBuildings();
environmentManager.createTrees();
environmentManager.createWaterFeatures();
environmentManager.createClouds();
environment = environmentManager.getEnvironment();
}
// Initialize drone
function initDrone() {
droneController = new DroneController(scene);
drone = droneController.getDrone();
physicsEngine = new PhysicsEngine();
}
// Initialize UI controls
function initControls() {
// Takeoff/Landing
document.getElementById('takeoff-btn').addEventListener('click', () => {
droneController.takeoff();
updateButtonStates();
});
document.getElementById('land-btn').addEventListener('click', () => {
droneController.land();
updateButtonStates();
});
// Return to launch
document.getElementById('rtl-btn').addEventListener('click', () => {
droneController.returnToLaunch();
});
// Speed control
const speedSlider = document.getElementById('speed-slider');
speedSlider.addEventListener('input', (e) => {
const value = e.target.value;
document.getElementById('speed-value').textContent = value + '%';
droneController.setSpeedMultiplier(value / 100);
});
// Altitude control
const altitudeSlider = document.getElementById('altitude-slider');
altitudeSlider.addEventListener('input', (e) => {
const value = e.target.value;
document.getElementById('altitude-value').textContent = value + 'm';
droneController.setAltitudeLimit(parseInt(value));
});
// Camera toggle
document.getElementById('camera-btn').addEventListener('click', () => {
droneController.toggleCamera();
});
// Lights toggle
document.getElementById('lights-btn').addEventListener('click', () => {
droneController.toggleLights();
});
// Mode selection
document.querySelectorAll('.mode-button').forEach(button => {
button.addEventListener('click', (e) => {
document.querySelectorAll('.mode-button').forEach(b => b.classList.remove('active'));
e.target.classList.add('active');
currentMode = e.target.dataset.mode;
droneController.setFlightMode(currentMode);
document.getElementById('flight-mode').textContent = currentMode.toUpperCase();
});
});
}
// Initialize event listeners
function initEventListeners() {
// Window resize
window.addEventListener('resize', onWindowResize);
// Mouse controls for camera
let mouseX = 0, mouseY = 0;
let isMouseDown = false;
renderer.domElement.addEventListener('mousedown', () => { isMouseDown = true; });
renderer.domElement.addEventListener('mouseup', () => { isMouseDown = false; });
renderer.domElement.addEventListener('mousemove', (e) => {
if (isMouseDown) {
const deltaX = e.clientX - mouseX;
const deltaY = e.clientY - mouseY;
// Rotate camera around scene
const spherical = new THREE.Spherical();
spherical.setFromVector3(camera.position);
spherical.theta -= deltaX * 0.01;
spherical.phi += deltaY * 0.01;
spherical.phi = Math.max(0.1, Math.min(Math.PI - 0.1, spherical.phi));
camera.position.setFromSpherical(spherical);
camera.lookAt(0, 50, 0);
}
mouseX = e.clientX;
mouseY = e.clientY;
});
// Scroll to zoom
renderer.domElement.addEventListener('wheel', (e) => {
const scale = e.deltaY > 0 ? 1.1 : 0.9;
camera.position.multiplyScalar(scale);
camera.position.clampLength(100, 1000);
camera.lookAt(0, 50, 0);
});
}
// Window resize handler
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Update UI
function updateUI() {
if (!drone || !isInitialized) return;
const position = drone.position;
const velocity = droneController.getVelocity();
const altitude = Math.max(0, position.y);
const speed = velocity.length() * 3.6; // Convert to km/h
const battery = droneController.getBatteryLevel();
const flightMode = droneController.getFlightMode();
document.getElementById('altitude').textContent = altitude.toFixed(1) + 'm';
document.getElementById('speed').textContent = speed.toFixed(1) + ' km/h';
document.getElementById('position').textContent = `X:${position.x.toFixed(0)} Z:${position.z.toFixed(0)}`;
document.getElementById('battery').textContent = battery.toFixed(0) + '%';
document.getElementById('flight-mode').textContent = flightMode.toUpperCase();
// Update environment info
const windSpeed = environmentManager.getWindSpeed();
const time = environmentManager.getTimeOfDay();
document.getElementById('wind-speed').textContent = windSpeed.toFixed(0) + ' km/h';
document.getElementById('time').textContent = time;
// Update button states
updateButtonStates();
}
// Update button states
function updateButtonStates() {
const isFlying = droneController.isFlying();
const isLanding = droneController.isLanding();
document.getElementById('takeoff-btn').disabled = isFlying;
document.getElementById('land-btn').disabled = !isFlying || isLanding;
document.getElementById('rtl-btn').disabled = !isFlying;
}
// Animation loop
function animate() {
animationId = requestAnimationFrame(animate);
if (!isInitialized) return;
const deltaTime = clock.getDelta();
const elapsedTime = clock.getElapsedTime();
// Update systems
droneController.update(deltaTime, elapsedTime);
environmentManager.update(deltaTime, elapsedTime);
physicsEngine.update(deltaTime);
// Update UI
updateUI();
// Render scene
renderer.render(scene, camera);
}
// Environment Manager Class
class EnvironmentAutonomous Drone Simulator
About Kimi K2 Thinking
Capabilities
ConversationReasoningCode GenerationAnalysisTool Use
Categories
TextCodeMultimodal
Specifications
- Provider
- Moonshotai
- Released
- 2025-11-06
- Size
- XLARGE
- Parameters
- 1T (32B active)
- Context
- 262,144 tokens
