62
CS 152 Professor: Leah Buechley TAs: Melody Horn, Noah Garcia, Andrew Geyko, Juan Ormaza Time: MWF 10:00-10:50am https://handandmachine.cs.unm.edu/classes/CS152_Fall2021/ Computer Programming Fundamentals

Computer Programming Fundamentals

  • Upload
    others

  • View
    20

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Computer Programming Fundamentals

CS 152 Professor: Leah Buechley

TAs: Melody Horn, Noah Garcia, Andrew Geyko, Juan Ormaza Time: MWF 10:00-10:50am

https://handandmachine.cs.unm.edu/classes/CS152_Fall2021/

Computer Programming Fundamentals

Page 2: Computer Programming Fundamentals

HEADS UPQUIZ 2 ON FRIDAY

Page 3: Computer Programming Fundamentals

CS TUTORING NOW AVAILABLEFARRIS ENGINEERING CENTER, 2065

Link to informationposted on our class homepage& Piazza

Page 4: Computer Programming Fundamentals

TALK ON WEDNESDAY

Page 5: Computer Programming Fundamentals

TODAY: CLASSES AND OBJECTS cont.

Page 6: Computer Programming Fundamentals

PROGRAM WITH 3 CLASSES

import javax.swing.*;import java.awt.*;

public class MyFrame { JFrame frame; JPanel panel;

MyFrame(JPanel panel) { frame = new JFrame(); this.panel = panel; frame.add(panel); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setVisible(true); }}

import javax.swing.*;import java.awt.*;

public class MyPanel extends JPanel{ int width; int height; Ball ball;

MyPanel () { width = 500; height = 500; ball = new Ball(); Dimension d = new Dimension(width,height); setPreferredSize(d); setVisible(true); }

public static void main(String[] args) { MyPanel panel = new MyPanel(); MyFrame frame = new MyFrame(panel); }

@Override protected void paintComponent(Graphics g) { super.paintComponent(g); setBackground(Color.WHITE);

ball.draw(g); }}

import java.awt.*;

public class Ball { Color color; int size; int xPosition; int yPosition; int xSpeed; int ySpeed;

Ball () { color = Color.PINK; size = 50; xPosition = 100; yPosition = 100; xSpeed = 1; ySpeed = 1; }

Ball (Color color, int size, int xPosition, int yPosition) { this.color = color; this.size = size; this.xPosition = xPosition; this.yPosition = yPosition; xSpeed = 0; ySpeed = 0; }

void move() { xPosition = xPosition + xSpeed; yPosition = yPosition + ySpeed; }

void setSpeed (int xSpeed, int ySpeed) { this.xSpeed = xSpeed; this.ySpeed = ySpeed; }

void draw (Graphics g) { g.setColor(color); g.fillOval(xPosition,yPosition,size,size); }}

MyFrame MyPanel Ball

Page 7: Computer Programming Fundamentals

PROJECT WITH MULTIPLE CLASSES• Can use one class in another class as long as

both are part of the same project• Can use one class in another class as long as

both are in the same folder• More than one class can have a main() method• You can choose which main() you run• All classes in a project are compiled when you

run your program

Page 8: Computer Programming Fundamentals

TODAY: CONTINUING TO WORK ON OUR BALL PROGRAM

Page 9: Computer Programming Fundamentals

HOW TO DRAW THE BALL?WHERE TO DRAW THE BALL?

Page 10: Computer Programming Fundamentals

ADD A DRAW METHOD TO THE BALL CLASS

Page 11: Computer Programming Fundamentals

void draw (Graphics g) { g.setColor(color); g.fillOval(xPosition,yPosition,size,size);}

IN THE BALL CLASS

Page 12: Computer Programming Fundamentals

GOOD CODING PRACTICE:ANYTHING THAT A BALL DOES OR

THAT IS DONE TO A BALL SHOULD HAPPEN IN THE BALL CLASS

Page 13: Computer Programming Fundamentals

GOOD CODING PRACTICE:ANYTHING THAT AN OBJECT DOES OR THAT IS DONE TO AN OBJECT SHOULD

HAPPEN IN THAT CLASS

Page 14: Computer Programming Fundamentals

void draw (Graphics g) { g.setColor(color); g.fillOval(xPosition,yPosition,size,size);}

WHERE IS THE BALL DRAWN?

(xPosition,yPosition)

relative to upper left hand corner

Page 15: Computer Programming Fundamentals

WE WANT xPosition & yPosition TO BE THE CENTER OF THE BALL

(xPosition,yPosition)

want to draw relative to center

Page 16: Computer Programming Fundamentals

HOW?

Page 17: Computer Programming Fundamentals

void draw (Graphics g) { g.setColor(color); g.fillOval(xPosition-size/2,yPosition-size/2,size,size);}

(xPosition,yPosition)

WE WANT xPosition & yPosition TO BE THE CENTER

Page 18: Computer Programming Fundamentals

questions?

Page 19: Computer Programming Fundamentals

LET’S MOVE THE BALL

Page 20: Computer Programming Fundamentals

MyPanel CLASSimport javax.swing.*;import java.awt.*;

public class MyPanel extends JPanel{ int width; int height; Ball ball;

MyPanel () { width = 500; height = 500; ball = new Ball(); Dimension d = new Dimension(width,height); setPreferredSize(d); setVisible(true); }

public static void main(String[] args) { MyPanel panel = new MyPanel(); MyFrame frame = new MyFrame(panel); }

@Override protected void paintComponent(Graphics g) { super.paintComponent(g); setBackground(Color.WHITE);

ball.draw(g); }}

Page 21: Computer Programming Fundamentals

HOW TO MOVE THE BALL?HOW TO ANIMATE OUR IMAGE?

Page 22: Computer Programming Fundamentals

A TRYimport javax.swing.*;import java.awt.*;

public class MyPanel extends JPanel{ int width; int height; Ball ball;

MyPanel () { width = 500; height = 500; ball = new Ball(); Dimension d = new Dimension(width,height); setPreferredSize(d); setVisible(true); }

public static void main(String[] args) { MyPanel panel = new MyPanel(); MyFrame frame = new MyFrame(panel); }

@Override protected void paintComponent(Graphics g) { super.paintComponent(g); setBackground(Color.WHITE);

ball.draw(g); ball.move(); }}

Page 23: Computer Programming Fundamentals

A BETTER TRYimport javax.swing.*;import java.awt.*;

public class MyPanel extends JPanel{ int width; int height; Ball ball;

MyPanel () { width = 500; height = 500; ball = new Ball(); Dimension d = new Dimension(width,height); setPreferredSize(d); setVisible(true); }

public static void main(String[] args) { MyPanel panel = new MyPanel(); MyFrame frame = new MyFrame(panel); while(true) { panel.repaint(); } }

@Override protected void paintComponent(Graphics g) { super.paintComponent(g); setBackground(Color.WHITE);

ball.draw(g); ball.move(); }}

we want to keep drawing our image over and overto see the movementuse repaint()

Page 24: Computer Programming Fundamentals

BALL IS MOVING SO FAST!HOW TO CONTROL THIS?

Page 25: Computer Programming Fundamentals

FRAME RATE• Measurement used in movies/animations• How many images we are shown per second• Measured in frames (images) per second (FPS)• Some standard frame rates:

• 60 fps (TV)• 24 fps (most animation)• 12 fps (first silent movies)

• Right now, our program is showing frames as fast as java can generate them!

• We need a frame rate for our animation

Page 26: Computer Programming Fundamentals

A FRAME RATE FOR OUR PROGRAM

• Show the first image (paint)• Pause for a certain amount of time• Show the second image (repaint)• loop…

Page 27: Computer Programming Fundamentals

ADD A DELAY METHOD TO MyPanelvoid delay (int time) {

}

time = amount to delay

Page 28: Computer Programming Fundamentals

Thread.sleep()

Thread.sleep(time)pauses the current thread for time in millisecondsmillisecond = 1/1000 second

Page 29: Computer Programming Fundamentals

Thread.sleep(time)might generate an errormight generate an “exception”

Thread.sleep()

Page 30: Computer Programming Fundamentals

try AND catchtry { //some block of dangerous code}catch (Exception exc){ //what to do if the block of code generates an error}

More info: https://www.w3schools.com/java/java_try_catch.asp

won’t be in tests or examsyou’ll encounter it againin more advanced CS classes

Page 31: Computer Programming Fundamentals

HOW WE HAVE TO USE Thread.sleep()

try { Thread.sleep(time); } catch (Exception exc){ System.out.println("I couldn't sleep!"); }

Java thinks Thread.sleep()is so dangerous that it forcesyou to take care of errors itmight generate.You can only use it inside a try/catch statement

Page 32: Computer Programming Fundamentals

A DELAY METHODvoid delay (int time) { try { Thread.sleep(time); } catch (Exception exc){ System.out.println("I couldn't sleep!"); }}

Page 33: Computer Programming Fundamentals

USE DELAY IN MAIN

public static void main(String[] args) { MyPanel panel = new MyPanel(); MyFrame frame = new MyFrame(panel); while (true) { panel.repaint(); panel.delay(100); }}

delay of 100ms = frame rate of ?1000/100 = 10fps

Page 34: Computer Programming Fundamentals

questions?

Page 35: Computer Programming Fundamentals

HOW COULD WE IMPROVE THIS?

Page 36: Computer Programming Fundamentals

CREATE AN ANIMATE METHOD

• takes in frame rate as a parameter• does the looping, repainting, and delaying based

on frame rate

Page 37: Computer Programming Fundamentals

AN ANIMATE METHODvoid animate(int framerate) { int time = 1000/framerate; while (true) { repaint(); delay(time); }}

Page 38: Computer Programming Fundamentals

USE IN MAINpublic static void main(String[] args) { MyPanel panel = new MyPanel(); MyFrame frame = new MyFrame(panel); panel.animate(60);}

animate at 60fps

Page 39: Computer Programming Fundamentals

questions?

Page 40: Computer Programming Fundamentals

HOW COULD WE IMPROVE THE PROGRAM NOW?

Page 41: Computer Programming Fundamentals

KEEP THE BALL ON SCREENHAVE THE BALL BOUNCE

Page 42: Computer Programming Fundamentals

WHERE SHOULD WE WRITE THE BOUNCE CODE?

Page 43: Computer Programming Fundamentals

GOOD CODING PRACTICE:ANYTHING THAT A BALL DOES OR

THAT IS DONE TO A BALL SHOULD HAPPEN IN THE BALL CLASS

Page 44: Computer Programming Fundamentals

A BOUNCE METHODIN THE BALL CLASS

Page 45: Computer Programming Fundamentals

void bounce () {

}

IN THE BALL CLASS

what parameters should we use?

what do we need to know to bounce a ball around a particular window?

Page 46: Computer Programming Fundamentals

void bounce (int windowWidth, int windowHeight) {

}

PARAMETERS: WINDOW SIZE

size of the window!

when do I bounce?

when I hit an edge!

Page 47: Computer Programming Fundamentals

HITTING AN EDGE

how do I know when I’m hitting an edge?or am past one?how many edges do we need to think about?

Page 48: Computer Programming Fundamentals

void bounce (int windowWidth, int windowHeight) { //right edge if (xPosition > windowWidth) {

} //bottom edge if (yPosition > windowHeight) {

}}

CHECKING FOR EDGES

what do I do when I hit an edge?

change direction!

how?

Page 49: Computer Programming Fundamentals

void bounce (int windowWidth, int windowHeight) { //right edge if (xPosition > windowWidth) { xSpeed = -xSpeed; } //bottom edge if (yPosition > windowHeight) { ySpeed = -ySpeed; }}

CHANGING DIRECTION

Page 50: Computer Programming Fundamentals

void bounce (int windowWidth, int windowHeight) { //right and left edges if (xPosition > windowWidth | xPosition < 0) { xSpeed = -xSpeed; } //top and bottom edges if (yPosition > windowHeight | yPosition < 0) { ySpeed = -ySpeed; }}

ALL THE EDGES

Page 51: Computer Programming Fundamentals

void bounce (int windowWidth, int windowHeight) { //right and left edges if (xPosition > windowWidth | xPosition < 0) { xSpeed = -xSpeed; } //top and bottom edges if (yPosition > windowHeight | yPosition < 0) { ySpeed = -ySpeed; }}

NOTE: ONLY WORKS IF BALL STARTS INSIDE WINDOW

Page 52: Computer Programming Fundamentals

questions?

Page 53: Computer Programming Fundamentals

USE bounce IN MyPanelWHERE?

Page 54: Computer Programming Fundamentals

USE bounce IN MyPanel

@Overrideprotected void paintComponent(Graphics g) { super.paintComponent(g); setBackground(Color.WHITE);

ball.draw(g); ball.move(); ball.bounce(width,height);

}

Page 55: Computer Programming Fundamentals

ISSUES WITH BOUNCE?

Page 56: Computer Programming Fundamentals

ISSUES WITH BOUNCE?NOT ACCOUNTING FOR SIZE OF BALL

HOW TO FIX?

Page 57: Computer Programming Fundamentals

void bounce (int windowWidth, int windowHeight) { //right and left edges if (xPosition+size/2 > windowWidth | xPosition-size/2 < 0) { xSpeed = -xSpeed; } //top and bottom edges if (yPosition+size/2 > windowHeight | yPosition-size/2 < 0) { ySpeed = -ySpeed; }}

BOUNCE METHOD ACCOUNTING FOR BALL SIZE

Page 58: Computer Programming Fundamentals

questions?

Page 59: Computer Programming Fundamentals

PLAY WITH DIFFERENT BALL PARAMETERS: SPEED, SIZE, COLOR

Page 60: Computer Programming Fundamentals

MyPanel () { width = 500; height = 500; Color c = new Color(42, 186, 186); ball = new Ball(c, 80, 100,200); ball.setSpeed(5,7); Dimension d = new Dimension(width,height); setPreferredSize(d); setVisible(true);}

IN MyPanel CONSTRUCTOR

Page 61: Computer Programming Fundamentals

questions?

Page 62: Computer Programming Fundamentals

CS 152 Professor: Leah Buechley

TAs: Melody Horn, Noah Garcia, Andrew Geyko, Juan Ormaza Time: MWF 10:00-10:50am

https://handandmachine.cs.unm.edu/classes/CS152_Fall2021/

Thank you!