{"id":37724,"date":"2017-04-03T05:32:19","date_gmt":"2017-04-03T05:32:19","guid":{"rendered":"http:\/\/www.immersive-learning.org\/?p=37724"},"modified":"2017-04-09T14:13:51","modified_gmt":"2017-04-09T14:13:51","slug":"eme-6465-logo-problem","status":"publish","type":"post","link":"https:\/\/emeclasses.org\/?p=37724","title":{"rendered":"EME 6465 &#8211; Intro to Coding and Rendering &#8211; Pseudi Coding Activity"},"content":{"rendered":"<div class=\"su-box su-box-style-default\" id=\"\" style=\"border-color:#0033cc;border-radius:3px;\"><div class=\"su-box-title\" style=\"background-color:#3366ff;color:#FFFFFF;border-top-left-radius:1px;border-top-right-radius:1px\">TEAM ACTIVITY<\/div><div class=\"su-box-content su-u-clearfix su-u-trim\" style=\"border-bottom-left-radius:1px;border-bottom-right-radius:1px\"><br \/>\n<a href=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2013\/06\/dothis.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-37098\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2013\/06\/dothis.gif\" alt=\"dothis\" width=\"60\" height=\"48\" \/><\/a><br \/>\n<script type=\"text\/javascript\" src=\"https:\/\/emeclasses.org\/wp-content\/plugins\/jellybox\/js\/jellybox.js\"><\/script><link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/emeclasses.org\/wp-content\/plugins\/jellybox\/template\/jellybox.css\"><\/link><link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/emeclasses.org\/wp-content\/plugins\/jellybox\/css\/jellybox.css\"><\/link><div id=\"ID69d5e3fcf04f6Container\" class=\"jellyboxLightBlueContainer\" style=\"height:110px; width:300px; z-index: 99998;\"><div id=\"ID69d5e3fcf04f6\" class=\"jellyboxLightBlue\" style=\"height:110px; width:300px; position: relative; z-index: 99999; overflow: hidden;\"> <div id=\"ID69d5e3fcf0539Container\" class=\"CLASS69d5e3fcf053aContainer\" style=\"height:120px; width:120px; z-index: 99998;\"><div id=\"ID69d5e3fcf0539\" class=\"CLASS69d5e3fcf053a\" style=\"height:120px; width:120px; position: relative; z-index: 99999; overflow: hidden;\"> <img decoding=\"async\" id=\"trigger1\" style=\"float: left\" src=\"http:\/\/emeclasses.org\/wp-content\/uploads\/2015\/08\/circle1.png\" alt=\"circle1\" \/><\/div><\/div><script type=\"text\/javascript\">document.getElementById(\"ID69d5e3fcf0539\").jellydata = {\"elementid\":\"ID69d5e3fcf0539\",\"control\":\"onclick\",\"gocontrol\":\"\",\"returncontrol\":\"\",\"ontoggle\":\"\",\"target\":\"trigger1\",\"height\":120,\"width\":120,\"angle\":0,\"gospeed\":750,\"returnspeed\":750,\"deltatop\":0,\"deltaleft\":0,\"deltaheight\":0,\"deltawidth\":0,\"deltaangle\":-90,\"autostartdelay\":0,\"gotimeout\":0,\"returntimeout\":0,\"interval\":0};document.getElementById(\"ID69d5e3fcf0539\").jellyboxcontroller = new JellyBoxController().init(document.getElementById(\"ID69d5e3fcf0539\"));<\/script> <\/p>\n<p style=\"margin-top: -110px;margin-left: 150px\">Before you begin, click the big circle to the left.<\/p>\n<div style=\"margin-top: 80px\"><\/div>\n<hr \/>\n<p> Please note that all references to team activities should be disregarded for the summer 2017 term. <\/div><\/div><script type=\"text\/javascript\">document.getElementById(\"ID69d5e3fcf04f6\").jellydata = {\"elementid\":\"ID69d5e3fcf04f6\",\"control\":\"onclick\",\"gocontrol\":\"\",\"returncontrol\":\"\",\"ontoggle\":\"\",\"target\":\"trigger1\",\"height\":110,\"width\":300,\"angle\":0,\"gospeed\":750,\"returnspeed\":750,\"deltatop\":-130,\"deltaleft\":0,\"deltaheight\":130,\"deltawidth\":0,\"deltaangle\":0,\"autostartdelay\":0,\"gotimeout\":0,\"returntimeout\":3000,\"interval\":0};document.getElementById(\"ID69d5e3fcf04f6\").jellyboxcontroller = new JellyBoxController().init(document.getElementById(\"ID69d5e3fcf04f6\"));<\/script><br \/>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div><br \/>\nOk.. Normally, the &#8220;do this Box&#8221; follows all lessons. However, this activity is one big &#8216;do this&#8217; so I have encased the entire activity into the box. In order to get you to understand how coding and rendering actually works, I have devised a simple set of coding activities. I think many of you understand what coding is. But the concept of rendering is a bit more complicated. Most suggest that rendering deals with 3D images etc. But in the classical sense, when you program something in a computer, it &#8216;renders&#8217; back displays or actions based on the coding being used. For example, when you create a word document and bold certain words, what happens underneath is that the software utilizes coding to complete the task. What we are doing here is going &#8216;under the hood&#8217; so-to-speak and creating some hypothetical code for the software to follow and &#8216;render&#8217; back specific, desired actions. When the computer program acts in unexpected ways, it is called a &#8216;bug&#8217; in the software. Debugging is what you do to correct the code or the commands in order to obtain the desired result. This activity is purely hypothetical but based on the same principles that software programs follow.<\/p>\n<p>One member of the team is to place the team&#8217;s answers to each of the problems in the text area of the Drop Box set up in Canvas. Next cycle I will reveal the other team&#8217;s solutions so that we can better understand that there MAY be more than one way to solve a problem. <strong>PLEASE NUMBER EACH RESPONSE ACCORDING TO THE PROBLEM NUMBERS NOTED<\/strong>:<br \/>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div><br \/>\nThe following &#8220;program&#8221; is loosely based on a language called <strong><a href=\"http:\/\/en.wikipedia.org\/wiki\/Logo_%28programming_language%29\" target=\"_blank\">Logo<\/a><\/strong> invented by Seymour Papert and others at MIT for use by small children.<\/p>\n<p>There is a <a href=\"http:\/\/logo.codeplex.com\/\" target=\"_blank\">manual posted online<\/a> but I have deviated from it to simplify things so we can cover the material in a shorter timer frame. NOTE THAT IN THIS ACTIVITY WE ARE SIMULATING THE PROGRAM AND DOING IT ON PAPER ONLY. YOU ARE NOT EXPECTED TO DOWNLOAD ANY COMPUTER PROGRAM AND RUN IT. TO COMPETE THE ASSIGNMENT SIMPLY WRITE OUT THE INSTRUCTIONS ACCORDING TO THE RULES SET FORTH. To repeat, I am making up some <u>hypothetical<\/u> commands that closely resemble the actual LOGO program to simplify things:<\/p>\n<p><strong>Set Color Red<\/strong><br \/>\n<strong>Set Color Blue<\/strong><br \/>\n<strong>Set Color Green<\/strong><br \/>\n<strong>Set Color Black<\/strong><\/p>\n<p>These commands tell the &#8216;robot\/turtle&#8217; what color pen to use.<\/p>\n<p><strong>Pen Up<\/strong> &#8211; tells the robot to pick up your pen, so that when you move, it won&#8217;t leave a trail<br \/>\n<strong>Pen Down<\/strong> -tells the robot to put down your pen so that when you move, it will make a trail<\/p>\n<p><strong>Forward 1<\/strong><\/p>\n<p>means move forward one inch.<\/p>\n<p><strong>Left 90<\/strong><\/p>\n<p>means turn left (counterclockwise) 90 degrees&#8230;. Likewise, <strong>Right 120<\/strong> would mean turn rightward 120 degrees.<\/p>\n<p>The turtle doesn&#8217;t know about coordinates; it just knows directions and distances. But we want to be able to make it go &#8216;home&#8217;, which is a dot in the bottom left corner of the screen. Whenever the turtle goes home it also faces East, which is where the Sun (The Great Sky Turtle) rises.<\/p>\n<p>So we have a new command:<\/p>\n<p><strong>Go Home<\/strong><br \/>\nOne more thing&#8230; to end one of our special commands or &#8216;procedures&#8217; (Go Home and Go Center, and Triangle, as shown below) we need to end it with an open bracket:<br \/>\n(<strong>{<\/strong>)<br \/>\nand end the whole program with a closed bracket:<br \/>\n(<strong>}<\/strong>)<\/p>\n<h3>An example<\/h3>\n<p>To make the robot draw a<span>&nbsp;green square that has a height and width&nbsp;of 50 pixels, with its lower left corner being the origin i would use the following code<\/span><\/p>\n<ol>\n<li><span>Set Color Green<\/span><\/li>\n<li>Pen down<\/li>\n<li><span class=\"jqconsole-old-prompt\"><span class=\"\">forward 50<\/span><\/span><\/li>\n<li><span class=\"jqconsole-old-prompt\"><span class=\"\">right 90<\/span><\/span><\/li>\n<li><span class=\"jqconsole-old-prompt\"><span class=\"\">forward 50<\/span><\/span><\/li>\n<li><span class=\"jqconsole-old-prompt\"><span class=\"\">right 90<\/span><\/span><\/li>\n<li><span class=\"jqconsole-old-prompt\"><span class=\"\">forward 50<\/span><\/span><\/li>\n<li><span class=\"jqconsole-old-prompt\"><span class=\"\">home<\/span><\/span><\/li>\n<\/ol>\n<p><a href=\"https:\/\/emeclasses.org\/eme-6465-logo-problem\/google-chromescreensnapz002\/\" rel=\"attachment wp-att-44073\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2015\/08\/Google-ChromeScreenSnapz002-288x300.png\" alt=\"\" width=\"288\" height=\"300\" class=\"aligncenter size-medium wp-image-44073\" srcset=\"https:\/\/emeclasses.org\/wp-content\/uploads\/2015\/08\/Google-ChromeScreenSnapz002-288x300.png 288w, https:\/\/emeclasses.org\/wp-content\/uploads\/2015\/08\/Google-ChromeScreenSnapz002.png 576w\" sizes=\"auto, (max-width: 288px) 100vw, 288px\" \/><\/a><\/p>\n<p><div class=\"su-spoiler su-spoiler-style-fancy su-spoiler-icon-arrow su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>Problem #1<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\"><strong>Problem #1: <\/strong><span style=\"color: #800000;\"><\/p>\n<p>Write the code to draw 2 rectangles that are side by side. &nbsp;One should be outlined in blue and one in red. &nbsp;They should both be 75 pixels tall by 25 pixels wide and should have a 10 pixel gap.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/fgcu.instructure.com\/courses\/487581\/files\/37635573\/preview\" alt=\"problem1.jpg\" width=\"261\" height=\"264\" data-api-endpoint=\"https:\/\/fgcu.instructure.com\/api\/v1\/courses\/487581\/files\/37635573\" data-api-returntype=\"File\" \/><\/p>\n<p>.<\/div><\/div><br \/>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div><br \/>\n<div class=\"su-spoiler su-spoiler-style-fancy su-spoiler-icon-arrow su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>Problem #2<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\"><strong>Problem #2: <\/strong><span style=\"color: #800000;\">]<\/p>\n<p>Write out your initials using 3 different colors. You can make them as simple or as complex as you like as long as there are 3 different characters<\/p>\n<p><\/div><\/div><br \/>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div><br \/>\n<div class=\"su-spoiler su-spoiler-style-fancy su-spoiler-icon-arrow su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>Problem #3<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\"><strong>Problem #3:<\/strong> <span style=\"color: #800000;\">Follow the turtle program suggested below to draw a six pointed star (Star of David).<\/span><\/p>\n<p>For the Star of David you need first to go to the center on the box\/stage, so we have written another shortcut: <strong>Go Center<\/strong>. We also need a triangle, so here&#8217;s another &#8220;procedure&#8221; (a mini-program) to make the job a bit more convenient:<\/p>\n<p><strong>Triangle<\/strong> (which is made up of the following commands)<br \/>\n<strong>{<\/strong><br \/>\nForward 10<br \/>\nLeft 120<br \/>\nForward 10<br \/>\nLeft 120<br \/>\nForward 10<br \/>\nLeft 120<br \/>\n}<\/p>\n<p>So the following command is being suggested to make the Star of David:<\/p>\n<p>Go Center &#8211; so we know where the turtle is<br \/>\nTriangle &#8211; this triangle procedure puts us back where we started, with correct direction<br \/>\nLeft 90<br \/>\nForward 6<br \/>\nRight 90<br \/>\nTriangle<\/p>\n<p>But what you get is not right.. <span style=\"color: #800000;\">describe what is wrong with the above set of instructions (hint: it needs to actually draw something)<\/span><\/p>\n<p><strong>This process is called Debugging &#8211; finding the mistakes in a program.<\/strong><\/div><\/div><br \/>\n<div class=\"su-divider su-divider-style-default\" style=\"margin:15px 0;border-width:3px;border-color:#999999\"><\/div><br \/>\nPost your answers in the Drop Box in Canvas. <span class=\"su-highlight\" style=\"background:#ddff99;color:#000000\">&nbsp;NOTE THIS IS A TEAM PROJECT. THE FIRST MEMBER LISTED ON THE LIST ON CANVAS IS TO POST THE RESPONSES FOR THE ENTIRE TEAM. &nbsp;<\/span><br \/>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[98],"tags":[],"class_list":["post-37724","post","type-post","status-publish","format-standard","hentry","category-tech-ed-6465"],"_links":{"self":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/37724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=37724"}],"version-history":[{"count":10,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/37724\/revisions"}],"predecessor-version":[{"id":44082,"href":"https:\/\/emeclasses.org\/index.php?rest_route=\/wp\/v2\/posts\/37724\/revisions\/44082"}],"wp:attachment":[{"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=37724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=37724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emeclasses.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=37724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}