TOPIC 4 INTRODUCTION TO MEDIA COMPUTATION: DIGITAL PICTURES

Similar documents
CS101 Lecture 12: Digital Images. What You ll Learn Today

Images and Colour COSC342. Lecture 2 2 March 2015

Image Perception & 2D Images

Chapter 8. Representing Multimedia Digitally

CS101 Lecture 19: Digital Images. John Magee 18 July 2013 Some material copyright Jones and Bartlett. Overview/Questions

HTTP transaction with Graphics HTML file + two graphics files

CS 262 Lecture 01: Digital Images and Video. John Magee Some material copyright Jones and Bartlett

Fundamentals of Multimedia

Wireless Communication

4/9/2015. Simple Graphics and Image Processing. Simple Graphics. Overview of Turtle Graphics (continued) Overview of Turtle Graphics

UNIT 7B Data Representa1on: Images and Sound. Pixels. An image is stored in a computer as a sequence of pixels, picture elements.

Bit Depth. Introduction

Pictures and Arrays. You have been returned to where you were last working. Return to syllabus Edit preferences

Byte = More common: 8 bits = 1 byte Abbreviation:

UNIVERSITY OF CALICUT INTRODUCTION TO MULTIMEDIA QUESTION BANK

CSE1710. Big Picture. Reminder

Q A bitmap file contains the binary on the left below. 1 is white and 0 is black. Colour in each of the squares. What is the letter that is reve

Dr. Shahanawaj Ahamad. Dr. S.Ahamad, SWE-423, Unit-06

Raster (Bitmap) Graphic File Formats & Standards

The Need for Data Compression. Data Compression (for Images) -Compressing Graphical Data. Lossy vs Lossless compression

Introduction to Photography

PENGENALAN TEKNIK TELEKOMUNIKASI CLO

Technology and digital images

Vision, Color, and Illusions. Vision: How we see

CMPSC 390 Visual Computing Spring 2014 Bob Roos Review Notes Introduction and PixelMath

In order to manage and correct color photos, you need to understand a few

Assistant Lecturer Sama S. Samaan

Lecture #2: Digital Images

Introduction to Multimedia Computing

Digital Media. Lecture 4: Bitmapped images: Compression & Convolution Georgia Gwinnett College School of Science and Technology Dr.

Photoshop 01. Introduction to Computer Graphics UIC / AA/ AD / AD 205 / F05/ Sauter.../documents/photoshop_01.pdf

Computer Programming

COMPSCI 111 / 111G Mastering Cyberspace: An introduction to practical computing. Digital Images Vector Graphics

The BIOS in many personal computers stores the date and time in BCD. M-Mushtaq Hussain

Aperture. The lens opening that allows more, or less light onto the sensor formed by a diaphragm inside the actual lens.

Digitizing Color. Place Value in a Decimal Number. Place Value in a Binary Number. Chapter 11: Light, Sound, Magic: Representing Multimedia Digitally

Graphics for Web. Desain Web Sistem Informasi PTIIK UB

LECTURE 02 IMAGE AND GRAPHICS

Learning Outcomes. Black and White pictures. Bitmap Graphics. COMPSCI 111/111G Digital Images and Vector Graphics

Astronomy and Image Processing. Many thanks to Professor Kate Whitaker in the physics department for her help

A picture is worth a thousand words

Colors in Images & Video

Chapter 3 Graphics and Image Data Representations

5/17/2009. Digitizing Color. Place Value in a Binary Number. Place Value in a Decimal Number. Place Value in a Binary Number

Digital Imaging - Photoshop

RGB COLORS. Connecting with Computer Science cs.ubc.ca/~hoos/cpsc101

15110 Principles of Computing, Carnegie Mellon University

UNIT 7C Data Representation: Images and Sound

Improving digital images with the GNU Image Manipulation Program PHOTO FIX

DIGITAL IMAGING FOUNDATIONS

15110 Principles of Computing, Carnegie Mellon University

CSE1710. Big Picture. Reminder

Output Model. Coordinate Systems. A picture is worth a thousand words (and let s not forget about sound) Device coordinates Physical coordinates

*Which code? Images, Sound, Video. Computer Graphics Vocabulary

Digital Imaging with the Nikon D1X and D100 cameras. A tutorial with Simon Stafford

4 Images and Graphics

Adding some light to computing. Lawrence Snyder University of Washington, Seattle

Lecture 9: Digital Images

What You ll Learn Today

Colour. Cunliffe & Elliott, Chapter 8 Chapman & Chapman, Digital Multimedia, Chapter 5. Autumn 2016 University of Stirling

Applying mathematics to digital image processing using a spreadsheet

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB

Compression and Image Formats

Using Adobe Photoshop

Unit 4.4 Representing Images

Colour. Why/How do we perceive colours? Electromagnetic Spectrum (1: visible is very small part 2: not all colours are present in the rainbow!

UNIT 7C Data Representation: Images and Sound Principles of Computing, Carnegie Mellon University CORTINA/GUNA

Pixilation and Resolution name:

Understanding Image Formats And When to Use Them

Bitmap Vs Vector Graphics Web-safe Colours Image compression Web graphics formats Anti-aliasing Dithering & Banding Image issues for the Web

Colour. Electromagnetic Spectrum (1: visible is very small part 2: not all colours are present in the rainbow!) Colour Lecture!

Digital Media. Lecture 6: Color Part 1. Georgia Gwinnett College School of Science and Technology Dr. Jim Rowan

Huffman Coding For Digital Photography

3.1 Graphics/Image age Data Types. 3.2 Popular File Formats

2. Advanced Image editing

Photoshop: Save for Web and Devices

A raster image uses a grid of individual pixels where each pixel can be a different color or shade. Raster images are composed of pixels.

Color, Resolution, & Other Image Essentials

Resizing Images By Laurence Fenn

IMAGE SIZING AND RESOLUTION. MyGraphicsLab: Adobe Photoshop CS6 ACA Certification Preparation for Visual Communication

CHAPTER 3 I M A G E S

Digital Files File Format Storage Color Temperature

Digital Imaging and Image Editing

STANDARDS? We don t need no stinkin standards! David Ski Witzke Vice President, Program Management FORAY Technologies

Elements of Design. Basic Concepts

Resizing images for the web using. Version 1.3. WrightWay. Design.

1 Li & Drew c Prentice Hall Li & Drew c Prentice Hall 2003

LECTURE 07 COLORS IN IMAGES & VIDEO

Visual Perception. human perception display devices. CS Visual Perception

What Eyes Can See How Do You See What You See?

Image Processing for Mechatronics Engineering For senior undergraduate students Academic Year 2017/2018, Winter Semester

Vector VS Pixels Introduction to Adobe Photoshop

Digital Asset Management 2. Introduction to Digital Media Format

CS 200 Assignment 3 Pixel Graphics Due Monday May 21st 2018, 11:59 pm. Readings and Resources

Digital Images: A Technical Introduction

6. Graphics MULTIMEDIA & GRAPHICS 10/12/2016 CHAPTER. Graphics covers wide range of pictorial representations. Uses for computer graphics include:

from: Point Operations (Single Operands)

go1984 Performance Optimization

Know your digital image files

Lecture - 3. by Shahid Farid

Transcription:

TOPIC 4 INTRODUCTION TO MEDIA COMPUTATION: DIGITAL PICTURES Notes adapted from Introduction to Computing and Programming with Java: A Multimedia Approach by M. Guzdial and B. Ericson, and instructor materials prepared by B. Ericson.

Outline 2 Digital media Vision and colours Colour chooser Digital cameras, monitors Pixel Black and white Digital picture storage Picture objects

Computing with media 3 Media computation is the processing of some collection of Picture elements Sound fragments Movie frames Text files Web (HTML) pages

Digital media 4 Digital data refers to the encoding of information in bits (0 s and 1 s) Digital media are electronic media that record a numeric encoding (as opposed to recording continuous (analog) signals) Example: a digital camera captures and stores photos as digital data on a memory card rather than on film Example: CDs and DVDs sample sound waves and record numbers that represent the sound at the time of that sample

Human vision 5 Our eyes contain Rods that allow us to see black, white, and shades of gray Cones that allow us to see in color Cones are sensitive to red, green, and blue light All other colors are combinations of these Our eyes and brain work together to make sense of what we see

The RGB model 6 On a computer, we can produce white light as a combination of the full intensities of red, green, and blue combined Black is the absence of all light No red, green or blue light All other colors are combinations of red, green, and blue of different intensities

In Dr Java 7 In DrJava s Interactions pane type ColorChooser.pickAColor(); Click on the RGB tab and move the sliders to change the intensity of red, green, and blue Note that each intensity is represented by a number between 0 and 255 Why is it between 0 and 255? Make white, black, red, blue, green, yellow, violet, and orange

Digital cameras 8 There are red, green, and blue filters that capture the amount of each color at each of many positions in a grid These positions are called picture elements or pixels A grid of 640 x 480 pixels is low resolution A grid of 1600 x 1200 is high resolution The more pixels, the better the picture (in theory); it can be enlarged without it looking grainy

Computer displays 9 A display has pixels (picture elements) Each pixel has a red, green, and blue component Combinations of red, green, and blue of different intensities give the resulting color Black is 0 red, 0 green and 0 blue White is 255 red, 255 green, and 255 blue

Pictures are made up of pixels 10 Digital cameras record light as pixels Monitors display pictures using pixels Our limited vision actually helps us to see the discrete pixels as a smooth picture If we blow up the picture, however, we can see the pixels

Storing pictures 11 The intensity of the red, green, and blue colors at each pixel is stored as a set of three numbers, typically 1 byte (8 bits) for red 1 byte for green 1 byte for blue What numbers can be stored in 1 byte? 8 bits can hold 256 bit patterns These can represent the numbers 0 to 255

From black to white 12 Black is stored as 0, 0, 0 White is stored as 255, 255, 255 What about red? Pure red is 255, 0, 0 But 100,0,0 is also red (a darker red) The gray at the right is stored as 200, 200, 200 How would a darker gray be stored?

Storing digital pictures 13 To store a 640 x 480 picture, we need nearly 1 million bytes! To store an image from a 1 megapixel (million pixel) camera, we need 3 million bytes! Most commonly stored in.jpg (JPEG) files A lossy compression format lossy means not all data is stored (but what is lost isn t that important) compression makes the images use less space Other formats for storing digital pictures are GIF and BMP

Digital pictures in Java 14 Java supports the use of digital pictures The textbook provides a Picture class To use pictures, we create picture objects (objects of the Picture class) The Picture class contains methods we can use to show and manipulate our pictures

Creating Picture objects 15 We can create a picture object, for example: Picture picture1 = new Picture(); System.out.println(picture1); This creates a picture object, and prints information about it, but doesn t actually show any picture yet To show the picture, do the following: picture1.show();

Better picture objects 16 We pick a file name and save a reference to it in a variable called filename (a file name is a string): String filename = FileChooser.pickAFile(); Next, we create a Picture object from the file, and save a reference to it in a variable called pictureobj: Picture pictureobj = new Picture(fileName); Now we call the show() method on the picture object: pictureobj.show();

17 Result

Summary 18 Pictures are made up of a collection of pixels Pixels are made up of intensity values for red, and blue that range from 0 to 255 All of these at maximum intensity is white All of these at zero is black Changing the intensity values changes the colour To make a picture object: green String filename = FileChooser.pickAFile(); Picture pictureobj = new Picture(fileName); pictureobj.show(); Don't forget that filename and pictureobj are variables you can pick any name you want! You do not have to use those exact names