hit counter

I'm currently completing a Masters course in Human-Centred Computer Systems at the University of Sussex. This section of the website is for an on-going 'learning diary', for me to write my thoughts and notes on various courses and my dissertation.

Entries in Multimedia design (11)

Terrestrially crazy

Finally got to go and play that inaccessible game I found. It's brilliant! Such a good way to demonstrate the problems. Although you could argue that it goes a little over the top, and makes them too obvious. Still it's a good way to make the guidelines fun. Must have taken some effort to come up with all the different techniques.

My little flash project for cat skinning has taken quite a lot of thought. I've divided accessibility issues into 4 broad categories: cognitive, hearing, visual and movement. I'm going to build levels that cover the first three - I did think of one for movement, but I don't think I'm going to have enough time and it was (perhaps) stretching the metaphor a little too far! I'm also only really simulating the other categories at a very basic level, with the aim of illustrating my point rather than accurately mimicing the disability. 

The theme is cat skinning, because there's more than one way to. But I'm focussing on the getting the cat portion of the problem. (The mobility level was around the actual shaving!)

  1. For hearing problems, I'm going to have a level where you have to play a tutorial dvd on cat skinning. Only problem is your TV is broken, so you don't get any audio. The level ends when the subtitles get turned on.
  2. Cognitive issues. You get to the pet store, but all the animals are loose and moving everywhere. In fact, they run away from your mouse. Until you put food out for them, when they stay still and are easy to catch and cage. The idea was to illustrate how much easier things are when they stay put! The level ends when all the animals are caged.
  3. To illustrate the sight thing, I think the light bulb is going to blow in the pet shop. You still have to find the cat out of the caged animals. I haven't decided whether to make the mouse a torch (tunnel vision anyone?) or use tabs and noises yet. Level ends when you get the cat.

So yeah. A series of mini-puzzles to illustrate some of the problems. I'm going to have static pages of information on the relevent disability too, highlighting the situations that may make us all suffer this disability a little - borrowed from one of the HCCS topics we covered. I also want to cover some sample requirements for the BSA audience. I think I'll make the static pages (and the levels) accessible from a main menu, but also have the relevent static pages available as help pages within the puzzles.

Sounds pretty straightforward. But I'm still pretty new to Flash, so it's taking me a little longer than I'd hoped. I'm learning loads of AS3.0, and getting to draw bits and pieces and hopefully get to a stylish little app too.

Posted on Thursday, December 20, 2007 at 15:31 by Registered Commentermartian77 in , | CommentsPost a Comment

Assignment 2 - Big, open-ended, Flash...

I'm so behind on writing up these lectures. I will catch up. I'm not sure when, but I will.

I definitely need to catch up on last Thursday's. I was ill and missed the lecture. It looks like Assignment 2 (the big one... 75% of the course riding on this baby) was revealed. I have to come up with a large Flash executable (well, I could use Director, but there's little point I think) of my choice.

This is where the constraints aiding design comes in. I've got so many different ideas going on. How to select what to do? I've tried drawing up a quick mind-map thing. I think I want to use mostly content I already have. So photos, blogposts etc. But I want to do some designing, and plan with some fonts, colour and layout bits. And then there's the stuff I learnt about at Flash on the Beach. Particles, sound integration...

I need to go back to Chris Orwig's talk maybe, about condensing and focussing, and do some small stuff really well. Make this something I can keep for my portfolio. Get something consistent and good, rather than lots of little bits mishmashed together.

Posted on Monday, November 19, 2007 at 11:12 by Registered Commentermartian77 in | CommentsPost a Comment

Image manipulation

About 99% of images we see in magazines wil have been digitally manipulated, and there is a range of software available for doing that.

Digital images are made up of pixels, so complex processing can be applied by manipulating the values of those pixels, either individually or by applying a formula to all of them.

Statistical operations

Starting from the intensity histogram of an image gives us the distribution of intensity values across an image. We can then create a bi-level threshold by picking a place on the diagram and making every pixel with an intensity value below that a 0 (black) and give everything else an intensity value of 1 (white). The thresholds are normally chosen according to minima in the histogram. You can also tell from the intensity histogram what kind of image this is. A dark image will have peaks in the low end of the chart, while a light one will have peaks at the high end. A low contrast picture will have all of its intensity values in a small range, while a high contrast picture will have a more spread out histogram. To increase the contrast you can stretch the intensity histogram out (known as linear contrast stretching), or lighten a dark image by moving the peaks.

Gamma correction

When an intensity is passed to an output device, there is a non-linear relationship between the intensity value and the output value. So if the intensity increases by 10 times, the output intensity may increase by more than that... Say 100 times for example. So a nice linear grey scale may come out looking not very linear. Gamma correction is applied to correct this.

Intensity = Voltage of the device gamma where gamma is a value for the particular device. It will vary between devices, but is generally between 2.3 and 2.4. 

Pixel group processing 

Uses the  values of the neighbouring pixels to determine the final value of a given pixel. Done by applying a 'convolution matrix' to the values. Doing this can give smoothing, sharpening, edge detection and noise removal, depending on the values used in the matrix. So, you take a 3x3 block of pixels and calculate the value of the one in the middle by applying a 3x3 set of weights to that block.

You can average out the values, by applying a constant 1/9 weight across the matrix. That gives you a smoothing effect. It's a simple thing to implement, but gives some pretty crude results. An alternative is to apply a weighting based on a Gaussian distribution, and this is known as Gaussian smoothing or blur. There's a good outline of the procedure here. (I'm pretty sure I did all about Gaussian distributions in my engineering degree - there are faint bells going off, but nothing particuarly useful!)

 

Posted on Saturday, October 27, 2007 at 16:36 by Registered Commentermartian77 in | CommentsPost a Comment

Image formats

Compuserve developed the Graphics Interchange Format (GIF). There are 2 versions; the 89A version is more useful, allowing for animated GIFs and transparent backgrounds. GIFs work on a restricted palette, so are best for a restricted colour range. They are great for line art or icons. However, be wary of using animated GIFs. They can look really naff and add nothing.

JPEG was formed by a working group from ISO and CCITT (which has apparently been renamed) called the Joint Photographic Experts Group. This is teh dominant format for true-colour images. They can achieve 15:1 to 30:1 compression rates, but compression and unpacking is relatively slow. There are many incompatible coding schemes, but standardisation has occurred.

The stages of JPEG compression are as follows:

  1.  Conversion from RGB to luminance/chrominance colour space (because the human eye is less sensitive to chrominance change than brightness).
  2. Colour information is then sub-sampled (lossy). Codes in 2x2 cells are stored as 4 intensity values and 2 colour difference values. Requires 6 values per group instead of 12.
  3. The image is then split into blocks of 8x8 and a Discrete Cosine Transform (DCT) is applied. Intensity data is transformed to frequency data. This process is reversible, so this stage is lossless.
  4. The frequency information is then quantized, which is lossy. Particularly applied to high frequency chrominance information, as the eye can't detect this. May remove some values and increase the occurance of others. E.g. the values 78, 79, 80, 81, 82 could all be replaced by 80.
  5. The data is then subjected to Huffman coding (as mentioned in the compression entry!).

It is possible to equate the quality setting to the compression rate. The default is a 75% quality setting, at a 12:1 compression rating. As compression rating gets higher, the 8x8 blocks become increasingly noticeable in the final image.

There is now a (relatively) new bitmapped graphics format called Portable Network Graphics (PNG). This is similar to the GIF format, and has been approved by the WWW consortium as a standard. GIF is subject to patent rules because the LZW compression that it uses is under patent. PNG uses lossless compression and handles full colour images, giving better quality than GIF. It doesn't support animation (but that may not be a big problem!). Apparently there may be a new version that does support animation.

 

Posted on Saturday, October 27, 2007 at 16:05 by Registered Commentermartian77 in | CommentsPost a Comment

Compression

This follows on from the colour model discussion in the bitmap image entry. If we are going to store high quality, memory intensive images, we may need some way to compress the data so that it takes up less space.

There are two ways to do this: lossy and lossless. Lossy throws away information. Lossless (guess) doesn't. In the lecture it was demonstrated as two different ways to tidy a room. You could either tidy it by restacking everything so that it takes up less space (but doesn't actually reduce the amount of stuff) or you can tidy by throwing out all the stuff you don't need any more (empty pizza boxes were the example used). Lossless compression restacks the information, but the original information is always still available. Lossy compression throws away the information we say we don't need any more.

Run Length Encoding (RLE) is a very basic form of lossless compression. It stores the data in a more appropriate form. So if (for example) you have a long string of 1s and 0s as your data like this: 11111111111111111100000111111111, it could be stored as  18,5,9. That takes it from 4 bytes (32 bits) to 3. This method of encoding rarely gives compression ratios of better than 2:1.

You can get more complex with lossless compression and use Huffman coding. That replaces common pixel values witha  short code, and less common with a longer code. It may result in some individual segments taking more memory to store, but these should be infrequently used and this can give from a 27% to maybe a 40% reduction in size. This does rely on an unequal distribution of pixels, so trying to compress an equally-distributed image may actually result in an increase in size. It is used as the final stage in the compression of jpegs.

Then we have Lempel-Ziv-Welsh (LZW) compression. This is probably the most widely used lossless compression - used in Unix compression and GIF. It works very well for text documents but much less well for noisy images. It is on a similar idea to Huffman coding, but instead of individual colours it replaces whole repeating sequences with a code that points to a data dictionary entry.

Lossy compression works on removing the information that we don't need. It works by taking advantage of the properties of human vision and hearing, and tries to remove data where it won't be noticed. In the case of images, that is normally colour information (the eye is not so good at recognising tiny changes in colour) and in sound it's the bits you can't really hear.  

Posted on Saturday, October 27, 2007 at 15:31 by Registered Commentermartian77 in | CommentsPost a Comment
Page | 1 | 2 | 3 | Next 5 Entries