Discussing the article: "MQL5 Trading Tools (Part 29): Step-by-Step Butterfly Animation on Canvas"
MetaQuotes:
Great job so far. Keep it up
Check out the new article: MQL5 Trading Tools (Part 29): Step-by-Step Butterfly Animation on Canvas.
Author: Allan Munene Mutiiria
You are missing trading opportunities:
- Free trading apps
- Over 8,000 signals for copying
- Economic news for exploring financial markets
Registration
Log in
You agree to website policy and terms of use
If you do not have an account, please register
Check out the new article: MQL5 Trading Tools (Part 29): Step-by-Step Butterfly Animation on Canvas.
In this article, we expand our butterfly animation program with a four-stage animation pipeline: sequential curve drawing, smooth wing fill fading, detailed body rendering, and continuous flight. We implement a timer-driven state machine, four oscillators for wing flapping, vertical bobbing, horizontal sway, and tilt, as well as a neon glow around the wing outlines and a cyclical color change based on hue. You will learn how to structure these effects on the MetaTrader 5 canvas for clean and controlled playback.
The animation unfolds through four sequential phases: the curve outline draws itself progressively by advancing the parameter t from zero to 12π; then the wing fills fade in from transparent to full opacity; next, the surface detail and body fade in; and finally, the butterfly transitions into continuous flight. Each phase is driven by a millisecond timer that advances the relevant state variable each tick and hands off to the next phase once complete.
The flight system runs four independent oscillators simultaneously. Wing flapping compresses the horizontal spread of every curve point toward the body center using the absolute value of a sine wave, producing the open-close motion of real wings. Vertical bobbing and horizontal sway apply sine offsets to the Y and X coordinates, respectively, making the butterfly rise, fall, and drift. Tilt adds a small shear transform that leans the butterfly slightly as it sways, giving the motion a natural three-dimensional quality.
During flight, we render a neon glow by drawing multiple semi-transparent, offset lines around each wing outline stroke. We also cycle wing colors each frame by converting colors to HSV, advancing the hue, and converting back. This makes the wings pulse as the butterfly flies. We will implement all of this on top of the existing supersampled rendering pipeline, driven entirely by the timer event handler. Here is a visualization of what we will be achieving.
Author: Allan Munene Mutiiria