Summary

HTML

• Created the layout
• Added buttons

CSS

• Built animations for shaking, opening capsules and movements
• Added effects for the machine

JS

• Created systems for movements, velocity and direction
• Generated the capsules with random toys and colors
• Added physics such as gravity, friction and collision

And I figured out my nothing was showing turns out I need to link the JS and CSS.

So I made a video but it is not showing cause I guess it’s too big of a file so here are the images of the before and after.

What I did so far in JS and CSS?

Capsule Movement

• Built the movement where each capsules update positions
• Added handling so capsules don’t overlap and stay inside the machine
• Created logic to stop capsules
• Added capsule rotation

Handle controls

• Made the handle interactions
• Added smooth handle rotation
• Made the machine release capsule
• Added handle reset when released

### CSS

• Started to add images
• Started to add UI
• Added animations

P.S. There are a lot of errors in my code right now, so nothing is showing up properly at the moment and sorry for showing the same image

What I did in (JS) so far?

Capsule setup

• Selected all ```
  .capsule-wrapper

- Turned into an array of objects
- Each capsule stored such as (DOM elements, position, rotation, radius, velocity, acceleration, bounce and linked toy elements)
- Assigned each capsule a random starting position inside the machine
- Set the initial movement direction up
### <u>Movement</u>
- Each capsule moves using velocity and acceleration
- Velocity increases over time based on the acceleration
- Friction slowly reduces movement
- Helper function adds force to velocity
### <u>Helper function</u>
- Created functions to move objects smoothly and prevent overlap
- Returns a correct position 
- Used for collision separation
### <u>Shake Effect</u>
- Random velocity direction for all capsules
- Reset movement
- Add shake class to the machine
- Remove shake class
### <u>Animation</u>
- Controls open and close machine flap

Also I don't have a new picture of my results

What I did so far?

• Created machine design with pixel art styles
• Added interactive buttons
• Used JS to make the capsule appear automatically
• Added random toys and colors for the capsules
• Used math for movement and rotation
• Next after I am done doing the JS I will start with the CSS