Introduction to processing

Welcome! This is an introduction to programming in Processing.org.

Processing is a programming language that is like languages the professionals use, but is easy to get going in and introduces students to the world of programming.

Please download Processing from processing.org. It is free and open source, you do not need to donate money.

Other links you may need:
Evaluation afterwards Processing reference Fablab Facebook - follow for announcements of open courses Twitter, instagram @fablabruc
Fablab Telegram open chat Humtek Facebook

The goal is to have a simple interaction up and running in a 45 min lecture. An instructor will help you through the different exercises and explain the different parts of the code. You should follow the instructor, but if something doesn't work as it should or you have questions just ask for help.
If you missed the code the instructor have written on the board, you can always see all the code on the bottom of this page.

Introduction to processing I

You are going to program a Flappy Unicorn game.

#1

Save these two images to your computer.

1) right-click on the image and choose "save image as". You probably want to save it in your "downloads" folder.

2) Open the folder where you downloaded the image to, single-click on the image and drag it over the Processing program. Just drag it over the middle of the Processing text editing window and let go of the mouse button. This copies the image into the Processing sketch folder, so you can use it in your program

3) Do this for both the two images.

Copy the following into your sketch:

PImage background;

void setup(){  
   size(500, 300);
   background = loadImage("background.jpg");
}

void draw(){ 

   image(background, 0,0);

}

This is the basic structure of a processing sketch. The setup() method runs once when the program starts while the draw() method runs repeatedly. The size() function creates a window with dimensions 500 pixels * 300 pixels.

#2

Now load the unicorn image into your program. Notice on the code you have copied for the background the background image is loaded and drawn. The approach for a new image is the same. Following the following instructions can as well be helpful:

· Make a variable with the variable type PImage on the top of your program: PImage theNameYouWantToGiveYourImage

· Load the image in setup() : name = loadImage("name of the picture.file format");

· Finally draw your image with given coordinates and size. Use: image(theNameYouGaveYourImage, x position, y position, width, heigth)

#3

Make the Flappy Unicorn fall and fly

Have in mind that the 0,0 point in processing is on the upper left corner of the window.

Make a variable of type int that can be used to define the unicorns Y position.

Make this variable decrease its value every time the draw- method runs (unicorn falls) and increase value if a key is pressed by using keyPressed(unicorn flyes).

Code-tip:

int yUnicorn; //make a variable

yUnicorn = yUnicorn+5; //yUnicorn increases by 5.

if(keyPressed == true){  
yUnicorn = yUnicorn-10; // yUnicorn decreases by 10.  
}

image(theNameYouWantToGiveYourImage,100,yUnicorn, 50,50); //draws unicorn

Notice that yUnicorn is used as the y parameter for the image that draws the unicorn.

#4

Code Game Over

Make a condition (using an if-statement) that determines game over if the unicorn falls out of the window, and write "game over" if it happens.

Tip:
The unicorn leaves the window when its y position is higher than the height of the window.
Use text("Game Over", x position, y position); to write game over on your window.

#5

Draw a moon and give it a color.
Use the shape ellipse() and the function fill()

ellipse(a, b, c, d);

Parameters

a - float: x-coordinate of the ellipse
b - float: y-coordinate of the ellipse
c - float: width of the ellipse by default
d - float: height of the ellipse by default

fill(r,g,b);

Parameters

r - int: red (from 0 to 255)
g - int: green (from 0 to 255)
b - int: blue (from 0 to 255)

* Note that if you right click on a coloured element of your code you can choose "Find in reference". This will redirect you to the processing.org page where you can read about it and learn about the syntax of the chosen element and the parameters used.

#6

Make the moon move on the x-axis.

Once again you need to make a variable that can be used to define the moons X position. Use type float this time, so we can use decimal values. This variable needs to increase every time draw- method runs.

Make sure that if the value gets higher than the size of the window it needs to be set to zero. In this way the moon will start its travel again. In Unicorns world it's always night and always full moon.

int x;  
if(x > window size){  
 x = 0;
}

Your game should look similar to this:

If you have made into here you are done with what we had in mind for today. If you want to work further on the game you can eventually try to solve the following exercises

Introduction to processing II

#7

Make a collision detection between moon and flappy unicorn. You can use the function dist(), that calculates the distance between two points. Look up in references for how to use this function.

#8

Make a "state" variable that defines either there is gameover or not.
Here is the idea:

if(state=1){

   game runs;

   if(gameOver){
      state=0;
   }

} else {

text("GameOver",x position, y position);

}

#9

Lastly, "restart" the game if the mouse is pressed:
· Remember the state needs to be set to "running the game"

· The flappy bird need to have its position whitin the window

· The moon needs to start from the left again.

Code : Introduction to processing I

int yUnicorn;  
float xMoon;  
PImage unicorn;  
PImage background;

void setup() {

  size(500, 300);
  unicorn = loadImage("unicorn.png");
  background = loadImage("background.jpg");
}

void draw() {

  image(background, 0, 0, 500, 300);
  fill(254, 252, 215);
  ellipse(xMoon, 50, 50, 50);
  image(unicorn, 250, yUnicorn, 30, 30);

  //Moving flappy unicron
  yUnicorn = yUnicorn+5;
  if (keyPressed == true) {
    yUnicorn=yUnicorn-10;
  }

  //Moving the moon
  xMoon = xMoon + 0.5;
  if (xMoon>500) {  
    xMoon = 0;
  }


  //Game Over
  if (yUnicorn>600) {
    textSize(40);
    fill(255, 150, 200);
    text("GAME OVER", 120, 100);
  }
}

Code : Introduction to processing II

int yPosUni;  
float xPosMoon;  
PImage img;  
PImage backImg1;  
PImage backImg2;

int state = 1; 


void setup() {

  size(500, 300);
  img = loadImage("unicorn.png");
  backImg1 = loadImage("background.jpg");
}

void draw() {  
  background(55);
  image(backImg1, 0, 0, 500, 300);
  fill(254, 252, 215);
  ellipse(xPosMoon, 150, 100, 100);
  image(img, 250, yPosUni, 30, 30);

  if (state == 1) {

    //Moving flappy unicron
    yPosUni = yPosUni+5;
    if (keyPressed) {
      yPosUni=yPosUni-10;
    }

    //Moving the moon    
    xPosMoon= xPosMoon +0.5;
    if (xPosMoon>500) {  
      xPosMoon = 0;
    }

    //Game Over
    if (yPosUni>600) {
      state = 0;
    }

    //-collision between moon and flappy unicorn
    if (dist(xPosMoon, 150, 250, yPosUni)<50) {
      state = 0;
    }
  } else {
    textSize(40);
    fill(255, 150,200);
    text("GAME OVER", 120, 100);
  }

  //Restart game
  if (mousePressed) {

    state=1;
    yPosUni = 0;
    xPosMoon = 0;

  }
}

Programmering er kreativ. Du må gerne lege. Du må gerne prøve forskelligt af. Computeren går ikke i stykker.

Mere hjælp:
https://processing.org/tutorials/ (vejledninger med indføring)
https://processing.org/reference/ (kort om alle kommandoer - "retskrivningsordbogen")