<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Topics tagged with cs42]]></title><description><![CDATA[A list of topics that have been tagged with cs42]]></description><link>https://community.secnto.com//tags/cs42</link><generator>RSS for Node</generator><lastBuildDate>Mon, 08 Jun 2026 20:47:27 GMT</lastBuildDate><atom:link href="https://community.secnto.com//tags/cs42.rss" rel="self" type="application/rss+xml"/><pubDate>Invalid Date</pubDate><ttl>60</ttl><item><title><![CDATA[CS420 Assignment 2 Solution and Discussion]]></title><description><![CDATA[@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.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;title&gt;CS420 - Assignment # 2&lt;/title&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;canvas id="canvas" width="1000" height="1000"&gt;&lt;/canvas&gt;

        &lt;script&gt;

            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();

        &lt;/script&gt;

    &lt;/body&gt;

&lt;/html&gt;


images folder
[image: yPhQ79g.png]
[image: 3h1hWnZ.png]
images:
[image: Wyz0oei.png] [image: 9ZXuk2E.png] [image: WIeofmL.png]
]]></description><link>https://community.secnto.com//topic/1931/cs420-assignment-2-solution-and-discussion</link><guid isPermaLink="true">https://community.secnto.com//topic/1931/cs420-assignment-2-solution-and-discussion</guid><dc:creator><![CDATA[zaasmi]]></dc:creator><pubDate>Invalid Date</pubDate></item></channel></rss>