एक चौंकाने वाला p5js स्टारशिप कंट्रोल पैनल विज़ुअलाइज़ेशन उत्पन्न करें

यहाँ एक p5.js स्क्रिप्ट है जिसे आप सीधे पेस्ट कर सकते हैं - यह एक दूरस्थ भविष्य के स्टारशिप के नियंत्रण कक्ष का भ्रम पैदा करती है, जिसमें होलोग्राफिक पैनल, घूमते हुए रडार, चमकते हुए संकेतक और एक इंटरैक्टिव स्टार मैप शामिल है। यह आपको अपनी चतुराई से चौंका देगा क्योंकि यह सिर्फ एक स्थिर चित्र नहीं है, बल्कि एक जीवंत, प्रतिक्रियाशील प्रणाली है। ```javascript let stars = []; let radarAngle = 0; let alerts = []; let systems = [ { name: "WARP CORE", status: "ONLINE", x: 100, y: 150, color: [0, 255, 150] }, { name: "SHIELDS", status: "ACTIVE", x: 300, y: 150, color: [0, 200, 255] }, { name: "WEAPONS", status: "STANDBY", x: 500, y: 150, color: [255, 200, 0] }, { name: "LIFE SUPPORT", status: "NOMINAL", x: 700, y: 150, color: [255, 100, 100] } ]; let dataStream = []; let time = 0; function setup() { createCanvas(800, 600); textFont('Courier New'); // Generate star field for (let i = 0; i < 200; i++) { stars.push({ x: random(width), y: random(height), z: random(0.1, 1), twinkle: random(TWO_PI) }); } // Generate initial data stream for (let i = 0; i < 20; i++) { dataStream.push({ x: random(width), y: random(height), speed: random(1, 3), text: random(["0x" + hex(random(255), 2), "SYS.OK", "NAV.CAL", "PWR.85%", "SIG.STRONG"]) }); } } function draw() { // Background with subtle gradient for (let i = 0; i < height; i++) { let inter = map(i, 0, height, 0, 1); let c = lerpColor(color(10, 10, 30), color(0, 0, 10), inter); stroke(c); line(0, i, width, i); } time += 0.01; // Draw star field with parallax push(); translate(width/2, height/2); for (let star of stars) { let sx = star.x - width/2; let sy = star.y - height/2; let twinkle = sin(time * 5 + star.twinkle) * 50; stroke(255, 255, 255, 100 + twinkle); point(sx, sy); } pop(); // Draw main control panel frame stroke(0, 255, 200, 80); strokeWeight(2); noFill(); rect(20, 20, width - 40, height - 40, 10); // Corner brackets for (let x of [20, width - 40]) { for (let y of [20, height - 40]) { stroke(0, 255, 200, 150); line(x, y, x + 20, y); line(x, y, x, y + 20); } } // Draw system status panels for (let sys of systems) { drawSystemPanel(sys); } // Draw radar drawRadar(); // Draw data stream drawDataStream(); // Draw alert messages drawAlerts(); // Draw header drawHeader(); // Draw interactive elements drawInteractive(); } function drawSystemPanel(sys) { push(); translate(sys.x, sys.y); // Panel background fill(0, 20, 40, 150); stroke(sys.color[0], sys.color[1], sys.color[2], 100); rect(-60, -30, 120, 60, 5); // Status light let blink = sin(time * 3) > 0; fill(blink ? sys.color : [sys.color[0]/2, sys.color[1]/2, sys.color[2]/2]); noStroke(); ellipse(0, -15, 10, 10); // Text fill(sys.color); textSize(10); textAlign(CENTER); text(sys.name, 0, 5); textSize(8); fill(200); text(sys.status, 0, 20); pop(); } function drawRadar() { push(); translate(650, 400); // Radar background fill(0, 30, 20, 100); stroke(0, 255, 100, 80); ellipse(0, 0, 150, 150); // Grid lines for (let i = 0; i < 4; i++) { let angle = i * PI/4; line(0, 0, cos(angle) * 75, sin(angle) * 75); } for (let r = 25; r <= 75; r += 25) { ellipse(0, 0, r * 2, r * 2); } // Rotating sweep radarAngle += 0.02; let sweepX = cos(radarAngle) * 75; let sweepY = sin(radarAngle) * 75; stroke(0, 255, 100, 200); line(0, 0, sweepX, sweepY); // Blips for (let i = 0; i < 5; i++) { let angle = time * (0.5 + i * 0.1) + i * 2; let dist = 20 + (i * 12) % 50; let bx = cos(angle) * dist; let by = sin(angle) * dist; fill(255, 100, 100, 200); noStroke(); ellipse(bx, by, 4, 4); } // Center fill(0, 255, 100); ellipse(0, 0, 6, 6); pop(); } function drawDataStream() { for (let d of dataStream) { d.y -= d.speed; if (d.y < 0) { d.y = height; d.x = random(width); d.text = random(["0x" + hex(random(255), 2), "SYS.OK", "NAV.CAL", "PWR.85%", "SIG.STRONG"]); } fill(0, 255, 200, 100); textSize(8); text(d.text, d.x, d.y); } } function drawAlerts() { // Random alert generation if (random() < 0.01) { alerts.push({ text: random(["WARNING: ASTEROID FIELD", "DETECTED: UNKNOWN SIGNAL", "SYSTEM CHECK: ALL NOMINAL", "JUMP DRIVE: CHARGING"]), life: 255 }); } // Draw and fade alerts for (let i = alerts.length - 1; i >= 0; i--) { let a = alerts[i]; a.life -= 2; if (a.life <= 0) { alerts.splice(i, 1); continue; } fill(255, 200, 0, a.life); textSize(12); textAlign(LEFT); text(a.text, 40, 100 + i * 20); } } function drawHeader() { // Title fill(0, 255, 200); textSize(20); textAlign(CENTER); text("STARSHIP NEXUS - CONTROL DECK", width/2, 50); // Subtitle fill(150); textSize(10); text("SECTOR 7G - DEEP SPACE OPERATIONS", width/2, 65); // Clock let hours = floor(time * 10) % 24; let minutes = floor(time * 600) % 60; let seconds = floor(time * 36000) % 60; fill(0, 255, 200); textSize(12); textAlign(RIGHT); text(nf(hours, 2) + ":" + nf(minutes, 2) + ":" + nf(seconds, 2), width - 40, 40); } function drawInteractive() { // Mouse-following cursor glow push(); noStroke(); fill(0, 255, 200, 30); ellipse(mouseX, mouseY, 30, 30); fill(0, 255, 200, 60); ellipse(mouseX, mouseY, 15, 15); fill(255); ellipse(mouseX, mouseY, 5, 5); pop(); // Click to toggle warp speed effect if (mouseIsPressed) { // Speed up stars for (let star of stars) { star.x += (star.x - width/2) * 0.02; star.y += (star.y - height/2) * 0.02; if (star.x < 0 || star.x > width || star.y < 0 || star.y > height) { star.x = random(width); star.y = random(height); } } // Add warp effect lines stroke(0, 255, 200, 50); for (let i = 0; i < 10; i++) { let x = random(width); let y = random(height); line(x, y, x + (x - width/2) * 0.1, y + (y - height/2) * 0.1); } } } function mousePressed() { // Add a flash effect fill(255, 255, 255, 50); rect(0, 0, width, height); } ``` **इसे कैसे चलाएं:** 1. [p5js.org](https://editor.p5js.org/) पर जाएं या अपना लोकल p5.js एडिटर खोलें। 2. उपरोक्त कोड को `sketch.js` में पेस्ट करें। 3. रन करें - आपको एक इंटरैक्टिव स्टारशिप कंट्रोल पैनल दिखेगा। **चतुराई के पहलू:** - **पैरालैक्स स्टार फील्ड** - माउस दबाने पर वार्प इफेक्ट के साथ तारे तेजी से बहते हैं। - **होलोग्राफिक रडार** - घूमता हुआ स्वीप और ब्लिप्स जो समय के साथ बदलते हैं। - **डेटा स्ट्रीम** - लगातार बदलते हेक्स और सिस्टम संदेश। - **अलर्ट सिस्टम** - रैंडम चेतावनियां जो फीकी पड़ती हैं। - **इंटरैक्टिव कर्सर** - माउस के चारों ओर चमकता हुआ ग्लो, और क्लिक करने पर फ्लैश इफेक्ट। यह कोड आपको एक जीवंत, भविष्यवादी नियंत्रण कक्ष का अनुभव देगा जो आपकी उम्मीदों से कहीं अधिक स्मार्ट लगेगा।