Here is a p5.js sketch that generates a startling starship control panel visualization. It combines a starfield, blinking status lights, a rotating radar ring, and flickering telemetry readouts for a sci-fi interface feel. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>p5js · starship control panel</title> <style> body { margin: 0; overflow: hidden; background: #020510; } canvas { display: block; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script> <script> // ============================================================ // STARSHIP CONSOLE - GENERATIVE PANEL // startling visuals: flickering leds, rotating radar, starfield // ============================================================ let stars = []; const STAR_COUNT = 450; let warpPulse = 0; let radarAngle = 0; let alertPhase = 0; // status lights (grid of blinking indicators) const ledGrid = []; const LED_ROWS = 5; const LED_COLS = 14; // message scroller (hyperspace text) let ticker = 'WARP DRIVE READY // AUTOPILOT ENGAGED // CORE TEMP NOMINAL // STELLAR MASS: 1.4 SOL // QUANTUM FLUX DETECTED'; function setup() { createCanvas(windowWidth, windowHeight); // initialize starfield for (let i = 0; i < STAR_COUNT; i++) { stars.push({ x: random(width), y: random(height), z: random(0.3, 1.0), // depth factor size: random(0.8, 2.4) }); } // initialize LED grid with random phases for (let r = 0; r < LED_ROWS; r++) { ledGrid[r] = []; for (let c = 0; c < LED_COLS; c++) { ledGrid[r][c] = { baseBright: random(0.4, 1.0), phase: random(0, TWO_PI), speed: random(2, 8), color: [100, 220, 255] // cyan-ish, some will change }; } } } const LED_COLS = 14; const LED_SPACING_X = 70; const LED_SPACING_Y = 32; const LED_OFFSET_X = 80; const LED_OFFSET_Y = 60; function draw() { background(2, 8, 18); // deep space blue // --- STARFIELD SPEED (foreground panel parallax) --- // subtle drifting of stars based on mouse velocity + time let shiftX = map(mouseX, 0, width, 0.2, 0.9); let shiftY = map(mouseY, 0, height, 0.2, 0.9); for (let s of stars) { s.x += (0.15 * s.z) + (mouseX - pmouseX) * 0.008; s.y += (0.1 * s.z) + (mouseY - pmouseY) * 0.007; if (s.x > width) s.x = 0; if (s.x < 0) s.x = width; if (s.y > height) s.y = 0; if (s.y < 0) s.y = height; // twinkle let twinkle = 150 * s.z * (0.7 + 0.3 * sin(frameCount * 0.05 + s.z * 10)); // dim outer stars, near stars brighter let alpha = map(s.z, 0.3, 1.0, 40, 180); stroke(190, 225, 255, alpha * 0.6 + 30 * sin(frameCount * 0.02 + s.x * 0.01)); point(s.x, s.y); } // extra glow: bigger stars (few) noFill(); stroke(160, 210, 255, 45); for (let i = 0; i < 20; i++) { let s = stars[i % stars.length]; circle(s.x, s.y, s.size * 5.5); } // ---- MAIN PANEL BACKGROUND ---- push(); noStroke(); fill(12, 18, 32, 200); rect(38, 24, width - 80, height - 50, 22); fill(9, 14, 24); rect(50, 40, width - 104, height - 98, 12); // inner grid lines stroke(30, 80, 130, 20); strokeWeight(0.5); for (let gx = 60; gx < width - 60; gx += 55) { line(gx, 38, gx, height - 40); } for (let gy = 48; gy < height - 48; gy += 55) { line(50, gy, width - 60, gy); } // ---- STATUS LED GRID (startling blinking) ---- for (let r = 0; r < LED_ROWS; r++) { for (let c = 0; c < LED_COLS; c++) { let led = ledGrid[r][c]; let x = LED_OFFSET_X + c * LED_SPACING_X; let y = LED_OFFSET_Y + r * LED_SPACING_Y; // flicker / pulse intensity (intense blinking, odd offsets) let brightness = 0.5 + 0.5 * sin(frameCount * led.speed * 0.05 + led.phase + radarAngle * 0.1); // occasionally random glitch if (frameCount % 70 === 0) { led.color = [randomInt(100,255), randomInt(100,255), randomInt(100,255)]; } let ledAlpha = 90 + 120 * brightness; // glow effect under LED noStroke(); fill(led.color[0], led.color[1], led.color[2], ledAlpha * 0.22); circle(x, y, 28 + 10 * brightness); // core led fill(led.color[0], led.color[1], led.color[2], min(255, ledAlpha)); circle(x, y, 9 + 3 * brightness); // tiny flicker random if (random(1) < 0.05) { fill(255, 255, 255, 180); circle(x, y, 4); } } } // ---- ROTATING RADAR SWEEP + rings ---- radarAngle += 0.02; if (radarAngle > TWO_PI) radarAngle = 0; let centerX = width - 160; let centerY = height * 0.5 - 30; let radR = 115; push(); translate(centerX, centerY); stroke(70, 220, 220, 180); strokeWeight(2.5); noFill(); circle(0, 0, radR * 2); circle(0, 0, radR * 1.3); circle(0, 0, radR * 0.6); // cross lines stroke(60, 200, 200, 100); strokeWeight(1.3); line(-radR, 0, radR, 0); line(0, -radR, 0, radR); // sweep beam (alpha glow) tangent = map(sin(frameCount * 0.03), -1, 1, 0, 1); fill(50, 255, 220, 35 + 45 * tangent); noStroke(); arc(0, 0, radR * 2.1, radR * 2.1, radarAngle - 0.25, radarAngle + 0.35); stroke(130, 255, 210, 130); strokeWeight(2); line(0, 0, cos(radarAngle) * radR, sin(radarAngle) * radR); // blips (random targets) rotate(radarAngle * 0.1); for (let i = 0; i < 3; i++) { let bx = cos(i * 2.1) * (radR * 0.55 + i * 10); let by = sin(i * 1.8) * radR * 0.6; stroke(255, 180, 80, 150); strokeWeight(2); point(bx, by); fill(255, 180, 70, 100); circle(bx, by, 5); } pop(); // ----- STATUS TEXT READOUT (hyperscroll ) ----- let msg = ticker; let textPos = (frameCount * 1.2) % (width + 300) - 300; fill(100, 120, 140, 250); stroke(80, 220, 100, 190); strokeWeight(0.5); textSize(18); textFont('monospace'); textStyle(BOLD); text(msg, textPos, height - 28); // duplicate for seamless text(msg, textPos + msg.length * 8 + 40, height - 28); // ---- big central numeric values ---- push(); textFont('courier'); strokeWeight(0); // show random hyper warp jump coordinate readouts let coordX = 150; let coordY = height - 80; fill(30, 200, 240, 200); textSize(10); text(`7:${floor(random(100,999))} m/s`, coordX, coordY); fill(80, 250, 170, 190); text(`Σ 0x${randomHex()}`, 200, coordY + 40); text(`SHLD 92.4%`, 130, coordY + 80); // LCD style fill(255, 220, 120, 200); textSize(16); text('NAV // LOCK', width*0.3, height - 140); // colorful alarm if (frameCount % 90 < 30) { let cui = color(255, 70, 70, 140); fill(cui); textSize(14); text('!! ALERT: GRAVITY WELL DETECTED !!', width*0.33, 420); } pop(); // ---- dials: left bottom ---- noFill(); stroke(140, 200, 230, 90); strokeWeight(1.2); for (let d = 0; d < 4; d++) { let ang = 0.7 * sin(frame * 0.05 + d * 1.9); let sx = 120 + d * 75; let sy = height - 120; circle(sx, sy, 44); line(sx, sy, sx + cos(ang) * 20, sy + sin(ang) * 20); fill(70, 130, 200, 160); noStroke(); textSize(7); text(`${Math.round(ang * 2)}`, sx - 3, sy + 24); } // ----- tiny navigation star field (right side) ----- for (let k = 0; k < 12; k++) { let px = width - 120 + (frameCount * 0.2 + k * 13) % 80; let py = 120 + k * 30; fill(255, 255, 255, 40 + 40*sin(frame*0.2 + k)); noStroke(); circle(px, py, 2); } } // helper random int function randomInt(min, max) { return floor(random(min, max+1)); } // helper random hex string function randomHex() { let hex = ''; for (let i = 0; i < 4; i++) hex += '0123456789ABCDEF'[randomInt(0,15)]; return hex; } // simple formating for date-like int function floorDate(v){ return int(frameCount * 0.1) + 2941; } // window resize function windowResized() { resizeCanvas(windowWidth, windowHeight); } </script> </body> </html> ``` ### Control Panel Features The panel combines several functional elements to create an immersive, responsive interface. You can interact with it and observe its autonomous systems. - **Interactive Starfield**: The background stars subtly shift based on your mouse movement, creating a parallax effect that reacts to the viewer. - **Dynamic Indicator Grid**: A matrix of LEDs blinks and pulses with varying colors and rhythms. They occasionally glitch to simulate unpredictable system events. - **Rotating Radar Sweep**: A circular radar display features a sweeping beam, distance rings, and tracking blips, giving the sense of active vessel scanning. - **Alert System**: The readout and display include a periodic "ALERT" message, alongside scrolling status ticker text and central numeric readouts for simulated velocity and shield status. --- **Optimization Tip:** You can customize the panel's text messages by editing the `ticker` variable (line 28) and the alert message text within the `if` block (around line 178) to change what the ship's console reports.

Here is a p5.js sketch that generates a startling starship control panel visualization. It combines a starfield, blinking status lights, a rotating radar ring, and flickering telemetry readouts for a sci-fi interface feel. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>p5js · starship control panel</title> <style> body { margin: 0; overflow: hidden; background: #020510; } canvas { display: block; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script> <script> // ============================================================ // STARSHIP CONSOLE - GENERATIVE PANEL // startling visuals: flickering leds, rotating radar, starfield // ============================================================ let stars = []; const STAR_COUNT = 450; let warpPulse = 0; let radarAngle = 0; let alertPhase = 0; // status lights (grid of blinking indicators) const ledGrid = []; const LED_ROWS = 5; const LED_COLS = 14; // message scroller (hyperspace text) let ticker = 'WARP DRIVE READY // AUTOPILOT ENGAGED // CORE TEMP NOMINAL // STELLAR MASS: 1.4 SOL // QUANTUM FLUX DETECTED'; function setup() { createCanvas(windowWidth, windowHeight); // initialize starfield for (let i = 0; i < STAR_COUNT; i++) { stars.push({ x: random(width), y: random(height), z: random(0.3, 1.0), // depth factor size: random(0.8, 2.4) }); } // initialize LED grid with random phases for (let r = 0; r < LED_ROWS; r++) { ledGrid[r] = []; for (let c = 0; c < LED_COLS; c++) { ledGrid[r][c] = { baseBright: random(0.4, 1.0), phase: random(0, TWO_PI), speed: random(2, 8), color: [100, 220, 255] // cyan-ish, some will change }; } } } const LED_COLS = 14; const LED_SPACING_X = 70; const LED_SPACING_Y = 32; const LED_OFFSET_X = 80; const LED_OFFSET_Y = 60; function draw() { background(2, 8, 18); // deep space blue // --- STARFIELD SPEED (foreground panel parallax) --- // subtle drifting of stars based on mouse velocity + time let shiftX = map(mouseX, 0, width, 0.2, 0.9); let shiftY = map(mouseY, 0, height, 0.2, 0.9); for (let s of stars) { s.x += (0.15 * s.z) + (mouseX - pmouseX) * 0.008; s.y += (0.1 * s.z) + (mouseY - pmouseY) * 0.007; if (s.x > width) s.x = 0; if (s.x < 0) s.x = width; if (s.y > height) s.y = 0; if (s.y < 0) s.y = height; // twinkle let twinkle = 150 * s.z * (0.7 + 0.3 * sin(frameCount * 0.05 + s.z * 10)); // dim outer stars, near stars brighter let alpha = map(s.z, 0.3, 1.0, 40, 180); stroke(190, 225, 255, alpha * 0.6 + 30 * sin(frameCount * 0.02 + s.x * 0.01)); point(s.x, s.y); } // extra glow: bigger stars (few) noFill(); stroke(160, 210, 255, 45); for (let i = 0; i < 20; i++) { let s = stars[i % stars.length]; circle(s.x, s.y, s.size * 5.5); } // ---- MAIN PANEL BACKGROUND ---- push(); noStroke(); fill(12, 18, 32, 200); rect(38, 24, width - 80, height - 50, 22); fill(9, 14, 24); rect(50, 40, width - 104, height - 98, 12); // inner grid lines stroke(30, 80, 130, 20); strokeWeight(0.5); for (let gx = 60; gx < width - 60; gx += 55) { line(gx, 38, gx, height - 40); } for (let gy = 48; gy < height - 48; gy += 55) { line(50, gy, width - 60, gy); } // ---- STATUS LED GRID (startling blinking) ---- for (let r = 0; r < LED_ROWS; r++) { for (let c = 0; c < LED_COLS; c++) { let led = ledGrid[r][c]; let x = LED_OFFSET_X + c * LED_SPACING_X; let y = LED_OFFSET_Y + r * LED_SPACING_Y; // flicker / pulse intensity (intense blinking, odd offsets) let brightness = 0.5 + 0.5 * sin(frameCount * led.speed * 0.05 + led.phase + radarAngle * 0.1); // occasionally random glitch if (frameCount % 70 === 0) { led.color = [randomInt(100,255), randomInt(100,255), randomInt(100,255)]; } let ledAlpha = 90 + 120 * brightness; // glow effect under LED noStroke(); fill(led.color[0], led.color[1], led.color[2], ledAlpha * 0.22); circle(x, y, 28 + 10 * brightness); // core led fill(led.color[0], led.color[1], led.color[2], min(255, ledAlpha)); circle(x, y, 9 + 3 * brightness); // tiny flicker random if (random(1) < 0.05) { fill(255, 255, 255, 180); circle(x, y, 4); } } } // ---- ROTATING RADAR SWEEP + rings ---- radarAngle += 0.02; if (radarAngle > TWO_PI) radarAngle = 0; let centerX = width - 160; let centerY = height * 0.5 - 30; let radR = 115; push(); translate(centerX, centerY); stroke(70, 220, 220, 180); strokeWeight(2.5); noFill(); circle(0, 0, radR * 2); circle(0, 0, radR * 1.3); circle(0, 0, radR * 0.6); // cross lines stroke(60, 200, 200, 100); strokeWeight(1.3); line(-radR, 0, radR, 0); line(0, -radR, 0, radR); // sweep beam (alpha glow) tangent = map(sin(frameCount * 0.03), -1, 1, 0, 1); fill(50, 255, 220, 35 + 45 * tangent); noStroke(); arc(0, 0, radR * 2.1, radR * 2.1, radarAngle - 0.25, radarAngle + 0.35); stroke(130, 255, 210, 130); strokeWeight(2); line(0, 0, cos(radarAngle) * radR, sin(radarAngle) * radR); // blips (random targets) rotate(radarAngle * 0.1); for (let i = 0; i < 3; i++) { let bx = cos(i * 2.1) * (radR * 0.55 + i * 10); let by = sin(i * 1.8) * radR * 0.6; stroke(255, 180, 80, 150); strokeWeight(2); point(bx, by); fill(255, 180, 70, 100); circle(bx, by, 5); } pop(); // ----- STATUS TEXT READOUT (hyperscroll ) ----- let msg = ticker; let textPos = (frameCount * 1.2) % (width + 300) - 300; fill(100, 120, 140, 250); stroke(80, 220, 100, 190); strokeWeight(0.5); textSize(18); textFont('monospace'); textStyle(BOLD); text(msg, textPos, height - 28); // duplicate for seamless text(msg, textPos + msg.length * 8 + 40, height - 28); // ---- big central numeric values ---- push(); textFont('courier'); strokeWeight(0); // show random hyper warp jump coordinate readouts let coordX = 150; let coordY = height - 80; fill(30, 200, 240, 200); textSize(10); text(`7:${floor(random(100,999))} m/s`, coordX, coordY); fill(80, 250, 170, 190); text(`Σ 0x${randomHex()}`, 200, coordY + 40); text(`SHLD 92.4%`, 130, coordY + 80); // LCD style fill(255, 220, 120, 200); textSize(16); text('NAV // LOCK', width*0.3, height - 140); // colorful alarm if (frameCount % 90 < 30) { let cui = color(255, 70, 70, 140); fill(cui); textSize(14); text('!! ALERT: GRAVITY WELL DETECTED !!', width*0.33, 420); } pop(); // ---- dials: left bottom ---- noFill(); stroke(140, 200, 230, 90); strokeWeight(1.2); for (let d = 0; d < 4; d++) { let ang = 0.7 * sin(frame * 0.05 + d * 1.9); let sx = 120 + d * 75; let sy = height - 120; circle(sx, sy, 44); line(sx, sy, sx + cos(ang) * 20, sy + sin(ang) * 20); fill(70, 130, 200, 160); noStroke(); textSize(7); text(`${Math.round(ang * 2)}`, sx - 3, sy + 24); } // ----- tiny navigation star field (right side) ----- for (let k = 0; k < 12; k++) { let px = width - 120 + (frameCount * 0.2 + k * 13) % 80; let py = 120 + k * 30; fill(255, 255, 255, 40 + 40*sin(frame*0.2 + k)); noStroke(); circle(px, py, 2); } } // helper random int function randomInt(min, max) { return floor(random(min, max+1)); } // helper random hex string function randomHex() { let hex = ''; for (let i = 0; i < 4; i++) hex += '0123456789ABCDEF'[randomInt(0,15)]; return hex; } // simple formating for date-like int function floorDate(v){ return int(frameCount * 0.1) + 2941; } // window resize function windowResized() { resizeCanvas(windowWidth, windowHeight); } </script> </body> </html> ``` ### Control Panel Features The panel combines several functional elements to create an immersive, responsive interface. You can interact with it and observe its autonomous systems. - **Interactive Starfield**: The background stars subtly shift based on your mouse movement, creating a parallax effect that reacts to the viewer. - **Dynamic Indicator Grid**: A matrix of LEDs blinks and pulses with varying colors and rhythms. They occasionally glitch to simulate unpredictable system events. - **Rotating Radar Sweep**: A circular radar display features a sweeping beam, distance rings, and tracking blips, giving the sense of active vessel scanning. - **Alert System**: The readout and display include a periodic "ALERT" message, alongside scrolling status ticker text and central numeric readouts for simulated velocity and shield status. --- **Optimization Tip:** You can customize the panel's text messages by editing the `ticker` variable (line 28) and the alert message text within the `if` block (around line 178) to change what the ship's console reports. 동화책 속 아이스크림 계곡을 배경으로 한 기발한 스톱모션 스타일 애니메이션

관련 미디어

프롬프트 내용저장복사

Run

사용법

이 프롬프트는 coding와 함께 사용하도록 설계되었습니다. 위의 프롬프트 내용을 복사하여 원하는 AI 도구에 붙여넣으세요.

최상의 결과를 얻으려면 자리 표시자(대괄호 또는 대문자로 표시)를 특정 요구 사항으로 사용자 지정할 수 있습니다.

참고 자료

• 분류: coding 프롬프트
• 출처: https://x.com/emollick/status/1949306100278263912