CSE1710. Big Picture. Reminder

Transcription

1 CSE1710 Click to edit Master Week text 09, styles Lecture 17 Second level Third level Fourth level Fifth level Fall 2013! Thursday, Nov 6, Big Picture For the next three class meetings, we will be covering Chapter 5 of the textbook. We will be using images to demonstrate the concepts of iterative and selection. Reminder On Thurs Nov 20/Fri Nov 21, we will have out final labtest. 2 1

2 Images Take good notes there is relatively little material in the textbook; most of the material will be provided in lecture 3 To work with images, we need to: 1. work with the file system 2. work with the operating system s window manager and the platform s graphics hardware 3. understand colour models and image representation formats 4. understand the services of the RasterImage and the Pixel classes 5. iterate and construct conditions 4 4 2

3 A Code Segment, deconstructed VS 5 File pathnames are system dependent The file separator can be abstracted away as File.separator! Windows Local File System (LFS):! C:\USER\DOCS\LETTER.TXT!! Windows Uniform Naming Convention (UNC)! \\Server\Volume\File!! Unix-like OS! /home/user/docs/letter.txt! 6 6 3

4 The RasterImage class! provides services to create and to manipulate raster images 7 7 The RasterImage class a little more info! attributes are:! filename : String (might be null)! filenameextension : String (might be null)! title : String! width : int! height : int! a collection of pixels which are arranged in a rectangular grid! 8 8 4

5 A rectangular grid of pixels pixel a single point at a given coordinate that has specific colour attributes 9 9 A rectangular grid of pixels

6 A rectangular grid of pixels A rectangular grid of pixels

7 A rectangular grid of pixels when the grid becomes large enough and the pixels become small enough, the human eye ceases to see the individual pixels the exact threshold for this is complicated and depends on angular displacement of the eye within the visual field A rectangular grid of pixels pixel

8 The Rectangular Grid of Pixels! each element has a (x,y) coordinate! the convention is that (0,0) is in the upper left hand corner! the x part of coordinate indicates the column! the y part of the coordinate indicates the row! in the door and down the stairs The Rectangular Grid of Pixels! the RasterImage class provides services to! get all of the pixels from an instance of a RasterImage! get a specific pixel from an instance of a RasterImage

9 What is a Pixel? A Pixel object encapsulates several attributes: the raster image to which it belongs its x and y location within its parent picture its colour Of these three attributes only one attribute is mutable*: the pixel s colour. the pixel s (x,y) coordinate within its parent image cannot be changed; they are immutable! 17 *mutable means able to be changed! Services for a Pixel! once we have a pixel, what can we do with it?! we can query its state! we can modify its state! both of these things concern the representation of colour

10 Pixels: How to mutate Suppose the variable p is an object reference, and refers to a Pixel object. So the only attribute I can change in a Pixel object is its colour. here are some examples: p.setcolor( ); this must be a reference to a Color object! 1. use a predefined color! 2. construct one from scratch! 3. use a reference from somewhere else (e.g., another pixel)! 19 Pixels: How to mutate p.setcolor( ); this must be a reference to a Color object! look at the API for the Color class! 1. use a predefined color! 2. construct one from scratch! 3. use a reference from somewhere else (e.g., another pixel)! There are many pre-defined colors: Color.RED Color.MAGENTA Color.BLACK Color.black 20 10

11 Pixels: How to mutate p.setcolor( ); this must be a reference to a Color object! 1. use a predefined color! Here is a constructor: new Color(255, 0, 0) 2. construct one from scratch! 3. use a reference from somewhere else (e.g., another pixel)! 21 Pixels: How to mutate p.setcolor( ); this must be a reference to a Color object! 1. use a predefined color! 2. construct one from scratch! 3. use a reference from somewhere else (e.g., another pixel)! look at the API for the Pixel class to see the accessor method for an object s color attribute! r.getcolor() 22 11

12 A Crash Course in Colour Perception and Colour Models! Two Color Models: RGB and HSV! The RGB model is much more intuitive than HSV! We ll first explain RGB, then show the mapping into HSV space! First, we will discuss the basics of colour perception The Retina! the retina of the human eye is packed with photoreceptors! the photoreceptors receive light stimulus via the lens of the eye

13 The Retina! there are two types of photoreceptors in the retina!! rods : specialized for sensitivity! lower threshold, more sensitive than cones! provide sensing that something happened, but not specialized to colour! cones : specialized for colour and acuity! come in three types! short-wavelength! medium-wavelength! long-wavelength The Retina! the fovea is a specialty region of the retina, more or less in the centre of the retina! rods: none! cones: completely and tightly packed! specialized for acute detailed vision! towards the periphery of retina! rods: more! cones: fewer! the proportion of rods to cones increase toward edge of retina!

14 Hue Hue corresponds to what we typically refer to as colour. It is determined by the light s wavelength Blue perceived by short-wavelength cones Green perceived by medium-wavelength cones Red perceived by long-wavelength cones Colour is complicated! perception based on 2 types of receptors (hue and intensity)! our brain does more seeing than our eyes! what we call colour is more accurately described as hue and brightness

15 A Key Fact! the combination of red, blue and green together is indistinguishable from white to the human eye! this is exploited by computer displays Pixels and Subpixels! Many displays have a cluster of R, G, B sub-pixels for each pixel! max intensity for R, G, B = seen as white! min intensity for R, G, B = seen as black! and other saturated colours

16 RGB Colour Space white cyan green yellow magenta blue red black Color Red Green Blue Red Green Blue Yellow Cyan Magenta White Black

17 Other cases! if the RGB intensities are all the same! this gets perceived as shade of grey! if the RGB intensities are different! then perception depends on relative difference between strongest and weakest intensities! Bottom line: Given a colour out in the world, it can be very difficult to determine its corresponding RGB values Hue-Saturation-Value (HSV) Model! Each of hue, saturation, and brightness individually specified! similarities to the way humans perceive and describe colour! Given a colour out in the world, it is often easier to determine its corresponding HSV values than its RGB values

18 Small digression:! End of digression. back to regular programming Let s talk about two forms of iteration!! one form: built upon a boolean condition! another form: built around a collection!

19 The Collection Form of Iteration!! a collection is simply a bunch of elements, possibly in a particular order, but not necessarily! the elements must have a type (e.g., Pixel)! there are certain sub categories for collections! a set is a collection in which duplicates are not permitted! a list is a collection in which the elements are ordered! an array is a specific kind of list collection, set, list : abstractions, not specific to Java array : a Java programming element The Collection Form of Iteration!! for ( Type-of-Element e : Identifier-of-Collection ) { // here is the body of the loop } } This is called an enhanced for loop

20 The Collection Form of Iteration! It just so happens that a RasterImage object can function as a collection of Pixel elements for (Pixel p : myimage) { } // here is the body of the loop The Condition Form of Iteration! for (; boolean expression ;) { } // here is the body of the loop

21 The Condition Form of Iteration! for ( initial ; boolean expression ; bottom ) { } // here is the body of the loop Iterating over all of the pixels (v.2) The second version of this involves iterating over a set of indices and using an index-based accessor method to obtain a reference to each and every pixel! There are two ways to do this: by index in the array of pixels and by row and column index. First by index in the array of pixels 42 21

22 A Crash Course in Arrays Pixel[] thepixels = mypict.getpixelarray(); int firstpixelindex = 0; int lastpixelindex = thepixels.length-1; thepixels[60].getcolor(); this retrieves the 61 tst element in the array! thepixels[lastpixelindex].getcolor(); // the final //element thepixels[0].getcolor(); // the first element length is a special final attribute of arrays in Java! WHY minus 1?! 43 A Crash Course in Arrays Pixel[] thepixels = mypict.getpixelarray(); int firstpixelindex = 0; int lastpixelindex = thepixels.length-1; thepixels[lastpixelindex+1].getcolor(); // runtime error thepixels[-1].getcolor(); // runtime error 44 22

23 Iterating over all of the pixels (v.2) the array of pixels Pixel[] thepixels = mypict.getpixels(); // this sets the color of the first pixel thepixels[firstpixelindex].setcolor(color.red); // this sets the color of the second pixel thepixels[firstpixelindex+1].setcolor(color.red); // // this sets the color of the second-last pixel thepixels[lastpixelindex-1].setcolor(color.red); // this sets the color of the last pixel thepixels[lastpixelindex].setcolor(color.red); so how could we automate this? 45 Iterating over all of the pixels (v.2) Pixel[] thepixels = mypict.getpixels(); int firstpixelindex = 0; int lastpixelindex = thepixels.length-1; int currentindex = firstpixelindex; boolean iswithinbounds = currentindex <= lastpixelindex; for( ; iswithinbounds ; ) { Pixel currentpixel = thepixels[currentindex]; currentpixel.setcolor(color.red); mypict.repaint(); currentindex++ iswithinbounds = currentindex <= lastpixelindex; } 46 23

24 Iterating over all of the pixels (v.2) Pixel[] thepixels = mypict.getpixels(); int firstpixelindex = 0; int lastpixelindex = thepixels.length-1; int currentindex = firstpixelindex; for( ; currentindex <= lastpixelindex; ) { Pixel currentpixel = thepixels[currentindex]; currentpixel.setcolor(color.red); mypict.repaint(); currentindex++ } 47 Iterating over all of the pixels (v.2) Pixel[] thepixels = mypict.getpixels(); int firstpixelindex = 0; int lastpixelindex = thepixels.length-1; for(int currentindex = firstpixelindex; currentindex <= lastpixelindex; ) { Pixel currentpixel = thepixels[currentindex]; currentpixel.setcolor(color.red); mypict.repaint(); currentindex++ } 48 24

25 Iterating over all of the pixels (v.2) Pixel[] thepixels = mypict.getpixels(); int firstpixelindex = 0; int lastpixelindex = thepixels.length-1; for(int currentindex = firstpixelindex; currentindex <= lastpixelindex;currentindex++) { Pixel currentpixel = thepixels[currentindex]; currentpixel.setcolor(color.red); mypict.repaint(); } Flow of Control! I t e r a t i o n loop body S B 1 B 2 X 50 Copyright 25

26 5.2.2 The for statement! Flow: Syntax : false { } 51 Copyright S for X initial condition { body } bottom condition true Statement -S for (initial; condition; b ottom) { body; } Statement -X Algorithm: 1. Start the for scope 2. Execute initial 3. If condition is false go to 9 4. Start the body scope { 5. Execute the body 6. End the body scope } 7. Execute bottom 8. If condition is true go to 4 9. End the for scope Example! final int MAX = 10; final double SQUARE_ROOT = 0.5; for (int i = 0; i < MAX; i = i + 1) { double sqrt = Math.pow(i, SQUARE_ROOT); output.print(i); output.print(\t); // tab output.println(sqrt); } 52 Copyright 26

27 for (initial; condition; bottom)! for (int i = 0; i < MAX; i = i + 1) {... } int i; for (; i < MAX; i = i + 1) {... } 53 Copyright for (initial; condition; bottom)! Can it be omitted?! Can it be set to the literal true?! What if it were false at the beginning?! Is it monitored throughout the body?! 54 Copyright 27

28 for (initial; condition; bottom)! Can it be any statement?! Will the loop be infinite if it is omitted?! 55 28