CS420 Assignment 2 Solution and Discussion


  • Cyberian's

    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 [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.
    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 [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's Gold

    @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


  • Cyberian's Gold

    @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



Quiz 100% Result Quiz 100% Result
| |