Object Orient Programming

Discussion of dragging a circle on screen.
- Animation Effect:
- The visual effect of dragging a circle gives the appearance of interactivity.
- The position is updated based on cursor movement but does not imply direct dragging.
- Interactivity Limitations:
- Current implementation does not allow for actual object manipulation but shows basic interaction.
- Future implementations may allow for direct interaction with individual objects.
Mouse Interactions:
- Explored mouse interactions in p5.js: mouse x, mouse y, mouse drag, and mouse click.
- P5 Reference Page:
- Encouragement to explore for more examples and documentation to enhance understanding of interactions.
Keyboard Interactions:
- Mention of keyboard usage in creating games (e.g., Pac-Man) for object movement.
- Flexibility in assigning keyboard letters to various actions.
Focus of Lecture:
- Aim to spend 85% of the class on the primary topic of Object-Oriented Programming.

Introduction to Object-Oriented Programming (OOP).
- Question raised regarding familiarity with OOP concepts among the class.
Understanding Objects Conceptually:
- Concept explained through the example of a dog:
- Characteristics (Properties):
  - Fore color, eye color, height, weight, breed, name.
- These properties represent the dog's attributes.
- Methods (Actions):
  - Actions such as sitting, laying down, shaking, coming, talking.
- Demonstrates that objects encapsulate both attributes and behaviors.
Cookie Cutter Analogy:
- OOP compared to a cookie cutter used to create various cookies while retaining the same shape.
- Each cookie can have variations (size, decoration) but shares the same foundational properties.
Example of Balloons:
- A visual example using balloons to illustrate object properties and behaviors even though they behave differently.
Student question comparing OOP to components in design software like Figma was affirmed.

Exploration of creating a new object in p5.js using a class.
Class Definition:
- Creation starts by declaring a class using the class keyword followed by naming it (e.g., class Bubble).
- Opening and closing curly brackets define the body of the class.
Defining Properties:
- Properties of the bubble object need to be defined: position (x, y), size, stroke color, etc.
- Constructor syntax is introduced where properties are defined as parameters.
Setting Property Values:
- this keyword used to assign values to object properties within the constructor.
Method Creation:
- Introduction of methods to define actions on the object.
- Example: A show method to render the object on the screen.
- Drawing action defined using the ellipse function for creating the visual representation of the bubble.
- A shake method to provide randomness in bubble movement is also created.

Transition to instantiating multiple objects using arrays.
Definition of an array to hold multiple bubble objects (e.g., let manyBubbles = [];).
For Loop Usage:
- A for loop is utilized to create multiple instances of bubbles and initialize their properties with random values.
- Example:
- for (let i = 0; i < 5; i++) { manyBubbles.push(new Bubble(random(width), random(height), random(20, 50))); }
Rendering Bubbles on Screen:
- Each bubble's show method is called in the draw loop to visualize them on the screen.
Introduction of random parameters for position and size for more dynamic visualization of objects.

Discussion on how to further integrate features by adding new bubbles dynamically.
Adding functionality for mouse interaction to create new bubbles on click.
Push Method:
- Explanation of how new bubbles are added to the array via the .push() method.
Use of a separate constructor for bubbles created via mouse click ensuring that each is given the appropriate attributes (position, size, color).
Dynamic Interaction:
- Highlighted the importance of dynamic user interaction in OOP, facilitating real-time generation and manipulation of objects on the canvas.

Continuing to enhance the bubble application through iterative improvements.
Introduction of a new function to handle bubble creation consistently.
Array Length:
- Explanation of how bubbles.length helps in managing the number of objects created within the program.
- Every press adds a new bubble and visualizes it on the canvas, showcasing dynamic growth.

Implementation of an interactive functionality where pressing the mouse generates a new bubble.
Object Creation on Interaction:
- Every time the mouse is pressed, a new instance of a Bubble is created with user-defined attributes based on the cursor's position.
Additional characteristics can be managed dynamically, enhancing the user experience through interaction.
Multiple Visual Objects:
- Each newly created visual object has a distinct set of characteristics, which are populated and managed within the program.

Recap of OOP benefits such as managing multiple instances, dynamic characteristics, and interactions.
Discussion on how objects can be made more complex and interactable in future lessons.
Emphasis on practicing OOP concepts with coding exercises and future assignments to strengthen understanding and application of learned material.
Importance of building interactive objects leading to animations, separate characteristics, and future collisions in programming scenarios.
Overall Goal for Students:
Are encouraged to explore and practice beyond the classroom to solidify knowledge in object-oriented programming concepts, especially in applications utilizing libraries like p5.js.