File size: 10,361 Bytes
57b3cfe d19c729 ed6a27c d19c729 ed6a27c d19c729 ed6a27c d19c729 ed6a27c 57b3cfe ed6a27c |
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 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 |
import streamlit as st
def create_animation_app():
st.title("Bouncing Yellow Balls & Jellyfish in a Rotating Sphere")
# We embed an HTML document that includes:
# 1. p5.js (from a CDN)
# 2. a container div for our canvas
# 3. our p5.js sketch that simulates 100 bouncing yellow balls with collision detection
# and one bouncing jellyfish (using a spiral drawing similar to your jellyfish code)
# all inside a sphere (drawn as a circle) that slowly rotates.
html_code = r"""
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Include p5.js from a CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
<style>
/* Remove default margins & center the canvas */
body {
margin: 0;
padding: 0;
overflow: hidden;
background: black;
}
#p5-container {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="p5-container"></div>
<script>
// --- Global Variables ---
let balls = [];
let jellyfish;
const sphereRadius = 300; // radius of the bounding sphere
let sphereCenter;
let rotationAngle = 0;
const numBalls = 100;
// --- p5.js Setup ---
function setup() {
// Create an 800x800 canvas and attach it to our container
let canvas = createCanvas(800, 800);
canvas.parent('p5-container');
sphereCenter = createVector(width/2, height/2);
// Set color mode to HSB for our jellyfish drawing.
colorMode(HSB, 360, 100, 100, 1);
// Create 100 balls. Each ball is given a random position (inside the sphere)
// and a random velocity.
for (let i = 0; i < numBalls; i++) {
balls.push(new Ball());
}
// Create one jellyfish object. (Its drawn “shape” is produced by the jellyA() and getJellyColor() functions below.)
jellyfish = new Jellyfish();
}
// --- p5.js Draw Loop ---
function draw() {
// Create a fade/trail effect by drawing a semi-transparent black background.
// (Note: using HSB mode so black is 0 saturation and 0 brightness.)
background(0, 0, 0, 0.1);
// Increment our rotation angle very slowly.
rotationAngle += 0.005;
// All drawing and physics is done in a coordinate system with origin at sphereCenter.
push();
translate(sphereCenter.x, sphereCenter.y);
// Slowly rotate the entire coordinate system.
rotate(rotationAngle);
// Draw the bounding sphere (a circle)
noFill();
stroke(255);
strokeWeight(2);
ellipse(0, 0, sphereRadius * 2, sphereRadius * 2);
// --- Update Physics ---
// 1. Update positions for all balls and the jellyfish.
for (let ball of balls) {
ball.update();
}
jellyfish.update();
// 2. Check and resolve ball-ball collisions.
for (let i = 0; i < balls.length; i++) {
for (let j = i + 1; j < balls.length; j++) {
balls[i].collide(balls[j]);
}
}
// 3. Check each ball for collisions with the sphere boundary and display them.
for (let ball of balls) {
ball.checkBoundaryCollision();
ball.display();
}
// 4. Check the jellyfish for sphere collisions and display it.
jellyfish.checkBoundaryCollision();
jellyfish.display();
pop();
}
// --- Ball Class ---
class Ball {
constructor() {
this.r = 5; // radius of the ball
// Random position inside the sphere (by picking a random angle and radius)
let angle = random(TWO_PI);
let rad = random(sphereRadius - this.r);
this.pos = createVector(rad * cos(angle), rad * sin(angle));
// Random speed and direction
let speed = random(1, 3);
let vAngle = random(TWO_PI);
this.vel = createVector(speed * cos(vAngle), speed * sin(vAngle));
// Yellow color in HSB (hue=60, saturation=100, brightness=100)
this.col = color(60, 100, 100);
}
update() {
this.pos.add(this.vel);
}
// Check for collision with the circular (spherical) boundary.
checkBoundaryCollision() {
let d = this.pos.mag();
if (d + this.r > sphereRadius) {
// Compute the normal (pointing outward)
let normal = this.pos.copy().normalize();
// Reflect the velocity: v = v - 2*(v·normal)*normal
let dot = this.vel.dot(normal);
this.vel.sub(p5.Vector.mult(normal, 2 * dot));
// Ensure the ball is repositioned just inside the boundary.
this.pos = normal.mult(sphereRadius - this.r);
}
}
// Check for collisions with another ball (elastic collision for equal masses)
collide(other) {
let diff = p5.Vector.sub(other.pos, this.pos);
let distBetween = diff.mag();
if (distBetween < this.r + other.r) {
// Separate the overlapping balls by moving them apart equally.
let overlap = (this.r + other.r) - distBetween;
let displacement = diff.copy().normalize().mult(overlap / 2);
this.pos.sub(displacement);
other.pos.add(displacement);
// Compute collision response
let normal = diff.copy().normalize();
let relativeVelocity = p5.Vector.sub(this.vel, other.vel);
let dotProd = relativeVelocity.dot(normal);
// Only resolve if balls are moving toward each other.
if (dotProd > 0) {
// For equal masses, exchange the velocity components along the collision normal.
let impulse = normal.copy().mult(dotProd);
this.vel.sub(impulse);
other.vel.add(impulse);
}
}
}
display() {
noStroke();
fill(this.col);
ellipse(this.pos.x, this.pos.y, this.r * 2, this.r * 2);
}
}
// --- Jellyfish Class ---
class Jellyfish {
constructor() {
// For the jellyfish we choose a larger effective “radius” (for collision) of about 40.
this.size = 40;
// Start at a random position inside the sphere (with a margin)
this.pos = createVector(random(-sphereRadius + this.size, sphereRadius - this.size),
random(-sphereRadius + this.size, sphereRadius - this.size));
// Give it a random velocity.
let speed = random(1, 2);
let angle = random(TWO_PI);
this.vel = createVector(speed * cos(angle), speed * sin(angle));
// A time parameter used in the jellyfish drawing.
this.t = 0;
}
update() {
this.pos.add(this.vel);
this.t += 0.05;
}
// Bounce off the sphere boundary using a simple circular collision.
checkBoundaryCollision() {
if (this.pos.mag() + this.size > sphereRadius) {
let normal = this.pos.copy().normalize();
let dot = this.vel.dot(normal);
this.vel.sub(p5.Vector.mult(normal, 2 * dot));
this.pos = normal.mult(sphereRadius - this.size);
}
}
display() {
push();
translate(this.pos.x, this.pos.y);
// Draw the jellyfish using a grid of points computed by the jellyA() function.
// (We subtract 200 from the computed positions so that the drawing is centered.)
strokeWeight(1.5);
for (let y = 99; y < 300; y += 4) {
for (let x = 99; x < 300; x += 2) {
let res = jellyA(x, y, this.t);
let px = res[0] - 200;
let py = res[1] - 200;
stroke(getJellyColor(x, y, this.t));
point(px, py);
}
}
pop();
}
}
// --- Jellyfish Drawing Functions ---
// Replicate the provided jellyfish “a(x,y)” function.
function jellyA(x, y, t) {
let k = x / 8 - 25;
let e = y / 8 - 25;
// d is computed as (k^2+e^2)/99
let d = (k * k + e * e) / 99;
let q = x / 3 + k * 0.5 / cos(y * 5) * sin(d * d - t);
let c = d / 2 - t / 8;
let xPos = q * sin(c) + e * sin(d + k - t) + 200;
let yPos = (q + y / 8 + d * 9) * cos(c) + 200;
return [xPos, yPos];
}
// Replicate the provided getColor function for the jellyfish.
function getJellyColor(x, y, t) {
let hue = (sin(t / 2) * 360 + x / 3 + y / 3) % 360;
let saturation = 70 + sin(t) * 30;
let brightness = 50 + cos(t / 2) * 20;
return color(hue, saturation, brightness, 0.5);
}
</script>
</body>
</html>
"""
# The height is set to 800px; adjust if needed.
st.components.v1.html(html_code, height=820, scrolling=False)
if __name__ == "__main__":
create_animation_app()
|