Skip to content

Commit

Permalink
add new screenshot in graphics foundation
Browse files Browse the repository at this point in the history
  • Loading branch information
@rvillemeur
rvillemeur committed May 5, 2024
1 parent bc41af1 commit 4522d62
Show file tree
Hide file tree
Showing 27 changed files with 85 additions and 200 deletions.
260 changes: 69 additions & 191 deletions Chapters/graphicsfoundation/colorandDepth.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ The number of actual colors at these depths are: 2, 4, 16, 256, 32768, and 16 mi

The bits representing the bitmap pixels are packed in rows. The size of each row is rounded up to a multiple of 4 bytes (32 bits). The pixel array describes the image pixel by pixel. You can also have an alpha-channel to add transparency in the image using 32-bit color depth.

![Bitmap smile.](Rgb-raster-image.png)
![Bitmap smile.](figures/Rgb-raster-image.png)

- The coordinates of a Form start from the top-left corner much like most graphic system out there (why ? Because Western language are mostly written left to right, top to bottom, and initial text display follow this convention, instead of classic Cartesian coordinate). Forms are indexed starting at 0 instead of 1; thus, the top-left pixel of a Form has coordinates 0@0.

Expand Down Expand Up @@ -61,6 +61,23 @@ along the diagonal of the cube, r = g = b.
Black (0,0,0 )+------------------------+ red(1,0,0 )
```

#### What is HSV and HSL?

HSL stand for *hue*, *saturation* and *lightness*.
HSV stand for *hue*, *saturation* and *brightness*.
By convention, brightness is abbreviated 'v' to to avoid
confusion with blue.
It is another way to describe color, and is more
convenient way
to organize differences in colors as perceived by humans.
This is because human perception sees colors in these ways
and not as triplets of numbers.

you can define Color in Pharo, either from RGB, HSL or
from HSV triplets from `Color` class

![color index](figures/colorDefinition.png)

### How are the basic colors defined?

You may have noticed that the basic color depth (2, 4, and 8) have a predefined set
Expand All @@ -77,6 +94,8 @@ Picking the color of a specific pixel will give you its name.
) ; colorAt: 1@1
```

![color index](figures/colorIndex.png)

give **Color Magenta**

The basic colors are initialized in *Color class >> initializeIndexedColors*.
Expand Down Expand Up @@ -123,31 +142,22 @@ You can define the color of 32 pixel with color depth 1 playing with color and f
2r11000000000000000000000000000000 )
; magnifyBy: 10.
```
![color index](figures/colorDepth1.png)

##### Using `Bitmap`:

```
```smalltalk
bitMap := Bitmap newFrom: #( "pixel color, expressed on 4 byte"
2r10011000000100010000000000000001
2r11000000000000000000000000000000
) .
```

```
(Form extent: 32@2 "size of the form"
depth: 1 "color depth")
initFromArray: bitMap;
magnifyBy: 10.
```
```
(Form extent: 32@2 "size of the form"
depth: 1 "color depth - 16 => 2 bits to define color value")
initFromArray: #(
2r10101010101010101010101010101010
2r01010101010101010101010101010101 "2 colors" ) ;
magnifyBy: 25.
```


##### using colorForm
- Use `ColorForm` if you want to use color other than black and white:
Expand All @@ -168,36 +178,9 @@ pict initFromArray: #(
pict magnifyBy: 25
```

Our initial fish could be described like:
![color index](figures/colorDepth1ColorMap.png)

```
(Form extent: 32@20
depth: 1
fromArray: #(
2r00000000011100000000000000000000
2r00000000001110000000000000000000
2r00000000001111000000000000000000
2r00000000001111110000000000000000
2r00100000011111111110000000000000
2r11100001111111111111000000000000
2r01110011111111111111100000000000
2r01111011111111110111110000000000
2r00111111111111111111111000000000
2r00111111111111111111111000000000
2r00111111111111111111111000000000
2r00111111111111111111111000000000
2r01111011111111111111110000000000
2r01110001111111111111100000000000
2r11100001111111111111000000000000
2r00100000011111111100000000000000
2r00000000001111100000000000000000
2r00000000000111000000000000000000
2r00000000000110000000000000000000
2r00000000000100000000000000000000)
offset: 10@0) magnifyBy: 20
```

and the same in blue:
Our initial fish could be described in blue like:

```
| pict map |
Expand Down Expand Up @@ -232,9 +215,14 @@ pict initFromArray: #(
pict magnifyBy: 25
```

This is how the normal cursor is defined. By default, a cursor size can only
be 16@16. However, because data is stored in 32 bits, we need to add 16
additional bits of white to store it, even if they won't be displayed.
![color fish](figures/colorFishBlue.png)


This is how the cursor is defined in Morphic World.
By default, a cursor size can only be 16@16. However,
because data is stored in 32 bits, we need to add 16
additional bits of white to store it, even if they won't
be displayed.

```
(Form extent: 16@16
Expand All @@ -258,6 +246,7 @@ additional bits of white to store it, even if they won't be displayed.
2r00000011000000000000000000000000)
offset: 0@0) magnifyBy: 10.
```
![color cursor](figures/cursor.png)

#### 2-bit depth with color Form

Expand All @@ -273,6 +262,7 @@ additional bits of white to store it, even if they won't be displayed.
); magnifyBy: 25.
```

![color depth 2](figures/colorDepth2.png)
With ColorForm:

```smalltalk
Expand All @@ -290,6 +280,7 @@ pict colors: map.
pict initFromArray: #(2r00011011000110110001101100011011).
pict magnifyBy: 25
```
![color depth 2](figures/colorDepth2ColorMap.png)

#### 4bit depth with color Form

Expand All @@ -309,6 +300,8 @@ You can define the color of 8 pixel with color depth 16
; magnifyBy: 25.
```

![color depth 4](figures/colorDepth4.png)

With ColorForm:

```smalltalk
Expand Down Expand Up @@ -338,165 +331,49 @@ pict initFromArray: #(2r01000010001100011011110111101111).
pict magnifyBy: 25
```

![color depth 4](figures/colorDepth4ColorMap.png)

#### 8bit depth with color Form
#### 8bit depth

You can define the color of 4 pixel with color depth 8

```smalltalk
| bitmap array |
array := ByteArray new: 256.
16r0 to: 16rff do: [ :i | array at: i + 1 put: i ].
array := (array groupsOf: 4) collect: [ :each | each asInteger ].
"bitmap contain 256/8 = 64 items"
bitmap := Bitmap new: 64.
1 to: 64 do: [ :i | bitmap at: i put: (array at: i) ].
"either a 64 line of 4 color (*8 to reach 32 bits)"
Form extent: 4 @ 64 depth: 8 bits: bitmap.
"or a square of 16 lines composed of 4 color (to get 32 bits) * 4 time"
(Form extent: 16 @ 16 depth: 8 bits: bitmap) magnifyBy: 25
```
(Form extent: 4@64 "size of the form"
depth: 8 "color depth - 16 => 2 bits to define color value")
initFromArray: #( "pixel color, expressed on 4 bytes or 32 bits, which is the maximum of color depth"
"[ 00000000 00000000 00000000 00000000]
first second third fourth pixel
Each pixel can have 2^8 = 256 different color"
"[ 00000000 00000000 00000000 00000000]"
2r00000000010000001000000011000000
2r00000001010000011000000111000001
2r00000010010000101000001011000010
2r00000011010000111000001111000011
2r00000100010001001000010011000100
2r00000101010001011000010111000101
2r00000110010001101000011011000110
2r00000111010001111000011111000111
2r00001000010010001000100011001000
2r00001001010010011000100111001001
2r00001010010010101000101011001010
2r00001011010010111000101111001011
2r00001100010011001000110011001100
2r00001101010011011000110111001101
2r00001110010011101000111011001110
2r00001111010011111000111111001111
2r00010000010100001001000011010000
2r00010001010100011001000111010001
2r00010010010100101001001011010010
2r00010011010100111001001111010011
2r00010100010101001001010011010100
2r00010101010101011001010111010101
2r00010110010101101001011011010110
2r00010111010101111001011111010111
2r00011000010110001001100011011000
2r00011001010110011001100111011001
2r00011010010110101001101011011010
2r00011011010110111001101111011011
2r00011100010111001001110011011100
2r00011101010111011001110111011101
2r00011110010111101001111011011110
2r00011111010111111001111111011111
2r00100000011000001010000011100000
2r00100001011000011010000111100001
2r00100010011000101010001011100010
2r00100011011000111010001111100011
2r00100100011001001010010011100100
2r00100101011001011010010111100101
2r00100110011001101010011011100110
2r00100111011001111010011111100111
2r00101000011010001010100011101000
2r00101001011010011010100111101001
2r00101010011010101010101011101010
2r00101011011010111010101111101011
2r00101100011011001010110011101100
2r00101101011011011010110111101101
2r00101110011011101010111011101110
2r00101111011011111010111111101111
2r00110000011100001011000011110000
2r00110001011100011011000111110001
2r00110010011100101011001011110010
2r00110011011100111011001111110011
2r00110100011101001011010011110100
2r00110101011101011011010111110101
2r00110110011101101011011011110110
2r00110111011101111011011111110111
2r00111000011110001011100011111000
2r00111001011110011011100111111001
2r00111010011110101011101011111010
2r00111011011110111011101111111011
2r00111100011111001011110011111100
2r00111101011111011011110111111101
2r00111110011111101011111011111110
2r00111111011111111011111111111111
); magnifyBy: 25
```

![color depth 8](figures/colorDepth8.png)

Using ColorForm to reverse the color:

```smalltalk
| pict map |
pict := ColorForm extent: 4@64 depth: 8.
| pict map array |
array := ByteArray new: 256.
16r0 to: 16rff do: [ :i | array at: i + 1 put: i ].
"create a color map of 2^depth color"
map := (Color indexedColors copy) reverse .
map at: 1 put: Color transparent.
pict colors: map.
pict initFromArray: #(
2r00000000010000001000000011000000
2r00000001010000011000000111000001
2r00000010010000101000001011000010
2r00000011010000111000001111000011
2r00000100010001001000010011000100
2r00000101010001011000010111000101
2r00000110010001101000011011000110
2r00000111010001111000011111000111
2r00001000010010001000100011001000
2r00001001010010011000100111001001
2r00001010010010101000101011001010
2r00001011010010111000101111001011
2r00001100010011001000110011001100
2r00001101010011011000110111001101
2r00001110010011101000111011001110
2r00001111010011111000111111001111
2r00010000010100001001000011010000
2r00010001010100011001000111010001
2r00010010010100101001001011010010
2r00010011010100111001001111010011
2r00010100010101001001010011010100
2r00010101010101011001010111010101
2r00010110010101101001011011010110
2r00010111010101111001011111010111
2r00011000010110001001100011011000
2r00011001010110011001100111011001
2r00011010010110101001101011011010
2r00011011010110111001101111011011
2r00011100010111001001110011011100
2r00011101010111011001110111011101
2r00011110010111101001111011011110
2r00011111010111111001111111011111
2r00100000011000001010000011100000
2r00100001011000011010000111100001
2r00100010011000101010001011100010
2r00100011011000111010001111100011
2r00100100011001001010010011100100
2r00100101011001011010010111100101
2r00100110011001101010011011100110
2r00100111011001111010011111100111
2r00101000011010001010100011101000
2r00101001011010011010100111101001
2r00101010011010101010101011101010
2r00101011011010111010101111101011
2r00101100011011001010110011101100
2r00101101011011011010110111101101
2r00101110011011101010111011101110
2r00101111011011111010111111101111
2r00110000011100001011000011110000
2r00110001011100011011000111110001
2r00110010011100101011001011110010
2r00110011011100111011001111110011
2r00110100011101001011010011110100
2r00110101011101011011010111110101
2r00110110011101101011011011110110
2r00110111011101111011011111110111
2r00111000011110001011100011111000
2r00111001011110011011100111111001
2r00111010011110101011101011111010
2r00111011011110111011101111111011
2r00111100011111001011110011111100
2r00111101011111011011110111111101
2r00111110011111101011111011111110
2r00111111011111111011111111111111
); magnifyBy: 25
pict := (ColorForm extent: 16@16 depth: 8) initFromArray:
((array groupsOf: 4) collect: [ :each | each asInteger ]);
colors: map; magnifyBy: 25
```

![color depth 8](figures/colorDepth8ColorMap.png)

##### 16 bit depth
You can define the color of 2 pixel with color depth 16

Expand All @@ -516,6 +393,7 @@ You can define the color of 2 pixel with color depth 16
)
; magnifyBy: 25.
```
![color depth 16](figures/colorDepth16.png)

### 32 bits depths

Expand All @@ -537,6 +415,8 @@ You can define the color of 2 pixel with color depth 16
; magnifyBy: 25.
```

![color depth 16](figures/colorDepth32-2.png)

Data is stored in Byte - remember that 8 bits = 1 bytes. Each entry of the color palette takes 4 bytes to define a color

```
Expand All @@ -553,6 +433,4 @@ Data is stored in Byte - remember that 8 bits = 1 bytes. Each entry of the color
; magnifyBy: 15.
```




![color depth 16](figures/colorDepth32.png)
Loading

0 comments on commit 4522d62

Please sign in to comment.