ICL - 1010 Digital Graphics (JS Canvas)

This is the beginning of my journey into Java Script and Programming, this is a record of my Graphics assignments as part of my APPLIED DATA SCIENCE DEGREE APPRENTICESHIP BSC (HONS). Feel free to take a look and use the files, more than happy to share and help people on their own journey.

Assignment One

Part 1: Design a web page.

• Using the scenario above you are to design and create a small selection of mock up designs (image quality is not important here, but placement is). Indicate which design you will follow and give reasons for your decision.

Part 2: Create the web page using HTML, JavaScript and Canvas.

• Using your chosen design, create the single Welsh Heritage web page using HTML, (CSS is optional) JavaScript and the Canvas API. You should aim to use a range of Canvas elements.

Part 3: Justify your final design.

• Using your final website compared to your initial design, justify your choices.

Scenario - Welsh Heritage Sites

You have been tasked as a consultant to design a graphically rich web page to promote Welsh heritage. You will only design and create the main landing page. The page title will be simply ‘Welsh Heritage’ and this should be clear on the page. The layout and amount on written content is up to you, but at this stage of design, filler text maybe used (Lorem Ipsum for example). The placement, range and use of images however, is all important. You should aim to show off several elements of drawing and image manipulation, not just loading images.

Assignment Two

Part 1: Design a header.

• Using the scenario below you are to design a mock up design. You should aim to show an iterative process here by showing initial drawn ideas, a basic design and a detailed final solution design. Indicate which element of the design will be animated.

Part 2: Create the web page header using HTML, JavaScript and Canvas.

• Using your design, create the Young Welsh Heritage web page header using HTML, (At this stage, CSS, if required, should be used rather than any HTML styling) JavaScript and the Canvas API. You should aim to use a range of Canvas elements including at least some basic animation. Suitable imaginative animation should be included. Several animations or a complex animated feature are likely to attract higher grades.

Part 3: Review your final solution

• Using your final header compared to your initial design, discuss the merits and limitations of your design, reviewing your work to include suitability and fitness of purpose.

Scenario - Young Welsh Heritage Site

You have been tasked as a consultant to create a graphically rich header for a page to promote Welsh heritage to a younger audience. The header should be made up of multiple elements. You will only design and create the main header. The page title will be simply ‘Young Welsh Heritage’ and this should be included in the header. The placement, range and use of images within the header are important. You should aim to show off several elements of drawing and image manipulation, including at least some simple animation, not just loading images.