Animated Circle - xelsed.ai

57 views · Dec 9, 2025

Falling snow with accumulation at the bottom Created with XeLseDai (Xelsed p5flash-alpha02). Quality: 100/100 Features: animation detected, canvas 395x437, 30fps, no errors #xelsedia #XeLseDai @xelsed-p5flash-alpha02

#ai #p5js #xelsedia #xelsedai #xelsedp5flashalpha02 #circle #generative

🔀 Remix This 📖 View Docs ⛶ Full Screen ← Back to Gallery

📋 Embed Code

Copy this code to embed this sketch on your website:

<iframe src="https://p5js.ai/embed/884ee119-f4a3-4710-a7e2-a784fb47db29" width="400" height="400" frameborder="0" allow="autoplay" title="Animated Circle - xelsed.ai"></iframe>

Adjust width and height as needed. Preview embed →

❓ About This Sketch 3 questions

What visual effects can I expect from the Animated Circle - XeLseDai sketch?

This sketch creates a visually captivating scene of falling snowflakes that gradually accumulate at the bottom of the canvas, set against a dark blue night sky.

Is there any way for users to interact with the Animated Circle - XeLseDai sketch?

The sketch is not designed for user interaction; it runs autonomously, showcasing a continuous snowfall animation.

What creative coding techniques are demonstrated in the Animated Circle - XeLseDai sketch?

The sketch illustrates the use of object-oriented programming to create snowflake objects, as well as concepts like gravity simulation and dynamic array management for snow accumulation.

💬 AI Chat History 2 messages

👤 You

Create a simple falling snow animation. Snowflakes are small white circles that fall from the top of the canvas at random speeds. When snowflakes hit the bottom, they accumulate and build up a snow pile. Use a dark blue night sky background. Add slight horizontal drift to the snowflakes using sin() for gentle swaying. Keep it simple - just circles falling and piling up.

🤖 AI

Here's a p5.js sketch that creates a beautiful falling snow animation with accumulation at the bottom, a dark blue night sky, and gentle horizontal drift.

I've created a `Snowflake` class to manage individual snowflakes, and a `snowPileHeights` array to dynamically build up the snow pile at the bottom of the canvas.

---

### `index.html`

This file sets up the basic HTML page, loads the p5.js library, and links your sketch and styles.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Falling Snow Animation</title>
<link rel="stylesheet" href="style.css">

<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
</head>
<body>

<script src="sketch.js"></script>
</body>
</html>
```

---

### `style.css`

This CSS file ensures the canvas fills the entire window and removes any default browser margins or scrollbars.

```css
body {
margin: 0;
padding: 0;
overflow: hidden; /* Hide scrollbars if canvas exceeds viewport */
background-color: #000; /* Ensure body background is dark */
}

canvas {
display: block; /* Remove extra space below the canvas */
}
```

---

### `sketch.js`

This is the main p5.js code that handles the animation logic, snowflake generation, movement, and snow pile accumulation.

```js
let snowflakes = []; // Array to store snowflake objects
let snowPileHeights = []; // Array to store the height of the snow pile at different x intervals
let pileResolution = 10; // How many pixels wide each segment of the snow pile is

function setup() {
createCanvas(windowWidth, windowHeight);
// Initialize snow pile heights. Each element corresponds to a segment of the canvas width.
// All segments start at 0 height.
snowPileHeights = Array(floor(width / pileResolution)).fill(0);
frameRate(30); // Set a stable frame rate for consistent animation
}

function draw() {
background(0, 0, 50); // Dark blue night sky

// Generate new snowflakes randomly
// Adjust the random() threshold (e.g., 0.2) to control the density of snowflakes
if (random(1) < 0.2) {
snowflakes.push(new Snowflake());
}

// Update, display, and manage snowflakes
// Loop backward to safely remove snowflakes from the array without affecting iteration
for (let i = snowflakes.length - 1; i >= 0; i--) {
let flake = snowflakes[i];
flake.fall(); // Make the snowflake fall and drift
flake.show(); // Display the snowflake

// Calculate the horizontal index for the snow pile based on snowflake's x position
let pileIndex = floor(flake.x / pileResolution);

// Check if the snowflake has hit the bottom or the existing snow pile
if (pileIndex >= 0 && pileIndex < snowPileHeights.length) { // Ensure pileIndex is within bounds
if (flake.y >= height - snowPileHeights[pileIndex]) {
// Snowflake has hit the pile
// Add its size (or a fraction of it) to the snow pile height at this segment
// Scaling by 0.5 makes the pile grow slower and smoother
snowPileHeights[pileIndex] += flake.size * 0.5;

// Cap the snow pile height so it doesn't exceed the canvas height
if (snowPileHeights[pileIndex] > height) {
snowPileHeights[pileIndex] = height;
}

snowflakes.splice(i, 1); // Remove the snowflake from the array
}
} else if (flake.y > height + flake.size || flake.x < -flake.size || flake.x > width + flake.size) {
// If the snowflake flew off the bottom or sides of the canvas without hitting the pile
snowflakes.splice(i, 1); // Remove it
}
}

// Draw the snow pile at the bottom of the canvas
fill(255); // White color for the snow
noStroke(); // No outline for the snow pile segments
for (let i = 0; i < snowPileHeights.length; i++) {
let h = snowPileHeights[i]; // Get the height of the snow at this segment
// Draw a rectangle for each segment of the snow pile
rect(i * pileResolution, height - h, pileResolution, h);
}
}

function windowResized() {
resizeCanvas(windowWidth, windowHeight);
// Recalculate snow pile properties based on the new canvas width
pileResolution = width / 10; // Maintain the same resolution
snowPileHeights = Array(floor(width / pileResolution)).fill(0);
snowflakes = []; // Clear all snowflakes when the window is resized for a fresh start
}

// Snowflake class definition
class Snowflake {
constructor() {
// Start snowflakes randomly across the width and slightly above the canvas
this.x = random(width);
this.y = random(-100, 0);
// Random size between 5 and 15 pixels
this.size = random(5, 15);
// Random falling speed between 1 and 3 pixels per frame
this.speed = random(1, 3);
// Random offset for the sin() function to create varied horizontal swaying
this.driftOffset = random(100);
}

fall() {
// Update vertical position based on speed
this.y += this.speed;
// Add slight horizontal drift using sin() for gentle swaying
// The frequency (0.05) and amplitude (1) can be adjusted for different drift effects
this.x += sin((frameCount + this.driftOffset) * 0.05) * 1;
}

show() {
noStroke(); // No outline for snowflakes
fill(255); // White color for snowflakes
circle(this.x, this.y, this.size); // Draw the snowflake as a circle
}
}
```

🎬 Video Preview