<![CDATA[CS420 Assignment 2 Solution and Discussion]]>Re: CS420 Assignment 2 Solution and Discussion

Assignment No. 02
Semester: Spring 2020
CS420 – Web Development for Portable Devices

Total 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:

  1. The assignment will not be accepted after due date.
  2. Zero marks will be awarded if the assignment does not open or the file is corrupt.
  3. The assignment file must be a .zip/.rar file format; Assignment will not be accepted in any other format.
  4. Zero marks will be awarded if assignment is copied (from other student or copied from handouts or internet).
  5. Zero marks will be awarded if Student ID is not mentioned in the assignment file.

For any query about the assignment, contact only at CS420@vu.edu.pk
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.
194bc196-4daa-4876-b644-1cf87cbe767c-image.png
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 cs420@vu.edu.pk. 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.

]]>https://community.secnto.com//topic/1931/cs420-assignment-2-solution-and-discussionRSS for NodeMon, 08 Jun 2026 20:45:46 GMTTue, 16 Jun 2020 16:06:30 GMT60<![CDATA[Reply to CS420 Assignment 2 Solution and Discussion on Tue, 21 Jul 2020 08:53:12 GMT]]>@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
c513141f-d0e8-47e0-b866-045535ab5ee1-image.png

183cd962-9200-45ca-8868-cc3297b420b2-image.png
images:
canvas_sun.png canvas_moon.png canvas_earth.png

]]>https://community.secnto.com//post/5755https://community.secnto.com//post/5755Tue, 21 Jul 2020 08:53:12 GMT