CS420 Assignment 2 Solution and Discussion
-
Re: CS420 Assignment 2 Solution and Discussion
Assignment No. 02
Semester: Spring 2020
CS420 – Web Development for Portable DevicesTotal Marks: 20
Due Date: 15/06/2020
Lectures Covered: This assignment covers Lectures of week # 1 to 5.
Uploading instructions:
Please read the following instructions carefully before solving & submitting the assignment:
- The assignment will not be accepted after due date.
- Zero marks will be awarded if the assignment does not open or the file is corrupt.
- The assignment file must be a .zip/.rar file format; Assignment will not be accepted in any other format.
- Zero marks will be awarded if assignment is copied (from other student or copied from handouts or internet).
- Zero marks will be awarded if Student ID is not mentioned in the assignment file.
For any query about the assignment, contact only at [email protected]
Please do not post queries related to assignment on MDB.Rules for Marking:
It should be clear that your assignment will not get any credit if:
• The assignment is submitted after due date.
• The submitted assignment does not open, execute or file is corrupted.
• Your assignment is copied from internet, handouts or from any other student
(Strict disciplinary action will be taken in this case).Assignment
Question (20 Marks)
You are required to develop an HTML5 based webpage which draws an Animated Solar System (i.e. moon revolves around earth and earth revolves around the sun) on canvas.
Here is a screenshot of a sample page.
Your Task is to make such a page suitable for portable devices. You can use concepts of HTML5, CSS and JavaScript etc.NOTE: Do not put any query on MDB about this assignment, if you have any query then email at [email protected]. Furthermore, if any student found cheating from any other student or from online forums then he/she will be awarded ZERO right away and strict disciplinary action will be taken against the student.
You will compress all necessary files. Upload the compressed file on VU-LMS on or before 15/06/2020.
-
@cyberian said in CS420 Assignment 2 Solution and Discussion:
You are required to develop an HTML5 based webpage which draws an Animated Solar System (i.e. moon revolves around earth and earth revolves around the sun) on canvas.
Here is a screenshot of a sample page.Your Task is to make such a page suitable for portable devices. You can use concepts of HTML5, CSS and JavaScript etc.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CS420 - Assignment # 2</title> </head> <body> <canvas id="canvas" width="1000" height="1000"></canvas> <script> var sun = new Image(); var moon = new Image(); var earth = new Image(); function init() { sun.src = 'images/canvas_sun.png'; moon.src = 'images/canvas_moon.png'; earth.src = 'images/canvas_earth.png'; window.requestAnimationFrame(draw); } function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.globalCompositeOperation = 'destination-over'; ctx.clearRect(0, 0, 800, 800); // clear canvas ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(400, 400); // Earth var time = new Date(); ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds()); ctx.translate(205, 0); ctx.fillRect(0, -12, 40, 24); // Shadow ctx.drawImage(earth, -12, -12); // Moon ctx.save(); ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds()); ctx.translate(0, 28.5); ctx.drawImage(moon, -3.5, -3.5); ctx.restore(); ctx.restore(); ctx.beginPath(); ctx.arc(400, 400, 205, 0, Math.PI * 2, false); // Earth orbit ctx.stroke(); ctx.drawImage(sun, 0, 0, 800, 800); window.requestAnimationFrame(draw); } init(); </script> </body> </html>
images folder
images: