Class+Notes

Post any informative notes here - anything that was spoken by the teacher or learned during lecture.

toc

Images and the Web
A lot of students have difficultly in determining what file format to save their images in. Here is a small note to help you save your files for the web.

**What is a .JPEG or .JPG?**
- JPEG stands for Joint Photographic Experts Group - JPEG is the standard method for photograph compression - used for photo-based imagery such as images with a lot of different colours made up of many pixels - Here is another example of a JPEG: [|photography]
 * - Below is an example of a JPEG**

**What is a .PNG?**
- PNG stands for Portable Network Graphics - use for photo-based images where background transparency is required - PNG's allow you to have a transparent background in an image such as a drop shadow without carrying over a white background - If this smiley had a pink drop shadow and was placed on a web page with a black background it would blend in and look natural, whereas if you were to save the file as a JPEG there would be a white box behind the image and it would not blend with the background - Here is another example: [|an image placed on top of a coloured background or another image] (this example takes the penguin out of its original background and places it into a different background)
 * - Below is an example of a PNG**

**What is a .GIF?**
- GIF stands for Graphics Interchangeable Format - used for images with solid colours - examples: logos, vector based images, [|coloured blocks] - Below is an example of a GIF logo

Processing - Backgrounds in Void Draw
Adding the background colour under void draw will refresh the background every time. This allows you to draw on a **new** background each time a movement is made in the animation. In the right-side image displayed below, the red dot moves around the space without having its shape repeat itself across the background. void draw { background (#7E6F6F); //repeats the background ellipse (x,y,90,90); }

By not adding the background colour under void draw, the background will stay the same. This means that you will constantly be re-drawing on the **same** background and each movement made in the animation will be shown. In the left-side image displayed below, the red dot moves around the space where its previous position is shown across the background. void setup { background (#7E6F6F); }

void draw { ellipse (x,y,90,90); }



More information on redrawing backgrounds here.

Mobile Phone Exersice
We did an evaluation in the class for the different phone companies based on their visual design of the website and how easily a custmer can find information about "Lost phone" procedures. Here are the results: