This Sunday is Saint Valentine’s Day. That usually means lots of romance, lots of flowers, lots of chocolates and lots of hearts. If you’re in the middle of creating interactive content for Valentine’s Day, you might be wondering how to make a heart. Currently, Hype doesn’t have drawing tools or concave shapes. But by using basic elements, a Heart can be created in Hype. By stacking basic shapes, elements can be overlapped to create a heart.
The first step is to create two circles and one square. They should all be the same size. The width of the elements should be equal to the height of the elements. In the example, the elements are 100×100 pixels. The square is rotated 45° so that it looks like a diamond shape. By default, Hype’s “Rectangle” and “Ellipse” elements have a 1-pixel border. It is removed to create a seamless overlap.
By simply sliding the elements together, they can make a perfect heart. Hype makes it easy with elements that “snap” to each other. Once positioned together, these elements can be grouped. That allows for easily moving or rotating the three elements.
This is better than just importing a picture of a heart, such as a PNG or SVG, as the hit area is perfect. The heart can be used as a button. Simply set the three elements to the same action. Although, there are some caveats with this technique. While this approach can work well for launching Hyperlinks, it is not suited for mouseover / mouseout effects. The three shapes won’t be synchronized to hover events. While the mouse might be hovering over one or two of the “Heart” elements, a third element is outside of that action.
The “Group” itself can have an action assigned to it, but the shape of the group won’t match the shape of the contained elements. That means the heart might not be ideal for Physics based animation. The collision shape of the group is not heart shaped. It’s either rectangular or rounded with chamfered edges. But if the heart isn’t moved by Physics, then the three “heart” elements can be “Static” Physics elements. Other elements can bounce off the three ungrouped “Heart” elements.
The “Heart” Hype Template is a workaround to the current limitations in Hype. However, there is potential. Hype uses “matter.js” as the Physics engine. That supports Concave SVG Paths.
Version 0.9.0 of Matter.js was launched last month. Technology moves fast. If Tumult adds an SVG editor and more Matter.js features to Hype, there could be another way to create a heart. That’s what’s interesting about web development. There are many ways to solve a problem. The correct answer depends on your project. By combining shapes in this manner, you might be able to solve problems in other Hype projects.