Intro
Our fourth lecture today was one of the most interesting ones, since we learned not only more advanced animation techniques such as rotation, but also how to create objects, which make programming incredibly easier as well as produce a way more organised code, which makes the programmer’s life easier. Despite the fact, that I am still getting used to the use of JavaScript, I was able to understand the new concepts and syntax, which is one of my main difficulties in this new language.
Creation of Destruction
For todays assignment, I wanted to create an explosion animation using the object techniques we learned today. My starting goal was to create this animation by shooting numerous small balls in all directions any time the user would click somewhere on the screen. Initially, I was able to create random projectiles that would be shot in random directions, but I encountered a huge bug. Even if I included the mouseClicked function, the program would take it as TRUE as soon as I started the program and thus the projectile was shot right away. Another problem I encountered was how to shoot numerous different projectiles that had different values for x, y, xaccel, yaccel in order to be shot in all directions. Unfortunately, because the only way I could thing of (I just figured out another way that I could use) to fix it was with the use of arrays which we will learn tomorrow, I managed to create this animation by having fast expanding yellow and red circles, which give the sense of a fiery explosion. On the other hand, the first object I created called Kaboom, which includes the creation of the explosion, since it allows the circles to expand just like a destructive Super Nova. Initially, I also gave the acceleration a negative value in order to make the small circle initially to shrink, in order to give the flashing animation before any nuclear explosion and thus make my animation more realistic. Furthermore, the BOOM function in Kaboom object would occur if the user pressed CONTROL, which is the secret button to destroy our planet. This way, the BOOM animation would occur only if the user pressed CONTROL after the program started. For that I used the KeyPressed and the KeyCode commands in order to check if CONTROL is pressed.
The next object I created is Earth, which includes three functions; planet, Moon and message. The first one planet, is quite simple, since it just creates planet Earth which is located in the centre of the canvas. The second, Moon is quite a complicated one, since the moon is designed to rotate around the first circle, which is planet earth. In order to create Moon’s orbital movement, I used the translate( ) function as well as the angle technique we discussed and practised today in class. This way, I was able to make the Moon orbit around the Earth and thus build the basic animation of today’s work.
Next, in order to finalise my assignment I had to add to texts. The first one was added in the earth object and included the text “PRESS CONTROL FOR A BIG BOOM” in order to show the user which button he needs to press in order to trigger the animation. The next text was a little more complicated, since I wanted to show the text “YOU HAVE DESTROYED PLANET EARTH” after the explosion was triggered, but not immediately, so it would not disrupt the user from viewing the animation. In order to solve this issue, I used the “if” command and therefore the text would be shown only if the x.pos variable was beyond a specific value. This way the text was shown when the screen was almost yellow, which is the colour of the inner expanding circle in the explosion animation. This way I completed my sketch, which you can view below.
Apocalypse
Conclusion
Last but not least, today’s assignment was quite fun and entertaining as well as challenging and destructive (in my case). In conclusion, I hope to learn even more interesting techniques tomorrow that will allow me to create even more interesting sketches and animations, as well as some small video games.
Thanks for reading,
Christos