Computer Graphics

Compu ter Bits of

Not a new idea

Not a new idea • The Basilica of St. Sophia, in Turkey.

Not a new idea • The Basilica of St. Sophia, in Turkey. • Built by Constantine the Great and reconstructed by Justinian in the 6th century.

Not a new idea • The Basilica of St. Sophia, in Turkey. • Built by Constantine the Great and reconstructed by Justinian in the 6th century. • Its immense dome rises 55 meters above the ground and its diameter spans 31 meters.

Not a new idea • The Basilica of St. Sophia, in Turkey. • Built by Constantine the Great and reconstructed by Justinian in the 6th century. • Its immense dome rises 55 meters above the ground and its diameter spans 31 meters. • Walls are covered in MOSAICS

Mosaics

Mosaics • Mosaics are pictures made up of tiny chips of glass or ceramic tile.

Mosaics • Mosaics are pictures made up of tiny chips of glass or ceramic tile. • The smaller the chips of tile, the more of them there will be, and the clearer the image.

Mosaics • Mosaics are pictures made up of tiny chips of glass or ceramic tile. • The smaller the chips of tile, the more of them there will be, and the clearer the image. • The more colours available for the tile chips, the better the ﬁnal image looks.

Computer images?

Computer images? • Computers create images based on exactly the same principle…

Computer images? • Computers create images based on exactly the same principle… • Lots of “chips” of colour called PIXELS.

Computer images? • Computers create images based on exactly the same principle… • Lots of “chips” of colour called PIXELS. • The more Pixels, the clearer the image.

Computer images? • Computers create images based on exactly the same principle… • Lots of “chips” of colour called PIXELS. • The more Pixels, the clearer the image. • The more colours, the better the image looks.

Tiny Little Pixels

Resolution

Resolution The more pixels, the clearer the picture gets…

Resolution The more pixels, the clearer the picture gets… … and the smaller the pixels become.

Resolution

Resolution Till eventually you can’t even tell the picture is made up of dots...

Colour depth • Colour photos are made of many colours. • The more colours, the more realistic they look. • This 24 bit image contains a possible 16,777,216 colours.

Colour depth

Colour depth • For example, this pixel may have the value… 000010000011001100011 011

Colour depth • For example, this pixel may have the value… 000010000011001100011 011 • This binary code represents a colour value between 0 and 16,777,215. • This is because 224 is 16,777,216.

Colour depth

Colour depth 24 bit/pixel = 16, 777,216 colours

Colour depth 24 bit/pixel = 16, 777,216 colours 8 bit/pixel = 256 colours

Colour depth 24 bit/pixel = 16, 777,216 colours 8 bit/pixel = 256 colours 4 bits/pixel = 16 colours

Colour depth 24 bit/pixel = 16, 777,216 colours 8 bit/pixel = 256 colours 4 bits/pixel = 16 colours 1 bit/pixel = 2 colours (b/w)

Calculating size 240 320

JPEG – Lossy Compression • Blocking • Artefacting • Lost quality • Massive file size reduction

JPEG (Joint Photographics Expert Group) • 16 million colours • 24 Bits/pixel RGB • 8 bit Red 8 bit Green 8 bit Blue • Variable compression (Lossy) • Quality loss • Good for photos • Used for online • Very efficient

JPEGs on flat logo-style images • GIFs give much better results and smallest filesizes • JPEGs lose quality near the edges of colour joins

GIF (Graphics Interchange Format) • Up to 256 Colours • 8 bits/pixel • Indexed palette • Used online • Supports transparency • Supports animation • Supports interlacing • Good for logos or cartoons

Dithering • Uses various techniques to blend limited colours. • Overall effect is to provide tonal changes.

Summary Colours Compression Use Other Good for None High quality BMP 16.8 million photos for (large files) Large filesize print Low to High God for Variable quality JPEG 16.8 million photos for (variable file Small filesize print or web sizes) Good for web Animations, GIF 256 Medium images Transparency (logos)

Questions • Deﬁne the following terms… – Pixel – Resolution – Colour Depth – Image size – Filesize

Computer Graphics

0 comments

Notes on slide 1

1 Favorite