{"id":1129,"date":"2020-08-26T11:50:16","date_gmt":"2020-08-26T10:50:16","guid":{"rendered":"https:\/\/csee.bangor.ac.uk\/?p=1129"},"modified":"2020-08-26T11:50:16","modified_gmt":"2020-08-26T10:50:16","slug":"plot-40-rectangles-and-circles","status":"publish","type":"post","link":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/08\/26\/plot-40-rectangles-and-circles\/","title":{"rendered":"Plot 40 rectangles and circles"},"content":{"rendered":"\n\n\n\n code { background-color: rgba(0,0,0,.05); }\n .linenums { color: #aaa; }\n .linenums li {\n list-style-type: decimal !important;\n font-size: 12pt;\n margin-top: 0px;\n }\n .linenums li:nth-child(even) { background: transparent !important; }\n .wp-block-image { text-align: center !important; }\n .wp-block-image img { display: inline; }\n\n\n\n\n\n

In this activity we will plot a known quantity of coloured rectangles and circles. For example, let’s choose 40 rectangles and 40 circles. The objects will fit inside the width of the window. While this exercise is quite simple, we will think through the for-loop steps, and do some code refactoring<\/strong> to improve the code.<\/p>\n\n\n\n

\"Rainbow
Rainbow coloured rectangles with centred circles.<\/figcaption><\/figure><\/div>\n\n\n\n

The activity uses the Processing library, and the Hue Saturation Brightness (HSB) colour model that was covered in a previous activity. Take a look at some earlier activities, before tackling this activity, especially if you have not done any already:<\/p>\n\n\n\n

  1. setting up the programming environment<\/a>,<\/li>
  2. the activity to make a quick sketch before you code<\/a>, and<\/li>
  3. Hue Saturation Brightness<\/a> activities first.<\/li><\/ol>\n\n\n\n

    Step 1. Make a quick sketch<\/h2>\n\n\n\n

    Before you start this activity, print out the critical-thinking sheet<\/a>, and get a black pen and some coloured pens or pencils. <\/p>\n\n\n\n

    We first need to make sure that we know the vision for the activity, so that know where we are heading! <\/p>\n\n\n\n

    The goal of this activity is to plot a known quantity of coloured rectangles, that get placed across the page.<\/strong><\/span><\/p>\n\n\n\n

    Now we can complete the five panels of the critical-thinking sheet. Complete them in order, 1 to 5, as follows:<\/p>\n\n\n\n

    1. Write the problem<\/strong>, name and add today’s date. Also explain the challenge in panel \u2460 <\/li>
    2. In panel \u2461 make a sketch <\/strong>that explains the idea, and annotate to make the sketch clear. <\/li>
    3. Identify the main components <\/strong>of the problem in panel \u2462 . <\/li>
    4. Explain the steps<\/strong> of the algorithm in panel \u2463. We can use a for-loop to plot 40 rectangles, and use multiplication to calculate the exact position. <\/li>
    5. In the final panel think what to do next<\/strong>. Maybe consider how the rectangles can be coloured, and perhaps consider placing white circles on top to add some extra interest.<\/li><\/ol>\n\n\n\n
      \"Critical
      Completed Critical-Thinking sheet for the 40 coloured rectangle activity<\/figcaption><\/figure>\n\n\n\n

      Step 2. Set up the Processing environment<\/h2>\n\n\n\n

      Setting up the Processing environment with a draft project should easy now. Create a grey rectangle on a white background in a thin window, as follows:<\/p>\n\n\n\n

      \"\"
      Test picture, make sure that the Processing environment has been setup correctly. Showing one rectangle at 10,10, width and height being 100, and grey colour, with a white stroke,<\/figcaption><\/figure><\/div>\n\n\n\n