1 Ethics of Computing MONT 113G, Spring 2012 Session 11 Graphics on the Web Limits of Computer Science.

Slides:



Advertisements
Similar presentations
A Digital Imaging Primer Nick Dvoracek Instructional Resources Center University of Wisconsin Oshkosh.
Advertisements

Color COM 366 Web Design & Production. RGB color Amount of light in each channel Closer to 255, whiter color gets Every color has value for red,
Graphics in the web Digital Media: Communication and Design
Information Technology Services North Dakota State University Lorna Olsen Get the Best Digital Images Possible What’s it all about anyway?
Contains 16,777,216 Colors. My Car is red My Car is red How do I add colors to my web page? Notepad Browser Works with the “Standard” colors: Red, Green,
Part A Multimedia Production Rico Yu. Part A Multimedia Production Ch.1 Text Ch.2 Graphics Ch.3 Sound Ch.4 Animations Ch.5 Video.
An Introduction to Scanning and Storing Photographs and Graphics Bryn Jones Aug 2002
CS110: Computers and the Internet Color and Image Representation.
Zinnia Bell. RAWimages are image files that have not yet processed, they contain minimally processed data from the image sensor of either a image scanner,
Understanding Web Graphics Web Design Section 5-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Prepared by George Holt Digital Photography BITMAP GRAPHIC ESSENTIALS.
Chpater 3 Resolution, File Formats and Storage. Introduction There are two factors that determine the quality of the picture you take; The resolution.
Color Names All standards-compliant browsers should handle these color names These color names can be used with the CSS properties of color and background-color.
Images and the Web web graphics. web graphics: constraints Due to the constraints imposed by varying degrees of Internet bandwidth, designing images for.
Faculty of Sciences and Social Sciences HOPE Website Development Graphics Stewart Blakeway FML 213
Computer Systems Nat 4.5 Computing Science Data Representation Lesson 4: Storing Graphics EXTENSION.
COMP Bitmapped and Vector Graphics Pages Using Qwizdom.
CSCI-235 Micro-Computers in Science Hardware Part II.
Lab #5-6 Follow-Up: More Python; Images Images ● A signal (e.g. sound, temperature infrared sensor reading) is a single (one- dimensional) quantity that.
Creating Web Documents: Images, files, etc. Web graphics Paint Shop Pro for conversions File management, Ws-ftp demonstration (Return to HTML next week)
THE COLORS OF LIGHT RED, GREEN and BLUE
Image Storage Bitmapped Graphics – in which an image is represented as a collection of dots Vector Graphics – in which an image is represented as a set.
1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 14 Introduction to Computer Graphics.
1 Ethics of Computing MONT 113G, Spring 2012 Session 13 Limits of Computer Science.
Bit-Mapped Graphic Data: Input (Capture) Hardware Multimedia – Section 2.
Web Image Basics Comp 140 December 2. Vector Graphics Can be repositioned or resized – Will not diminish output quality Typically stored in AI, EPS, PICT.
Digital Cameras And Digital Information. How a Camera works Light passes through the lens Shutter opens for an instant Film is exposed to light Film is.
1 Ethics of Computing MONT 113G, Spring 2012 Session 10 HTML Tables Graphics on the Web.
Digital Image Formats: An Explanation Guilford County SciVis V
Raster Graphics. An image is considered to be made up of small picture elements (pixels). Constructing a raster image requires setting the color of each.
Graphics workshop Library and Information Services University of St Andrews.
Image Representation. Digital Cameras Scanned Film & Photographs Digitized TV Signals Computer Graphics Radar & Sonar Medical Imaging Devices (X-Ray,
44212: Web-site Development Optimising Images for Web-pages Ian Perry Room:C49 Extension:7287
Marr CollegeHigher ComputingSlide 1 Higher Computing: COMPUTER SYSTEMS Part 1: Data Representation – 6 hours.
Web Graphics. Colours and Display Graphics and Modems 28.8kbps = 3.6 KB per second 36 KB takes 10 seconds to load. Pixels and color.
Graphics An image is made up of tiny dots called pixels (“picture elements”) The resolution determines the.
Multimedia Basics (1) Hongli Luo CEIT, IPFW. Topics r Image data type r Color Model : m RGB, CMY, CMYK, YUV, YIQ, YCbCr r Analog Video – NTSC, PAL r Digital.
Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. CMYK -natural RGB -monitor.
Things to Remember When working with digital images.
Pixels Minute University Richard Fisher 2/4/2002 Richard Fisher2 PixelsPixels  Picture Element  A single point in an electronic image  The.
Data Representation The storage of Text Numbers Graphics.
Images. Digital Images Rectangular arrays of pixel data Pixel - picture element, smallest addressable part of the frame buffer. Color depth - the depth.
CSCI-100 Introduction to Computing Hardware Part II.
Digital Images are represented by manipulating this…
Graphics Concepts Presentation
POWERPOINT PLUS 11/17/07 Class Notes. WHAT IS A PIXEL A pixel is a number that represents the intensity of light at a square spot in the picture. Pixels.
1 Perception and VR MONT 104S, Fall 2008 Lecture 20 Computer Graphics and VR.
HTTP transaction with Graphics HTML file + two graphics files.
Image File Formats Harrow Computer Club – Wed, 1 Dec 2010 Bob Watson MA CMath MIMA MBCS.
Digital Image Formats: An Explanation Guilford County SciVis V
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
Scanner Scanner Introduction: Scanner is an input device. It reads the graphical images or line art or text from the source and converts.
Graphics and Image Data Representations 1. Q1 How images are represented in a computer system? 2.
Software Design and Development Storing Data Part 2 Text, sound and video Computing Science.
Unit 2.6 Data Representation Lesson 3 ‒ Images
Understanding Web Graphics
Images Data Representation.
Binary Representation in Audio and Images
Computer Science Higher
Pixel, Resolution, Image Size
A computer display is made up of small squares, called pixels.
Digital Images.
Image File Size and File Compression
Graphics Basic Concepts.
Representing Images 2.6 – Data Representation.
Web Design and Development
Web Programming– UFCFB Lecture 7
Color and Images.
Multimedia System Image
Basic Concepts of Digital Imaging
Presentation transcript:

1 Ethics of Computing MONT 113G, Spring 2012 Session 11 Graphics on the Web Limits of Computer Science

2 What is a Graphics file? moon.gif GIF89a¶ˇÃˇˇôˇˇfˇˇ3ˇˇÊøß5뢑Zµ´T¨Yß6;≥YØh7^ „ŸMöù;r- €êπÑ+˜`À≥t€Ω´w!PÅ|≈Bå[8∞cƒw€ée‹±/‚ƒç?Ã6≥C ߬=<∞f™ ú¡z.kyÊ^“°O”uJÿÙ^≥d%äîÕr‰êäC~Àÿvo¥©U moon.gif ?

3 Storage of Graphic Images Graphics are stored as 1's and 0's on the disk. The numbers form a code that the browser interprets to display the graphic on the monitor. Computer displays are composed of many dots, known as picture elements (pixels). The numeric code in an image file specifies the color of each pixel in the image.

4 Resolution The number of pixels on the screen determines the resolution of the image. More pixels per inch implies better resolution and better image quality. Older PC's had resolutions of 800 pixels x 600 pixels. Older Macs had resolutions of 640 pixels x 480 pixels. Newer PC's and Macs have much higher resolutions (e.g x 768).

5 Resolution affects Image Size The more pixels there are per inch (ppi) the smaller each pixel is. Image sizes are specified in terms of pixels. So the same image will appear smaller on a monitor with a higher resolution. Increasing resolution decreases the image size.

6 Bit Depth The number of colors each pixel can assume contributes to image quality. The bit depth of an image is the number of bits used to specify color for that image. The bit depth determines how many colors can be shown. Black and white monitors have 2 colors. Only one bit is needed to specify color (bit depth = 1). A bit depth of n allows representation of 2 n colors.

7 Changing Bit Depth Some images don't need a large bit depth: Bit depth 8 Bit depth 4 Bit depth 1 Smaller bit depths help to keep the file size (in kb or mb) small. This makes it faster to download the image file.

8 Bit Depth and Image Quality For more complex images, higher bit depth leads to better resolution: Bit depth = 32 (16.7 million colors)

9 Indexed Color With indexed color, the computer stores a table of colors (256 colors for bit depth of 8). Each pixel is given a value between 0 and 255, which corresponds to one of the colors in the table.

10 RGB (Red, Green, Blue) Color In the RGB color system, each pixel is given a specified amount of red, green and blue (between 0 and 255). The color value is written in Hexadecimal, using 2 digits for each color: #FF0000Red #00FF00Green #0000FFBlue #FFFFFF? #000000? #880066Purple

11 Image File Compression Images on the web are stored as separate files that must be downloaded from the server to the client to be viewed. If the image file size is large, it will take a long time to download. Therefore, it is important to try to keep the file size as small as possible without losing much image quality. Ways to reduce file size: 1. Reduce the size of the image (in pixels) 2. Reduce the resolution of the image. 3. Reduce the bit depth of the image 4. Use image file compression (GIF or JPEG)

12 GIF files The Graphics Interchange Format (GIF) is excellent for compressing images with large areas of uniform color. It is "lossless", meaning that the original image can be regenerated with no loss of information. GIF supports transparency in images. GIF supports animations (animated GIF's) This format is limited to 256 colors.

13 JPEG compression The JPEG (Joint Photographic Experts Group) compression method works well for complex images, such as photographs. JPEG supports millions of colors (up to a bit depth of 24). JPEG is "lossy", meaning that the original image cannot be regenerated exactly from the original. Some information is lost in the conversion to JPEG.

14 Church-Markov-Turing Hypothesis The Church-Markov-Turing Thesis: Any non-trivial computer language is apparently capable of computing no more and no fewer functions than all other non- trivial programming languages. So, all languages are equally powerful. Python is at least as powerful as any other programming language. Therefore we might think that we can solve any problem with a Python program. In practice we cannot, because...

15 Limitations of Computer Science In practice, we cannot solve every problem with a program because... 1)The execution time of a program may be too long. 2)The problem may be non-computable. 3)We may not know how to solve the problem. E.g. Computer Vision Artificial Intelligence Modeling complex systems such as weather etc.

16 Execution Time The execution time of a program can be a limitation in what we can compute. Examples: Taxes: How long would it take to sort taxpayers by Social Security number? Electricity: What is the most efficient routing of power lines through a region or neighborhood? Tractable problems can be solved in a reasonable amount of time. Intractable problems require huge amounts of time to solve.

17 A Tractable Problem Suppose we have a list of patients and an associated list of patient weights. We want to write a program that prints out the names of patients with weight above a given value. The names are stored in a list of strings. The weights are stored in a parallel list of real numbers. AmyTedAnnTom name n weight n...

18 The solution and its running time The program examines each patient in turn. The running time is proportional to the number of patients in the list (n). n (# patients)time (seconds) time n Python solution: for i in range(n): if weight[i] > targetWeight: print name[i]

19 Linear Running time The graph of the running time of the previous problem is a line. t = 5.1 x n We say the the running time is linear. Problems that have linear running times can be solved in a reasonable amount of time. These problems are tractable.

20 Another example Suppose we want to sort the patients by their weight. I.e. we would like to rearrange the list so that the weights go from lowest to highest. Many sorting algorithms run as a function of n 2. For example: t = 3.2 x n 2 Others run as a function of n log 2 n. For example: t = 2.1 x n log 2 n Logarithms: If 2 x = n, then log 2 n = x 2 3 = 8, log 2 8 = 3

21 Graphing the running time for a sorting function # people (n)t (seconds) time n n n2n2 n log n Sorting a list takes more time than searching a list, but it still can be done in a reasonable amount of time.

22 Polynomial and Polylogarithmic running times In general, tractable problems are problems that have running times that are a polynomial function of n (the size of the input) or a polylogarithmic function of n. Examples: t = 4n 3 + 5n 2 -3 t = n 2 (log 2 (n)) 3 t = 17 n 6 - log 2 n + 6n