Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| def create_app(): | |
| st.title("3D Python Snake Matrix Code ❤️🐍") | |
| html_code = r""" | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>3D Python Snake Matrix Code ❤️</title> | |
| <!-- Load p5.js (with WEBGL support) from a CDN --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script> | |
| <style> | |
| /* Remove margins and set a black background */ | |
| body { margin: 0; padding: 0; overflow: hidden; background: black; } | |
| #sketch-container { display: flex; justify-content: center; align-items: center; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="sketch-container"></div> | |
| <script> | |
| // ❤️ 3D Python Snake Matrix Code with Heart Emojis ❤️ | |
| // Global variables for the Matrix rain overlay | |
| let matrixColumns = []; | |
| let fontSize = 16; | |
| let numColumns; | |
| // Global variables for the snake | |
| let snake = []; // Array to hold 3D positions of the snake segments | |
| const maxSnakeLength = 50; // Maximum number of segments | |
| let t = 0; // Time variable for snake movement | |
| function setup() { | |
| // Create a WEBGL canvas that fills the window and attach it to our container | |
| let canvas = createCanvas(windowWidth, windowHeight, WEBGL); | |
| canvas.parent('sketch-container'); | |
| textFont('monospace'); | |
| textSize(fontSize); | |
| noStroke(); | |
| // Setup Matrix rain columns (we work in 2D for the overlay) | |
| numColumns = floor(width / fontSize); | |
| for (let i = 0; i < numColumns; i++) { | |
| matrixColumns[i] = random(-1000, 0); | |
| } | |
| // Initialize the snake: start with all segments at the center (0,0,0) | |
| for (let i = 0; i < maxSnakeLength; i++) { | |
| snake.push(createVector(0, 0, 0)); | |
| } | |
| } | |
| function draw() { | |
| background(0); | |
| // Set up some lights for 3D shading | |
| ambientLight(50); | |
| directionalLight(255, 255, 255, 0, -1, 0); | |
| // Rotate the entire 3D scene slowly for an extra cool effect | |
| rotateY(frameCount * 0.005); | |
| rotateX(frameCount * 0.003); | |
| // Update and draw our snake in 3D | |
| updateSnake(); | |
| drawSnake(); | |
| // Draw the Matrix rain overlay on top (in 2D) | |
| drawMatrixRain(); | |
| } | |
| // Update the snake's position using Perlin noise for a fluid, organic motion | |
| function updateSnake() { | |
| t += 0.01; | |
| // Compute new head position using noise to vary x, y, and z independently | |
| let x = map(noise(t, 0), 0, 1, -width/3, width/3); | |
| let y = map(noise(t, 100), 0, 1, -height/3, height/3); | |
| let z = map(noise(t, 200), 0, 1, -300, 300); | |
| let newHead = createVector(x, y, z); | |
| snake.push(newHead); | |
| // Maintain a fixed length by removing the tail segment | |
| if (snake.length > maxSnakeLength) { | |
| snake.shift(); | |
| } | |
| } | |
| // Draw the snake: each segment is rendered as a Matrix-style character, | |
| // and every 10th segment is rendered as a heart emoji for extra love ❤️. | |
| function drawSnake() { | |
| for (let i = 0; i < snake.length; i++) { | |
| let pos = snake[i]; | |
| push(); | |
| translate(pos.x, pos.y, pos.z); | |
| // Every 10th segment, show a heart emoji instead of a random character | |
| if (i % 10 === 0) { | |
| textSize(fontSize + 4); | |
| fill(255, 0, 100); | |
| text("❤️", 0, 0); | |
| } else { | |
| fill(0, 255, 70); | |
| textSize(fontSize); | |
| let matrixChars = "01ABCDEFGHIJKLMNOPQRSTUVWXYZ"; | |
| let char = matrixChars.charAt(floor(random(matrixChars.length))); | |
| text(char, 0, 0); | |
| } | |
| pop(); | |
| } | |
| } | |
| // Draw a classic Matrix rain effect as a 2D overlay on top of the 3D scene | |
| function drawMatrixRain() { | |
| push(); | |
| // Reset to 2D drawing mode | |
| resetMatrix(); | |
| // Shift the origin to the top-left corner | |
| translate(0, 0); | |
| textSize(fontSize); | |
| fill(0, 255, 70); | |
| for (let i = 0; i < numColumns; i++) { | |
| let x = i * fontSize; | |
| let y = matrixColumns[i]; | |
| let matrixChars = "01ABCDEFGHIJKLMNOPQRSTUVWXYZ"; | |
| let char = matrixChars.charAt(floor(random(matrixChars.length))); | |
| text(char, x, y); | |
| matrixColumns[i] += fontSize; | |
| // If the drop goes off the screen, reset it to the top with a random offset | |
| if (matrixColumns[i] > height) { | |
| matrixColumns[i] = random(-100, 0); | |
| } | |
| } | |
| pop(); | |
| } | |
| // When the window is resized, adjust the canvas and recalc matrix columns | |
| function windowResized() { | |
| resizeCanvas(windowWidth, windowHeight); | |
| numColumns = floor(width / fontSize); | |
| matrixColumns = []; | |
| for (let i = 0; i < numColumns; i++) { | |
| matrixColumns[i] = random(-1000, 0); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| # Embed the HTML (with the p5.js sketch) into the Streamlit app. | |
| st.components.v1.html(html_code, height=700, scrolling=True) | |
| if __name__ == '__main__': | |
| create_app() | |