Labels

Code Snippet #4: Bubbles!

 alright new day new code:

this is a neat little thing of code made in javascript that makes colorful bubbles that bounce around the screen, maybe later I'll play with it and see if I can make the colors change and maybe add in collision.

So here is how to make javascript bubbles for a webpage!

first you gotta start with html if you wanna run it in the browser:

<!DOCTYPE html>
<html>
<head>
  <title>Particle Animation</title>
</head>
<body>
  <canvas id="myCanvas" width="1220" height="600"></canvas>
  <script src="script.js"></script>
</body>
</html>


next after that you make another file in the same folder and name it script.js and use this:

const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");

const particles = [];

function createParticle() {
  const particle = {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    vx: Math.random() * 5 - 2.5,
    vy: Math.random() * 5 - 2.5,
    radius: Math.random() * 5 + 2,
    color: `hsl(${Math.random() * 360}, 100%, 50%)`
  };
  particles.push(particle);
}

for (let i = 0; i < 50; i++) {
  createParticle();
}

function animate() {
  requestAnimationFrame(animate);
  context.clearRect(0, 0, canvas.width, canvas.height);

  particles.forEach(particle => {
    particle.x += particle.vx;
    particle.y += particle.vy;

    if (particle.x < 0 || particle.x > canvas.width) {
      particle.vx *= -1;
    }
    if (particle.y < 0 || particle.y > canvas.height) {
      particle.vy *= -1;
    }

    context.beginPath();
    context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
    context.fillStyle = particle.color;
    context.fill();
  });
}

animate();

Code Exploration:

HTML Canvas Setup:

The HTML file sets the stage by defining a canvas element with a specific width and height, providing a visual playground for our particle animation.

Particle Generation:

The JavaScript code initiates an array of particles through the createParticle function. Each particle is a dynamic entity with randomly assigned attributes: position (x and y), velocity (vx and vy), radius, and color. This diversity in attributes contributes to the rich visual variety of the particles.

Animation Loop:

The animate function orchestrates the animation by utilizing the requestAnimationFrame method. Within this loop, particle positions are continuously updated, and the canvas is cleared to create a fluid animation. The particles move within the canvas, giving life to the animation.

Particle Behavior:

Random Motion: Particle velocities (vx and vy) are randomized, resulting in unpredictable and fluid movement across the canvas.

Boundary Handling: When a particle reaches the canvas boundaries, its velocity is reversed, causing it to bounce within the canvas. This boundary handling adds an interactive and dynamic aspect to the animation.

Application and Learning:

Visual Effects Exploration: Delve into the code to understand how the combination of random attributes produces visually appealing animations. Experiment with different parameters to observe their impact on the animation.

Interactive Elements Integration: Consider enhancing the animation by incorporating user interactions. Allow users to influence particle behavior dynamically, creating a more engaging and interactive experience.

Conclusion:

This basic particle animation demonstrates the power of JavaScript and the canvas element to create captivating visual effects. Experiment with different parameters to:

Adjust particle count: Create denser or sparser particle fields.

Modify velocity ranges: Control particle speed and movement patterns.

Experiment with colors: Explore diverse color palettes and gradients.

Implement gravity: Introduce gravitational forces for more complex interactions.

Add user interactivity: Allow users to influence particle behavior.

Labels:

Comments

Post a Comment

Quote of the day