User Tools

Site Tools


courses:intro.prototyping.fall.2012.sep25

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
courses:intro.prototyping.fall.2012.sep25 [2012/09/26 02:59]
130.239.235.66
courses:intro.prototyping.fall.2012.sep25 [2012/10/15 08:37] (current)
130.239.232.99
Line 1: Line 1:
 +==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:
 +
 +<code java>
 +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
 +}
 +
 +</​code>​
 +
 +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 [[http://​www.processing.org/​reference|reference]]!
 +
 +We also used the command "​tint"​ to change brightness, color and transparancy of the image.
 +Look in the [[http://​www.processing.org/​reference|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:
 +
 +<code java>
 +void keyPressed()
 +{
 +  //here something would happen if any key is pressed
 +  if (key == '​d'​)
 +  {
 +    //here something would happen if the key pressed is '​d' ​
 +  }
 +}
 +</​code>​
 +
 +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:
 +
 +<code java>
 +void keyPressed()
 +{
 +  if (key == CODED)
 +  {
 +    if (keyCode == UP)
 +    {
 +      //here something happens if UP is pressed.
 +    }
 +  }
 +}    ​
 +</​code>​
 +
 +What other CODED keys are there? Look in the [[http://​www.processing.org/​reference|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:
 +<code java>
 +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';​
 +  }
 +}
 +
 +
 +</​code>​
  
courses/intro.prototyping.fall.2012.sep25.txt · Last modified: 2012/10/15 08:37 by 130.239.232.99