zHW01 - james-bern/CS136 GitHub Wiki

image

README

Java

Math

Distance Formula

  • The distance between two points $\mathbf{a} = {(a_x, a_y)}$ and $\mathbf{b} = {(b_x, b_y)}$ is $\sqrt{{\Delta_x}^2 + {\Delta_y}^2}$, where $\Delta_x = a_x - b_x$ and $\Delta_y = a_y - b_y$
    • NOTE: The distance is "the length of the line segment connecting the two points"

Circle

  • A circle has center $\mathbf{c} = {(c_x, c_y)}$ and radius $r$
    • NOTE: The circle is "the set of all points that are distance $r$ from point $\mathbf{c}$"

"Juice It Or Lose It" (Simple Tweening)

  • A simple way to tween (smoothly move) some number x to a target is to (repeatedly) use this update: x += 0.1 * (target - x)
    • Note that x + (target - x) --> target
    • In other words, if we add (target - x) to x, we get all the way to the target
    • If instead, we add 0.1 * (target - x), we move 10% of the way to the target
    • If x is far away from the target, it will move quickly; as it gets closer it will slow down
  • NOTE: See the linked video for a more fun explanation.

Reference

  • NOTE: To help you understand what’s going on, I’m showing you when I press keys and click the mouse (key pops up in top left; gray ring pops up around mouse); this is NOT something you need to do in your code

out

TODO's

  • A-
    • If the mouse is inside the circle, color it RED; otherwise BLUE
    • User can move the circle using WASD
      • Holding W should move the circle up
      • Holding A should move the circle left
      • Holding S should move the circle down
      • Holding D should move the circle right
    • User can change the circle's radius using the number keys
      • Pressing 0 should make the radius $0.0$
      • Pressing 1 should make the radius $10.0$
      • Pressing 2 should make the radius $20.0$
      • ...
      • Pressing 9 should make the radius $90.0$
    • Pressing P should make the circle start chasing the mouse (app is "playing"); pressing P again should make the circle stop (app is "paused").
    • Draw the appropriate play and pause symbols (⏯️) in the lower left corner
  • A
    • User can redraw the circle
      • Clicking the first time should pick the new center
      • Clicking a second time should pick the new radius
      • While the user is redrawing the circle (after they've clicked the first time, but before they've clicked the second time), a preview of the circle should be drawn in PURPLE
      • NOTE: The circle should NOT chase you while the user is redrawing it, even if the app is playing
    • While the user is redrawing the circle, draw the appropriate ... symbol in the lower left corner
  • A+
    • Implement a version of Pong that builds on top of what you've done so far.

NOTE's

  • Handle the number keys with a for loop and some arithmetic. Do NOT have 10 separate if statements.

Starter Code

class HW01 extends Cow {

	// Returns the distance between points (x1, y1) and (x2, y2)
	static double getDistance(double x1, double y1, double x2, double y2) {
		// TODO
		return 0.0;
	}

	public static void main(String[] arguments) {
		double x = 128.0;
		double y = 128.0;
		double radius = 10.0;

		canvasConfig(0.0, 0.0, 256.0, 256.0);
		while (beginFrame()) {
			// TODO
			drawCircle(x, y, radius, ORANGE);
		}
	}
	
}

👀 Hints

What does canvasConfig(0.0, 0.0, 256.0, 256.0) mean?

This means the lower-left corner of the canvas will be $(0, 0)$ and the upper-right corner will be $(256, 256)$.

What state should I store? Here are the variables above my while loop: 
// A-
double x = 128.0;
double y = 128.0;
double radius = 10.0;
boolean playing = false;

// A
double xNext = 0.0;
double yNext = 0.0;
double radiusNext = 0.0;
boolean waitingForSecondClick = false;
How do I convert 7 to '7'? 
int i = 7;
char c = '0' + i; // '7'
Can this be done inside a for loop?

Yes!

for (int i = 0; i < 10; ++i) {
    char c = '0' + i; // '0', '1', '2', ..., '9'
}

Home   Docs   Glow   HelpHours   LectureRecordings

⚠️ **GitHub.com Fallback** ⚠️