Using mouseX and mouseY in setup() is not useful as their values are unpredictable at setup time.
draw() runs infinitely often.
Draw stuff and display stuff.
draw() should be small.
Event handlers happen when something like pressing a key, dragging the mouse, or releasing the mouse occurs.
Event handlers are good for updating information about selected objects, or objects being hit.
Typical structure: configuration, display, animation, event handling, and useful functions.
Key Principles
Main tab should not change object attributes; let the object do its work (call a method).
Class tab should not change global variables.
Don't use global variables to communicate between objects. Reading them is fine if they are not changing.
Pass mouseX and mouseY as parameters, don't use them directly in the class tab.
Software Components and Object Relationships
Objects should be self-contained and work through interfaces.
Examples of relationships between objects:
Asteroid field and spaceship.
Spaceship and shield.
Game object.
Only three global variables: Kuiper Belt, shuttle, and game.
setup() is short and initializes the ship and Kuiper Belt.
draw() tells asteroids to show, move, and collide. Shuttle is displayed, moved, and avoids asteroids. The game evaluates the shuttle.
Types of Object Relationships
Association: One object knows about the other but they exist independently.
Example: shuttle knows something about the Kuiper Belt, and the game knows how the shuttle is doing.
Composition (part-of): Very close relationship; one object is a part of another.
Example: Field (shield) is a part of the ship. You can't have a ship without a shield.
Implemented by the ship having a field, and if you create the ship, you create the field.
Example: Eyes are part of a bird.
Aggregation: Somewhere in between association and competition.
Example: Passenger in the ship. Passenger exists independently, but for a while are kind of in the ship.
You could swap out the passenger in the ship with another passenger.
Designing Code
Objects are supposed to be self-contained.
Self-contained means that the object should contain all of the information that it needs to operate.
Objects interact with one another through interfaces.
Examples of poorly-designed code and how to improve it.
Anti-patterns in Code
Object Needs Desperate Information: Don't have things that the object needs desperately outside of the object, but move them inside.
Mixing Drawing and Updating: Separate drawing and updating the state.
Messing with an Object's State: Put in a lot of effort to get it work, but it's not really.
The position is part of the object. Why is the main tab messing with your position? It's just none none none of its business.
Underlying what we would expect is probably you don't understand how to pass a parameter.
So this is what code looks like of students who don't know how parameters work.
Not Passing Parameters: If you want to pass information into a method, don't have this global variable here that this one reads.
This is the fridge style of communication.
A better way of communication is sending a message and saying, please get me some milk.
Similar issue with the color.
Poorly Desinged Method: This method wants to return a boolean true or false depending on whether you are over the thing, but it doesn't.
If you want to communicate to the outside world what you did, what the result of a computation is, return values are the thing.
Return values are what functions uses to communicate to the outside world.
So this is a kind of method function of a student who doesn't know how to return values, and they don't know how to pass parameters, which are both very essential things to understand.
Arrays of Size Two: Has an array of size two, one for the x values, one for the y values. And the rationale is that you pass an index to the thing that happens here, a number, an ID, and then the x value with index zero is for the thing a, and the x value with index one is for the thing b.
Again, this is very bad code. Don't write this.
It had this array outside with values, and then everything got an index, which of these values is yours, and then each time you did something, it would go outside to the global variable, look up the value, do something with it, go back.
The solution is actually surprisingly simple.
Collision Types
Simple Collision: If this one moves with a speed of one, then the speed is transferred to that one and its speed is transferred to that one, so this will move at the same speed.
Fake Collision: This fake collision, and we used it we used it also in the class. So this is if two things collide, what it does, it just computes the distance from this center to that center, and this one just moves away in those directions.
Fancy Collision: the fancy collide is all of this. Here you have got something like a speed vector. What you have to do is you have to kind of compute the force from the collision that goes to this one, and the force that goes into the perpendicular direction.
Simple collision may be unrealistic. Looks good for head-on collisions.
Fake collision moves objects away from each other based on the distance between them.
Fancy collision decomposes forces into components and is a more accurate model.
Translation and Rotation
translate() moves the origin point. pushMatrix() and popMatrix() remember and restore the origin setting.
Translation moves the origin to wherever x y is. So if you do that one, then the circle is no longer x y, but the circle should be you just move the origin to x y, the position is suddenly zero zero.
The effects are sometimes very difficult to predict. Oh, it's gone.
Introduce an angle. K? Oh, I've got already an angle. Brilliant. That's good of pea cooking. I think that in the move, I already have in the move, I'm already adding every frame a little bit to the angle. So, I just move a bit to the angle.
Use sine and cosine to find out the position.
Images
Cut out the cat and the cupboard. So you get a picture of the dog with some black background, a picture of the cat, maybe a picture picture of the cat with red eyes, and you need something to fill up this void.
Load image loads here the four images, the spooky cat, the spooky cat with red eyes, the load image, the dog in the cupboard, and the cat pic here is just used to remember which picture of the cat are we currently using. So it's a variable that contains either this reference or that reference.
You load image loads there four images.
Load the pictures in the setup because if you load loading takes time.
So even if you don't need it right away, load the images and use them later.
Additional Notes
Apply for special consideration for the Viva
Use sine and cosine of 90 degrees to get the point at the bottom of the circle