iat 265
Download
Skip this Video
Download Presentation
IAT 265

Loading in 2 Seconds...

play fullscreen
1 / 24

IAT 265 - PowerPoint PPT Presentation


  • 113 Views
  • Uploaded on

IAT 265. Images in Processing PImage. Outline. Programming concepts Classes PImage PFont. Loading Images. Loading Images Give your project a name and save. Place the image file in: <processing dir>/sketchbook/<project name>/data/ Use this code:.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' IAT 265' - roy


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
iat 265

IAT 265

Images in Processing

PImage

outline
Outline
  • Programming concepts
    • Classes
    • PImage
    • PFont

IAT 265

loading images
Loading Images
  • Loading Images
    • Give your project a name and save.
    • Place the image file in:
      • <processing dir>/sketchbook/<project name>/data/
    • Use this code:

PImageimg= loadImage(“<image filename>”);

IAT 265

displaying images
Displaying Images
  • image( PImageimg, int x, int y);shows your image.

image(img, 0, 0) will display your image from the last slide at the top left of the window.

IAT 265

accessing pixels
Accessing Pixels
  • The PImage class allows you to access the RGB values of each individual pixel of the image, with the pixels[] array.
  • You can get the width and height of the image file using the width and height fields of PImage.

IAT 265

accessing pixels1
Accessing Pixels
  • How do we know which pixel to look for in the array?

0

1

2

3

4

0

1

2

3

IAT 265

accessing pixels2
Accessing Pixels
  • How do we know which pixel to look for in the array?

0

1

2

3

4

0

1

2

3

0

IAT 265

accessing pixels3
Accessing Pixels
  • How do we know which pixel to look for in the array?

0

1

2

3

4

0

1

2

3

0

1

IAT 265

accessing pixels4
Accessing Pixels
  • How do we know which pixel to look for in the array?

0

1

2

3

4

0

1

2

3

0

1

2

3

IAT 265

accessing pixels5
Accessing Pixels
  • Array Index
    • x + y*width

0

1

2

3

4

(4, 0) = 4 + 0*5 = 4

(3, 2) = 3 + 2*5 = 13

0

1

2

3

0

1

2

3

IAT 265

accessing pixels6
Accessing Pixels
  • What would a piece of code look like that got a color from a pixel?
  • Let’s look at some applications of this.

PImageim = loadImage(“test1.jpg”);

color c1 = im.pixels[3 + 2*im.width]; // get color at (3, 2)

stroke(c1); // set our line color

IAT 265

window vs image
Window vs. Image
  • The drawing window also has a pixels[] array.
    • You must call loadPixels(); to get the image from the screen
    • You don’t need a PImage object.

loadPixels();

color c2 = pixels[3 + 2*width];

// gives us the color at (3, 2) in the window.

IAT 265

window vs image1
Window vs. Image
  • When would we want to use both of these?
    • Use the Window’s pixels if you want to draw more things based on the image that’s already on the screen.
    • Use the Image’s pixels if you want to manipulate the pixels of the image before you draw them.

IAT 265

2d arrays
2D Arrays
  • Java lets us make Arrays of Arrays, otherwise called 2D Arrays. These are very useful for accessing arrays of pixels like the ones we’ve been working with.

int[][] bob = new int[3][4];

color[][] pixels2d = new color[200][200];

IAT 265

2d arrays1
2D Arrays
  • Processing doesn’t provide us with a 2D array of pixels to use, so let’s develop a class that will make manipulating pixels easier.

IAT 265

2d arrays2
2D Arrays
  • Interestingly, 2D Arrays are just covering up a 1D array much like the pixels[] array.

color[][] pixels2d = new color[20][20];

color c2 = pixels2d[3][2];

color[] pixels1d = new color[400];

color c1 = pixels1d[3 + 2*20];

Underneath, these two pieces of code do the same thing. The 2D array

convention just makes it easier for us to access the array based on things

like our x and y values.

IAT 265

pfont
PFont
  • PFont is the Processing class for manipulating fonts
    • Like PImage for images
  • Use PFont with
    • PFontloadFont()– loads a font
    • textFont(PFont font, int size)– sets the current font
    • text(String str, int x, int y) – draws a string in the current font at the current location

IAT 265

simple example
Simple example

// the fonts must be located in the data directory

PFont engravers = loadFont("EngraversMT-48.vlw");

PFontcour = loadFont("Courier-32.vlw");

textFont(engravers, 44);

text("word", 10, 30);

textFont(cour, 44);

text("word", 10, 60);

IAT 265

use fill to change the color of text
Use fill() to change the color of text

// the fonts must be located in the data directory

PFont engravers = loadFont("EngraversMT-48.vlw");

PFontcour = loadFont("Courier-32.vlw");

fill( 0, 255, 0 );

textFont(engravers, 44);

text("word", 10, 30);

fill( 255, 0, 0 );

textFont(cour, 44);

text("word", 10, 60);

IAT 265

textmode sets the alignment
textMode sets the alignment
  • textAlign( LEFT );
    • x, y is the upper left hand corner of the text
  • textAlign( RIGHT );
    • x, y is the upper right hand corner of the text
  • textAlign( CENTER );
    • x, y is the upper center of the text

IAT 265

producing text effects
Producing text effects
  • All the transform methods apply to drawing text
    • That means you can translate, rotate, and scale text
  • Combined with draw(), this means you can move text around the screen in real time
    • Remember, the movement of the rocket and asteroids in our asteroids example was just translation and rotation
  • So you can make textual machines where text moves around the screen!

IAT 265

processing example
Processing example

void draw( )

{

image( im, mouseX-370, mouseY-210 );

color c1 = im.pixels[365 + 210 * im.width ] ;

loadPixels();

c1 = pixels[ 3 + 2 * width ] ;

stroke( c1 );

fill( c1 );

textAlign( LEFT );

ellipse( mouseX, mouseY, 20, 10 );

textFont( engrvr, 44 );

text( "Yo!", mouseX + 20, mouseY + 20 );

fill( 255, 0, 0);

pushMatrix();

textAlign( RIGHT );

rotate( 0.2);

textFont( courier, 44 );

text( "Yo?", mouseX, mouseY + 100 );

popMatrix();

}

PImageim ;

PFontengrvr ;

PFont courier ;

void setup()

{

size( 600, 600 );

im = loadImage( "cdshaw.96.jpg" );

for( inti = 600 ; i >= 0 ; i -= 50 )

image( im, i, i );

engrvr = loadFont( "EngraversMT-48.vlw" );

courier = loadFont( "Courier-32.vlw" );

textFont( engrvr );

}

IAT 265

review
Review
  • Graphics:

image( img, x, y )

  • PImage is also a class.
    • Each actual image is an object

IAT 265

review1
Review
  • Object Oriented Programming
    • Class -- a type you define
    • Instance -- one variable of a class
    • Fields -- variables within a class
    • Methods -- functions that act within a class
    • Constructor -- create an instance of a class

IAT 265

ad