Graphics and Still Images John H. Krantz Hanover College

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

The General Beast

Screen Mosaic Triad Arrangement

Interlaced Projection

The Electron Beam

Seeing the Flicker

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.

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)

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

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.

Example JPG

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

ImageJ  Free at:  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

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.

File/Open

File/New

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

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

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

Aliasing and Pixel Effects

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

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

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

Putting a Graphic in a Webpage  

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.

Scanned Image

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

Low Light Digital Image

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

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

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

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

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

Edit/Clear

Edit/Clear Outside

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

Select Area Select square on Tool Box

Cropped Image – What thumb? Under Image Menu: Crop

Adjusting Rotating – Image Menu/ Rotate

Brightness and Contrast Image/Adjust/Brightness and Contrast

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

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

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

Final Picture  After adjust location

Paste Control  Copy  Blend

Paste Control  Difference  Transparent

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

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.

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

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

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

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

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

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:  Pick desired plug in.  Go to ImageJ folder, then to plugins folder  I suggest making folders under this to keep organized  Restart ImageJ

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

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

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

Mail List   Active community of people developing  They are very tolerant of idiotic questions. I have personal experience of their tolerance

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