I want to improve some of the visuals and interactions for the dragon and flower I made during Week 2 and Week 3.
DRAGON
To give the dragon a more distinct and recognizable appearance, I decided to incorporate features that are characteristic of dragons, such as legs and horns. By adding these elements based on the current segment of the dragon, I aimed to enhance its overall resemblance to a dragon rather than a caterpillar. Additionally, I adjusted the dimensions and segments of the spheres that comprise the dragon to create a more fierce and imposing look. By making these changes, I was able to transform the dragon's appearance from soft and round to bold and intimidating, better capturing the essence of a dragon.
To incorporate slider controls for adjusting the size and length of the dragon, I needed to refactor some of the code. Since the location of the segments is determined by rotating them around the center of origin, changes in the x-axis position affect the spacing between segments. To address this, I mapped the speed of the rotation to the x position. This adjustment ensures that changes in size and length of the dragon are accurately reflected in its appearance, maintaining proportional spacing between segments while allowing for dynamic adjustments through the slider controls.
rotateY(this.rotationY + ((frameCount-this.len*this.size*spdMap)/150));
UI (CONTROLS)
To enhance the user-friendliness of the controls, I refactored them into index.html and added text labels to indicate their function. Additionally, to address the issue of the controls sometimes covering the flowers, I implemented a function allowing users to press the 'h' key to toggle the visibility of the controls. Lastly, I organized the controls into collapsible toggles, grouped by the object they're changing. This creates a cleaner and more organized interface, improving the overall user experience.
index.html exampleFinal Demo
INDIVIDUAL BEHAVIOURS