How to Draw on the C++ Window Frame
In this tutorial, you'll learn how to move an object in C++ across a window frame. This is one of the fundamental ideas in C++ graphics programming, useful for creating animations, simple games, or visual simulations.
We'll will draw a circle - our body - using the Ellipse method with a HDC context.
Why Learn to Move Objects in C++?
Being able to animate an object across a window in C++ is an important step toward understanding how graphics work. Whether you're moving a shape, an image, or a sprite, the process involves:
- Updating the object's position using coordinates.
- Redrawing the object in its new position.
- Refreshing the window frame.
This cycle creates the illusion of smooth motion.
Animating a Circle Across the C++ Canvas
To make the circle appear to move across the canvas, i.e., animate the circle, we'll simply draw the circle repeatedly, changing its position progressively as well as clearing the previous image.
Create a new C++ project;
call it Dymetric.
Create 2 new C++ class files;
Call them Facet and MovingBody.
Type out the adjoining C++ code for animating an image body across the window frame.
Note: The C++ code module for our Dymetric Class was too big
to be squeezed in with the others.
It is simply included as a link of its own.
How the C++ Move Object Animation Code Works
- The 'circle()' function draws the object.
- 'x += 5;' updates the position, making the object move horizontally.
- The 'while' loop keeps redrawing the object until a key is pressed.
- 'if (x > getmaxx()) x = 0;' ensures the object resets when it reaches the window's edge.
This example shows the basics of object motion in C++ graphics.
Tips for Smooth Object Animation in C++
- Use a timer or delay to control speed and frame rate.
- Handle boundary detection so the object doesn't disappear.
- For more advanced projects, explore libraries like SFML or SDL for smoother graphics.
Frequently Asked Questions About Moving Objects in C++
1. How do you move an object in C++?
In C++, an object is moved across a window by updating its coordinates inside a loop, redrawing it in the new position, and refreshing the window. This process creates the effect of motion.
2. What is the simplest way to move an object across a window in C++?
The simplest method is to use a while loop with a delay. Inside the loop, clear the window,
draw the object, update its position (e.g., increment the x-coordinate), and repeat.
3. Which graphics libraries can I use to move objects in C++?
For beginners, the old BGI graphics library works for simple demos. For modern applications, libraries like SFML, SDL, or OpenGL are recommended for smoother animations and better performance.
4. How do I prevent an object from going outside the window?
You can use boundary detection. Before updating the object's position, check if its coordinates exceed the window size. If it does, either reset its position or reverse its direction.
5. Can I animate multiple objects at once in C++?
Yes. You can animate multiple objects by tracking separate coordinates for each one, updating them inside the same loop, and redrawing all objects frame by frame.
What You've Learnt on C++ Window Frame and Animation
In this tutorial, we've shown how to move an object in C++ across a window frame. This technique is often used in C++ graphics programming and simple animation projects.
For example, to move a body across a window frame in C++, you update the object's coordinates inside the event loop and redraw the frame. By applying these steps, you can easily move an object across a window in C++. This concept extends to creating animations, games, and simulations where object motion is essential.
Key Takeaway on C++ Window Frame and Animation
By following this guide, you now know how to move an object across a window in C++. This technique is the foundation of creating animations, interactive programs, and games.
So! C++ Fun Practice Exercise - Animate Circle
As a fun practice exercise, try experimenting with shapes, speeds, and directions to deepen your understanding of object movement in C++ graphics.
C++ Moving Body Dymetric Window Code Stub
C++ Moving Body Canvas Frame and Button Controls - Header File
class Facet
{
public:
Facet(HWND, int, int);
virtual ~Facet();
bool decorateButton(WPARAM, LPARAM);
bool actionPerformed(HWND, WPARAM, LPARAM);
void informPaint();
};
C++ Moving Body Canvas Frame and Button Controls - Class File
#include "Facet.h"
#include "MovingBody.h"
MovingBody* traction;
/*
* Our custom class that interfaces between the parent window
* and the subsequent daemonstrator classes
*/
Facet::Facet(HWND hWnd, int window_width, int window_height)
{
traction = new MovingBody(hWnd, window_width, window_height);
}
/*
* This guy decorates buttons with colour and title text
*/
bool Facet::decorateButton(WPARAM wParam, LPARAM lParam) {
// button glide calling
if (wParam == 12321)
{
LPDRAWITEMSTRUCT lpDIS = (LPDRAWITEMSTRUCT)lParam;
SetDCBrushColor(lpDIS->hDC, RGB(255, 192, 203));
SelectObject(lpDIS->hDC, GetStockObject(DC_BRUSH));
RECT rect = { 0 };
rect.left = lpDIS->rcItem.left;
rect.right = lpDIS->rcItem.right;
rect.top = lpDIS->rcItem.top;
rect.bottom = lpDIS->rcItem.bottom;
RoundRect(lpDIS->hDC, rect.left, rect.top, rect.right, rect.bottom, 50, 50);
DrawText(lpDIS->hDC, TEXT("GLIDE"), -1, &rect, DT_SINGLELINE | DT_CENTER | DT_VCENTER);
return TRUE;
}
return FALSE;
}
/*
* Call the target class' draw method
*/
void Facet::informPaint() {
traction->paint();
}
/*
* Say there is more than a single push button,
* this guy picks out the correct button that got clicked
* and calls the corresponding apt function
*/
bool Facet::actionPerformed(HWND hWnd, WPARAM wParam, LPARAM lParam)
{
switch (LOWORD(wParam))
{
case 12321:
traction->doGlide();
return TRUE;
default:
return FALSE;
}
}
Facet::~Facet()
{
delete traction;
}
C++ Animation Code for Moving Body Header File
class MovingBody
{
public:
MovingBody(HWND, int, int);
virtual ~MovingBody();
void paint();
void doGlide();
protected:
HWND hWindow;
HDC hdc;
int window_width;
int window_height;
COLORREF ball_colour;
int x;
int y;
HPEN background_pen;
HBRUSH background_brush;
HPEN ball_pen;
HBRUSH ball_brush;
};
C++ Animation Code for Moving Body Class File
#include "MovingBody.h"
#define aWIDTH 80
#define aHEIGHT 80
MovingBody::MovingBody(HWND hWnd, int window_width, int window_height)
{
hWindow = hWnd; // save away window handle
this->window_width = window_width; // save away window width
this->window_height = window_height; // save away window height
ball_colour = RGB(255, 0, 0); // travelling ball colour
x = 10; // x-coordinate of ball
y = 110; // y-coordinate of ball
// Pen and brush matching background colour
background_pen = CreatePen(PS_SOLID, 1, RGB(192, 192, 192));
background_brush = CreateSolidBrush(RGB(192, 192, 192));
// Pen and brush for travelling ball
ball_pen = CreatePen(PS_SOLID, 1, RGB(0, 0, 0));
ball_brush = CreateSolidBrush(ball_colour);
hdc = GetDC(hWindow);
}
/*
* draws the ball/circle using the apt color
*/
void MovingBody::paint() {
// erase previous circle
SelectObject(hdc, background_pen); // select background colour
SelectObject(hdc, background_brush); // select background colour
Ellipse(hdc, x - 10, y, x - 10 + aWIDTH, y + aHEIGHT);
// draw a circle
SelectObject(hdc, ball_pen); // select ball colour
SelectObject(hdc, ball_brush);
Ellipse(hdc, x, y, x + aWIDTH, y + aHEIGHT);
}
/*
Repeatedly draws ball so as to simulate a continuous motion
*/
void MovingBody::doGlide() {
// condition for continuing motion
while (x + aWIDTH <= window_width) {
paint();
x += 10;
// introduce a delay between renderings
Sleep(50);
}
}
MovingBody::~MovingBody()
{
DeleteObject(background_pen);
DeleteObject(background_brush);
DeleteObject(ball_pen);
DeleteObject(ball_brush);
ReleaseDC(hWindow, hdc);
}