|
|
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> |
|
|
""" |
|
|
|
|
|
|
|
|
st.components.v1.html(html_code, height=700, scrolling=True) |
|
|
|
|
|
if __name__ == '__main__': |
|
|
create_app() |
|
|
|
