Digital Media Computing Assignment 2
Submission: Sunday October 19, 2014 at 11.59pm (end of week 12).
Marks: 20% of final semester mark for final submission
Version: 1.0
Aim:
To demonstrate how little information the average human needs to determine what is happening in an image by isolating ‘interesting parts’ of an image. To show how this minimalist approach can be extended to video.
Background:
In assignment 1, we made cartoons and/or drawings. A generated cartoon (as opposed to a handdrawn cartoon) is essentially a simplified version of a real-life rendering, where the author decides what to keep, what to emphasize or simplify, and what to throw away. You were required to produce three different kinds of renderings and rto comment between them.
In this assignment, you must transfer any one of those effects or renderings to HTML5/JavaScript and work further with it. This assignment has three parts. To get full marks for parts 1,2 you need to have implemented the superior part. To get bonus marks, you need to do both 3a/3b and 4a/4b.
Because of browser compatibility issues, your program should have good error handling capabilities, so that it will not crash. You should use many try{} / catch{} statements to avoid losing control.
Detailed Requirements
1. Design Modification: You must replicate one of the effects that you did in the first part in the form of HTML5/JavaScript.
a. You firstly perform the conversion for an input image. You are strongly encouraged to code in an extensible manner, but will come across multiple issues in the conversion process which you need to document. For example, Processing has classes and objects, JavaScript does not (strictly), so how did you handle some of the object oriented aspects.
b. You must now repeat this effect for an input video.
c. Superior: Include one or more of your other effects as an option, selected by a form element (See below), and changing parameters as needed.
2. Data Input: You should create a form using HTML5’s form handling, that includes:
a. The name of the image or video to upload,
• You can default this name to the one that you include in the assignment.
b. The width and height that you want to render it
• or leave either blank so that the natural size of the image or video is used.
c. Any effect parameters that you want to set as form elements (eg. threshold level).
• Form elements = text, buttons, radiobuttons, pull-down lists, etc
d. A Chroma-key selection form element (see below), including a ‘None’ option.
e. A Submit button, causing an onSubmit() event to be raised..
1. Input validation should start when a user presses the Submit button, If the input is valid, then the rendering process should commence.
2. The error case of being unable to find the file, or play the video should be handled. Leave a space for error messages somewhere on the form. You should implement the try{} / catch{} method of error handling, in the validation step, to ensure you catch all errors.
3. If the width, height or other parameters was blank, or could not be interpreted, then after validation, but before rendering, the program should fill in the height and width from the file selected, and any default values for the paramters, replacing whatever is there.
4. For video rendering, be sure to include the standard controls, but do not autostart the video. The user should start it using the controls.
f. Superior: When a video is selected, use (approximately) the 100th frame (about 5 seconds in) of the video as a poster image, before playing it.
3. Code Extension: Implement one of the following:
a. Implement the Chroma-key as from assignment 1.
1. You will need extra form elements to read a secondary image or video file. I suggest using the tab-form as shown in one of the lab exercises.
2. Show both the source image/video, and the resultant image/video.
3. Only the colour-mask mode needs to be implemented (not binary or vignette), but you should convert from RGB to HSV and specify (in the form) a range of H values as the mask.
b. Implement the Frame Difference for pencil-drawing effect
1. This is similar to the frame difference lab demo but used on the video after the effects is applied, rather than the original.
2. You may need to use an edge detector to get decent edges
3. You will need to show the original video, and the frame differenced video
4. Interaction: While a form is good for initial settings, Some sort of interactivity is also needed
a. If you chose the Chroma-key option:
• Use the mouse x,y location on the source video to select the colour to use for masking (ie onClick() event on the source canvas).
b. If you chose the Frame-Difference option
• Use the mouse y location when the mouse is on the left half of the frame difference video canvas, to change the number of frames different (1-10), and when on the right half of the canvas, to change the brightness of the effect.
5. Bonus marks: If you implement both Chroma-key and Frame Difference (in different tabs – see the histogram equalisation lab for an example of tabs), then provided at least one is completed, you will also receive the marks for the other option.
While the assignment may work with the images and video used in the lab, you should supply at least one set of images/videos of your own.
Note
A total of 3 extra bonus marks can be given if you do both parts a and b of parts 3 and 4, and they work well. This means that if you had a lower mark in assignment 1, then you have an opportunity to catch up. While the total marks for this assignment can be 23% with the bonus marks, the assignment total cannot exceed 50%, so the bonus marks only helps you if you got less than 30 marks for Assignment 1.
Report
Write a short HTML report describing the details of each of the operations you wrote, perhaps with screen shots if needed. You should also include the 2 completed images after processing. Clicking on a link in the report should start your program.
You are welcome to put this online on your website after the exam period is over. Do not do this before then lest late submitters may copy it.
Demonstration
You may optionally demonstrate your program during tute/lab class in the week before the submission deadline and get some feedback. This will give you a few days to fix any obvious errors. Final mark will be posted on myRMIT.
Third-party libraries. For this assignment, you are allowed to use third-party library files to do the basic image processing, such as Pixastic, or other such tools. If you do include them, they should be properly documented with links to the website. Also bear in mind that some of these linrarues are too slow for use in video.
What / How to submit
• A folder called myDMC containing:
• At least one set of images and videos needed to show off your work.
• your code
• An HTML Report containing
• A description of your implementations and the decisions you made to get the image to look right,
• Any problems you had
• A relative link to the code, to make it easy for the marker.
• MyDMC folder and the report to be stored in a ZIP file called DMCAss2.zip
• You submit the Zip file above via myRMIT.
Marking Guide
Aspect Marks Explanation
1-Design 4 0 = not done, 1 = with errors, 3 = good effect, 4 = superior effect overall 4 0 = poor overall design, no comments, program crashes not
Code Quality / handled,
Functionality / 1 = adequate design, some comments,
Structure / 2 = good design, many comments, reasonable variable names, Internal Doc’s 3 = good design, well commented, good variable names, 4 = superior design, easy to understand / modify / adapt.
Library quality. Pleasure to read and learn from.
2 - Data Input, 2 0 = not working, or not done
3 - Code Extension, a. or b. 3 1 = many parts working
4 - Interaction. a. or b. 3 2 = all parts working, good design
3 = Excellent design, easy to understand / modify / adapt.
Library quality. Pleasure to read and learn from.
2 - Superior part (+1) • For 2, +1 for superior part if done and working
5 - Bonus Marks. a. and b. (+3) • For 5 add up to 3 marks if both 3a/b and 4a/b is done.
Report / User manual 3 0=no report, 1=Minimal Report, 2=Good report, 3=Thorough Report
Total 20 (+3 bonus)