App Inventor

10/12 - Paint Pot Application

A *star* next to the heading means the section is required in your portfolio

This application allows users to draw on top of a canvas. They can do so by dragging to draw a line or by touching to draw a dot. There are options to change the size of the dot and line, as well as the ability to change color and reset the canvas. More advanced features include the ability to take a picture and draw on it, as well as saving/sharing capability.

Design View*

For the design of this app I created several buttons, a spinner, a slider. The picture of the cat is the canvas for users to draw on. Each button executes code that completes the command for which it labeled. The spinner allows users to pick a color to draw with, the dot size buttons allow the user to change the size of the dot, and the slider allows the user to change the line width. The bottom 3 buttons allow users to take, send, and save pictures they've drawn on.

Canvas Code*

This code allows users to draw on the canvas. The touched code gets the x and y coordinates and draws a dot. The dragged code draws a line.

Color Picker*

This code allows users to pick a color from the color spinner. It uses if-then event handlers to determine which color was selected by the user.

Dot Size

This code used variables to set the size of the dot created when the canvas is touched. The user can set the size to 2 or 8 by click on the specific buttons. This was done by setting dot size as a variable, and having

Take/Send Pictures

This code allows the user to take a picture and set it as the canvas background. It then allows them to save the picture, the program automatically creates a filename, and then they can send it using the sharing component.

10/26 - Mole Mash

A *star* next to the heading means the section is required in your portfolio

This application is a game that allows users to click on a moving mole to gain points. As they gain more points by clicking on the mole they will advance through the levels and the game will get harder.

Design*

In this app I created a canvas with a sprite inside of it. For the sprite I used an image of a mole. I also included two labels, one for the score and one for the level. Lastly I added a reset button so users could restart the game.

Procedures*

These are the procedures I created for the app.

  • The MoveMole procedure changes the moles heading and speed.
  • The UpdateLevel procedure updates the level label
  • The UpdateScore procedure updates the score label
  • The Reset procedure resets all of the variables and updates the labels

Sprite Code*

This is the code that determines what happens when the mole sprite is touched by the user. Every time the mole is touched it adds a point to the global score, it vibrates the phone, updates the labels, and moves the mole. If the score reaches ten it resets the score, adds 10 to the speed of the mole and advances to the next level. If the user reaches level 10 it resets the whole game and a voice tells you that you won!

Event Handlers

This other event handlers were necessary for the app to function. The clock calls on the MoveMole procedure so the mole moves often enough to make the game challenging. The EdgeReached makes sure that the mole doesn't get stuck in a corner, and the reset button resets the game.

Variables

These were the variables that I used. The score keeps track of the points the user gets. The speed determines how fast the mole is moving. The levelCount keeps track of the level the user is currently on.

11/1 - Video Wall (Extra Credit)

A *star* next to the heading means the section is required in your portfolio

In this app we created 3 video players that had the capability of being shrunk, grown, or put into full screen.

Design*

In the design of this application I made the screen size fit a larger tablet. The three vertical arrangements within a horizontal arrangement allowed me to have each video with it's controls separated from each other.

Resize Procedure*

This procedure allowed the grow and shrink buttons to control each of the players' sizes without having to code each individually. The code also changed the text of the button to the opposite of what it was before.

Buttons*

The code for these buttons called upon the Resize procedure. Each component was input for the mutators (VideoPlayer, Zoomed, and Button) and the value of each global_vid_zoomed was set to the opposite of what it was prior.

11/8 - Mini Golf

A *star* next to the heading means the section is required in your portfolio

In this app we created a Mini Golf game that allows players to fling a golf ball towards a hole and score points.

Design*

In this design added canvas, a golf ball, and a hole.

Golf Ball Code*

This is the code that determines what happens when the user flings the ball. It also updates the labels for the user to see.

Collision Code*

This code determines what happens when the golf ball collides with something. If it goes in the hole it uses the procedure to create a new course. If it hits the edge of the screen it bounces.