Resize p5js

content/game-dev/part-i/_index.md

@@ -1,6 +1,7 @@
 +++
 chapter = true
 alwaysopen = false
+pre = "<b>1.</b> "
 title = "Part I"
 weight = 1
 +++

content/game-dev/part-i/draganddrop.md

@@ -0,0 +1,90 @@
++++
+title = "Drag And Drop"
+weight = 2
++++
+
+---
+
+## Graphic Interface
+The drag and drop interface for this game contains a pick up region for the user to pick up towers and a trash box for the user to cancel the pick-up. To pick up a tower, simply click within the light-green pick-up box, drag the tower to a valid position on the field, and release the mouse key. Notice that it will not allow you to place the towers directly on the balloon path. If you decide to change your mind about picking up the tower, just drop it in the trash bin, the dark green rectangle around the pick-up box.
+
+![Interface](/img/Interface-Demo.png)
+
+## Picking Up Towers
+To detect when a tower is being picked up, we will use Processing’s built-in `mousePressed()` method, which is called by the system whenever the computer detects that the left mouse button has been pressed down. In order to determine if the user is actually picking up the tower rather than clicking somewhere else on the screen, we will use a method to check if the mouse coordinates are within the pick-up box. It will use "point to rectangle collision" to check if the mouse is within bounds. If both the x distance and the y distance of the mouse from the centre are not greater than half the length of the square, it would be within bounds. See the image and code sample below for reference.
+
+![Collision](/img/Square-Point-Collision.png)
+
+```Java
+// Use point to rectangle collision detection to check for mouse being within bounds of pick-up box
+boolean pointRectCollision(float x1, float y1, float x2, float y2, float size) {
+  //            --X Distance--               --Y Distance--
+  return (abs(x2 - x1) <= size / 2) && (abs(y2 - y1) <= size / 2);
+}
+```
+
+## Dropping Towers
+Now, how do we determine when the user has dropped the tower? Processing has a built-in `mouseReleased()` method which is called by the system whenever the user releases the mouse key. If the user was holding a tower when the `mouseReleased()` method is called, then the user has just dropped the tower, and we should handle the drop accordingly.
+
+```Java
+// Called by the system whenever the left mouse button is released by the user
+void mouseReleased() {
+  if (within) { // If the user was holding the tower in the previous frame, the tower has just been dropped
+    handleDrop(); // Call the method to handle the drop and check for drop validity
+  }
+
+  within = false; // The mouse is no longer holding the tower
+}
+```
+
+The `handleDrop()` method will check if the tower is either in a valid dropping position on the field, in an invalid dropping position, or in the trash box, which is the dark-green rectangle surrounding the pick-up region that cancels a tower pick-up. In order to see if it is in the trash box, we make sure that the x and y coordinates of the tower is within the set bounds of the trash box. If the tower is in a valid position on the field, we will add this tower to a list of placed-down towers (explained below). Checking validity of tower placements is explained <a href="/game-dev/part-i/towervaliditychecking/">here</a>
+
+## Displaying Towers
+In order to keep track of all the towers that have been placed down, we need to use an `ArrayList`. 
+
+{{% notice info "ArrayLists and PVectors"%}}
+`ArrayList` is a built-in feature in Processing and Java that is similar to an array. It stores a sequence of values or elements in a list-like fashion. They have the same functionality as an array, with an additional feature of inserting a new element into the ArrayList at any time. Check out <a href="/game-dev/part-i/pathforballoons/">balloon paths</a> for a more detailed explanation or the <a href="https://docs.oracle.com/javase/8/docs/api/java/util/ArrayList.html">official documentation</a>
+
+`PVector` is a simple data type that stores two numbers and represents an (x, y) coordinate. Official documentation can be found <a href="https://processing.org/reference/PVector.html">here</a>
+{{% /notice %}}
+
+We will be using an ArrayList of `PVector` to store the coordinates of every tower that has been placed down. Whenever a tower is dropped in a valid position, we will add that tower’s coordinates to the ArrayList.
+
+```Java
+// List of all towers that have been placed down
+ArrayList<PVector> towers;
+
+// Adding the location of a new tower to the list of placed-down towers
+towers.add(new PVector(x, y));
+```
+
+To help with displaying towers, we declared a helper method `drawTowerIcon()` that takes in the basic parameters of the tower that we would like to draw, and draws it onto the canvas.
+
+```Java
+// Draw a simple tower at a specified location
+void drawTowerIcon(float xPos, float yPos, color colour) {
+  strokeWeight(0);
+  stroke(0);
+  fill(colour);
+  rectMode(CENTER);
+  rect(xPos, yPos, towerSize, towerSize); // Draw a simple rectangle as the tower
+}
+```
+
+At each call of the `draw()` function, we will redraw all the placed-down towers whose coordinates are stored in the ArrayList. To do so, we will access each element of our tower ArrayList using a `for` loop and call the `drawTowerIcon()` to draw each tower in its respective position.
+
+```Java
+// Redraws all the towers that have been placed down
+void drawAllTowers() {
+  // Loop through the ArrayList that stores the locations of towers that were placed down
+  for (int i = 0; i < towers.size(); i++) {
+    float xPos = towers.get(i).x, yPos = towers.get(i).y; // Get the location of the tower from the ArrayList
+
+    // Draw the tower at the specified location
+    drawTowerIcon(xPos, yPos, towerColour, new PVector(mouseX, mouseY));
+
+    fill(#4C6710); // Set the fill colour for text
+    text("Tower " + (i+1), xPos - 30, yPos - 20); // Write the tower number label
+  }
+}
+```

content/game-dev/part-i/healthchecking.md

@@ -0,0 +1,76 @@
++++
+title = "Health Bar"
+weight = 9
++++
+
+---
+### What You'll Learn
+###### In this section, you’ll learn how to implement a system that checks if the balloon has reached the end of the path, then remove it from the waves ArrayList.
+
+### The Functions
+#### 1. Checking if the Balloon is at the End of the Path
+The method has a parameter of the distance travelled by the current balloon, or distanceTravelled. It is a boolean function, meaning that it returns either a **True** or **False** to the user.
+```java
+// Similar code to distance along path
+boolean atEndOfPath(float travelDistance) {
+  float totalPathLength = 0;
+  for (int i = 0; i < points.size() - 1; i++) {
+    PVector currentPoint = points.get(i);
+    PVector nextPoint = points.get(i + 1);
+    float distance = dist(currentPoint.x, currentPoint.y, nextPoint.x, nextPoint.y);
+    totalPathLength += distance;  
+  }
+  if (travelDistance >= totalPathLength){
+    return true; // This means the total distance travelled is enough to reach the end
+  } 
+  return false;
+}
+```
+We keep a float variable to track the total path length, called totalPathLength. Then, we need to assign a value to it, so we loop through the points ArrayList minus the last point (which doesn't contribute to the length of the path), which stores all the points in the path. We calculate the distance between the current and the next point using the distance formula, which is dist() and takes in the (x,y) of point 1 then the (x,y) of point 2. We add this to the total path length distance, and once the loop has finished iterating through the ArrayList, the total path length is assigned to the correct value.
+
+We can check if the balloon has completed its journey if the total distance the balloon has travelled is greater or equal to the total path length. If it has, then we can return true, since the balloon has made it to the end. Otherwise, we return false, since the balloon is still on the path.
+
+#### 2. Drawing the Health Bar
+To draw the healthbar, we use two separate functions (line 80 and 84). One to load the image of the heart, and then the other to draw the healthbar.
+```java
+void loadHeartIcon() {
+  heart = loadImage("heart.png");
+}
+//method to draw a healthbar at the top right of the screen 
+void drawHealthBar(){
+  //draw healthbar outline
+  stroke(0,0,0);
+  strokeWeight(0);
+  fill(#830000);
+  rect(715,455,120,20);
+
+  //draw healthbar
+  noStroke();
+  rectMode(CORNER);
+  fill(#FF3131);
+  rect(655,445.5,health*10,20); //the healthbar that changes based on hp
+  rectMode(CENTER);
+  noFill();
+
+  //write text
+  stroke(0,0,0);
+  textSize(14);
+  fill(255,255,255);
+  text("Health:   "+health,670,462);
+
+  //put the heart.png image on screen
+  imageMode(CENTER);
+  image(heart,650,456);
+  noFill();
+}
+```
+
+For these final two functions, we first call the loadImage() method which loads the image specified in parameters to the PImage, in this case it is called heart. The image must be in a folder called data. 
+Since our file is called balloons.pde, the file explorer should look like:
+- Balloons.pde
+- data
+  - heart.png
+
+After we load the image, we can draw the healthbar, with the method drawHealthBar() starting on line 85. In this method, we will draw the updated healthbar, first drawing the rectangle outline for the bar which is done by drawing a rectangle and filling it. Next, we draw the rectangle that reflects how much health the user has, which has 11 sections for the 11 health points the user has. Since the outer rectangle has 132 width, each point of health the user has can be represented as a section of 12 pixels, so we draw a rectangle with width health*12. This second rectangle will shorten as the health variable decreases.
+
+Finally, we can put in the text that tells the user how much health they have left, as well as put in the heart image that we imported earlier. The image() function draws the image at the coordinates provided (second and third parameter). In imageMode(CENTER), these two coordinates represent the centre point of the image.