User Tools

Site Tools


courses:intro.prototyping.fall.2012.sep25
More processing

Today we looked into adding images and keyboard input. I was also happy to see that you stopped being shy and polite and started to ask questions. The best way to learn is to practice and ask questions. :-)

Images

Add the images to the project in the menu Sketch→Add file…

The minimum to show an image:

PImage myPictureVar; //Creating a variable to contain the image
 
void setup()
{
  myPictureVar = loadImage("myFile.jpg"); //storing the image in the variable
}
 
void draw()
{
  image(myPictureVar,0,0); //drawing the image from our variable at coordinate 0 and 0
}

The command “image” that we use to place a picture can also be used to resize the picture if you give it height and width. Look in the reference!

We also used the command “tint” to change brightness, color and transparancy of the image. Look in the reference!

Key input

When a key is pressed it will trigger a function called “keyPressed” if you added it. You write this part completely outside of setup and draw. Within there you you can get the value of the key pressed and either use that or just trigger something else.

The minimum:

void keyPressed()
{
  //here something would happen if any key is pressed
  if (key == 'd')
  {
    //here something would happen if the key pressed is 'd' 
  }
}

But for buttons that are not characters? Those keys are CODED, and you have to check for that first. This is how you use the arrow keys:

void keyPressed()
{
  if (key == CODED)
  {
    if (keyCode == UP)
    {
      //here something happens if UP is pressed.
    }
  }
}    

What other CODED keys are there? Look in the reference for “keyCode”.

For the next time (Oct 29th) I want you to make something using images and keyboard interaction. Even better if you can bring in some from the last time (color, brightness, position, amount).

It seemed that some of you tried to ONLY copy/paste to make it easier to program. I think that actually brings more risk for making it look messy and nonfunctional than if you type it by yourself. Small steps. Start with the basic things, and then add function after function. And of course, ask me if you get stuck.

The code for my example of controlling a square:

int X = 100;
int Y = 100;
char direction = 'E';
 
void setup()
{
  size(640, 480);
}
 
void draw()
{
  background(100);
 
  //series of if-statements to check if boundaries are hit and if so change background
  if(X>580)
  {
    background(255,0,0);
    X = 580;
  }
  else if(X < 10)
  {
    background(255,0,0);
    X = 5;
  }
  else if(Y < 10)
  {
    background(255,0,0);
    Y = 5;
  }  
  else if(Y > 430)
  {
    background(255,0,0);
    Y = 430;
  }  
 
  //series of if-statements to control direction of movement 
  if(direction == 'E')
  {
    X = X + 5;
  }
  else if(direction == 'W')
  {
     X = X - 5; 
  }
  else if(direction == 'N')
  {
    Y = Y - 5;
  }
  else if(direction == 'S')
  {
    Y = Y + 5;
  }
  rect(X,Y,50,50); 
 
}
 
//keyPressed is run independently from draw, here changing direction by key value
void keyPressed()
{
  if (key == 'd')
  {
    direction = 'E';
  }
  else if(key == 'a')
  {
    direction = 'W';
  }
  else if(key == 'w')
  {
    direction = 'N';
  }
  else if(key == 's')
  {
    direction = 'S';
  }
}
courses/intro.prototyping.fall.2012.sep25.txt · Last modified: 2012/10/15 08:37 by 130.239.232.99