User Tools

Site Tools


courses:intro.prototyping.fall.2017.oct02

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.2017.oct02 [2018/11/15 00:23]
rickard
courses:intro.prototyping.fall.2017.oct02 [2018/11/15 00:26] (current)
rickard
Line 1: Line 1:
 +===Visuals in processing===
 +
 +Today we looked into displaying and manipulating images, and mouse and keyboard input. ​
 +
 +==Images==
 +Add the images to the project in the menu Sketch->​Add file.. or drag and drop onto the code environment.
 +
 +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 transparency of the image, and "​filter"​ to add filters such as GRAY, THRESHOLD, INVERT, BLUR etc.
 +
 +== Text ==
 +Drawing text on the screen works in a very similar way with the basic command text(). If you want to use any other font than Processings'​ own, you  need to "​create"​ that font. To create a font you go to Tools-> Create font.. in Processing. Choose one you want to use, decide on a size, and copy the filename that will be generated. You need that in your code. Here's a basic example of text, using a font I created:
 +
 +<code java>
 +String someText;
 +PFont thatAwesomeFont;​
 +
 +void setup()
 +{
 +  size(640,​480);​
 +  fill(0);
 +  someText = "Bring me to your leader!";​
 +  thatAwesomeFont = loadFont("​Incubus-30.vlw"​);​
 +  textFont(thatAwesomeFont);​
 +  ​
 +  //Text drawn many times gets pixelated, so here I'm drawing
 +  //it in setup to look nice. It could also be done in a 
 +  //triggered by keypressed, mouseclicked an if-statement or 
 +  //other trigger-behavior.
 +  text(someText,​50,​240);​
 +}
 +
 +void draw()
 +{
 +  ​
 +}
 +</​code>​
 +
 +== Webcam ==
 +Here's the example code for getting a feed from your webcam. Each frame from that feed can then be manipulated as if it was an 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); //drawing the image contained in the variable "​cam";​
 +}
 +
 +</​code>​
 +
 +==Video==
 +Video works like a combination of how we've used images and the webcam-example.
 +
 +We need to add a library for video, then add the video file to the project. The library info can be found on the processing webpage under [[https://​processing.org/​reference/​libraries/​video/​index.html|libraries->​video]]. Under video you find the commands available to use with the variable containing your video. You can play, pause, jump, reverse and more!
 +In draw we then load a frame at the time and display that frame using the image-command.
 +
 +<code java>
 +import processing.video.*;​
 +Movie myMovie;
 +void setup() {
 +  size(640,​480); ​  
 +  myMovie = new Movie(this, "​video1.mp4"​);​
 +  myMovie.loop();​
 +  delay(100); //seems necessary for loop to start
 +}
 +
 +void draw() {
 + ​if(myMovie.available())
 +  {
 +    myMovie.read();​
 +    image(myMovie,​ 0,0, 640, 480);
 +  }
 +}
 +</​code> ​
 +
 +
 +
 +==Input==
 +We looked at using the keyboard for input. For example when a key is pressed it will trigger a function called "​keyPressed"​ if you've written 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>​
 +
 +OR check keypressed, while inside draw()
 +
 +<code java>
 +if (keyPressed == true) 
 +{
 +    //code for stuff to happen
 +}
 +</​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 key UP:
 +
 +<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.
 +
 +<​html>​
 +<!--
 +== States/​modes ==
 +I also slipped into talking about how to code so that a keypress or other trigger makes a continuing change rather than just as you're holding down a button. This is often referred to as a state machine since we're switching between states or modes. The code below mainly draws a background color which is decided by the value of a variable. We then use keyPressed() to change that variable, and a new color turns up. This same code could then be used to switch between any other behavior you'd like. Switch picture, sound, motion...
 +
 +<code java>
 +int mode;
 +
 +
 +void setup()
 +{
 +  size(640,​480);​
 +  mode=0;
 +}
 +
 +void draw()
 +{
 +  if(mode==0)
 +  {
 +    background(128,​128,​255);​
 +  }
 +  ​
 +  if(mode==1)
 +  {
 +    background(128,​255,​128);​
 +  }
 +  ​
 +  if(mode==2)
 +  {
 +    background(255,​128,​128);​
 +  }
 +  ​
 +  if(mode==3)
 +  {
 +    background(255,​255,​128);​
 +  }
 +}
 +
 +void keyPressed()
 +{
 +   ​if(key==CODED)
 +   {
 +     ​if(keyCode==UP)
 +     {
 +       ​mode=0;​
 +     }
 +     ​if(keyCode==DOWN)
 +     {
 +       ​mode=1;​
 +     }
 +     ​if(keyCode==LEFT)
 +     {
 +       ​mode=2;​
 +     }
 +     ​if(keyCode==RIGHT)
 +     {
 +       ​mode=3;​
 +     }
 +   }
 +}
 +</​code>​
 +-->
 +</​html>​
 +
 +
  
courses/intro.prototyping.fall.2017.oct02.txt · Last modified: 2018/11/15 00:26 by rickard