Iat 265
Download
1 / 24

IAT 265 - PowerPoint PPT Presentation


  • 114 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