One of the most common themes that I find in interesting projects is the creators ability to find an effective solution for a problem when they have been given very limited resources. While I am in school I am excited to find problems that requires a little more ingenuity than would be expected by the assignment requirements. In this case I was eager to push the animation capabilities of AppInventor, and create something that might normally be outside of the scope that someone might expect from a development environment geared towards beginners and kids.
After only being tasked to create an app that used trigonometry in some way, my partner and I were intrigued by the idea of creating a visual representation of angles on the unit circle, complete with component vectors SIN and COS. This would required some creative use of the methods available for use with the sprite objects that are the basis of animations in AppInventor. The key restriction is that sprites are limited to be re-sized, rotated or translated. I had initially assumed that there wasn’t any sort of line drawing tool (which later I find that Appinventor actually has, much to my dismay) and therefore I would be manipulating images using these methods to sort of simulate line drawing. To show you how I did this, I wrote up some of the important functions in Pseudocode as to not bother you with the hassle of not knowing the specifics of AppInventor blocks.
// Display X-Coordinate if ((quadrant(angle) == 3) || (quadrant(angle) == 4)) redLine.setX((cos(angle)*100)+100) redLine.setY(100) redLine.setHeight(-(sin(angle)*100)) else redLine.setX((cos(angle)*100)+100) redLine.setY(100-(sin(angle)*100)) redLine.setHeight(sin(angle)*100) //Display Y-Coordinate if ((quadrant(angle) == 2) || (quadrant(angle) == 3)) blackLine.setX((cos(angle) * 100) + 100) blackLine.setWidth(-(cos(angle)*100)) else blackLine.setX(100) blackLine.setWidth(cos(angle)*100) //Display Hypotenuse xDirection = (cos(angle)+1) * 100 yDirection = Canvas.Height - ((sin(angle) + 1) * 100)