001 lecture pixels

8/8/2019 001 Lecture Pixels

1/20

TRANSFORMATIONSThis series of lectures will focus on the many types of transformations that are used in con-

structing the proper geometry for specific architectural applications.

+ Planar Transformations

+ Tilines

-regular and semi regular tessellations to be explored and how

the transition into building components

+ Motion

+ Sweeping+ Shapt Evolution

+ Skinning

A R C H I T E C T U R E

digitalmedia


2/20

01 . 18. 11

IMAGE BY http://ds13.uforg.net/page/2/


3/20

PIXEL + GRIDinstructor | diaz

course | 590 - 599


4/20

PixelsThis lecture will focus on pixels and their relative order with respect toimage resolution, types, and basic Photoshop commands.

+ What is a pixel?

+ What is digital resolution?

+ File types+ Photoshop and some commands.


5/20

PixelsPixel: short for picture element, is a single point in a graphic image. Most monitor todayhave the ability to display over millions of pixels. The usually arrangement of these pixels

appear in rows and columns; hence the grid. How these pixels work are base on the determi-

nate device or programs used. For this lecture, we can visualize three concepts here; pro-

grams (like Photoshop), mathematicians, and digital devices.

1. For programs, a pixel is a tiny square. Where an image is host to grids of packed pixels with absolutely no variant

of gaps or overlapping. These pixels are numerically correct in their order with respect to their bit value.

2. Mathematicians: the pixel is a geometric point of zero size. It is an analog source image that is converted to digital

format. Is specific location is mapped by its color sample.

3. Digital devices: A pixel is a circular dot with soft edges. These pixels may appear or not larger than the pixel

defined grid. At this point, pixels are allowed to overlap. A digital image may have colors in the pixel region that are com-

bined, using a falloff curve that weights their contribution according to their distance from the center.


6/20

PixelsDigital images are created by scanning photographs or slides, by directly capturing imagesusing a digital or video camera, or by importing files from another computer graphics applica-

tion. Before displaying or printing the images, they are usually processed using image-

editing programs, such as Adobe Photoshop. These programs generate bitmap or raster

images that use a grid of small squares known as 'pixels' to represent images. Each pixel is

assigned a specific location and a grayscale or color value (bit or pixel depth)


7/20


8/20

a Bit and its pixelIf you were to zoom in on a image, the pixel is reveal at a power magnification. On a monitor,the magnification will result in either a blur or box-like structure while the actual print will be

blurry. The actual size of the image depth is dependent on: (1) the total number of pixels in

the image (determined by multiplying pixel dimensions along the height and width of a

bitmap image) and (2) their bit depth.


9/20

Pixels

These images represent the pixel depth of 1bit and 8 bit.


10/20

a Bit and its pixelTrue black and white drawings have pixel depths of 1-bit (i.e., the pixel is either black orwhite). Grayscale images have pixel depths that typically range from 5-bits (32 shades of

gray) to 8-bits (256 shades of gray).

Color images have pixel depths that typically range from 4-bit (16 colors) to 8-bit (256 colors)

to 24-bit (~16 million colors).

This array is the size of the display window. For example, if the image is 100x100 pixels, there will be 10000 values and if the window is200x300 pixels, there will be 60000 values. The index value defines the position of a value within the array. For example, the statment color

b = pixels[230] will set the variable b to be equal to the value at that location in the array Processing.org

a Bit represent each pixels that determines the arrangements of colors or shades of gays

displayed. For example, a 8-bit color mode will have 8 bits per pixel, making is possible to

display to the 8th power (256) different colors or shades of gray.


11/20

a dot per inch (dpi)Dots per inch (DPI) in this context, refers to the smallest amount of ink that a given printercan print. Put another way, the more dots that a printer (or imagesetter) can apply per inch,

the higher the resolution (and therefore quality of image reproduction) an imaging device can

reproduce.

Pixels per inch

Pixels per inch (PPI) is often used interchangeably with DPI. PPI is, arguably, where the con-

fusion started from in the first place. PPI a somewhat relative term. Once a photograph is

opened in a program such as Adobe Photoshop and displayed on a computer screen, its re-

lation to print paradigm concepts such as per inch are not always helpful. In many cases it is

actually more helpful to talk about the total width and height of the digital image in pixels,

rather than pixels per inch or dots per inch.


12/20

a dot per inch (dpi)Digital devices:When a digital image is described in inches, it is being calculated, based on the Monitors

Resolution. Or on the Printers Resolution. (Both of which are different and non-related, thus

causing a lot of confusion)

Most monitors are set at 96 dpi (dots per inch) If a digital image is 960 pixels wide, then that

digital image would be reported as being 10 inches wide. (960 divide by 96 = 10)

The same image, displayed on a monitor that is set at 72 dpi, would report that image as

being 13.3 inches wide.


13/20

Pixels

iPod Touch (4th gen.)

920x640 dpi

at 326 ppi

iPad

1020x768 dpi

at 138 ppi

iMac Pro

up to 1440x900 dpi

and up to 600 ppi


14/20

Pixels

CRT monitorResolution: 1024x768

max. 1600x1200

Samsung LED monitorNative Resol.: 1920 x 1080 p

Vizio LED flat screenNative Panel Resolution: 1920 x 1080 pixels

Signal Compatibility: 1080p (FHDTV)

Colors: 1.06 Billion

Computer Support: 640 x 480, 800 x 600,

1024 x 768, 1920 x 1080 via RGB or

1920 x 1080 via HDMI


15/20

a dot per inch (dpi)So the more pixels you have in a set image dimension, the better the quality. For example, ifyou have a 6 x 6inch picture with a 300 pixel compared to a 1000 pixel, the 1000 will result

in higher print quality results.

Let's say you bought a camera that produced pictures that were 6 x 6 pixels.

This camera would then be a 36 pixel camera! (6 x 6 = 36)

Let's say your camera produces pictures that are: 1280 x 960 pixels

1280 x 960 = 1,228,800 pixels = 1.2288 MegaPixelsBut the manufacturers round up and call it a 1.3 MegaPixel Camera.


16/20

resolution (dpi)The resolution is dependent on the degree of pixels it can display and the number of bits areused to represent each pixel. Most systems can display 640x480 or about 300,000 pixels. In

other cases, some systems (most mobile devices) can display 800x600 pixzels. However, if

you have a 24 bit system, or 24 bits per pixel, then there is an ability of hold more than 16 mil-

lion different colors!

In each digital device, there are certain colors retained for maximum views. This colors are

set at certain color values set at grayscale, cmyk, and rgb.


17/20

Pixels

grayscale

a grayscale or digital image is an image in

which the value of each pixel is a single

sample, that is, it carries only intensity infor-

mation. Images of this sort, also known as

black-and-white, are composed exclusively

of shades ofgray, varying from black at the

weakest intensity to white at the strongest.

cmyk

The CMYK color model (process color, four

color) is a subtractive color model, used in

color printing, and is also used to describe

the printing process itself. CMYK refers to

the four inks used in some color

printing:cyan, magenta, yellow, and key

black.

rgb

The RGB color model is an additive color

model in which red, green, and blue light are

added together in various ways to reproduce

a broad array of colors. The name of the

model comes from the initials of the three

additive primary colors, red, green, and blue.


18/20

resolution (dpi)In a monitor display device, an image can reveal a variant degree of PPI (pixels per inch). Apixel or picture element is a specific x,y coordinate (dot) on your screen. A high-resolution

setting displays more pixels per inch. In practical terms, the same picture on a low resolution

monitor looks larger than it does on a higher resolution monitor because the pixels are

spread out over a larger area.

If you were to change your image from a 300dpi and downsampled it, the result would create

a smaller image printout. For example, if you take the 300 dpi image at 300x300 to a96x96dpi, the new image will go from a 3in. to a 1in size.


19/20

Resolution ratio chart


20/20

definitionspixela pixel (or picture element)[1] is a single point in a raster image. The pixel is the smallest addressable screen element; it is the smallest unit

of picture that can be controlled. Each pixel has its own address. The address of a pixel corresponds to its coordinates. Pixels are normally

arranged in a two-dimensional grid, and are often represented using dots or squares. -wikipedia

bitmapa bitmap is a type of memory organization or image file format used to store digital images. The term bitmap comes from thecomputer

programming terminology, meaning just a map of bits, a spatially mapped array of bits. Now, along with pixmap, it commonly refers to the

similar concept of a spatially mapped array of pixels. Raster images in general may be referred to as bitmaps or pixmaps, whether synthetic

or photographic, in files or memory.

grayscalea grayscale or digital image is an image in which the value of each pixel is a single sample, that is, it carries only intensity information.Images of this sort, also known as black-and-white, are composed exclusively of shades ofgray, varying from black at the weakest intensity

to white at the strongest.

cmykThe CMYK color model (process color, four color) is a subtractive color model, used in color printing, and is also used to describe the print-

ing process itself. CMYK refers to the four inks used in some color printing:cyan, magenta, yellow, and key black.

rgbThe RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad

array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.

image types

jpg - compression (artifacts are cumulative with saves) best for

low filesize images without linework

png - (compression cumulative)

tiff - (compression optional) maintains layers

image types

psd - Photoshop file type

AI - Adobe Illustrator file type

001 lecture pixels

Documents