VGA-Based Bouncing Circle and Text Animation using Verilog on FPGA

VGA-Based Bouncing Circle and Text Animation using Verilog on FPGA

Tejeswara Rao P

R&D Engineer, Sense Semiconductors and IT Solutions Pvt. Ltd.

Mangalagiri, Guntur, India

Yellela Krishna Kumari

Department of ECE, RGUKT Ongole, India

Karangula Varshitha

Department of ECE, RGUKT Ongole, India

Chandra Anusha

Department of ECE, RGUKT Ongole, India

Abstract

This paper presents the design and implementation of a hardware-only animation system that renders a real-time bouncing circle along with the static text display SSIT on a VGA monitor using Verilog HDL. The design is targeted at the Digilent Basys 3 development board, featuring a Xilinx Artix-7 FPGA running at 100 MHz. The core system comprises three key modules: a VGA controller for signal generation, a pixel-generation unit that dynamically calculates circle movement and text rendering, and a top-level module for integration.

The VGA controller generates 640×480 video timing signals conforming to the VGA standard, using a 25 MHz pixel clock derived via a clock divider. Horizontal and vertical counters compute sync pulses and video visibility. The circle, rendered as a 32-pixel radius cyan circle, is initialized at (100, 100) and moves diagonally, reversing direction upon edge collision. The text SSIT is displayed in white at the screens center using hardcoded pixel regions for block letters. A refresh tick at every vertical retrace updates the circles position.

Circle movement is managed with velocity vectors stored in registers, reversing direction upon collision with screen edges by negating horizontal or vertical velocity. A boundary detection algorithm ensures precise reversal at visible limits. For each pixel clock, the RGB signal is generated based on whether the current pixel lies within the circle, text region, or black background. The system maintains consistent speed and trajectory with no flicker or frame drop.

Simulations and RTL-level analysis validate timing, logic correctness, and synchroniza- tion. The design utilizes less than 3% of FPGA resources and operates without software involvement, emphasizing pure RTL control. This system showcases FPGA capabilities in low-latency, deterministic video outputs and serves as a foundational example for real-time graphics and digital design education.

Keywords

Animation, Artix-7, Basys 3, Bouncing Circle, FPGA, Pixel Generation, Real-Time Video, Verilog, VGA Controller, Text Display

1. INTRODUCTION

   1. Background

      Field-Programmable Gate Arrays (FPGAs) are powerful platforms for real-time visual interfaces due to their deterministic timing and pipelined processing capabilities. They enable rendering dynamic animations directly in hardware without processor or software overhead [1, 2, 5]. VGA (Video Graphics Array) remains a popular interface in educational and prototyping settings due to its simplicity and standard 640×480 resolution at 60 Hz, aligning well with FPGA clocking schemes [4, 7]. Using Verilog HDL, VGA controllers and pixel generators can create dynamic visual content, including motion graphics, text displays, and 2D animations for learning and simulation [4, 10, 11].

   2. Problem Statement

      While FPGA platforms like the Digilent Basys 3 are widely used, many educational graphic systems focus on static patterns or simple outputs. Few implementations combine dynamic object motion, such as a bouncing circle, with static text rendering, like displaying SSIT. There is a need for hardware-based systems that integrate real-time motion logic, pixel-level collision detection, text rendering, and smooth frame synchronization within FPGA constraints, avoiding visual artifacts like tearing or flickering [3, 12, 13].

   3. Objectives

      This work aims to design and implement a bouncing circle and text animation using an FPGA and VGA output, meeting the following goals:

      • Develop a Verilog-based VGA controller for 640×480 resolution with 25 MHz pixel timing [4, 7].

      • Design a pixel generation module that renders a 32-pixel radius circle with directional motion and edge collision response, alongside static SSIT text.

      • Synchronize real-time position updates with vertical refresh ticks (60 Hz) for smooth animation [5, 17].

      • Validate system behavior through simulation, synthesis, and hardware deployment on the Basys 3 platform.

   4. Contributions

      This paper contributes the following:

      • A hardware-based animation system combining a bouncing circle and static text rendering using VGA interfaces on FPGA [1, 5, 9].

      • A modular Verilog architecture integrating pixel-level movement, boundary detection, text display, and frame-synchronized control [8, 13].

      • Empirical analysis of animation smoothness, timing synchronization, and simulation correctness under FPGA constraints.

      • A pedagogical example for understanding dynamic rendering, text display, timing-critical graphics, and embedded visualization on FPGAs [4, 11, 14].

2. LITERATURE SURVEY

   Recent advances in FPGA-based display systems highlight the flexibility of hardware description languages for real- time graphics. The VGA protocols predictable timing structure supports rendering visual content in embedded platforms. Many designs use Verilog or VHDL for static or semi-dynamic shapes like lines, rectangles, and characters, driven by FSM-based logic. However, dynamic animations with real-time boundary detection and text rendering add complexity. Prior efforts often rely on fixed-position rendering or processor-assisted updates, introducing latency or resource overhead [3, 12].

   Hardware-only animation modules, such as the bouncing circle with text display, offer smoother frame updates and deterministic timing. Pixel-coordinate comparison for boundary conditions ensures efficient object tracking, while hardcoded text regions enable static character rendering. Color-mapped pixel outputs provide vibrant, scalable visual effects compared to binary overlays.

   1. Comparative Feature Analysis

      Table 1 summarizes key aspects of VGA-based animation systems, updated to reflect circle and text rendering capabilities.

   2. Graphical Comparison

      The graph in Figure 1 illustrates trade-offs between processor dependency and motion realism, applicable to the bouncing circle system.

      Hardware-only implementations like the bouncing circle with text display offer deterministic, visually smooth animations with minimal logic overhead.

      Table 1: Comparison of VGA-Based Real-Time Display Systems

      System Name	Display Refresh (Hz)	Object Motion Type	Processor Dependency	Collision Han- dling
      Static Shape Ren-	60	None	No	Not Applicable
      derer
      Character Blinker	60	Predefined Toggle	Yes (Micro-	None
      			controller)
      Shape Mover via	60	FSM-Step Motion	No	Limited Edge
      FSM				Check
      Image Buffer An-	60	Frame-based	Yes (Soft	Basic Wrapping
      imator			Processor)
      Proposed	60	Frame-Timed, Direc-	No	Full 4-Edge In-
      Bouncing Circle		tional		version

      Figure 1: Trade-off Between Motion Realism and Processor Dependency

3. SYSTEM DESIGN

   The FPGA-based VGA Bouncing Circle system uses a modular hardware architecture for real-time rendering of a dynamic circle and static SSIT text on a VGA monitor. The core functionality is distributed across three modules: the VGA controller, pixel generation unit, and top-level wrapper module.

   1. Hardware Block Diagram

      The system architecture is depicted in Fig. 2. A 100 MHz clock from the Digilent Basys 3 FPGA board is used. The VGA controller module derives a 25 MHz pixel clock via a 2-bit divider and generates horizontal and vertical sync signals (hsync, vsync), pixel positions (x, y), and a video on signal. Pixel coordinates are passed to the pixel generation module, which determines colors based on whether the pixel lies within the circle, text region, or background.

      ‌Figure 2: Hardware Block Diagram of VGA Bouncing Circle System

      The circles position and velocity are tracked using registers, updated on each screen refresh tick. Collisions with display boundaries reverse the direction by flipping velocity signs. The text SSIT is rendered using hardcoded pixel regions.

   2. Pixel Logic Flow

      The pixel rendering logic, evaluated on each pixel clock cycle, follows the flowchart in Fig. 3. The VGA controller outputs x and y coordinates, and the pixel generation module decides the color:

      • If outside the visible area, output black (12h000).

      • If inside the circle boundary (dx*dx + dy*dy <= radius*radius), output cyan (12h0FF).

      • If inside the SSIT text region, output white (12hF00).

      • Otherwise, output black background (12hFFF).

        A refresh tick, derived at each vertical blanking interval, triggers circle position updates. An FSM within the pixel logic recalculates boundaries and detects collisions.

        ‌Figure 3: Flowchart: Pixel Evaluation and Circle Position Update Logic

   3. Synchronization and Data Path

      Pixel colors are latched and assigned to the output on a valid pixel tick, ensuring deterministic updates and flicker-free display at 60 Hz.

4. IMPLEMENTATION

   The system was implemented on the Digilent Basys 3 board with an Artix-7 FPGA and 100 MHz clock. The architecture comprises three Verilog modules: a VGA controller, a pixel generation unit, and a top-level wrapper.

   1. VGA Controller Module

      The VGA controller module generates timing signals for 640×480 at 60 Hz, dividing the 100 MHz clock to 25 MHz using a 2-bit counter. Horizontal and vertical counters produce sync signals, pixel coordinates, and a video-on signal. A pixel tick signal drives animation updates.

   2. Pixel Generation and Animation Logic

      The pixel generation module computes RGB values based on screen coordinates, rendering a 32-pixel radius cyan circle (12h0FF), white SSIT text (12hF00), and black background (12hFFF). The circles position updates on each refresh tick, with velocity reversing at edges (x=32, x=607, y=32, y=447). The text is rendered using hardcoded pixel regions for block letters.

   3. Top-Level System Integration

      The top-level module instantiates the VGA controller and pixel generation modules, latching RGB outputs on each pixel tick for VGA DAC output.

   4. RTL Schematic

      Fig. 4 shows the synthesized RTL schematic from Vivado, illustrating the modular separation of VGA timing and pixel generation.

      ‌Figure 4: RTL Schematic of Bouncing Circle and Text System

   5. Simulation Analysis

      Behavioral simulation in Vivado validated RGB outputs, sync pulses, and circle position track- ing. Fig. 5 shows correct toggling of sync signals and RGB values (0FF for cyan, F00 for white, FFF for black).

   6. Prototype and Hardware Validation

      Deployed on the Basys 3 board, the system displayed a cyan circle bouncing on a black background with white SSIT text centered, as shown in Fig. 6. The animation ran smoothly at 60 Hz, with the circle reversing direction at the edges.

5. TESTING AND RESULTS

   The system was tested through simulation and hardware implementation to validate the bouncing circle and SSIT text display on a 640×480 VGA monitor.

   ‌Figure 5: Simulation Output of RGB and Synchronization Logic in Vivado

   ‌Figure 6: Prototype Result: Real-Time Circle Bouncing and Text on VGA Display

   1. Simulation Validation Vivados testbench confirmed:

      • Circle position updated on refresh tick.

      • Boundary detection reversed velocity at edges (x=32, x=607, y=32, y=447).

      • RGB output correctly assigned cyan (12h0FF), white (12hF00), or black (12hFFF).

      • Timing correctness with zero violations.

   2. Synthesis and RTL Analysis

      Synthesis in Vivado confirmed 100 MHz operation with no timing violations. Resource utiliza- tion was under 3% of LUTs and FFs.

   3. Prototype Validation

      On the Basys 3 board, the circle bounced smoothly, and SSIT text remained static. Reset initialized the circle to (100, 100), validating asynchronous behavior.

   4. Summary of Results

      • Pixel Accuracy: 100% alignment with circle and text boundaries.

      • Color Accuracy: Correct RGB mapping for all regions.

      • Edge Collision Logic: Validated in all four directions.

      • Frame Rate: Stable 60 Hz with no tearing.

      • Power Consumption: Within FPGA tolerances.

6. CONCLUSION AND FUTURE SCOPE

   This work demonstrates a real-time VGA-based animation system rendering a bouncing circle and static SSIT text using Verilog HDL on the Basys 3 FPGA. The modular design en- sures smooth 60 Hz animation with deterministic timing. Simulation and synthesis confirm functionality and efficiency.

   1. Future Scope

      • Multiple Objects: Render multiple circles or shapes with varying speeds.

      • User Interaction: Add button or keyboard control for circle properties.

      • Collision Detection: Implement circle-to-circle collisions.

      • Dynamic Text: Enable scrolling or dynamic text updates.

      • Graphics Effects: Add gradients or fading effects.

      • Sprite Rendering: Use ROM for complex sprite animations.

ACKNOWLEDGMENT

The authors thank Sense Semiconductor and IT Solutions Pvt. Ltd. for their technical infrastructure and mentoship. Special gratitude to Mr. Surya (COO) and Mr. Sudheer (CEO) for their guidance. The project used the Digilent Basys 3 board and Xilinx Vivado, with foundational reference from Dr. Pong P. Chus work on Verilog-based FPGA prototyping.

REFERENCES

1. ‌G. Berry, Designing Embedded Graphics Systems Using FPGA, IEEE Design & Test of Computers, vol. 24, no. 1, pp. 1421, 2007.

   DOI: 10.1109/MDT.2007.20

2. ‌M. D. Ercegovac and T. Lang, FPGA implementation of motion graphics rendering,

   IEEE Trans. on Computers, vol. 49, no. 7, pp. 692701, 2000. DOI: 10.1109/12.868019

3. C. M. Krishna, Real-Time Systems: Design Principles for Distributed Embedded Appli- cations, Springer, 2001. DOI: 10.1007/978- 1-4615-1283-4

4. P. P. Chu, FPGA Prototyping by Verilog Examples, Wiley, 2008. ISBN: 978-0-470- 18532-2

5. ‌A. Mitra and C. R. Chakrabarti, Real-time image rendering using FPGA for low latency applications, IEEE Trans. on Circuits and Systems for Video Technology, vol. 18, no. 3,

   pp. 345353, 2008. DOI: 10.1109/TCSVT.2008.915519

6. K. Compton and S. Hauck, Reconfigurable computing: A survey of systems and software, ACM Computing Surveys, vol. 34, no. 2, pp. 171210, 2002. DOI: 10.1145/508352.508353

7. M. A. Vega and M. S. Sadjadi, Hardware-Accelerated VGA Display Systems Using Verilog, International Journal of Reconfigurable Computing, 2017. DOI: 10.1155/2017/9262158

8. N. Nedjah and L. M. Mourelle, A survey of FPGA-based hardware accelerators for image processing and computer vision,

   Microprocessors and Microsystems, vol. 39, no. 8, pp. 576590, 2015. DOI: 10.1016/j.micpro.2015.06.004

9. K. Vipin and S. Fahmy, Mapping High-Level Graphics Animations on FPGA, IEEE Transactions on Computer-Aided Design of Integrated Circuits and Systems, vol. 35, no. 12, pp. 21022113, 2016. DOI: 10.1109/TCAD.2016.2587700

10. ‌J. Bhasker, A Verilog HDL Primer, Star Galaxy, 2008. ISBN: 978-0970539413

11. A. H. Johnston, An FPGA Implementation of a VGA Controller for Gaming Applications, International Journal of Advanced Computer Science and Applications, vol. 6, no. 2, pp. 174179, 2015. DOI: 10.14569/IJACSA.2015.060225‌‌

12. T. C. Fischer and H. Meyr, Real-time animation using finite-state machines on FPGA, IEEE Trans. on Circuits and Systems, vol. 39, no. 8, pp. 609617, 1992. DOI: 10.1109/31.144919

13. R. J. Brebner et al., Implementing collision detection and response for 2D objects in FPGA logic, Journal of Real-Time Image Processing, 2014. DOI: 10.1007/s11554-013-0379-4

14. D. Gajski et al., High-level synthesis: Introduction to chip and system design, Springer, 2012. DOI: 10.1007/978-94-007-0640-0

15. ‌J. L. Hennessy and D. A. Patterson, Computer Architecture: A Quantitative Approach,

    Morgan Kaufmann, 2019. DOI: 10.1016/C2015-0-02311-7

16. J. L. Hennessy et al., Real-Time Signal Processing with FPGAs, IEEE Signal Processing Magazine, vol. 29, no. 6, pp. 8291, 2012.

    DOI: 10.1109/MSP.2012.2210877

17. L. Gao et al., Accelerating Real-Time Video Applications on FPGAs, IEEE Trans. on Multimedia, vol. 19, no. 12, pp. 27752789, 2017. DOI: 10.1109/TMM.2017.2714681

18. P. Bressloff and L. Glass, Dynamical models for pixel-based motion detection on FPGA, IEEE Trans. on Circuits and Systems I, vol. 52, no. 6, pp. 12321243, 2005. DOI: 10.1109/TCSI.2005.848816

19. R. Duda et al., Verilog-based Visualization System for Real-Time Graphics, Journal of Electronic Design Technology, vol. 10, no. 2, pp. 3442, 2019.

20. R. J. Rabelo and A. de Lima, FPGA implementation of interactive motion-based object rendering for VGA, Procedia Computer Science, vol. 133, pp. 444451, 2018. DOI: 10.1016/j.procs.2018.07.069