Show both the source image/video and the resultant image

Assignment Help Basic Computer Science

Reference no: EM13341985

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.

Reference no: EM13341985

Questions Cloud

Why is a good conductor of electricity also a good conductor : 1. For both electricity and heat, the conduction is via electrons, which in a metal are loosely bound, easy flowing, and easy to start moving. 2. Bound electrons do not exist in materials that are good conductors for both heat and electricity.

What is the number density of the protons in the beam : An accelerator produces a beam of protons with a circular cross section that is 2.0 mm in diameter and has a current of1.1 mA. What is the number density of the protons in the beam

A file containing the case study evaluation report : As an external consultant, you have been hired by a competitor, OCBIN, to analyze the way NIBCO implemented its SAP ERP system and to identify issues that when addressed would create a better outcome. You are to present your analysis in the case stud..

Prepare adjusting journal entries : Prepare adjusting journal entries as you deem necessary. Besides the information provided for adjusting journal entries, review the transactions and review your unadjusted trial balance for any other adjusting journal entries you may need to prepare.

Show both the source image/video and the resultant image : 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.

Explain the activation energy requirement of the reaction : One of the ways catalysts increase reaction rates is by A. Providing a surface for the reaction to occur. B. Increasing the activation energy requirement of the reaction.

Demonstrate the capacity to communicate clearly with stake : Demonstrate the capacity to communicate clearly with stakeholders a range of options that should be considered by a business in an online environment and the ability to apply appropriate structure and referencing formats

How does your company account for sales returns : When does your company record revenue from the sale of merchandise or services and how does your company account for sales returns?

Explain the difference between the energy of the products : The difference between the transition state and the energy of the products. C. The difference between the energy of the products and the energy of the reactants. D. Undefined because it depends on whether the reaction is endothermic or exothermic.

User Account

All Pages