C# Tutorial – Create a bubbles particle system using Paint, Windows Form and Visual Studio

Hi, in this tutorial we will demonstrate how to create a simple bubble particle system using native C# and Windows Form. When we talk about windows form application you can imagine a nice image gallery, drop down application, office application or a calculator. No one really wants to do a lot of graphics with windows form because in all honesty its not made for that. But just because its not made for it, it don’t mean it cant do it.  In this tutorial we will explore how to make a particle system inside of windows form that looks great (work with transparency, decent frame rate, use multiple graphics) and works even better (dynamically draw objects to the screen, control the objects using OOP etc).

 

Lesson objective –

  1. Make a windows form bubbles particle system in visual studio
  2. use only native c# programming to complete the application
  3. use transparent PNG images as bubbles on the screen
  4. use the paint event and timer event to achieve the desired results
  5. create a Bubble CLASS in visual studio and instantiate the bubbles with custom instructions dynamically
  6. control the bubble movements and positioning directly on the individual bubble class
  7. change background image using the Z key on the keyboard
  8. switch between background images in real time as the particles are playing in the foreground

Video Tutorial –

 

Download particle images and the backgrounds here

 

Form1.cs source code

 

namespace Spongy_Bubbles_Particles_App_MOO_ICT
{
    public partial class Form1 : Form
    {

        List BubbleList = new List();
        string[] backgrounds = { "01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg" };

        int backgroundNumber = 1;
        Random random = new Random();
        Image background;


        public Form1()
        {
            InitializeComponent();

            SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.UserPaint, true);
            background = Image.FromFile("images/" + backgrounds[backgroundNumber]);
            //this.BackgroundImage = background;
            //this.BackgroundImageLayout = ImageLayout.Stretch;

            MakeBubbles();
        }

        private void ParticlesTimerEvent(object sender, EventArgs e)
        {
            foreach (Bubble tempBubble in BubbleList)
            {
                tempBubble.MoveBubble();
                tempBubble.posY -= tempBubble.speedY;
                tempBubble.posX += tempBubble.speedX;

                if (tempBubble.posY < tempBubble.topLimit) 
                { 
                  tempBubble.posY = 700; 
                  tempBubble.posX = random.Next(0, 800); 
                } 
                } 
                this.Invalidate(); 
                } 

         private void KeyIsUp(object sender, KeyEventArgs e) 
         {
            if (e.KeyCode == Keys.Z) 
               { 
                 backgroundNumber += 1; 
                   if (backgroundNumber > backgrounds.Length  -1)
                   {
                    backgroundNumber = 0;
                   }

             background = Image.FromFile("images/" + backgrounds[backgroundNumber]);
             //this.BackgroundImage = background;
               }
        }

        private void FormPaintEvent(object sender, PaintEventArgs e)
        {
            Graphics Canvas = e.Graphics;

            Canvas.DrawImage(background, 0, 0, 800, 500);

            foreach (Bubble tempBubble  in BubbleList)
            {
                Canvas.DrawImage(tempBubble.bubble, tempBubble.posX, tempBubble.posY, tempBubble.width, tempBubble.height);
            }
        }

        private void MakeBubbles()
        {
            for (int i = 0; i < 300; i++)
            {
                Bubble newBubble = new Bubble();
                BubbleList.Add(newBubble);
            }
        }
    }
}

Bubble Class Source Code –

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Spongy_Bubbles_Particles_App_MOO_ICT
{
    internal class Bubble
    {
        public int height;
        public int width;
        public int posX;
        public int posY;
        public int[] sizes = { 10, 20, 30, 40, 50, 60 };
        public int speedX = 1;
        public int speedY;
        public int topLimit;
        private int moveLimit;

        public Image bubble;
        Random random = new Random();

        public Bubble()
        {
            moveLimit = random.Next(50, 200);
            int i = random.Next(0, sizes.Length);
            bubble = Image.FromFile("images/bubble.png");

            height = sizes[i];
            width = sizes[i];

            topLimit = random.Next(10, 100);
            posX = random.Next(-10, 800);
            posY = random.Next(600, 1200);

            speedY = random.Next(1, 5);
        }


        public void MoveBubble()
        {
            moveLimit -= 1;

            if (moveLimit < 1)
            {
                speedX = -speedX;
                moveLimit = random.Next(50, 200);
            }
        }
    }
}





Comment on this tutorial and let us know how you got on -