Assignments

Processing – Knowledge Test

Use this code in processing – the challenge is to make two lines – vertical and make the vertical one move at twice the speed


float y = 100;

// The statements in the setup() function 
// execute once when the program begins

// Note that height and width is set by processing - you dont have to declare them

void setup() { 

  size(640, 360);  // Size must be the first statement
  stroke(255);     // Set line drawing color to white
  frameRate(30);

}
// The statements in draw() are executed until the 
// program is stopped. Each statement is executed in 
// sequence and after the last line is read, the first 
// line is executed again.
void draw() { 
  background(0);   // Set the background to black
  y = y - 1; 
  if (y < 0) { 
    y = height; 
  } 
  
    line(0, y, width, y);  
} 


Assignment 4 – Add an Image

Add an image to the player or doodle jump sketch

The existing draw code is in the player class – in a function called display()

It sets the color and then draws a rectangle.

You need to replace that code with an image of your choice.  Use the processing image here http://processing.org/reference/image_.html

Place the variable just above the setup function:

PImage img;

Then load the image in your setup function

then replace the rectangle call with this

image(img, x,y,100,100);  ( replace 100 with the image size you want ) 

If you can use .png format file then all the better

Code Club – Ideas

We now have some initial designs and ideas for the first apps for the code clubs

1 – Platform game – dodgeblock – a working app that will have blocks moving and a player trying to avoid them.

2 – A game thats like the iPhone app – most addictive app.  It should be easy enough to do

3 – A horizontal platform game – the objective is to move from one size left to right

4 – Snake dodge game – using the snake to avoid bubbles or blocks.

All great ideas – we’ll do the development in January – but we need them done!!!! – Homework

Player Class

This is only the player class. It allows you to define a player then move it around the screen. Note the calls in the main loop are very few

 
class Player
{
  
  static final float gravity = 0.14;
  static final float friction = 0.03;
  static final float bounceVel = 6.1;
  
  PImage pimage=null;  // The player image
  public int pWidth=20;
  public int pHeight=20;
  public float maxYVel = 2;
  public float maxXVel = 2;
  public float acceleration=2;
  public boolean useGravity=false; 
  public boolean deadStop=false;
  public boolean edgeStop=false;
  
  float x, y, xVel, yVel;
  int w, h;
  Player(int x, int y)
  {
    this.x = x;
    this.y = y;
    w = h = 20;
    this.useGravity=false;
  }
  
  void display()
  {
    fill(204,0,0);
    rect(x,y,pWidth,pHeight);
  }
  
  void move()
  {
    x += xVel;
    y += yVel;
  
    
    // horizontal
    if (gameOver)
    {
       println("GAME OVER");
       exit();
    }
   
    if (aPressed) 
    {
      xVel -= acceleration;
    }
    else if (sPressed) 
    {
      xVel += acceleration;
    }
    else if (wPressed) 
    {
      yVel -= acceleration;
    }
    else if (zPressed) 
    {
      yVel += acceleration;
    }
    else if (jPressed) 
    {
      yVel = -5;
      deadStop=false;
      useGravity=true;
    }

    else 
    {
      if (deadStop) {
        xVel=0;
        yVel=0;
      }
      
      
    }
    
    
    // X Friction
    if (xVel > 0)
    {
      xVel -= friction;
    }
    else
    {
      xVel += friction;
    }
    
    // Y Friction
    if (yVel > 0)
    {
      yVel -= friction;
    }
    else
    {
      yVel += friction;
    }
    
    // check wrap around before a move
    if (edgeStop)
    {
      if (x > width-w) x = width-w;
      if (x < 0) x = 0;
    
      if (y> height-h) y=height-h;
      if (y<0) y = 0;
    }
    else
    {
      if (x > width-w) x = 0;
      if (x < 0) x = width-w;
    
      if (y> height-h) y=0;
      if (y<0) y = height-h;
      
    }
  
    
    // Check limits on all movement of the player
    if (abs(xVel) <= friction) 
    {
      xVel = 0;
    }
    if (abs(yVel) <= friction) 
    {
      yVel = 0;
    }
    // vertical - always overide - can stop Gravity
    if (useGravity)
    {
      yVel += gravity;
    }
      
    // Limit max velocity
    xVel = min(maxXVel, xVel);
    xVel = max(-maxXVel, xVel);
    // Limit max velocity
    yVel = min(maxYVel, yVel);
    yVel = max(-maxYVel, yVel);
    
    println(xVel);
    println(yVel);
  
    
  }
}


// This is where the sketch starts 
Player p;
boolean wPressed, aPressed, sPressed, zPressed, jPressed;
int score, fallCount;
boolean gameOver;
  
void setup()
{
  size(320, 480);
  frameRate(60);
  initialize();
}
  
void initialize()
{
  score = 0;
  fallCount = 0;
  gameOver = false;
  
  // Create a new player
  p = new Player(width/2, height/2);
  //p.deadStop = true;
  //p.edgeStop=true;

}
  
void draw()
{
  //println(score);
  background(204);
  p.display();
  p.move();
  
//  if (fallCount > 90 ) initialize();
}
  
  
  
void keyPressed()
{
  if (key == 'w') wPressed = true;
  if (key == 'a') aPressed = true;
  if (key == 's') sPressed = true;
  if (key == 'z') zPressed = true;
  if (key == 'j') jPressed = true;
}
  
void keyReleased()
{
  if (key == 'w') wPressed = false;
  if (key == 'a') aPressed = false;
  if (key == 's') sPressed = false;
  if (key == 'z') zPressed = false;
  if (key == 'j') jPressed = false;
}

Doodle Jump Test App

This sketch is complete and can be downloaded. its a version of doodle jump but it shows the way that you can use objects to create a simple game.


class Platform
{
 float x,y,w,h;
 float xvel, yvel;

 Platform(int x, int y, int w, int h)
 {
 this.x = x;
 this.y = y;
 this.w = w;
 this.h = h;
 }

 void display()
 {
 fill(0);
 rect(x,y,w,h);
 }

 void move()
 {
 x += xvel;
 y += yvel;
 }

}

class HorizontalMovingPlatform extends Platform
{
 static final float speed = 0.9;

 HorizontalMovingPlatform(int x, int y, int w, int h)
 {
 super(x, y, w, h);
 this.xvel = speed;
 }

 void move()
 {
 super.move();
 if( (x+w > width - 10) || (x < 10) )
 {
 xvel *= -1;
 }
 }
}

class Player
{

 static final float gravity = 0.14;
 static final float bounceVel = 6.1;
 static final float maxYVel = 12;
 static final float maxXVel = 2;

 float x, y, xVel, yVel;
 int w, h;
 Player(int x, int y)
 {
 this.x = x;
 this.y = y;
 w = h = 20;
 }

 void display()
 {
 fill(204,0,0);
 rect(x,y,w,h);
 }

 void move()
 {
 x += xVel;
 y += yVel;

 // wrap around
 if (x > width-w) x = 0;
 if (x < 0) x = width-w;

 // horizontal
 if (!gameOver)
 {
 if (aPressed) xVel -= 0.05;
 else if (dPressed) xVel += 0.05;
 else
 {
 if (xVel > 0) xVel -= 0.03;
 else xVel += 0.03;
 }
 }
 if (abs(xVel) < 0.01) xVel = 0;
 xVel = min(maxXVel, xVel);
 xVel = max(-maxXVel, xVel);

 // vertical
 yVel += gravity;
 yVel = min(maxYVel, yVel);
 yVel = max(-maxYVel, yVel);
 }

 void collide(Platform p)
 {
 // standard rectangle intersections, but only for our lowest quarter
 if(x < p.x + p.w &&
 x + w > p.x &&
 y+h/2+h/4 < p.y + p.h &&
 y + h > p.y)
 {
 // but we only care about platforms when falling
 if (yVel > 0) {
 // for bouncing
 yVel = -bounceVel;
 }
 }
 }

}

Player p;
ArrayList platforms;
boolean wPressed, aPressed, sPressed, dPressed;
int score, fallCount;
boolean gameOver;

void setup()
{
 size(320, 480);
 frameRate(60);
 initialize();
}

void initialize()
{
 score = 0;
 fallCount = 0;
 gameOver = false;
 p = new Player(width/2, height/2);
 platforms = new ArrayList();
 platforms.add(new HorizontalMovingPlatform(20,80,70,8));
 platforms.add(new Platform(100,420,100,8));
 platforms.add(new Platform((int)random(40,180),320,100,8));
 platforms.add(new Platform((int)random(40,180),220,100,8));
 platforms.add(new Platform((int)random(40,180),120,100,8));
 platforms.add(new Platform((int)random(40,180),20,100,8));
}

void draw()
{
 //println(score);
 background(204);
 for(int i=0; i<platforms.size(); i++)
 {
 // le sigh... i wish processing supported generics.
 // http://dev.processing.org/bugs/show_bug.cgi?id=598
 p.collide((Platform)platforms.get(i));
 ((Platform)platforms.get(i)).display();
 ((Platform)platforms.get(i)).move();
 }
 p.display();
 p.move();

 adjustViewport();
 cleanUp();
 seedNewPlatforms();
 if (platformsBelow() == 0) gameOver = true;
 if (gameOver) fallCount++;
 if (fallCount > 90 ) initialize();
}

int platformsBelow()
{
 int count = 0;
 for(int i=0; i<platforms.size(); i++)
 {
 if (((Platform)platforms.get(i)).y >= p.y) count++;
 }
 return count;
}

void adjustViewport()
{
 // above midpoint
 float overHeight = height * 0.5 - p.y;
 if(overHeight > 0)
 {
 p.y += overHeight;
 for(int i=0; i<platforms.size(); i++)
 {
 ((Platform)platforms.get(i)).y += overHeight;
 }
 score += overHeight;
 }
 // falling
 float underHeight = p.y - (height-p.h-4);
 if(underHeight > 0)
 {
 p.y -= underHeight;
 for(int i=0; i<platforms.size(); i++)
 {
 ((Platform)platforms.get(i)).y -= underHeight;
 }
 }
}

void cleanUp()
{
 for(int i=platforms.size()-1; i>=0; i--)
 {
 // scrolled off the bottom
 if(((Platform)platforms.get(i)).y > height)
 {
 platforms.remove(i);
 }
 }
}

void seedNewPlatforms()
{
 if(platforms.size() < 7)
 {
 if(random(0,10) < 2) platforms.add(new HorizontalMovingPlatform((int)random(10,width-80),-10,70,8));
 else platforms.add(new Platform((int)random(20,200),-10,70,8));
 }
}

void keyPressed()
{
 if (key == 'w') wPressed = true;
 if (key == 'a') aPressed = true;
 if (key == 's') sPressed = true;
 if (key == 'd') dPressed = true;
}

void keyReleased()
{
 if (key == 'w') wPressed = false;
 if (key == 'a') aPressed = false;
 if (key == 's') sPressed = false;
 if (key == 'd') dPressed = false;
}

 

 

Inside a box

This week we started looking at variables and the if statement

We were looking at detecting if the cursor is inside a box. Very useful for things like detecting if the user clicks on a button

This bit of code uses both variables and the if

Lets say we have a box. We know the top left point and the bottom right point. We will call these (p1x,p1y) and (p2x,p2y)

  // Variables here
  int p1x=10
  int p1y=10;
  int p2x=100;
  int p2y=100;

  if (mouseX > p1x  && mouseX < p2x && mouseY > p1y &&  mouseY < p2y ) {
       // Do this code
       fill(255,0,0);
       rect(p1x,p1y,100,100);

  }

  else {

       // dark background here....
       fill(0,0,0);

  }

}

Assignment 3

This assignment will be the first start point in designing and writing your own applications ( apps )

It uses the basics of code, variables and the IF command. Once you get to understand how to use these basic code tools – you can write more complex apps.

The challenge is to change the colour of a shape like the Microsoft logo

 

Except that when you have the cursor go into any of the four squares it changes colour.

As a help I have used the IF command here. I have not used variables – but you can use variables for a position as well as a colour

 



// Variables

void setup()
{
  
 // set the size
  size(500,500); 
  
}
void draw()
{
 background(150);
  
  if (mouseX> 250  ) 
  {
    
    if ( mouseY > 250 )
    {
      
      fill(255,0,0);
      rect(250,250,250,250);
   
    }
    
  }
}