02-24 App Lab Animation

Web site: bit.ly/cs100 Report video/sound issues using the video being off form

​

Announcements:

• Assignment 5. Music / Motion Game is due 3/5, a week from Friday.
• I added a Topics / Image Editing tutorial on the web site to step through extracting images, as shown in class last time.
• If you don’t have a Circuit Playground Express you can buy it locally at MicroCenter.
• If you want more ideas for App Lab animation, see Bill Barnum’s YouTube tutorials

Previously:� CPX Sensors: Sound, Light, Temp�

Today:

Animation (no CPX needed)�

​

​

Take today’s quiz, using the link posted in the Zoom chat.

UIC CS100, Reed, Spring 2021

Sign Up for your breakout group (3 min)

Intro question:

If there was no pandemic, at what restaurant would you want to go eat?�As a group choose a favorite and put information about it in the upper-right of your page.��

• We will look at several programs today in App Lab, not requiring CPX.
• For each one we have a designated person in your group to screen share.
• Remember to Remix if you want to save your own copy to play with it.

1. Move ball with arrow keys (5 min)

Start with: https://studio.code.org/projects/applab/wiy8SmTBsKgCZ0w0ckkbSFaMdziZ5Al-U-WoEsm9dIs

First person in your group screen share.�As a group look through the code and decide on and write down on your page:

1. What you notice (important for learning)

​

• What you wonder (how does it work; extensions)

2. Event Loop Animation (7 min)

Start with:

Second person in your group screen share.�As a group look through the code and decide on and write down on your page:

• New key idea(s)
• What’s tricky https://studio.code.org/projects/applab/MXB5KuHNSyj1Uj7PYxQCqdgSRc4AQrhpHvu4dYPI2g0

Screen Position Values (4 min)

x, y�0, 0

x, y�320, 0

x, y�320, 450

x, y�0, 450

Position of an object is relative to the x,y values of the upper-left corner of the bounding box:

3. Ball Bounces (6 min)

Start with: https://studio.code.org/projects/applab/46PA0YHXaKdO4fUDP_UOglzMZ81vR3tsvbB00uEDZ_c

As a group look through the code and notice the code used to make it bounce off the left wall.

The third person in your group screen share.�As a group write the code to do the following:

• Make ball bounce against the right wall.��Time permitting:
• Make ball bounce against the other walls.
• When the bottom of the ball hits the top of the brick wall, make it bounce.

Sprite Intersection (4 min)

For bounding-box intersection to be true, the following must be true:

1. One of shell's sides (right or left) must be between ball's sides, and
2. One of shell's top/bottom must be between ball's top/bottom

​

​

Does this algorithm still work if we swap shell and ball in the statements above?��Complete the code so it works.

4. Ball and Shell Intersect (6 min)

Start with: https://studio.code.org/projects/applab/k3Y_hH6r1WD4DAKBMJxfK9vLHz2g-WG9tcdIjhSqOiQ

Fourth person screen share.�As a group look through the code and pay particular attention to:�����Complete the code so that when the ball intersects the shell, the ball image changes to the deflated ball and the program stops.

5. Screen Wrap-around (for lab)

Start with: https://studio.code.org/projects/applab/lVUJ7A7LdJu44qzD5UBSUzxrH0cwlGPH2ofHGLFxpkc

Left/Right arrow keys moves seagull, which wraps around when it reaches the edge of the screen. Complete the code so that it also works to wrap around top and bottom.���

Brainstorm (time permitting)

Given what we’ve seen about how to do animation:

1. How might you have an object wrap around the edges of the screen?
2. How is this the same / different from animation / games you’ve seen?
3. What sorts of possibilities does this offer for your next assignment to make an interactive game?

​

1

Breakout Group

Group Member Names:

Use your color for your contributions.

1. Move Ball: What do you notice? What do you wonder?�We notice that the ball moves at a snail’s pace.�I wonder if we could make the ball move a little bit faster.�
2. Event Loop Animation: What are new key ideas? What’s tricky?�Every time you press start the ball moves faster than it did the last time.

Only stops when you press a different key. ��

• Ball Bounces: Share and copy here the URL for your group’s solution��https://studio.code.org/projects/applab/xVdHrMkkIJbYpbEaSwng8G7yS5CtAhusbgXaLqyevZ8�
• Ball and Shell Intersect: Share and copy here the URL for your group’s solution��

Restaurant recommendation: Joy Yee��

2

Breakout Group

Group Member Names:

Use your color for your contributions.

• Move Ball: Ball moves by 1 unit on pressing the buttons���
• Event Loop Animation: What are new key ideas? What’s tricky?��
• Ball Bounces: Share and copy here the URL for your group’s solution���
• Ball and Shell Intersect: Share and copy here the URL for your group’s solution��

Restaurant recommendation: Nando’s

3

Breakout Group

Group Member Names:

Use your color for your contributions.

• Move Ball: What do you notice? What do you wonder?�By using the keyboard keys, we are able to move the ball in any direction. However, it does go off the screen.�By pressing the arrows on the pc’s keyboard the ball began moving, but did not stop until the opposite arrow was pressed.�
• Event Loop Animation: What are new key ideas? What’s tricky?�The ball moves faster than before.�The ball moved faster than previously and var (delta) = 1 instead of vas (delta) = 0�
• Ball Bounces: Share and copy here the URL for your group’s solution��https://studio.code.org/projects/applab/-BmUkW37_UnPfgHBgQgQF-dPCAhLmGFt9rhFm1MY_Us�
• Ball and Shell Intersect: Share and copy here the URL for your group’s solution��

Restaurant recommendation: Chicago Pizza and Oven Grinder, Chipotle��

4

Breakout Group

Group Member Names:

Use your color for your contributions.

• Move Ball: What do you notice? What do you wonder?�A delta variable keeping track of the change in position. When moved off the screen it disappears completely.�Ball moves very slowly but is controlled by pressing keys.�How to make it move faster

How to do a floating animation?

• Event Loop Animation: What are new key ideas? What’s tricky?�Events on loop, keeps going continuously; this allows the ball to move faster and it stops only after manually stopping it.

More difficult to control the ball�The ball doesn’t come back once it goes off the screen�The ball feels like a real ball, where energy is needed to stop it.

• Ball Bounces: Share and copy here the URL for your group’s solution���
• Ball and Shell Intersect: Share and copy here the URL for your group’s solution��

Restaurant recommendation: Los Comales��

5

Breakout Group

Group Member Names:

Use your color for your contributions.

• Move Ball: What do you notice? What do you wonder?�Ball moves super slow, only changes by 1 each key press�The event.key is what reads the key presses and the computer reads the presses as “left”,”right”,”up”,”down”

Seems to not work properly after running and resetting it.�

• Event Loop Animation: What are new key ideas? What’s tricky?�Continuous movement.

On a timed loop that updates the position every 40 seconds�Making sure the ball doesn’t leave the windows

• Ball Bounces: Share and copy here the URL for your group’s solution���
• Ball and Shell Intersect: Share and copy here the URL for your group’s solution��

Restaurant recommendation: Suhi, Ramen places. ��

6

Breakout Group

Group Member Names:

Use your color for your contributions.

• Move Ball: What do you notice? What do you wonder?�The ball moves when you press an arrow key�There are a lot of different variables�
• Event Loop Animation: What are new key ideas? What’s tricky?�Ball moves continuously until another key is pressed. �A timed loop was made, and the start button was added in to the code.�The ball went out of the screen.

New function added

• Ball Bounces: Share and copy here the URL for your group’s solution���
• Ball and Shell Intersect: Share and copy here the URL for your group’s solution��

Restaurant recommendation:

Temporis

Sushiito

El Milagro

��

7

Breakout Group

Group Member Names:

Use your color for your contributions.

• Move Ball: What do you notice? What do you wonder?�Ball Was moving pretty slow�I wonder why the ball is moving so slow.
• Event Loop Animation: What are new key ideas? What’s tricky?�Ball won’t stop and will keep going in a direction�I wonder if there is a way to stop the ball from moving continuously.

A new key idea is the loop command.�

• Ball Bounces: Share and copy here the URL for your group’s solution�https://studio.code.org/projects/applab/VpVncu8NDOehMunMcaqH5bPVw5Fth0TKIzZw9EIom4Y��
• Ball and Shell Intersect: Share and copy here the URL for your group’s solution��

Restaurant recommendation: Any place with good pasta ,�A restaurant which serves blowfish�

8

Breakout Group

Group Member Names:

Use your color for your contributions.

• Move Ball: What do you notice? What do you wonder?��Ball Moves around when keys are pressed down, wondering how to determine how much the ball would move each time a key is pressed
• Event Loop Animation: What are new key ideas? What’s tricky?�The more times you press the keys, the faster the ball moves and that it doesn’t move until start button is pressed. The tricky part that we noticed was the use of the time loop and how would it be seamlessly integrated in the updating of the ball’s position �
• Ball Bounces: Share and copy here the URL for your group’s solution���
• Ball and Shell Intersect: Share and copy here the URL for your group’s solution��

Restaurant recommendation: Portillos��

9

Breakout Group

Group Member Names:

Use your color for your contributions.

• Move Ball: What do you notice? What do you wonder?�In regards to delta, (-) is associated with moving the ball up/left. (+) is associated with moving the ball down/right.

​

What else can event.key be used to accomplish?�

• Event Loop Animation: What are new key ideas? What’s tricky?�The timed loop was added updating the variables continuously

The ball doesn’t stop unless you press the opposite direction that it is moving for an equal value��

• Ball Bounces: Share and copy here the URL for your group’s solution���
• Ball and Shell Intersect: Share and copy here the URL for your group’s solution��

Restaurant recommendation:�T-BELL�

10

Breakout Group

Group Member Names:

Use your color for your contributions.

• Move Ball: What do you notice? What do you wonder?�The arrow keys will move the ball. Uses variables to determine position using set position.��
• Event Loop Animation: What are new key ideas? What’s tricky?�Press the arrow once and the ball moves continuously, press the opposing arrow for it to stop, press the same arrow twice to increase speed.

timedLoop: allows for the ball to continuously move?�

• Ball Bounces: Share and copy here the URL for your group’s solution���
• Ball and Shell Intersect: Share and copy here the URL for your group’s solution��

Restaurant recommendation: Any good Italian restaurant��

11

Breakout Group

Group Member Names:

Use your color for your contributions.

• Move Ball: What do you notice? What do you wonder?�Ball moves slowly from left to right. I wonder how the distance of the ball’s movement is determined. ��
• Event Loop Animation: What are new key ideas? What’s tricky?�The timed loop, the ball can move in all four directions.

Increased speed in the movement

• Ball Bounces: Share and copy here the URL for your group’s solution��https://studio.code.org/projects/applab/_tgwC9EDH7VYlOkbnrjoaaz4vEgaoJHDmYbhMuJR894�
• Ball and Shell Intersect: Share and copy here the URL for your group’s solution��

Restaurant recommendation: Yuzu Sushi��

12

Breakout Group

Group Member Names:

Use your color for your contributions.

• Move Ball: What do you notice? What do you wonder?

The arrow keys control what direction the ball is going, and 1 is the magnitude of change as delta=1.�I wonder what would happen if the sprite reaches the edges of the screen.

Can you make it move diagonally if you press left and up, left and down, right up and up, and right and down. ��

• Event Loop Animation: What are new key ideas? What’s tricky?�It’s continuous and moves faster when spamming the button; the tricky part is getting the ball to stop. �Can move diagonally when you press up or down, with right or left.�The tricky part is initially starting to move the ball with the arrow keys.
• Ball Bounces: Share and copy here the URL for your group’s solution���
• Ball and Shell Intersect: Share and copy here the URL for your group’s solution��

Restaurant recommendation:Rciobene’s, they have a really good beef sandwich.��

13

Breakout Group

Group Member Names:

Use your color for your contributions.

• Move Ball: What do you notice? What do you wonder?�Ball moves very slowly

Ball moves according to the key that is pressed on the keyboard

Doesn’t have any wall boundaries�Variables, (event.key==”Right”), moves the keys in negatives and positives

• Event Loop Animation: What are new key ideas? What’s tricky?�Start button was added / Ball can move diagonally around the screen�The Code has to loop in order for the ball to keep going in another direction.�Trying to get it to move in another direction after it gained speed
• Ball Bounces: Share and copy here the URL for your group’s solution

https://studio.code.org/projects/applab/alil99u_wMzk7fal1I-TF9vH-Frn47wgViDVbYKDsSg ��

• Ball and Shell Intersect: Share and copy here the URL for your group’s solution��

Restaurant recommendation:

Bonchon - chinatown/ division, glenview

Strings Ramen- Hyde Park�Coffeehaus: Boba Tea

Essay Prompt

If you prefer (or if you need to), rather than participate in the class interaction and discussion live online you may watch the class recording and write a 400+ word (3/4 of a page) essay reflecting on the class recording, in response to a prompt that will be posted at the end of the class notes/recording for the day. This must be done within 24 hours of the original class.

​

Take today’s quiz at: https://forms.gle/9nEPA919Hwg71dhS8

​

Instructions:

1. Complete the 3. Ball Bounces program so that the ball bounces off all 4 edges of the screen and also bounces off the top of the brick wall. Copy and paste your solution code into a google doc.

​

• Post your google doc using this google form. Today’s essay title is Animation.

​

​

​

​

​

​