# Teaching

### Site Tools

spcs:summer2014:d8

Afternoon Teams: (Clair, Ed), (Angel, Emily), (Mei-Ling, Andrew), (Ellie, Will), (Zuri, Alix), (Anastasia, Float), (Penny, Jove), (Fang, Jeni, Raymond)

# Topics

• Collision Detection
• Prototypes
• Final Projects
• OOP - APIE
```class Box
{
float x;
float y;
float dx;
float dy;
float wid;
float hei;
float r,g,b, opac;

Box(float xpos, float ypos, float xVel, float yVel, float w, float h)
{
x = xpos;
y = ypos;
dx = xVel;
dy = yVel;
wid = w;
hei = h;
r = 0;
g = 0;
b = 0;
opac = 0;

}
float getX(){
return x;
}

float getY(){
return y;
}

return wid/2;
}

void oppDir(){
dx *= -1;
dy *= -1;
}

void update()
{
fill(r,g,b,opac);
ellipse(x,y,wid,hei);

x += dx;
y += dy;

if ( x < 0 || x > width )
{
dx = -1 * dx;
}
if ( y < 0 || y > height )
{
dy = -1 * dy;
}
}

void changeColor(){
//Change color of ball
/*HINT: Create a variable for R,G,B and store random values*/
r = random(255);
g = random(255);
b = random(255);
}

void changeOpac(){
//Change opacity of ball
opac = random(100);
}

}
boolean isColliding(
float cX1,
float cY1,
float cX2,
float cY2,
{
float circleDistanceX = abs(cX1 - cX2 - rad2);
float circleDistanceY = abs(cY1 - cY2 - rad2);

if (circleDistanceX <= (rad2)) { return true; }
if (circleDistanceY <= (rad2)) { return true; }

float cornerDistance_sq = pow(circleDistanceX - rad2, 2) +

}
int numCir = 10;
Box[] myBox = new Box[numCir];

void setup(){
size(500,500);
//frameRate(20);
background(255);
for( int i = 0; i < numCir; i++ ){
Box cube = new Box(random(width),random(height),random(15),random(15),15,15);
myBox[i] = cube;
}
}

void draw(){
background(255);
for( int i = 0; i < numCir-1; i++)
{
for (int j = i+1; j<numCir;j++){
Box cir1 = myBox[i];
Box cir2 = myBox[j];
cir1.oppDir();
cir2.oppDir();
}

}
}

for ( int i = 0; i < numCir; i++){
myBox[i].update();
}

if (mousePressed == true)
myBox[(int)random(numCir)].changeColor();

if (keyPressed == true && key == 'a')
myBox[(int)random(numCir)].changeOpac();
}```

# Assignments

## Part 1: Blog - Final Projects

If all your projects are blogged, the move onto the blog for today…. FINAL PROJECTS!!!

Mousey the mouse heard that the Exploratorium was pretty cool. He's wondering if our class could pull together an exhibit of similar displays. Mousey was too small to use the mechanical devices, so he'd prefer computer programs or just smaller demos.

Please pick three topics of your interest, could be about anything we talked about in class, anything you saw at the Exploratorium, this list here: Final Projects, or something creative you think of. Now you will write a project proposal.

For each of the three ideas, you must answer the following:

2. What will people learn from your experience?
3. Will it be interactive or is it something people will watch? If interactive, what can the user do?
4. How would your design fit in with the Exploratorium? Describe your experience from yesterday and include pictures. Use examples!
5. Draw a diagram that explains how your prototype works.
6. Are there any existing systems that are similar to yours? Name and link them.

## Part 2: Mousey's Travels (the BEFORE Teams)

Please try to find one path that visits everyone. You do not need to find the shortest one, but try to find the shortest path after you've successfully drawn a path to everyone's home. Once you've done this, consider yourself finished, unless you want to unlock the bonus challenges.

You do not have to do these in order!

Design Challenge X: For an additional challenge, try to find a round trip path back home that is the shortest. Starting at Stanford and ending at Stanford.

Design Challenge Y - Make the program such that you can select the starting point anywhere on the map. Right now, Mousey starts at Stanford. When I click the screen, I want to be able to choose where Mousey starts. The algorithm should run again after every click.

Design Challenge Z - Most likely, your program draws each edge in that you are choosing. If your Traveling Sales Person or Shortest Distance program does not animate yet, add a button called “animate.” This animation should demonstrate the search algorithm that you are using (similar to Visual Sorting).

## Part 3: A* Search (New Teams)

We've talked about Depth-First and Breadth-First Search. Now, let's do A* Search. A* is used for AI Pathfinding.

Try this part ONLY if you feel up to the coding challenge. You may also go back and ENHANCE your Seurat program (being able to resize the ellipses) or the Visual Sort (adding a pause/randomize button) or the Ball Bouncing (adding gravity and more collisions).

Here are some resources on A*

This is the demo I showed in class: http://www.redblobgames.com/pathfinding/a-star/introduction.html

For examples: http://www.openprocessing.org/search/?q=pathfinding

If you can make it this far, then try creating Mousey a maze.

Mousey is on a 32 x 32 grid. Put a piece of cheese on the board, either hard coding or using the user's mouse input. Use ANY search algorithm to find the cheese. Put up walls for your maze and see how it works.

OR

Alan Turing has asked you out on a date. He said he'd meet you at a location on Stanford campus, but has yet to tell you where. Since he is such a hottie, you decide to write a program that helps you find the shortest distance from one point to another. Use a 32×32 grid. Use a heart to indicate the destination of your true love.

## Part 4: JavaScript - JS Fighter (For those who are breezing through)

Cookbook fighter game. Make sure to blog what you create!