1. Graphics and Still Images John H. Krantz Hanover College

2. Outline  Background  Images  File Types  Acquiring  Using ImageJ  Basics  Advanced

3. The General Beast

4. Screen Mosaic Triad Arrangement

5. Interlaced Projection

6. The Electron Beam

7. Seeing the Flicker

8. Graphics vs. Images  Some definitions: mine for clarity here:  Graphics Def: computer generated or drawn by you.  Image: scanned, captured, take photograph or an graphic file not generated by you.  Difference:  In a graphic, you can directly manipulate the elements because you drew them – Sprites  In an image, you can manipulate pixels but not directly the elements. This has a great impact.

9. Images or Graphics on the Screen  Pixels: smallest picture element  Pixels are not screen dots!!!  Several dots (at least three, one of each color) make up each pixel)  Bitmat: An array of information that contains the information for the image.  It is a 3 dimensional array  Width x Height x 24 (8 for each color)  So can be huge  (.bmp and.tif or.tiff are most common bitmaps)

10. Graphic and Image Formats  Bitmap (bmp, PCT, Tiff) – big, not good for web  Graphic Interchange Format (Gif) can animate  8 bits of color – palette or lookup table or LUT – no loss of spatial information  Can be some legal issues – make sure the generator legally can generate GIF’s  Generally best compression for simple graphics – bad for photos  Can generate transparent regions  Can Animate

11. Graphics and Image Formats  JPG  Generally better for images and photos  Spatial not color compression, can distort image spatially and more loss with each save  Now can animate as well.

12. Example JPG

13. BMP vs JPEG File Sizes Both images are the same relative size..BMP 900kb.JPEG High Quality ~700kb

14. ImageJ  Free at: http://rsb.info.nih.gov/ij/index.html http://rsb.info.nih.gov/ij/index.html  Overview  Java program  Interface a bit awkward because it is free  Expandable via plug-ins  Covers all basic editing and many advanced - very advanced  Scientific quality image editor  Used in many technical applications

15. Basic ImageJ Interface  Menus and Tool bars  File Open, Save, Save As, Revert  Edit Cut, Copy, Paste, Selection, Options  Image Basic Image Editing  Process More Advanced Image Editing Options  Shapes are for selection or drawing. The “A” is for adding text.

16. File/Open

17. File/New

18. Drawing with ImageJ  Very simple but easy  Access to pixels  No anti-aliasing in most drawing modes  Downside: jaggies  Upside: in complete control of graphics  Can store and edit in lots of formats

19. Aliasing  Technical definition:  When an image contains frequencies beyond the range of the sampling matrix, the wrap-around and occur as lower frequencies, distorting the image

20. Aliasing  Description of aliasing  Generally try to draw and image that has too fine of detail or sharp edges  Causes “jaggies”  And pixel artifacts  That is you can notice the pixels

21. Aliasing and Pixel Effects

22. Effects of Edges  Craik-Cornsweet and Minimal Contours Craik-Cornsweet and Minimal Contours Craik-Cornsweet and Minimal Contours

23. Anti-aliasing  Solution to aliasing  Bandlimiting or anti-aliasing  Essentially blur the edges or image so fine detail is lost  In a lot of Software  Ideally use a gaussian filter  This is the shape of CRT electron beam which is why dots on screen never show up  Infante (1985); Silverstein et al. (1990)  Many graphics software and even some languages anti-alias (Java2D) but it is not calibrated but good enough with sufficient resolution

24. Try some  When open in ImageJ, all images are bitmaps, but can be edited in different types  Basic Graphics Objects  Adding Text  Saving in Different Format  File/Save As

25. Putting a Graphic in a Webpage  

26. Acquiring  Scanning  Flatbed gives best quality.  Use 35 MM film for pictures – best resolution  Scan at a high level and sample down later  Any model seems good this day.

27. Scanned Image

28. Digital Cameras  No loss in Scanning  CCD  3.1 Megapixel at least if need photo quality and larger  there are 5 megapixel  Can use lower image if only need web  But do not sacrifice image quality  Easy to download  Can be good in low light

29. Low Light Digital Image

30. Taking Photos Digitally  Focusing: Automatic and Manual  Regular focus  Macro – allows focusing up close  Spot Focus: focus is determined by point  Shutter Speed  Zoom:  Do not use digital zoom – if need more zoom, do it on computer later  On my default is off except for movies

31. Taking Pictures (cont.)  White Balance, controls for our color constancy White Balance, controls for our color constancy White Balance, controls for our color constancy  Effect of the Illuminant Effect of the Illuminant Effect of the Illuminant  Flash:  often I keep it off.  Image Size:  I keep at standard (full pixel density, some JPG compression). Balance between image quality and ability to store on disk ~ 1 Meg/picture

32. Use of Flash FlashNo Flash Watch for reflections. Can get inexpensive table camera tripods.

33. Basic Editing in ImageJ  Edit a bitmap  Most Important Command: Revert  Under the File Menu  Takes back to last save – careful with saves.  Ctrl-z is undo but only one step.  Suggest do “save as” or make copy first so don’t destroy original  Resize for web: under Image: Scale or Image/Adjust: Size

34. Basic Editing  Often starts with selecting a region  Most editing will then occur defined by the selection  Edit/Clear  Edit/Clear Outside  Image/Crop  Image/Adjust/Brightness and Contrast

35. Edit/Clear

36. Edit/Clear Outside

37. Cropping or my Thumb got in the way – well not really

38. Select Area Select square on Tool Box

39. Cropped Image – What thumb? Under Image Menu: Crop

40. Adjusting Rotating – Image Menu/ Rotate

41. Brightness and Contrast Image/Adjust/Brightness and Contrast

42. An Example  How symmetrical am I?  The original image

43. Select the region  I used the rectangular region – easier  Centered on some feature in middle – find the x value (I used a gap in my teeth)  Then use Copy from the Edit menu or CTRL-c

44. Flip and Paste Image/Rotate Flip Horizontally Edit/Paste or CTRL-V

45. Final Picture  After adjust location

46. Paste Control  Copy  Blend

47. Paste Control  Difference  Transparent

48. Converting Images  Save as for Image Types – use GIF or JPG  Must add extension, it is not added automatically  Always use save as to save anything other than a TIFF  This is a full color uncompressed image

49. Converting Images  Converting Color Depth or to Grayscale image  Under Image Menu/Type  8-bit, 16-bit, 32-bit are grayscale  8-bit RGB and RGB are color  It is not possible to arbitrarily convert images  but ImageJ gives table of possible conversions  e.g. can only convert JPG to and 8bit grayscale.

50. Adding to Images  Setting Colors  Edit: Options: Foreground Color  Image: Colors  Adding Text  Set font in  Edit: Options: Font  Draws in selected color

51. Adding to Images  Drawing a basic graphics object  Draw width:  Edit: Options: Line Width  Select shape  Put shape on image  Edit: Draw or ctrl-D  Filled regions  Same as above, but:  line width not important  Use Edit: Fill or ctrl-F

52. Filtering Images  Under the Process menu  Sharpen: more edges  Smooth: dull details

53. Filtering Images  Edges: finds them – so type of outline

54. Filtering Images  Gaussian: blurs  Amount of blur depends upon the standard deviation (called radius)

55. Plugins  These are the heart and sole of ImageJ  Some have limits but as developments go on, you will be able to get new ones without these limits  How to get: http://rsb.info.nih.gov/ij/plugins/ http://rsb.info.nih.gov/ij/plugins/  Pick desired plug in.  Go to ImageJ folder, then to plugins folder  I suggest making folders under this to keep organized  Restart ImageJ

56. More on Plugins  Can build your own  Most built by users  Uses Java  instructions on web page  Some good examples  RGB Recolor  Inverter  File opener: multiple files  AVI writer  Color Chooser or Color Picker

57. Creating Shortcuts  Under Plugins menu  Pick Shortcuts  Then Create Shortcut  Lists all commands  Type letter that will be matched with control button.  Under Plugins/Utilities/Shortcuts will show all current shortcuts

58. Adding Shortcuts Example  Pick command JPEG  This saves files in a jpeg format  A pain to get to usually  Use “J”  Try ctrl-J

59. Mail List  http://rsb.info.nih.gov/ij/list.html http://rsb.info.nih.gov/ij/list.html  Active community of people developing  They are very tolerant of idiotic questions. I have personal experience of their tolerance

60. Assignment  Take series of images that you might want shown in sequences as part of a study