User Tools

Site Tools


courses:intro.prototyping.fall.2014.oct7

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.2014.oct7 [2014/10/07 04:44]
rickard
courses:intro.prototyping.fall.2014.oct7 [2014/10/07 04:48] (current)
rickard
Line 1: Line 1:
 +==More processing ===
 +
 +Today we looked into displaying and manipulating images, and mouse and keyboard input. Even though there was a wide range of how far you individually got in playing around with these concepts, I was happy to see that the important basics seemed to work for everybody.
 +
 +==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. ​
 +
 +We also used the command "​tint()"​ to change brightness, color and transparancy of the image, and "​filter"​ to add filters such as GRAY, THRESHOLD, INVERT, BLUR etc.
 +
 +Almost as a teaser, but with some substance I also showed you that bringing in video is very close to what we did with images earlier. Here's the bare minimum example I showed you:
 +
 +== Video ==
 +<code java>
 +
 +import processing.video.*; ​    //​bringing in the video library for more functions
 +Movie myMovie; ​       //a video variable
 +
 +void setup() {
 +  myMovie = new Movie(this, "​video1.mp4"​); ​ //pointing it to my videofile
 +  myMovie.loop();​
 +  size(640,​480);​
 +}
 +
 +void draw() {
 +  if(myMovie.available())
 +  {
 +    myMovie.read();​
 +    image(myMovie,​ 0,0);  //draw a frame once it's loaded, then loading the next
 +  }
 +}
 +
 +</​code>​
 +
 +But there was much more you could do with a video. Play with speed, direction, skip in time. Take a look at the long list in the [[http://​www.processing.org/​reference/​libraries/​video/​index.html|library reference]].
 +
 +== Webcam ==
 +We used this example to read a webcam-feed and draw frame by frame on the screen. That frame can then be manipulated as if it was a image like any other. Note the handy print-out letting you know what modes your camera has and is available to you.
 +<code java>
 +import processing.video.*;​
 +
 +Capture cam;
 +
 +void setup() {
 +  size(640, 480);
 +
 +  String[] cameras = Capture.list();​
 +  ​
 +  if (cameras.length == 0) {
 +    println("​There are no cameras available for capture."​);​
 +    exit();
 +  } else {
 +    println("​Available cameras:"​);​
 +    for (int i = 0; i < cameras.length;​ i++) {
 +      print(cameras[i]);​
 +      println(":​ "+i);
 +    }
 +    ​
 +    // The camera can be initialized directly using an 
 +    // element from the array returned by list():
 +    cam = new Capture(this,​ cameras[1]);​
 +    cam.start(); ​    
 +  }      ​
 +  ​
 +}
 +
 +void draw() {
 +  if (cam.available() == true) {
 +    cam.read();
 +  }
 +  image(cam, 0, 0);
 +}
 +
 +</​code>​
 +
 +
 +==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 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"​.
 +
 +We also listed a bunch of other input-functions that work very similar:
 +<code java>
 +keyReleased()
 +keyTyped()
 +
 +mouseClicked()
 +mouseDragged()
 +mouseMoved()
 +mousePressed()
 +mouseReleased()
 +mouseWheel()
 +</​code>​
 +The small difference is of course found in the reference.
 +
 +
 +For the next time (Oct 14th) I want you to make something using images, and keyboard or mouse interaction. Even better if you can bring in some from the last time (color, brightness, position, amount, 2D-shapes on top).
 +
 +If you feel comfortable with the previous stuff, I challenge you to look in on the video functions and make something interactive that manipulates a video/​webcam-feed. ​
 +
 +
  
courses/intro.prototyping.fall.2014.oct7.txt · Last modified: 2014/10/07 04:48 by rickard