Free Seating Today!

Afternoon groups: (Rohan, Jon), (Jerry, Caelen), (Neel, Jonathan), (Tony, Rahul), (Akane, Olivia), (Vrinda, Nidhi), (Joyce, Sindhu), (Jannani, Christine, Maxine)

9:00-10:00

• Stone Librande - http://www.stonetronix.com

10:00-11:30

• Art assets: http://www.piskelapp.com/
• caller id
• Finishing up Big O and algorithms
  • http://bigocheatsheet.com/
• Animations and Collision

KEY PRESS

// Name:
// Date
// Keypress project
 
// SECTION 1
 
int x = 20;
int y = 20;
 
 
 
 
//SECTION 2
void setup() {  //setup function called initially, only once
  size(500, 400);
  }
 
 
//SECTION 3
void draw() {  //draw function loops 
 
    background(255);    // makes it black
 
    fill(255,0,0);
 
    ellipse(mouseX,mouseY,20,20);
 
    fill(0,255,0);
 
    ellipse(x,y,20,20);
 
 
 
    if (key == 'd'){
        x = x+1;
    }
 
 
}

SCREEN SAVER BALL

int x = 50;        // variables
int y = 50;
 
int dx = 9;        // velocity (9,5)
int dy = 5;
 
void setup() {  //setup function called initially, only once
  size(500, 250);
  background(255);  //set background white
 
}
 
void draw() {  //draw function loops 
  ellipse(x,y,20,20);
  x = x + dx;
  y = y + dy;
 
  if (x > 500) {        // X axis collision
      dx = -9;
  }
  else if (x < 0) {
      dx = 9;
  }
 
  if (y > 250)  {      // Y axis collision
      dy *= -1;        // the same as dy = dy*(-1)
  }
  else if (y < 0) {
      dy *= -1;
  }
}

Objects!

// Example: Two Car objects
Car myCar1;
Car myCar2; // Two objects!
 
void setup() {
  size(200,200);
  // Parameters go inside the parentheses when the object is constructed.
  myCar1 = new Car(color(255,0,0),0,100,2); 
  myCar2 = new Car(color(0,0,255),0,10,1);
}
 
void draw() {
  background(255);
  myCar1.drive();
  myCar1.display();
  myCar2.drive();
  myCar2.display();
}
 
// Even though there are multiple objects, we still only need one class. 
// No matter how many cookies we make, only one cookie cutter is needed.
class Car { 
  color c;
  float xpos;
  float ypos;
  float xspeed;
 
  // The Constructor is defined with arguments.
  Car(color tempC, float tempXpos, float tempYpos, float tempXspeed) { 
    c = tempC;
    xpos = tempXpos;
    ypos = tempYpos;
    xspeed = tempXspeed;
  }
 
  void display() {
    stroke(0);
    fill(c);
    rectMode(CENTER);
    rect(xpos,ypos,20,10);
  }
 
  void drive() {
    xpos = xpos + xspeed;
    if (xpos > width) {
      xpos = 0;
    }
  }
}

PARTICLES!

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; 
    }
 
    float getRad(){
      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 rad1,
      float cX2,
      float cY2,
      float rad2)
{
    float circleDistanceX = abs(cX1 - cX2 - rad2);
    float circleDistanceY = abs(cY1 - cY2 - rad2);
 
    if (circleDistanceX > (rad1 + rad2)) { return false; }
    if (circleDistanceY > (rad1 + rad2)) { return false; }
 
    if (circleDistanceX <= (rad2)) { return true; }
    if (circleDistanceY <= (rad2)) { return true; }
 
    float cornerDistance_sq = pow(circleDistanceX - rad2, 2) +
                         pow(circleDistanceY - rad2, 2);
 
    return (cornerDistance_sq <= pow(rad1,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];
          if (isColliding(cir1.getX(),cir1.getY(),cir1.getRad(),cir2.getX(),cir2.getY(),cir2.getRad())){
            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();
}

• Demos!
  • Video Portfolio: https://www.youtube.com/watch?v=TQJbJVCMIH8
  • openprocessing
  • Other JS libraries: https://www.google.com/search?safe=off&es_sm=91&q=javascript+libraries
  • paper.js

• Write Blog Posts about
  • Projects - Each project should get it's own post. Screenshot, link to demo, description. You are building a portfolio. Don't forget to link your Design Docs from now on!
  • Stone Librande - Write about what you thought and learned about Stone's presentation. Make sure to thank him at the end. Put in some image. I will send these posts to Stone as a thank you.
  • Design (optional) - Skim through the design book. Write a post about the main principles of design. Make sure to talk a little bit about color. Put in some image. Spend no more than 10 min on this.

Double check your links!!

(Afternoon groups listed at the top)

Mousey the mouse needs to sort his cheese stick collection. There are 20 cheese sticks of different lengths in random order. Please help Mousey write an algorithm to sort his cheese sticks in Processing. Mousey lives far away, so Mousey will have to visit your blog to learn how to do this himself.

First: Make Mousey a design doc based off of what you've learned. Design doc can only be 1 page. It should be in the final Github repo with the [,doc] and the [.pdf]. This doc will explain the design of your prototype. Mousey likes more pictures and less words.

Your design doc must explain the runtime of your algorithm to Mousey: http://bigocheatsheet.com/

Next: Make an array of integers in some random order, like this in Processing:

int[] cheesesticks = { 90, 150, 30, 22........ };

or you can do it manually:

int[] cheesesticks = new int [20];
 
cheesesticks[0] = 90;
cheesesticks[1] = 150;
cheesesticks[2] = 30;

…. Do whatever makes more sense to you.

Now pick your favorite sort and sort those numbers. You will need to create a swap function.

Once you can sort them, try to draw them on the screen and animate them. Like these: http://www.sorting-algorithms.com/

If you finish this early, you should either try another sort OR.. help Mousey learn the http://en.wikipedia.org/wiki/Sieve_of_Eratosthenes.

Try to get your project blog online, if you have time. Also, don't forget to link your design doc in the blog.

Cookbook! You know what to do.

Additional Challenge: Make your own SPRITES! This part is fun :)

(Help Mousey get his cheese)

http://www.piskelapp.com/

Use the rest of the day to fix any old projects up from the previous labs.

https://docs.google.com/forms/d/1nNvgtxwBtGiDMfe_jjx1PH8MzwJlOR7jIAaEdLZ-sZI/viewform