File size: 5,665 Bytes
57b3cfe 04d3523 ed6a27c 04d3523 ed6a27c 04d3523 ed6a27c 04d3523 ed6a27c 04d3523 ed6a27c 04d3523 ed6a27c 04d3523 ed6a27c 04d3523 ed6a27c 04d3523 ed6a27c 04d3523 ed6a27c 04d3523 ed6a27c 04d3523 ed6a27c 04d3523 ed6a27c 04d3523 ed6a27c d19c729 04d3523 57b3cfe 04d3523 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
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()
|