Docstoc

Processing Processing Created by

Document Sample
Processing Processing Created by Powered By Docstoc
					       Processing

Created by Ben Fry and Casey Reas

      http://processing.org
              Overview
• Started out as Java extension for
  artists and designers
• Also used to learn fundamentals of
  computer programming
• Evolved into a prototyping tool for
  – Large scale installations
  – Motion graphics
  – Complex data visualizations
              Overview
• PDE – Processing Development
  Environment
• Processing Library built into the PDE
• Language syntax identical to Java
• Extensive online set of references
  and examples
  – http://processing.org/reference/
  – http://processing.org/learning/
                 Basics
• Programs called sketches
• Sketches stored in folders called
  sketchbooks

• Demo – Processing’s Hello World
  – size
  – background
  – stroke
  – rect
           Basics Code
• Demo – Processing’s Hello World

    size(400, 400);
    background(192, 64, 0);
    fill(200);
    rect(150, 25, 100, 100);
                    Shapes
• Points – point(x, y);
• Lines – line(x1, y1, x2, y2);
• Rectangles
  – rect(xtopLeft, ytopLeft, width, height) //default

• Ellipses
  – ellipse(xcenter, ycenter, width, height)
    //default


• Placed in the order drawn
 Animation and Interaction
Before – everything was static
• setup() – runs once at the beginning
• draw() – runs every frame

Mouse interaction
• mouseX and mouseY
• mousePressed()
• etc… see
  http://processing.org/reference/ for
  more on mouse/keyboard input
Animation and Interaction Code
int xVal = 15;
void setup() {
   size(400,400);
   frameRate(50);
   background(255); //will only run once
}

void draw() {
   background(255); //will run every frame
   xVal = (xVal+1)%400;
   line(xVal,10,xVal,390);
   //line(mouseX,10,mouseX,390);
}

void mousePressed() {
   stroke(192, 64, 0);
   strokeWeight(5);
}
               Objects
• So far, we have been working with
  simple shapes/animation
• What about more complex objects?

• Basic data visualization
  – Temperature highs for last week
                Objects Code…
WeatherPoint[] weather = new WeatherPoint[7];
String info = "";
PFont font;

void setup() {
  size(400, 400);
  frameRate(50);
  smooth();
  weather[0] = new WeatherPoint(12, 57);
  weather[1] = new WeatherPoint(13, 48);
  weather[2] = new WeatherPoint(14, 43);
  weather[3] = new WeatherPoint(15, 56);
  weather[4] = new WeatherPoint(16, 65);
  weather[5] = new WeatherPoint(17, 72);
  weather[6] = new WeatherPoint(18, 74);
  font = createFont("Arial", 25f);
  //String[] fontList = PFont.list();
  //println(fontList);
}
              Objects Code…
void draw() {
  background(255);
  textFont(font, 20);
  fill(100);
  text("April", width/2 - textWidth("April")/2, 23);
  text(info, width - textWidth(info), height);
  pushMatrix();
    stroke(0);
    strokeWeight(1);
    line(25, height-25, width-25, height-25);
    line(25, height-25, 25, 25);
  popMatrix();
  for(int i = 0; i < weather.length; i++) {
    weather[i].drawWP((i+1)*width/10);
  }
}
                  Objects Code…
class   WeatherPoint{
  int   date;
  int   temp;
  int   xVal;
  int   yVal;
  int   alphaVal;

    WeatherPoint(int d, int t) {
      date = d;
      temp = t;
      alphaVal = 255;
      yVal = height - 25 - (temp*350/100);
    }

    void drawWP(int xv) {
      xVal = xv;
      noStroke();
      fill(255, 128, 0, alphaVal);
      ellipse(xVal, yVal, 20, 20);
    }
}
                      Objects Code
void mouseMoved() {
  int i = 0;
  boolean found = false;
  while(i < weather.length && !found) {
    if(mouseX > (weather[i].xVal - 10) && mouseX < (weather[i].xVal + 10)) {
      if(mouseY > (weather[i].yVal - 10) && mouseY < (weather[i].yVal + 10)) {
         found = true;
         weather[i].alphaVal = 128;
         info = "Temp for April " + weather[i].date +
                 " was " + weather[i].temp + "F";
      } else
         weather[i].alphaVal = 255;
    } else
      weather[i].alphaVal = 255;
    i++;
  }
  if(!found)
    info = "";
}
 Misc. Processing Examples
• Jellyfish - http://www.carohorn.de/jellyfish/

• We Feel Fine – http://www.wefeelfine.org/

• Thinking machine -
  http://www.turbulence.org/spotlight/thinkin
  g/

• Metamorphosis Video -
  http://vimeo.com/1747316?pg=embed&sec
   Questions?


 Email Pooja Mathur
pmathur2@illinois.edu

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:7
posted:10/19/2011
language:English
pages:15
pptfiles pptfiles
About