processingthepixels-blog

[processingthepixels-blog]

ASSESMENT 2: COLOUR

Provide a written and Illustrative evidence that demonstrates that you understand how the following colour systems work on a computer:

-     Colour modes:

·        RGB (additive): System for representing the colours in a screen by the combination of red, green, and blue. Levels of R, G, and B can each range from 0 to 100 percent of full intensity. The range of decimal numbers represents each level from 0 to 255. The total number of available colours is 256 x 256 x 256

·        CMYK (subtractive): It is used for printing. The colour are made by the mixing cyan, magenta, yellow and black.

·        Hexadecimal (hex): the colour is represented by hexadecimal values. The code itself is a hex triplet, which represents three separate values that specify the levels of the colours. The code starts with a pound sign (#) and is followed by six hex values or three hex value pairs. Example: #FFFF00 (yellow)

·        HSB: HSB stands for Hue, Saturation and Brightness. According to this model, three numbers represent any colour. The first number is the hue, and its value ranges from 0 to 360 degrees. Each degree represent a distinct colour. First, there is the red colour (0 or 360 degrees) and then there are all other colours up to the violet colour. The second number is the saturation. It represents the amount of colour or, more exactly, its percentage. Its value ranges from 0 to 100, where 0 represents no colour, while 100 represents the full colour. Finally, the third number is the brightness.

 -         Hue: Refers to the attribute of a visible light due to which it is differentiated from or similar to the primary colours. The term is also refers to colours that have no added tint or shade.

-        Saturation: Colour saturation refers to the intensity of colour in an image. It determines how certain hue will look in certain lighting conditions.

-        Tone/brightness: Brightness is the perception of how intense the light coming from a screen is. It can be measured in terms of the amplitude of the light being emitted from a screen.

-        Grey scale: Collection or the range of grey shades, ranging from white on the lightest end to pure black on the opposite end. It only contains luminance (brightness) information and no colour information

-        The use of histograms: It is a representation of the distribution of colours in an image. Represents the number of pixels that have colours in each of a fixed list of colour ranges that span the image's colour space, the set of all possible colours.

-        Transparency: The “pigment” of the colour decrease making the colour to be transparent. This value can be adjusted.

-        Alpha channels: It is a colour component that represents the degree of transparency (or opacity) of a colour. It determines how a pixel is rendered when blended with another.

[processingthepixels-blog]

ASSESMENT 3: DISPLAY SYSTEMS

  -        Raster files: Digital images created or captured as a set of samples of a given space. A raster is a grid of x and y coordinates on a display space (z for three-dimensional coordinates). It identifies which of these coordinates to illuminate in monochrome or colour values. Sometimes is referred as a bitmap because it contains information that is directly mapped to the display grid. It is a difficult to modify file and larger than a vector file. Examples of this kind of files: BMP, TIFF, GIF, and JPEG.

 -          Pixel grids: It is a physical point in a raster image, or the smallest addressable element in an all points addressable display device; so it is the smallest controllable element of a picture represented on the screen.

 -        Bit depth: Refers to the colour information stored in an image. The higher the bit depth of an image, the more colours it can store.

-        Resolution:                                       It is a measure used to describe the sharpness and clarity of an image or picture.

-        Vector files: Constructed using mathematical formulas rather than individual coloured blocks, vector file types such as EPS, AI and PDF (depending how the PFD is create it can be a raster file)        

[VIEW FIRST PICTURE FOR AN EXAMPLE]

-       x, y and z coordinate systems:

-        Anti- alias: Technique used in digital imaging to reduce the visual defects that occur when high-resolution images are presented in a lower resolution.

-         Aspect ratio: Image projection attribute that describes the proportional relationship between the width of an image and its height. For example: 16:9

-       Colour pallets: It is the full range of colours that can be displayed on a device screen or in some cases, a collection of colours and tools for use in illustration programs.

[processingthepixels-blog]

ASSESMENT 4: MANAGING FILES

We would like you to provide written and Illustrative evidence that demonstrates that you understand how graphic file storage and visual data systems work on a computer.  To do this can you provide both illustrative and annotated evidence of the following:

-        Describe a range of graphic file format types and how they work:

o   GIF: it is "lossless" only for images with 256 colours or less. When the image contains many colours, the software several algorithms to approximate the colours

o   TIFF: it is used almost exclusively as a lossless image storage format that uses no compression at all. Big size of files.

o   PNG: lossless storage format. The difference with TIFF is that with PNG we can compress the size of the files.

o   PSD/PSP: Format used in graphic programs.The format allows you to keep editing the image.

o   RAW: It is lossless, although there are different RAW formats. It is similar to TIFF, but in a smaller file size.

o   JPG: it works by analysing images and discarding the information that the eye is least likely to notice. It stores information as 24 bit colour. The compression can be adjusted.

-        Discuss the advantages and disadvantages of lossy and lossless file compression:

Lossy algorithms accept some degradation in the image in order to achieve smaller file size. It might store colour information at a lower resolution than the image itself, since the eye is not so sensitive to changes in colour over a small distance. However, the lossless compression algorithm discards no information. It looks for a recurring pattern in the file, and replace each occurrence with a short abbreviation by cutting the file size.

-        How is metadata and meta files used in computer graphics?

 -        What type file naming conventions are commonly used?

JPG, GIF and PNG.

-        The importance of file management and file location:

[processingthepixels-blog]

Project

[processingthepixels-blog]

Assesment 2: Interactivity

1.      Interactivity:

·        Open form: There is more options of interaction between the computer and us. For example, this would be the case of a website for shopping clothing, where we can select a wide range of options, contact, comment, save, use discounts codes, to zoom, and other possibilities.

·        Closed form: The interaction between the human and the computer is limited.

·        Physical: The interaction is produced by a physical action. It could go from pressing a bottom from making a movement to create a response, as we have been seeing for years with some consoles gadgets or artworks. It is to produce a change in what is around us.

·        Internal and cognitive: It is the process that happens with certain stimulus, such as games of missing words or artworks. It can be also translated to the computer environment.

2.     The history of human and computer interactivity:  Look at the history of input and output devices used to communicate with computer programs.  Explain how these devices affect the type of human computer interaction:

·        Simulation: Depending on the simulation, the communication can be open or closed depending on the options that the game is giving the user. In a driving simulation game, the interaction would be open because of the wide range of possibilities. It will also be physical as there is movement involved for making the game work. There is as well, a use of the cognitive communication for the responses of the users to the images.

·        Hypertext: It is a text that can be linked to another text or document. As the name indicates, it goes beyond the text. The interaction in this case would be closed.

·        Games: Usually, the more interactive a game is, the more successful it is. They use open interaction form, mostly a light physical interaction and there is always internal one, as there is going to be images, sounds and text stimulating the user for creating a response. However, there are also cases of closed interaction such as “Flappy Birds” a few years ago.

·        Task orientated software: There is a wide range of options and choices that get continuously upgrade, so I would say there is an open interactive form. For example, in Photoshop there are different ways of getting the same result. There is barely any physical interaction further from moving the mouse or the pencil, although there is internal interaction.

3.     Working in small groups of 3 or 4 people, use paper to make the following interactive artefacts: Something that travels, game, puzzle, decoration or musical instrument:

Can you explain the interactive theory used in your ideas?

After a few suggestions, Amy, Scott and I decided to use the game “OSO” for this task. It is easy and simple to play even with the language value. It has a high cognitive interaction as your brain has to think about quick responses for making the word without others being able to. At first, it seems easy, but there is a point where there are many options and it gets even difficult to make the word. The interaction is closed as the options are the different positions of the grid and two letters. There is also the possibility of crossing the words with different colours. There is no physical interaction.

We were looking for something simple and eye-catching.

Use Processing* to create an interactive and variable picture or sequence of pictures:

[processingthepixels-blog]

Assesment 3: Engagement

1.    Explain the following:

 ·        In film, the audience is hooked within minutes, usually seconds... how does film do this?

In film, the engagement is by stablishing shots in the opening or in the first few seconds/minutes. It can be with the characters, the location, a bit of the story behind or the cinematography.

·        Give two examples of outstanding opening sequences from films, and describe how the directors: orientates the audience and establish key information.

 ·        Volver (2006), Pedro Almodovar:

The movie starts with a long shot going to the left showing women in a cemetery cleaning the graves of their deceased husbands. The camera stops in a family of just women where is Penélope Cruz.  They introduce in a few seconds what happened to the parents of the two sisters, why there are many women in that cemetery, Raimunda’s way of thinking and make the audience wonder about her husband.

https://www.youtube.com/watch?v=E2Q1gGCKILw

·        Die Welle (2008), Dennis Gansel:

There is a man in a car singing Rock and Roll High School by The Ramones on his way to work as a teacher. We see him from being driving to his destination to walking through the high school. We can already see that he is no a conventional teacher. He is more what students would define as cool. The soundtrack, the way he dresses and how the students say things to him give us some clues. In my opinion, the fact that in the song it says “Well I don't care about history”, it is one of the most important clues. As the movie talks about how history is important for not to make the same mistakes. In this case, it is authoritarianism.

https://www.youtube.com/watch?v=ih7i-2IAU8w (Spanish version as the English clips are cut before the end of the scene).

 2.      Engagement activity:

[processingthepixels-blog]

Assesment 4: Information structures and  navigation

1.      Metaphor:

-         In film for the passage of time:

The most common metaphor in film for the passage of time is the clock or sequences of the seasons. With the first example, the clock does not need to be alone in the scene; it can be in the background in a strategic point for the audience being able to see it.  In the second one, the change can be by the clothes and the atmosphere.

-         In real life for direction and movement:

 -        On the computer for processes/tasks in software programs:

In Windows is represent with a blue circle spinning as the arrows of a clock. It is an icon next to the arrow to help us understanding that we have to wait for the computer to work.

 2.      Discuss Theodor Holm Nelson’s criticisms of the ‘desktop’ metaphor, e.g. describe briefly why you agree or disagree with the following view point: -

“We are told to believe that this is a “metaphor” for a ‘desktop’.  But I personally have never seen a desktop where pointing at a lower piece of paper makes it jump to the top, or where placing a sheet of paper on top of a file folder causes the folder to gobble it up. I don’t believe such desks exist; and I don’t think I want one if it did.”

Nelson, The Art of Human-Computer Interface Design, (1990: 237)  

I agree with Holm Nelson. I do not think there is a metaphor in the desktop as it is just icons representing real life objects in the virtual context. I see it more as a representation, a translation in pictograms of codes we cannot understand. 

3.      Three icons:

They are simple icons easy to understand. They are representations of daily objects for symbolizing actions that the computer can do. They are design for everyone to be able to use by anyone.

4.     Screen space:

Movie example:

Computer example:

5.      Modular Systems:

 6.      Navigation:

Examples of computer based navigation systems:

Examples of real world navigation systems:

Identify commonalities between computer based and real world navigation systems:

Both of the systems are represent with a symbology easy to understand. The illustrations are always present as a way to guide the person looking at it. They tend to be simple so anyone can follow the instructions no matter where they come from. For computers, I feel it is more intuitive and difficult for old people that is not used to how computers works; meanwhile they can perfectly use real world navigation.

7.      Navigation in your website:

(“Random” comes with the theme used. I have decided to keep it as I found interesting the fact of it showing a different post all the time from the actual posts and reblogs).

[processingthepixels-blog]

Using the RGB colour mode create a simple grey scale composition: 

void setup(){

 size(800,400);  background(255,255,255);

}

void draw(){

 fill (100,100,90);  rect (300,100,100,100);  fill (90,100,100);  rect (100,155,40,40);  fill (100,90,100);  rect (600,90,40,40);

}