CS Education Week

The Baldwin School and TechGirlz

Instructor: Professor Doug Blank, dblank@cs.brynmawr.edu

This URL: https://athena.brynmawr.edu/jupyter/hub/dblank/public/CSEdWeek2015/Schedule.ipynb

Goals: Create drawings, animations, and games using Java with Processing.

Survey: http://www.goo.gl/gJw9WY

Internet:

  • Wireless: Baldwin_Guest
  • Username: baldwin
  • Password: thinkinggirls
Time Activity
1pm Welcome!
1:15 - 1:30 Graph Paper Drawing; 0,0 is upper left hand corner, 500 x 500
1:30 - 2:00 Computing with Jupyter! Put graph paper drawing on sketch
2:00 - 2:30 Adding a character to the scene: graph-paper-it with 0,0 in center
2:30 - 2:45 Break
2:45 - 3:45 Animation and Games; functions, mouse, distance
3:45 End of TechShop


Shape Functions:

  • ellipse(x, y, width, height); - x,y is center
  • line(x1, y1, x2, y2);
  • rect(x, y, width, height); - x,y is upper left hand corner
  • triangle(x1, y1, x2, y2, x3, y3);
  • quad(x1, y1, x2, y2, x3, y3, x4, y4);
  • arc(x, y, width, height, start, stop); - x,y is center

Line thickness:

  • strokeWidth(SIZE);

Color:

  • color(RED, GREEN, BLUE); - values are 0 to 255
  • stroke(COLOR); - change the line color
  • fill(COLOR); - change the fill color

Code:

  • all lowercase
  • all lines end with a semicolon
  • don't forget commas and parentheses
  • double quotes are different from single quotes

Processing Reference:

Additional Functions

  • background(COLOR);
  • size(WIDTH, HEIGHT);
void setup() {
    // This is where one-time setup code goes
}

void draw() {
    // this is where code that is redrawn over and over goes
}

Mouse

  • mouseX, mouseY - where the mouse is
  • mousePressed - function to handle the mouse pressing

Distance

The distance between x1, y1 to x2, y2 is: the square root of the sum of the differences squared of each dimension.

  • Difference: x1 - x2
  • Square: pow(x1 - x2, 2)
  • Square root: sqrt()
float distance(int x1, int y1, int x2, int y2) {
    return sqrt(pow(x1 - x2, 2) + pow(y1 - y2, 2));
}

Review

  1. Draw background on graph paper, 0,0 in upper lefthand corner
  2. Convert to Java
  3. Convert to a function, drawBackground()
  4. Add a setup() and draw(); drawBackground in setup or draw
  5. Draw character on graph paper, 0,0 in center
  6. Create a function, add x to all x values; add y to all y values
  7. void drawMouse(int x, int y)
  8. Use distance(x1, y1, x2, y2) to find distance
  9. Global variables to keep track of where character is