Deadline: 3pm, Tuesday 17 December (week 12)
Handin: zip file of all your files via MOLE.
2. The Task
The canvas should display an arrangement of pictures on a wall as if the pictures were in an art gallery. Each picture should be in a picture frame. The pictures should be images that are loaded in from files. They can be pictures of anything, e.g. take some pictures with your mobile phone or download some free images from the web (as long as you have permission to use them, i.e. check the copyright). The picture frames should be drawn using the canvas drawing commands. For example, you could vary the colour of each frame, or the size of each frame, or whether th edges are straight or curvy. Figure 1 shows some examples. Every picture should have a different frame.
You should assume the browser is displayed on a typical desktop with a minimum size of 1024x768. Thus, you can set a fixed canvas size accordingly. You do not have to deal with responsive web design for this assignment.
There should be 10 images in your collection of pictures, but you will only display five of them at any one time. All the pictures should be the same size.
The same picture should not be used more than once in any display. The pictures should be displayed in three different arrangements on the canvas, as discussed below.
There should be range of buttons on the page:
Button 1, when pressed, should lay out a row of five pictures (and their frames) on the page. The middle of each picture (not including the frames) should be aligned in the row, as illustrated in Figure 2.
Button 2: When this is pressed, five pictures (and their frames) should be randomly positioned on the canvas, as illustrated in Figure 3. The pictures (and their frames) should not overlap each other.
Button 3. When this is pressed, five pictures (and their frames) should be positioned with one picture in the middle of the canvas and the other four pictures displayed near each corner of the one in the middle, as illustrated in Figure 4. The
pictures (and their frames) should not overlap each other.
Whenever Buttons 1, 2 or 3 are pressed again, the pictures (and their frames) should be randomly chosen again for the particular layout.
Button 4: When this is pressed, the pictures and their particular arrangement should stay the same but the picture frames should change to different picture frames. All the frames should be different.
Each button should be given a name that matches its action. You decide the names.
The following canvas input should also be implemented:
For the three arrangements of pictures, whenever the user clicks on a picture with the mouse, that specific picture should be replaced by a different random picture which should not match any of the other pictures currently on display.Below the canvas and the buttons, you should provide a brief explanation of how to use the software and what happens when a user clicks the buttons and on the canvas – essentially this is similar to the text I have given you above, but it does make the page self-contained.
(Hint: Initially develop your program by drawing rectangles of a single colour instead of images. When that works, replace the rectangles with images.)
3. Handin via MOLEHandin via the assignment link on MOLE. Handin all the code by creating a zip file called name.zip, where name is your name, e.g. JaneSmith.zip.
4. MarkingThis will include:
Comments, layout and code structure (8%)
How well the application works, the completeness of the application, and the quality and creativity (17%)
5. Practical considerations
5.1 Keeping your work privateYour website should be developed in a local folder in your CiCS managed desktop file space, not in your Department mypublic_html folder.
5.2 Unfair means
The standard Department rules for use of unfair means will be applied, as described in the undergraduate student handbook: https://sites.google.com/sheffield.ac.uk/comughand book/general-information (Menu: General Information, Assessment)
Do not copy any similar examples from the web since that would be plagiarism.
5.3 Late handinStandard Department rules will be used for late handin – see: https://sites.google.com/sheffield.ac.uk/comughand book/general-information (Menu: General Information, Assessment)