StackEdit https://stackedit.

io/app#

Lab 1: Percep!on & Mul!media Compu!ng:

Ambiguity

Part1

When we move our heads away from the screen at a certain distance, we no!ce that we stop
seeing the black point and we see the whole white background. This is due to an interpola!on of
our brain because that object is not able to see it physically to have found the blind spot.

If we change the black point of place, we just have to perform the same sequence of ac!ons, but
with the opposite eye, and we will observe that the same phenomenon of interpola!on occurs in
our vision.

Part 2

We chose this bistable image because it was composed of simple graphic elements to render with
the knowledge of the framework and because it was a clear example to realize this lab.

A good image that everyone knows today is the image of the cup or the image of the two men
facing each other. This op!on was much harder to draw, but it is the most widespread and known
by all.

When implemen!ng the bistability in our image I have thought strongly about the posi!on of the
basic elements of drawings, as well as their order. For our case, the posi!on of the axes in the
background is key to give one of the possible interpreta!ons. The same happens with the white
square that exists in the center of the composi!on. If we draw it a"er the axes and circles, we
compose an image that gives a different percep!on to that if we draw the circles first, then the
rectangle and then the axes. Of this last form the image gives the sensa!on of being created from
four circular segments.

Lab 2: Color Vision

Part 1

When we increase the speed of rota!on of the image we can see how the segments of inner arcs
give a sense of rota!on in the opposite direc!on to the natural of the image. That is, if we have the
direc!on of rota!on for the right, the sense of rota!on of the circumference arcs are for the le". If
we have the direc!on of rota!on for the le" of the image, the sense of rota!on of the inner circle
arcs are to the right.

1 de 5 09/11/2018 10:28
StackEdit https://stackedit.io/app#

If we lower the speed we can correctly visualize the direc!on of rota!on and the circumference arcs
do not provide another direc!on of rota!on to our percep!on but the natural one (it coincides with
the direc!on of rota!on of the complete image)

Part 2

We decided to implement the user input with a slider. Thus, the change of values of a color channel
is more adjusted.

In the first approach we adjust the colors based on the green channel and the red color channel.
That, as we have seen in the theory causes problems to people with problems of color dis!nc!on
(Deuteranopia, for example).

To solve this, we have transferred the composi!on of the color to several channels, so even if a
person is not able to dis!nguish the green channel from the red one, he will be able to dis!nguish
the composi!on of red and blue or green and blue.

Part 3

When we implement a grid it is reasonable to think about its genera!on by means of the
dependence of the width of the sketch (to generate columns) and the height of the sketch (to
generate the rows).

Following this philosophy we have solved this sec!on of the lab.

To adapt the design to a grid of 4 columns, we had to change the division literal in the genera!on of
the grid (width / 4) and the displacement in the X axis.

Lab 3: Device-dependent Colour Spaces

Part 1

We make a grid representa!on of the pixels:

function drawMatrix(){
for(var i = 0; i < matrixColors.length; i++){
for(var j = 0; j < matrixColors[i].length; j++){
if( (i+j)%2 === 0){
fill(250,0,0);
}else{
fill(250,250,0);
}
// grid representaton

2 de 5 09/11/2018 10:28
StackEdit https://stackedit.io/app#

rect(i*widthPixel, j*heightPixel,widthPixel,heightPixel);
}
}
}

R1 G1 B1

210 120 0

R2 G2 B2

220 110 0

R3 G3 B4

215 115 0

R4 G4 B4

220 130 0

RM GM BM

210 115 0

Part 2

The implementa!on made by us does not offer the same results as the implementa!on offered by
the framework. We have not managed to find out the reason for the difference in values

Part 3

In this sec!on of the lab we have to apply filters on the images. We take advantage of the code of
lab 2 when we show the image of the wheel to show a chosen image (bird).

We have no!ced that the difference between the gray scale filter and the inversion of the image at
one point is the opposite value of color with respect to each other.

To modify an image we have to modify the contrast, luminosity and colors of the image to achieve
the same effect as the investment

Lab 4: Colour Spaces 2

Part 1

3 de 5 09/11/2018 10:28
StackEdit https://stackedit.io/app#

In this part of the lab we have to model classes to be able to create the basic components of a
chroma!c diagram. For this we have implemented the following design:

class Rgb {
R: number;
G: number;
B: number;

constructor(R: number, G: number, B: number) {

this.R = R;
this.G = G;
this.B = B;
}
}
exports.Rgb = Rgb;

class Xyz {
X: number;
Y: number;
Z: number;

constructor(X: number, Y: number, Z: number) {

this.X = X;
this.Y = Y;
this.Z = Z;
}
}

exports.Xyz = Xyz;

var srgbToXyzGamma = function(intensity: number): number {

assert(intensity >= 0);
assert(intensity <= 1);

if (intensity < 0.04045) {

return intensity / 12.92;
}

var alpha = .055;

return Math.pow((intensity + alpha) / (1 + alpha), 2.4);
};

var rgbToXyz = function(rgb: Rgb): Xyz {

var r = srgbToXyzGamma(rgb.R / 255);
var g = srgbToXyzGamma(rgb.G / 255);
var b = srgbToXyzGamma(rgb.B / 255);

var X = r * 0.4360747 + g * 0.3850649 + b * 0.1430804;

var Y = r * 0.2225045 + g * 0.7168786 + b * 0.0606169;

4 de 5 09/11/2018 10:28
StackEdit https://stackedit.io/app#

var Z = r * 0.0139322 + g * 0.0971045 + b * 0.7141733;

return new Xyz(X, Y, Z);

};
exports.rgbToXyz = rgbToXyz;

var xyzToSrgbGamma = function(intensity: number): number {

if (intensity <= 0.0031308) {
return intensity * 12.92;
}

var alpha = .055;

return (1 + alpha) * Math.pow(intensity, 1 / 2.4) - alpha;
};

var xyzToRgb = function(xyz: Xyz): Rgb {

var newR = xyz.X * 3.1338561 + xyz.Y * -1.6168667 + xyz.Z * -0.4906146;
var newG = xyz.X * -0.9787684 + xyz.Y * 1.9161415 + xyz.Z * 0.0334540;
var newB = xyz.X * 0.0719453 + xyz.Y * -0.2289914 + xyz.Z * 1.4052427;

var finalR = xyzToSrgbGamma(newR);

var finalG = xyzToSrgbGamma(newG);
var finalB = xyzToSrgbGamma(newB);

return new Rgb(255 * finalR, 255 * finalG, 255 * finalB);

};
exports.xyzToRgb = xyzToRgb;

var avgRgb = function(a:Rgb, b:Rgb): Rgb{

var r = srgbToXyzGamma((a.R + b.R) / 2);
var g = srgbToXyzGamma((a.G + b.G) / 2);
var b = srgbToXyzGamma((a.B + b.B) / 2);

return new Rgb(r,g,b);

}

Part 2

5 de 5 09/11/2018 10:28