Travel Beats Animation
"Travel beats animation, just as enjoying music while journeying enhances the adventure, offering a more immersive and enriching experience."
RESOURCES
CHALLENGES
Challenge 1: Tracing Elements in Inkscape.
Our team encountered a significant challenge when tasked with tracing elements in Inkscape for our animation project. As beginners with limited experience using vector graphics software, we found ourselves grappling with the intricacies of tracing shapes and objects accurately.
Our primary objective was to trace various elements on Inkscape, ensuring precise outlines and shapes to be utilized later in our HTML canvas animation.
Facing the challenge of tracing elements in Inkscape for our animation project, our team navigated the unfamiliar terrain with a strategic approach. We began by immersing ourselves in online tutorials and forums to understand the fundamentals of vector tracing techniques. Complementing this was a series of rigorous practice sessions, where each team member experimented with different shapes and objects, gradually gaining proficiency with Inkscape's tools and features.
Through this dual strategy of study and hands-on learning, we navigated the complexities of vector tracing, transforming initial uncertainties into confident strokes, and ultimately integrating traced elements seamlessly into our HTML canvas animation.
Challenge 2: Unintended Transformation Cascading in Elements.
Our team encountered a perplexing challenge during the development of our HTML canvas animation project. When applying transformations to individual elements, we discovered that these transformations were inadvertently affecting all subsequent elements placed after the transformed one. This unexpected behavior posed a significant obstacle to achieving the desired visual effects and animations.
Our task was to apply transformations selectively to individual elements, ensuring that transformations applied to specific elements did not unintentionally affect others in the sequence.
We initiated a thorough investigation to pinpoint the root cause of the transformation propagation. Through meticulous examination of our code and experimentation with different scenarios, we identified the moment when the unintended propagation occurred, leading us closer to a solution. Armed with insights into the issue, we strategically implemented the ctx.save() and ctx.restore() functions in our code wherever necessary. These functions allowed us to save and restore the state of the canvas context, effectively isolating transformations to individual elements and preventing their propagation to subsequent elements.
With this solution in place, transformations applied to specific elements remained isolated, ensuring the intended visual effects without unintended side effects on subsequent elements. This enabled us to proceed with our animation project with confidence, achieving our desired outcomes effectively and efficiently.
LIVE DEMO
CONTRIBUTIONS
SANEHA GARG
Project Documentation
Contributed in Coding Tasks
PRIYANKA BEDI
Tracing Elements in Inkspace
Coding Integration