{"id":416,"date":"2026-09-09T20:49:06","date_gmt":"2026-09-09T20:49:06","guid":{"rendered":"https:\/\/ndovu.org.uk\/cs\/?p=416"},"modified":"2026-09-09T20:50:44","modified_gmt":"2026-09-09T20:50:44","slug":"yr3-term-1-1-5","status":"publish","type":"post","link":"https:\/\/ndovu.org.uk\/cs\/yr3-term-1-1-5\/","title":{"rendered":"Yr3 Term 1.1.5 Drawing Shapes on Code.org"},"content":{"rendered":"\n<p><strong>Welcome to Year 3 Computing \u2014 Lesson 5! \ud83c\udfa8\ud83e\udd16<\/strong><\/p>\n<p>Today we are becoming digital artists on <strong>Code.org<\/strong>! We will learn how computers use precise <strong>sequences<\/strong> (ordered steps) and <strong>loops<\/strong> (repeating actions) to draw shapes and patterns, explore how order matters in programming, design a geometric pattern, and build our own artwork!<\/p>\n\n<p><strong>Step 1: Keyboard Warm-up \u2328\ufe0f (10 Mins)<\/strong><\/p>\n<ul>\n  <li>Click here to warm up your fingers on our typing studio: <a href=\"https:\/\/ndovu.org.uk\/type\/\" target=\"_blank\" rel=\"noopener\">Start Typing Practice on Ndovu<\/a>.<\/li>\n  <li>Practice typing key coding and drawing terms: <em>sequence, loop, repeat, angle, turn, move, and pattern<\/em>. Keep your posture tall and keystrokes light!<\/li>\n<\/ul>\n\n<p><strong>Step 2: Interactive Algorithmic Artist &#038; Sequence Studio \ud83d\udcd0 (25 Mins)<\/strong><\/p>\n<p>Use the embedded module below to explore how step-by-step sequences build geometric shapes, test sequence logic, and design your own geometric drawing!<\/p>\n\n<!-- SCOPED INTERACTIVE LESSON WIDGET MODULE -->\n<div id=\"y3-l5-widget\" style=\"max-width: 850px; margin: 20px auto; font-family: Arial, sans-serif; border: 2px solid #ddd; border-radius: 10px; padding: 20px; background-color: #fcfcfc; box-shadow: 0 4px 8px rgba(0,0,0,0.05);\">\n\n  <!-- Progress Bar -->\n  <div style=\"width: 100%; background-color: #e0e0e0; border-radius: 5px; margin-bottom: 20px;\">\n    <div id=\"y3-l5-progress\" style=\"width: 25%; height: 10px; background-color: #0073aa; border-radius: 5px; transition: width 0.3s;\"><\/div>\n  <\/div>\n\n  <!-- Slide 1: Interactive Shape & Sequence Simulator -->\n  <div class=\"y3-l5-slide\" id=\"y3-l5-slide-0\" style=\"display: block;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 1: How Computers Draw Shapes (Sequence &#038; Loops)<\/h2>\n    <p>A computer doesn&#8217;t know what a &#8220;square&#8221; is automatically. We have to tell it step-by-step: <code>Move Forward \u2794 Turn Right 90\u00b0<\/code> and repeat that sequence 4 times!<\/p>\n\n    <!-- Interactive Code Sequence Simulator -->\n    <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 15px; text-align: center;\">\n      <p style=\"font-weight: bold; margin-top: 0;\">Choose a shape algorithm to simulate the computer&#8217;s path:<\/p>\n      <div style=\"display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 15px;\">\n        <button type=\"button\" onclick=\"y3L5SimulateShape('square')\" style=\"padding: 10px 15px; border: 2px solid #0073aa; border-radius: 5px; background: #e6f2f8; cursor: pointer; font-weight: bold;\">\ud83d\udfe9 Square (4 Sides)<\/button>\n        <button type=\"button\" onclick=\"y3L5SimulateShape('triangle')\" style=\"padding: 10px 15px; border: 2px solid #0073aa; border-radius: 5px; background: #e6f2f8; cursor: pointer; font-weight: bold;\">\ud83d\udd3a Triangle (3 Sides)<\/button>\n        <button type=\"button\" onclick=\"y3L5SimulateShape('star')\" style=\"padding: 10px 15px; border: 2px solid #0073aa; border-radius: 5px; background: #e6f2f8; cursor: pointer; font-weight: bold;\">\u2b50 Star Pattern<\/button>\n      <\/div>\n\n      <div id=\"y3-sim-output\" style=\"background: #222; color: #00ffcc; font-family: monospace; padding: 12px; border-radius: 5px; text-align: left; font-size: 13px; min-height: 80px;\">\n        Select a shape button above to see the step-by-step algorithm executed&#8230;\n      <\/div>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" onclick=\"y3L5NextSlide(0, 1)\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next: Sequence Logic Questions \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 2: Sequence Logic & Reasoning -->\n  <div class=\"y3-l5-slide\" id=\"y3-l5-slide-1\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 2: Sequence Logic &#038; Order Inspector<\/h2>\n    <p>Answer the logic questions below about how sequence and order impact drawing programs:<\/p>\n\n    <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 12px; margin-bottom: 12px;\">\n      <label style=\"font-weight: bold; display: block; margin-bottom: 5px; font-size: 13px;\">1. To draw a square, what TWO basic commands do you need to repeat inside a loop?<\/label>\n      <input type=\"text\" id=\"y3-q-square-commands\" placeholder=\"e.g., Move forward and turn right 90 degrees...\" style=\"width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 13px;\">\n    <\/div>\n\n    <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 12px; margin-bottom: 15px;\">\n      <label style=\"font-weight: bold; display: block; margin-bottom: 5px; font-size: 13px;\">2. Does the order of instructions matter in coding? What happens if you turn BEFORE moving forward?<\/label>\n      <input type=\"text\" id=\"y3-q-order-matters\" placeholder=\"e.g., Yes! Order matters because turning first will make the artist draw in a completely different direction...\" style=\"width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 13px;\">\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" onclick=\"y3L5NextSlide(1, 2)\" style=\"background-color: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Next: Geometric Drawing Studio \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 3: Drawing Studio -->\n  <div class=\"y3-l5-slide\" id=\"y3-l5-slide-2\" style=\"display: none;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Step 3: Draw Your Geometric Pattern \ud83c\udfa8<\/h2>\n    <p>Use the canvas below to draw a repeating geometric shape or pattern (e.g., a house made of a square and triangle, or a repeating star pattern):<\/p>\n\n    <div style=\"background: #fff; border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 20px; text-align: center;\">\n      <canvas id=\"y3-canvas-l5\" width=\"700\" height=\"250\" style=\"border: 2px dashed #0073aa; border-radius: 5px; background: #fafafa; cursor: crosshair; touch-action: none; max-width: 100%;\"><\/canvas>\n      <div style=\"margin-top: 8px; display: flex; justify-content: center; gap: 10px; align-items: center; flex-wrap: wrap;\">\n        <label style=\"font-size: 12px;\">Color:<\/label>\n        <input type=\"color\" id=\"y3-l5-color\" value=\"#0073aa\">\n        <label style=\"font-size: 12px;\">Size:<\/label>\n        <input type=\"range\" id=\"y3-l5-size\" min=\"2\" max=\"20\" value=\"4\">\n        <button type=\"button\" onclick=\"y3ClearCanvas('y3-canvas-l5')\" style=\"background: #e53935; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;\">\ud83d\uddd1\ufe0f Clear<\/button>\n      <\/div>\n    <\/div>\n\n    <div style=\"text-align: right;\">\n      <button type=\"button\" onclick=\"y3L5NextSlide(2, 3)\" style=\"background-color: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px;\">Finish &#038; Download Report \u2794<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Slide 4: Download Report -->\n  <div class=\"y3-l5-slide\" id=\"y3-l5-slide-3\" style=\"display: none; text-align: center;\">\n    <h2 style=\"margin-top:0; color: #0073aa;\">Algorithmic Drawing Module Complete! \ud83c\udfc6<\/h2>\n    <p>Your sequence logic answers and geometric artwork have been saved into a full report. Download your file and save it into your personal student network folder.<\/p>\n\n    <button type=\"button\" onclick=\"y3L5DownloadReport()\" style=\"background-color: #4CAF50; color: white; border: none; padding: 15px 25px; border-radius: 5px; cursor: pointer; font-size: 18px; font-weight: bold;\">\ud83d\udcbe Download Lesson 5 Artist Report<\/button>\n  <\/div>\n\n<\/div>\n\n<p><strong>Step 3: Drawing with Code on Code.org Artist \ud83d\ude80 (15 Mins)<\/strong><\/p>\n<p>Now that we understand how algorithms drive drawing programs, let&#8217;s open <strong>Code.org Artist<\/strong> puzzles to create shapes using sequence and repeat blocks!<\/p>\n\n<div style=\"background-color: #e6f2f8; border-left: 5px solid #0073aa; padding: 15px 20px; border-radius: 8px; margin: 20px 0;\">\n  <p style=\"margin-top: 0; font-weight: bold; font-size: 18px;\">\ud83d\udd11 Continue on Code.org:<\/p>\n  <p style=\"margin: 10px 0;\">\n    Click the button below to sign in and open your Artist coding puzzles:\n  <\/p>\n  <p style=\"margin: 10px 0;\">\n    <a href=\"https:\/\/studio.code.org\/users\/sign_in\" target=\"_blank\" rel=\"noopener\" style=\"display: inline-block; background-color: #0073aa; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold;\">Launch Code.org Sign In \u2794<\/a>\n  <\/p>\n  <p style=\"margin-bottom: 0; font-size: 14px; color: #333;\"><em>Key Concept: Pay close attention to turn angles! A right turn is 90\u00b0, while sharper turns require different angles!<\/em><\/p>\n<\/div>\n\n<p><strong>Step 4: Log Off and Reflect \ud83d\udc4b (10 Mins)<\/strong><\/p>\n<ul>\n  <li><strong>Exit Ticket:<\/strong> What sequence of steps does a computer need to draw a square? (<em>Repeat 4 times: Move forward, turn right 90 degrees!<\/em>)<\/li>\n  <li>Log out securely from your PC and ensure your workstation is left clean and tidy!<\/li>\n<\/ul>\n\n<script>\n  var y3L5Data = {\n    selectedShapeSim: 'None',\n    squareCmds: '',\n    orderMatters: '',\n    artworkImg: ''\n  };\n\n  var activeCanvases = ['y3-canvas-l5'];\n  var isDrawingState = {};\n\n  function setupCanvasListeners(id) {\n    var cvs = document.getElementById(id);\n    if (!cvs) return;\n    var getContext = cvs.getContext('2d');\n\n    function getMousePos(e) {\n      var rect = cvs.getBoundingClientRect();\n      var clientX = e.touches ? e.touches[0].clientX : e.clientX;\n      var clientY = e.touches ? e.touches[0].clientY : e.clientY;\n      return { x: clientX - rect.left, y: clientY - rect.top };\n    }\n\n    function startDrawing(e) {\n      isDrawingState[id] = true;\n      var pos = getMousePos(e);\n      getContext.beginPath();\n      getContext.moveTo(pos.x, pos.y);\n    }\n\n    function draw(e) {\n      if (!isDrawingState[id]) return;\n      var pos = getMousePos(e);\n      var colorEl = document.getElementById('y3-l5-color');\n      var sizeEl = document.getElementById('y3-l5-size');\n      getContext.strokeStyle = colorEl ? colorEl.value : '#0073aa';\n      getContext.lineWidth = sizeEl ? sizeEl.value : 4;\n      getContext.lineCap = 'round';\n      getContext.lineTo(pos.x, pos.y);\n      getContext.stroke();\n    }\n\n    function stopDrawing() { isDrawingState[id] = false; }\n\n    cvs.onmousedown = startDrawing;\n    cvs.onmousemove = draw;\n    cvs.onmouseup = stopDrawing;\n    cvs.onmouseleave = stopDrawing;\n\n    cvs.ontouchstart = function(e) { startDrawing(e); };\n    cvs.ontouchmove = function(e) { draw(e); e.preventDefault(); };\n    cvs.ontouchend = stopDrawing;\n  }\n\n  function reinitCanvases() {\n    for (var i = 0; i < activeCanvases.length; i++) {\n      setupCanvasListeners(activeCanvases[i]);\n    }\n  }\n\n  function y3ClearCanvas(id) {\n    var cvs = document.getElementById(id);\n    if (cvs) {\n      var ctx = cvs.getContext('2d');\n      ctx.clearRect(0, 0, cvs.width, cvs.height);\n    }\n  }\n\n  function y3L5SimulateShape(type) {\n    var out = document.getElementById('y3-sim-output');\n    y3L5Data.selectedShapeSim = type;\n    if (type === 'square') {\n      out.innerHTML = '<strong>SQUARE ALGORITHM (Repeat 4 times):<\/strong><br>1. Move forward 100px<br>2. Turn right 90\u00b0<br>3. Move forward 100px<br>4. Turn right 90\u00b0<br>5. Move forward 100px<br>6. Turn right 90\u00b0<br>7. Move forward 100px<br>8. Turn right 90\u00b0<br><em>Status: Square Completed!<\/em>';\n    } else if (type === 'triangle') {\n      out.innerHTML = '<strong>TRIANGLE ALGORITHM (Repeat 3 times):<\/strong><br>1. Move forward 100px<br>2. Turn right 120\u00b0<br>3. Move forward 100px<br>4. Turn right 120\u00b0<br>5. Move forward 100px<br>6. Turn right 120\u00b0<br><em>Status: Triangle Completed!<\/em>';\n    } else if (type === 'star') {\n      out.innerHTML = '<strong>STAR ALGORITHM (Repeat 5 times):<\/strong><br>1. Move forward 100px<br>2. Turn right 144\u00b0<br>3. Move forward 100px<br>4. Turn right 144\u00b0<br>...<br><em>Status: 5-Point Star Completed!<\/em>';\n    }\n  }\n\n  function y3L5NextSlide(currentIdx, targetIdx) {\n    if (currentIdx === 0) {\n      if (y3L5Data.selectedShapeSim === 'None') {\n        alert(\"Please click one of the shape simulation buttons to test the algorithm before continuing!\");\n        return;\n      }\n    } else if (currentIdx === 1) {\n      var sc = document.getElementById('y3-q-square-commands').value.trim();\n      var om = document.getElementById('y3-q-order-matters').value.trim();\n      if (!sc || !om) {\n        alert(\"Please answer both sequence logic questions before continuing!\");\n        return;\n      }\n      y3L5Data.squareCmds = sc;\n      y3L5Data.orderMatters = om;\n    } else if (currentIdx === 2) {\n      var cvs = document.getElementById('y3-canvas-l5');\n      y3L5Data.artworkImg = cvs ? cvs.toDataURL() : '';\n    }\n\n    var slides = document.querySelectorAll('#y3-l5-widget .y3-l5-slide');\n    for (var i = 0; i < slides.length; i++) {\n      slides[i].style.display = 'none';\n    }\n\n    var nextSlide = document.getElementById('y3-l5-slide-' + targetIdx);\n    if (nextSlide) {\n      nextSlide.style.display = 'block';\n    }\n\n    var progressPercents = [25, 50, 75, 100];\n    var bar = document.getElementById('y3-l5-progress');\n    if (bar) {\n      bar.style.width = progressPercents[targetIdx] + '%';\n    }\n\n    setTimeout(reinitCanvases, 100);\n  }\n\n  function y3L5DownloadReport() {\n    var htmlContent = '<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Year 3 Lesson 5 Artist Report<\/title><style>body{font-family:Arial,sans-serif;padding:20px;max-width:800px;margin:0 auto;background:#f4f4f9;}.card{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.1);margin-bottom:20px;}h3{color:#0073aa;border-bottom:2px solid #eee;padding-bottom:5px;margin-top:0;}.text-block{background:#e6f2f8;padding:12px;border-left:4px solid #0073aa;font-size:14px;margin-top:8px;}img{max-width:100%;border:1px dashed #0073aa;border-radius:5px;margin-top:10px;}<\/style><\/head><body>' +\n      '<h1>Year 3 Sequence & Algorithmic Drawing Report \ud83c\udfa8<\/h1>' +\n      '<p><strong>Name:<\/strong> _______________________ &nbsp;&nbsp;&nbsp; <strong>Date:<\/strong> _______________________<\/p>' +\n      \n      '<div class=\"card\"><h3>1. Shape Algorithm Simulation<\/h3>' +\n      '<p><strong>Tested Shape Simulator:<\/strong> ' + y3L5Data.selectedShapeSim + '<\/p><\/div>' +\n      \n      '<div class=\"card\"><h3>2. Sequence Logic & Order Analysis<\/h3>' +\n      '<p><strong>Commands needed to draw a square:<\/strong><\/p><div class=\"text-block\">' + y3L5Data.squareCmds + '<\/div>' +\n      '<p><strong>Why instruction order matters:<\/strong><\/p><div class=\"text-block\">' + y3L5Data.orderMatters + '<\/div><\/div>' +\n      \n      '<div class=\"card\"><h3>3. Geometric Design Artwork<\/h3><img decoding=\"async\" src=\"' + y3L5Data.artworkImg + '\"><\/div>' +\n      '<\/body><\/html>';\n\n    var blob = new Blob([htmlContent], { type: 'text\/html' });\n    var url = URL.createObjectURL(blob);\n    var a = document.createElement('a');\n    a.href = url;\n    a.download = 'Year3_Lesson5_Artist_Report.html';\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n    URL.revokeObjectURL(a);\n  }\n\n  window.addEventListener('DOMContentLoaded', reinitCanvases);\n  window.addEventListener('load', reinitCanvases);\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to Year 3 Computing \u2014 Lesson 5! \ud83c\udfa8\ud83e\udd16 Today we are becoming digital artists on Code.org! We will learn how computers use precise sequences&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/ndovu.org.uk\/cs\/yr3-term-1-1-5\/\">Continue Reading<span class=\"screen-reader-text\">Yr3 Term 1.1.5 Drawing Shapes on Code.org<\/span><\/a><\/div>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-416","post","type-post","status-publish","format-standard","hentry","category-year3","entry"],"_links":{"self":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/comments?post=416"}],"version-history":[{"count":2,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/416\/revisions"}],"predecessor-version":[{"id":419,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/posts\/416\/revisions\/419"}],"wp:attachment":[{"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/media?parent=416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/categories?post=416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ndovu.org.uk\/cs\/wp-json\/wp\/v2\/tags?post=416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}