Candle Flame Animator

🏢 Source: Upwork
💰 Budget: 200$

Deliverable

A webpage that displays a candle flame animation using HTML5 Canvas and JavaScript, or some other method. The animation should look as realistic as possible. The screen should also include a background, like picture or drawing, so the candle and flame are located somewhere, and not just exist as a stand-alone animation.

Flame Properties

The flame should look like it is attached to a candle, and the flame’s properties (height, illumination, color, movement, and sound) should all be controlled simultaneously by numbers read in sequence every 0.5 seconds from an array of 600 floating-point numbers. In the real application this array will already exist and be pulled in from a cloud location. For the purposes of this pilot test, it can be a fixed array within the code itself or pulled from a server.

Flame Visibility

The flame should alternate between visible and invisible every 30 seconds for a total of 2 minutes.

Sound Integration

An associated sound (like the crackling of a fire) should dynamically change in volume, smoothly, in sync with the flame’s brightness.

Visual Integration

The candle should be visually integrated with the flame and have a realistic appearance with smooth transitions from one frame to the next. The more realistic, the better.

Code Quality

The code should be well-commented and structured to facilitate easy modification and integration with the rest of the adventure game project.

Skills

2D Animation