Hi, in this tutorial we will explore how to make masking effect animation using windows form and C# programming. This tutorial will be created fully using only visual studio. We will not be using any other framework or libraries creating this project. The template we will use for this project is the Windows Forms Application in Visual Studio using C# and .Net. To create this project and follow this tutorial step by step, please download the images below the video section below. The masking effect is created using 2 of the same image. 1 of those image has been darkened and converted to black and white. The other image is still in full colour. We will apply the first background to the form and the second one will be used for the circles generated dynamically on the screen. Both image will hold their aspect ratio when loaded in the program so it will be as if we have created a masking effect in the application. We will be moving the circles independently from each other by using OOP programming principle.

Lesson Objectives –

1. Create a masking effect animation using windows forms, c# and visual studio
2. Load images dynamically and assign them to the form and to the circle class
3. Create a Circle Class in the program and set the initial settings for each circle to be created in the program
4. Instantiate the circle class in the program, use the paint and timer event to move the circle in the form
5. Check the circle position in the program and make sure that circles bounce off left/right/up/down borders

Video Tutorial –

Download the images for this masking effects animation project

Get C# Masking Effect Animation with WinForms on GitHub

Full Source Code

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

namespace Masking_Effects_Application_MOO_ICT
{
    internal class Circle
    {
        public Rectangle circle = new Rectangle();
        public int positionX = 0;
        public int positionY = 0;
        public int speedX = 0;
        public int speedY = 0;
        Random rand = new Random();

        public Circle()
        {
            circle.Width = 100;
            circle.Height = 100;
            speedX = rand.Next(-5, 5);
            speedY = rand.Next(1, 5);
        }
    }
}

Form1.CS file – This is the code for the main windows form file. This one is linked to the Form1 in the design view. Add the events and follow along the tutorial carefully.

namespace Masking_Effects_Application_MOO_ICT
{
    public partial class Form1 : Form
    {

        Bitmap background_image;
        TextureBrush texture;
        List<Circle> circles = new List<Circle>();
        Random rand = new Random();

        public Form1()
        {
            InitializeComponent();
            LoadSettings(); 
        }

        private void LoadSettings()
        {
            this.BackgroundImage = Image.FromFile("vinland_saga_bg_bw.jpg");
            background_image = (Bitmap)Image.FromFile("vinland_saga_bg.jpg", true);
            texture = new TextureBrush(background_image);
            texture.WrapMode = System.Drawing.Drawing2D.WrapMode.Tile;

            Point location = new Point(5, 5);

            for (int i = 0; i < 60; i++)
            {
                Circle temp_circle = new Circle();
                temp_circle.positionX = location.X;
                temp_circle.positionY = location.Y;
                circles.Add(temp_circle);
                location.X = rand.Next(10, 700);
                location.Y = rand.Next(10, 400);
            }

        }

        private void KeyIsUp(object sender, KeyEventArgs e)
        {
            if (e.KeyCode == Keys.A)
            {
                this.BackgroundImage = Image.FromFile("vinland_saga_bg_bw.jpg");
                background_image = (Bitmap)Image.FromFile("vinland_saga_bg.jpg", true);
                texture = new TextureBrush(background_image);
            }
            if (e.KeyCode == Keys.S)
            {
                this.BackgroundImage = Image.FromFile("berserk_bw.jpg");
                background_image = (Bitmap)Image.FromFile("berserk.jpg", true);
                texture = new TextureBrush(background_image);
            }
        }

        private void FormPaintEvent(object sender, PaintEventArgs e)
        {
            Pen outline = new Pen(Color.White, 4);

            foreach (Circle temp_circle in circles)
            {
                e.Graphics.DrawEllipse(outline, temp_circle.circle);
                e.Graphics.FillEllipse(texture, temp_circle.circle);
            }

        }

        private void AnimationTimerEvent(object sender, EventArgs e)
        {
            foreach (Circle temp_circle in circles)
            {
                temp_circle.positionX += temp_circle.speedX;
                temp_circle.positionY += temp_circle.speedY;

                temp_circle.circle.X = temp_circle.positionX;
                temp_circle.circle.Y = temp_circle.positionY;

                if (temp_circle.circle.X < 0 || temp_circle.circle.X + temp_circle.circle.Width > this.ClientSize.Width)
                {
                    temp_circle.speedX = -temp_circle.speedX;
                }
                if (temp_circle.circle.Y < 0 || temp_circle.circle.Y + temp_circle.circle.Height > this.ClientSize.Height)
                {
                    temp_circle.speedY = -temp_circle.speedY;
                }
            }

            this.Invalidate();
        }
    }
}