CodeX App Creation Week 6


yo yo yo!

This is the FINAL WEEK BEFORE WINTER BREAK!!! Are you excited???

I AM! Almost as much as H3H3 is^

So today is going to be a little more relaxed, we would like to give you time to discuss in teams what app you will be working on for a fun competition we will be having in the Spring.

 


In the Spring of 2017: CodeX will be having an app creation competition between all students in the program. Every team from Hanshaw and Somerset will compete for a cash prize. There will be only one winning team


As of now you have already created your teams- before winter break we want to give you time to brainstorm ideas to get you thinking of what you would be interested in making.

 

We understand that you may change your ideas once you come back to school in January, but it is important to get you thinking before you go.


TEAM BRAINSTORM OVERVIEW:

There will be 20 minutes of collaboration in teams: come up with answers to the following questions:

  • What problem are you trying to help solve? (eg: graffiti at school, boredom, un-social school)

  • How can you solve the problem by making an app? (eg: a photo-sharing app to alert custodians when there is graffiti at school, making a video game to stop boredom, or an app to help connect students at Somerset)

  • Describe why you want to build it- Why is this important to you? 

  • Describe 3 potential features of the app. (eg: photo-sharing, drawpad, voice command, etc.)

  • Describe what you will need help with in order to make it.


After 20 minutes: each team with give a 3-5 minute presentation in-front of class describing their project


If you there is still time at the end of class, please but the final touches on Ball Bounce App before Winter Break


LeT’s GeT iT cRaCkIn’

For the next 30-45 minutes, please continue to work on the ball bounce app.

Below are details that:

  1. Describe how to make the app (in case you did not finish)

  2. Describe how to add more features to your app (if you already finished) - Located at the very bottom of the page

If you have other ideas, please explore them! This is your opportunity to get creative :)


Ball Bounce App Creation- Overview

Does this look familiar? Have you ever seen something like this?

Today we are going to learn how this works (making an image bounce). Think about all the apps on your phone that you have used that involved some type bouncing and jumping on a screen. I bet most of the games you play on your phone involve this in one way or another!


Open

Open the MIT App Inventor! And login using your credentials

Here is the link: http://appinventor.mit.edu/explore/

AND create a new project called “BallBounce”


Canvas
Fill Parent

So like with our Doodle App, drag the Canvas over and FILL PARENT!

Now that we have a Canvas in place, we can add a “Ball Sprite.” This can also be found in the “Drawing and Animation” section in the Palette

Drag out a Ball component and drop it onto the Canvas.

PS To make the ball bigger and smaller by changing the Radius property in the Properties pane. TRY IT OUT!


Ball

Now Go to Blocks!

Choose the block when Ball1.Flung and drag-and-drop it onto the workspace. 

Flung refers to the user making a "Fling Gesture" with his/her finger to "fling" the ball. Fling is a gesture like what a golf club does, not like how you launch Angry Birds! In App Inventor, the event handler for that type of gesture is called when Flung.

Both

Open the Ball drawer and scroll down in the list of blocks to get the set Ball1.Heading and set Ball1.Speed blocks


 

Mouse over the "speed" parameter of the when Ball1.Flung event handler. The get and set blocks for the speed of the fling will pop up. Grab the get speed block and plug that into the set Ball1.Speed block.

Do the same for the Ball's heading. Mouse over the heading parameter and you'll see the get heading block appear. Grab that block, and click it into the set Ball1.Heading block.

 

Now there is a logical explanation to this, don't freak out:

Set Ball1 Speed: You want to tell the app that when you "fling" the ball, you want it pick up speed

Set Ball1 Heading:  This tell the app the direction in which the ball is move towards based on how you "fling" the ball. 

Screen Shot 2016-11-18 at 4.54.29 PM.png

No it is important to ensure that the ball bounces off the edges!

Why do you think this is important? What would happen if we did not add this portion of code?


TESTING THE APP!

Take out an Android Phone (or find someone with one- sorry an iPhone will not work

  1. Click App (provide QR code for .apk)

  2. Then scan the QR Code with your phone!

FYI: If your phone does not have a QR Code Scanner, you can download one for free from the Google Play Store!


Now, in case you are an overachiever, which we hope you are:

Try adding these elements to your app:

  • Change the color of the ball based on how fast it is moving or which edge it reaches.

  • Scale the speed of the ball so that it slows down and stops after it gets flung.

  • Give the ball obstacles or targets to hit

  • Introduce a paddle for intercepting the ball, like a Pong game