Bitmap: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
Line 1: Line 1:
Image representation based on a raster (grid) of images, or columns and rows of pixel values, typically themselves broken into color components such as [[RGB]] or [[RGBA]].
== bitmap images ==
You probably have heard before that bitmap images are grids of pixels, where
* resolution: the number of horizontal and vertical pixels. E.g. 1920x1080 is 1920 pixels wide and 1080 high
* color depth: the number of bits used to indicate the color of a single pixel


[[wikipedia:Bitmap]]
for a good introduction to bit maps see: See Bourke, Paul. n.d. ‘A Beginners Guide to Bitmaps’. Accessed 2 January 2018. http://paulbourke.net/dataformats/bitmaps/.
 
 
===Resolutions: ===
 
Color depth - (use microscope)
* [[Binary image|1-bit color]] (2<sup>1</sup> = 2 colors): '''monochrome''', often black and white, compact [[Macintosh]]es, [[Atari ST]].
* 2-bit color (2<sup>2</sup> = 4 colors): [[Color Graphics Adapter|CGA]], gray-scale early [[NeXTstation]], color Macintoshes, Atari ST.
* 3-bit color (2<sup>3</sup> = 8 colors): many early home computers with TV displays, including the [[ZX Spectrum]] and [[BBC Micro]]
* 4-bit color (2<sup>4</sup> = 16 colors): as used by [[Enhanced Graphics Adapter|EGA]] and by the least common denominator VGA standard at higher resolution, color Macintoshes, Atari ST, [[Commodore 64]], [[Amstrad CPC]].
* 5-bit color (2<sup>5</sup> = 32 colors): [[Original Amiga chipset]]
* 6-bit color (2<sup>6</sup> = 64 colors): Original Amiga chipset
* [[8-bit color]] (2<sup>8</sup> = 256 colors): most early color Unix workstations, [[VGA]] at low resolution, [[Super VGA]], color Macintoshes, [[Atari TT]], [[Advanced Graphics Architecture|Amiga AGA chipset]], [[Falcon030]], [[Acorn Archimedes]].
* 12-bit color (2<sup>12</sup> = 4096 colors): some [[Silicon Graphics]] systems, Color NeXTstation systems, and [[Amiga]] systems in [[Hold And Modify|HAM]] mode.
* '''8-bit color''': A very limited but true direct color system, there are 3 bits (8 possible levels) for each of the R and G components, and the two remaining bits in the byte pixel to the B component (four levels), enabling 256 (8 × 8 × 4) different colors.
* Grey scale (8-bit)
* True color (24-bit): Usually, true color is defined to mean 256 shades of red, green, and blue, for a total of 224, or alternately 2563, or 16,777,216 color variations. The human eye can discriminate up to ten million colors
<ref>https://en.wikipedia.org/wiki/Color_depth</ref>
 
 
{{youtube|06OHflWNCOE}}
 
 
 
 
===converting resolution===
with Imagemagick
 
to 100px wide
convert myimage.jpg -resize 100x output.jpg
 
to 100px  hight
convert myimage.jpg -resize x100 output.jpg
 
to 100x100px (image will loose its proportion; hence the "!" so imagemagick is sure that you wanna do that:)
convert myimage.jpg -resize 100x100! output.jpg
 
===converting color (bit depth)===
 
convert an image into monochrome (1 bit depth) image: 2color values (b/w)
convert myimage.jpg -colorspace gray -depth 1 out.png
 
(2 bit depth) image: 4 color values
convert myimage.jpg -colorspace gray -depth 2 out.png
 
(3 bit depth) image: 8 color values
convert myimage.jpg -colorspace gray -depth 3 out.png
 
(4 bit depth) image: 16 color values
convert myimage.jpg -colorspace gray -depth 4 out.png
 
(8 bit depth) image: 256 color values
convert myimage.jpg -colorspace gray -depth 4 out.png
 
 
How can we be certain about this? How do can we see the grid that forms a bitmap image?
* magnify any digital screen
* a Plain-text bitmap: where you can read each pixel: X PixMap (XPM)
 
[https://en.wikipedia.org/wiki/X_PixMap X PixMap (XPM)] is a plain-text bitmap image format, where each color is assigned a character, which is mapped onto the text space.
 
convert myimage.jpg out.xpm
 
 
<source lang="c">
/* XPM */
static char *output[] = {
/* columns rows colors chars-per-pixel */
"50 73 2 1 ",
"  c black",
". c white",
/* pixels */
"                                                  ",
"                                                  ",
"                                                  ",
"                                                  ",
"              ................                  ",
"          ......  . .. . . .......              ",
"          .. .          .        ...            ",
"        . .  .. .            .    ..          ",
"        .. . .    .    .  .    .    .          ",
"        .  .      .    .  .    . .  ..          ",
"        .  .        .  .      .    . .          ",
"        ...          ..      .      ..          ",
"      ...              .. .        ...          ",
"        ..                            .          ",
"        .                            ..          ",
"        ..                            .          ",
"        .                            ..          ",
"      ...      .                    .          ",
"        .    .                      .          ",
"      ..                            .          ",
"      ..  .    .                  . .          ",
"        .    .                        .          ",
"      ..  .  .....                  .          ",
"        .    ..  ..                  .          ",
"        .  .      ..            .  .          ",
"      .  ..        .              ..          ",
"      .. .    .    .            .....          ",
"          .  ...    .          .    .          ",
"      .  .  ....  ..          .    ..          ",
"      . ..  ....              .      .          ",
"        . .          .          .    ....        ",
"      .  .          .          ..  ...          ",
"          .          .          .    ..          ",
"      ..  .        .            .    .          ",
"      .  .      ..            .    .          ",
"      .    ..  ..              ..  ..          ",
"      ..    ...                  ... .          ",
"      ..                              ..        ",
"      .                  .  .      .  .        ",
"    .  .  ..                          .        ",
"    .  . ....                    .    .        ",
"    .    ..  ...  .              ..  ..        ",
"    .. .  ..  .....  . ..  .  ...  .          ",
"      .    ... ..  ....          ....  .          ",
"      .    .....  ......    ...... .          ",
"      ..    . ..... .  ......... ... .          ",
"        ..  .........  .. .  ...... .          ",
"        .    ..  ....................          ",
"        .    ..  . ............... .          ",
"          .    .. ..  ............. .          ",
"          .      ..    .  .  .....  .          ",
"          ...  .  ...  .  .. ......  .          ",
"            ... .    .............    .          ",
"              ..  .      ..          .          ",
"              ...  ..                          ",
"                ...    .    .      ..          ",
"                  ..            .    .          ",
"                    ..              .          ",
"                      ....          ..          ",
"                          .....  ....            ",
"                              .....              ",
"                                                  ",
"                                    .            ",
"                  ..  .            ...          ",
"        ...  .. ..  ... .. .. ...... ...          ",
"        ............................  ..          ",
"        ...... ................. ...  .          ",
"        ......  ... ... ..... .... .. .          ",
"        ..                                        ",
"        .                                        ",
"                                                  ",
"                                                  ",
"                                                  "
};
 
</source>

Revision as of 22:58, 28 January 2018

bitmap images

You probably have heard before that bitmap images are grids of pixels, where

  • resolution: the number of horizontal and vertical pixels. E.g. 1920x1080 is 1920 pixels wide and 1080 high
  • color depth: the number of bits used to indicate the color of a single pixel

for a good introduction to bit maps see: See Bourke, Paul. n.d. ‘A Beginners Guide to Bitmaps’. Accessed 2 January 2018. http://paulbourke.net/dataformats/bitmaps/.


Resolutions:

Color depth - (use microscope)

  • 1-bit color (21 = 2 colors): monochrome, often black and white, compact Macintoshes, Atari ST.
  • 2-bit color (22 = 4 colors): CGA, gray-scale early NeXTstation, color Macintoshes, Atari ST.
  • 3-bit color (23 = 8 colors): many early home computers with TV displays, including the ZX Spectrum and BBC Micro
  • 4-bit color (24 = 16 colors): as used by EGA and by the least common denominator VGA standard at higher resolution, color Macintoshes, Atari ST, Commodore 64, Amstrad CPC.
  • 5-bit color (25 = 32 colors): Original Amiga chipset
  • 6-bit color (26 = 64 colors): Original Amiga chipset
  • 8-bit color (28 = 256 colors): most early color Unix workstations, VGA at low resolution, Super VGA, color Macintoshes, Atari TT, Amiga AGA chipset, Falcon030, Acorn Archimedes.
  • 12-bit color (212 = 4096 colors): some Silicon Graphics systems, Color NeXTstation systems, and Amiga systems in HAM mode.
  • 8-bit color: A very limited but true direct color system, there are 3 bits (8 possible levels) for each of the R and G components, and the two remaining bits in the byte pixel to the B component (four levels), enabling 256 (8 × 8 × 4) different colors.
  • Grey scale (8-bit)
  • True color (24-bit): Usually, true color is defined to mean 256 shades of red, green, and blue, for a total of 224, or alternately 2563, or 16,777,216 color variations. The human eye can discriminate up to ten million colors

[1]




converting resolution

with Imagemagick

to 100px wide 

convert myimage.jpg -resize 100x output.jpg

to 100px hight 

convert myimage.jpg -resize x100 output.jpg

to 100x100px (image will loose its proportion; hence the "!" so imagemagick is sure that you wanna do that:) 

convert myimage.jpg -resize 100x100! output.jpg

converting color (bit depth)

convert an image into monochrome (1 bit depth) image: 2color values (b/w) 

convert myimage.jpg -colorspace gray -depth 1 out.png

(2 bit depth) image: 4 color values 

convert myimage.jpg -colorspace gray -depth 2 out.png

(3 bit depth) image: 8 color values 

convert myimage.jpg -colorspace gray -depth 3 out.png

(4 bit depth) image: 16 color values 

convert myimage.jpg -colorspace gray -depth 4 out.png

(8 bit depth) image: 256 color values 

convert myimage.jpg -colorspace gray -depth 4 out.png


How can we be certain about this? How do can we see the grid that forms a bitmap image?

  • magnify any digital screen
  • a Plain-text bitmap: where you can read each pixel: X PixMap (XPM)

X PixMap (XPM) is a plain-text bitmap image format, where each color is assigned a character, which is mapped onto the text space. 

convert myimage.jpg out.xpm



/* XPM */
static char *output[] = {
/* columns rows colors chars-per-pixel */
"50 73 2 1 ",
"  c black",
". c white",
/* pixels */
"                                                  ",
"                                                  ",
"                                                  ",
"                                                  ",
"               ................                   ",
"           ......   . .. . . .......              ",
"          .. .           .         ...            ",
"         . .   .. .            .     ..           ",
"        .. . .    .    .  .     .     .           ",
"        .   .      .    .   .    . .  ..          ",
"        .  .        .  .       .    . .           ",
"        ...          ..      .       ..           ",
"       ...              .. .         ...          ",
"        ..                            .           ",
"        .                             ..          ",
"        ..                            .           ",
"        .                             ..          ",
"       ...      .                     .           ",
"        .     .                       .           ",
"       ..                             .           ",
"       ..  .    .                   . .           ",
"        .    .                        .           ",
"       ..  .  .....                   .           ",
"        .    ..   ..                  .           ",
"        .   .       ..            .   .           ",
"       .  ..         .               ..           ",
"       .. .    .     .            .....           ",
"          .   ...     .          .    .           ",
"       .  .   ....   ..          .    ..          ",
"       . ..   ....              .      .          ",
"        . .          .          .    ....         ",
"       .  .          .          ..   ...          ",
"          .          .           .    ..          ",
"       ..  .        .            .     .          ",
"       .   .       ..            .    .           ",
"       .    ..   ..               ..  ..          ",
"       ..     ...                  ... .          ",
"      ..                               ..         ",
"      .                  .  .       .   .         ",
"     .  .  ..                           .         ",
"     .  . ....                     .    .         ",
"     .    ..  ...   .              ..  ..         ",
"     .. .  ..  .....   . ..   .   ...  .          ",
"      .    ... ..  ....          ....  .          ",
"       .    .....   ......     ...... .           ",
"       ..    . ..... .  ......... ... .           ",
"        ..   .........   .. .  ...... .           ",
"         .    ..   ....................           ",
"         .     ..   . ............... .           ",
"          .     .. ..   ............. .           ",
"           .      ..    .   .  .....  .           ",
"           ...  .  ...  .  .. ......  .           ",
"            ... .    .............    .           ",
"              ..   .       ..          .          ",
"               ...   ..                           ",
"                 ...     .    .       ..          ",
"                   ..            .    .           ",
"                     ..               .           ",
"                       ....          ..           ",
"                          .....  ....             ",
"                              .....               ",
"                                                  ",
"                                     .            ",
"                   ..   .            ...          ",
"        ...  .. ..  ... .. .. ...... ...          ",
"        ............................  ..          ",
"        ...... ................. ...  .           ",
"        ......  ... ... ..... .... .. .           ",
"        ..                                        ",
"        .                                         ",
"                                                  ",
"                                                  ",
"                                                  "
};
  1. ↑ https://en.wikipedia.org/wiki/Color_depth
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=Bitmap&oldid=118909"