{"id":299,"date":"2020-06-02T09:13:21","date_gmt":"2020-06-02T08:13:21","guid":{"rendered":"https:\/\/csee.bangor.ac.uk\/?p=299"},"modified":"2020-06-02T09:13:21","modified_gmt":"2020-06-02T08:13:21","slug":"using-the-critical-thinking-sheet","status":"publish","type":"post","link":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/","title":{"rendered":"Make a quick sketch before you code"},"content":{"rendered":"\n<p>In this activity we will work towards creating a simple rainbow in Processing. <\/p>\n\n\n\n<p>In this part we will complete a Critical Thinking Sheet. In other words, we will critically think through different parts of the challenge, make sketches of our ideas, and consider the key components, and the algorithmic steps. In this way we can create a quick plan, that will help us better implement the code. In part 2 we will code the same scene.<\/p>\n\n\n\n<h2 class=\"has-accent-color has-text-color wp-block-heading\">Overview<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>Don&#8217;t rush into coding. Instead think critically about your problem before you start. Make a quick sketch of your idea. It will give you direction, help you throw out bad ideas and keep good ones, and help you know when you have completed the task.<\/p><cite><a href=\"https:\/\/www.bangor.ac.uk\/computer-science-and-electronic-engineering\/staff\/jonathan-roberts\/en\">Jonathan C. Roberts<\/a><\/cite><\/blockquote>\n\n\n\n<p>The critical thinking sheet defines a set of five stages, that are located across five areas in single page. The sheet is designed as a guide to help you quickly and critically consider different parts of a program. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/1graphSheet-v1-2-parts.png\" alt=\"The parts of the Critical Thinking Sheet\" class=\"wp-image-702\" width=\"296\" height=\"413\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/1graphSheet-v1-2-parts.png 560w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/1graphSheet-v1-2-parts-215x300.png 215w\" sizes=\"(max-width: 296px) 100vw, 296px\" \/><\/figure><\/div>\n\n\n\n<p>Our goal is to create a rainbow scene, with grass and a simple looking tree. We will be using a set of circles to create the rainbow; by creating the rainbow in this way, we will be able to think through several very important principles in computer graphics: (i) sketching a visual goal, (ii) thinking through the main parts, and (iii)  considering the algorithmic steps, especially the order of how the colours are drawn on the computer. <\/p>\n\n\n\n<h2 class=\"has-accent-color has-text-color wp-block-heading\">Resources<\/h2>\n\n\n\n<p>For this activity you will need the following resources.<\/p>\n\n\n\n<ul><li>One sheet of plain paper<\/li><li>A black fine tip pen, or an HB pencil<\/li><\/ul>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>Printer paper will be fine. In fact, if you have a printer available to use, then print out one of our <a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/CTS-Bangor-v1-2.pdf\">pre-prepared Critical Thinking Sheets<\/a>.  There are two versions, one without a grid, and another with a grid on the sketch part. For this activity we will use the one without a grid.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2.pdf\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-bold.png\" alt=\"\" class=\"wp-image-694\" width=\"193\" height=\"270\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-bold.png 560w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-bold-215x300.png 215w\" sizes=\"(max-width: 193px) 100vw, 193px\" \/><\/a><figcaption>Critical Thinking Sheet<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-grid.pdf\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-grid-bold.png\" alt=\"Critical Thinking Sheets\" class=\"wp-image-695\" width=\"193\" height=\"270\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-grid-bold.png 560w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-grid-bold-215x300.png 215w\" sizes=\"(max-width: 193px) 100vw, 193px\" \/><\/a><figcaption>Critical Thinking Sheet with grid<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"has-accent-color has-text-color wp-block-heading\">Step 1. Prepare the sheet, and name the scene<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>&#8220;Whatever you are doing: make a plan. Especially, before you code make a quick sketch, to show what the final result could look like.&#8221;<\/p><cite><a href=\"https:\/\/www.bangor.ac.uk\/computer-science-and-electronic-engineering\/staff\/jonathan-roberts\/en\" target=\"_blank\" rel=\"noreferrer noopener\">Jonathan C. Roberts<\/a><\/cite><\/blockquote>\n\n\n\n<div class=\"wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 34%\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"631\" height=\"872\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/critical-thinking-sheet-sketched.png\" alt=\"Critical thinking sheet, divided into five parts.\" class=\"wp-image-563\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/critical-thinking-sheet-sketched.png 631w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/critical-thinking-sheet-sketched-217x300.png 217w\" sizes=\"(max-width: 631px) 100vw, 631px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-drop-cap\">Start with the blank sheet of paper and draw one line vertically and a two horizontal lines, as shown. This divides the page into five panels. Alternatively get your printout which is already drawn in this way. In my sketch, I&#8217;ve labelled these panels \u2460 to \u2464 so we can refer to them, but you don&#8217;t need to number them! These numbers also follow the <span class=\"has-inline-color has-accent-color\">Steps 1 to 5<\/span>.<\/p>\n\n\n\n<p class=\"has-drop-cap\">Next write along the top of the page: the topic, your name and a date. Then in panel \u2460 you can write a longer description of the project. What about calling it &#8220;Coding a simple rainbow in Processing&#8221;. <\/p>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2. Sketch the scene<\/h2>\n\n\n\n<p class=\"has-drop-cap\">In this step you will make a sketch of your scene. You will place your sketch in <strong>panel \u2461<\/strong>. But before you sketch, read through this step first.<\/p>\n\n\n\n<p><span class=\"has-inline-color has-accent-color\">Why do we make a sketch? <\/span>It is always a good strategy to sketch a picture that represents the graphics picture that you are going to make. It does not need to be perfect, just good enough to lay down your ideas. Do it before you start coding! <\/p>\n\n\n\n<p><span class=\"has-inline-color has-accent-color\">These sketches provide you with a &#8220;goal&#8221;.<\/span> A vision of what your idea could look like. It will help you realise how close you are to completing your program. It will also allow you to realise when you have completed enough work! In other words, when you get close to completing your project you will have something (a sketch) to check the remaining tasks.<\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-sketch-simple-rainbow-scene-5.png\" alt=\"Processing sketch, showing a simplified rainbow scene.\" class=\"wp-image-564\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>My sketched plan is simple. It is made from several circles, and lines on a white sheet of paper. <\/p>\n\n\n\n<p>Let us note a few important features, that helped me communicate my ideas.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Make your sketch have the same aspect ratio to the final picture. (Consider the rule of thirds).<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-sketch-simple-rainbow-sceneWLines2.png\" alt=\"\" class=\"wp-image-499\" width=\"295\" height=\"210\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-sketch-simple-rainbow-sceneWLines2.png 499w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-sketch-simple-rainbow-sceneWLines2-300x214.png 300w\" sizes=\"(max-width: 295px) 100vw, 295px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Photographers often suggest that scenes should be taken using a rule of thirds. Sometimes we place the main objects in the centre of the scene. But actually if we put it slightly off centre, then it may look better. In our case it will probably look better if the rainbow was slightly off centre. Also, it would look better when the horizon either fits on the top third, or the lower third. In other words, do not put the horizon in the middle of the page.  <\/p>\n\n\n\n<p>To achieve the rule of thirds division, imagine that you divide the space into a grid of nine equally proportioned regions. My rainbow is placed on the horizon line, which is on the lower horizontal line. And the tree is placed on the left hand side.  <\/p>\n\n\n\n<p>When taking photographs you may automatically position your scene in this way. But when doing computer graphics, you probably need to make a deliberate decision to put it this way.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h4 class=\"wp-block-heading\">Make sure your sketch clearly explains your ideas. Add labels and annotations. <\/h4>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p>Annotations and labels help to clarify aspects of the picture that may be unclear. You won&#8217;t always remember all the decisions you made, so the labels will help you remember what you decided to do. <\/p>\n\n\n\n<p>In addition, you may want to make your own language to help you communicate your ideas. In my sketch, I have tried to use solid lines to show objects that can be seen. Dotted lines to suggest that these objects will be behind something. And shaded areas to clarify that there are different objects.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-text-color has-large-font-size has-accent-color\">Now make your sketch, and place it in panel \u2461.<\/p>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<h2 class=\"has-accent-color has-text-color wp-block-heading\">Step 3. Think about the parts<\/h2>\n\n\n\n<p class=\"has-drop-cap\">In this step you will think about the parts to your scene, and write these down in panel \u2462. But again, before you do so, read through this step. <\/p>\n\n\n\n<p><span class=\"has-inline-color has-accent-color\">You may have noticed already<\/span>: that my sketch does more than draw a picture of the output; it is hinting how I will create it. It is a sketch to help me think about the implementation. There are clearly several parts to the drawing.  In the previous post on &#8220;<a rel=\"noreferrer noopener\" href=\"https:\/\/csee.bangor.ac.uk\/project-rainbow\/introduction-to-processing\/\" target=\"_blank\">Introduction to Processing<\/a>&#8221; we used some basic geometric shapes (lines, circles, rectangles, etc.), and defined them to be <strong><em>primitives<\/em><\/strong> in computer graphics. We also talked about the appearances of these objects, which are named <strong><em>attributes<\/em><\/strong>. Let me work through my thought process, on thinking about primitives and attributes to build our rainbow scene:<\/p>\n\n\n\n<p class=\"has-drop-cap\">First, let us consider the individual geometric shapes that make up the scene. The scene basically uses individual circles and rectangles that are put together to build the scene. These <a rel=\"noreferrer noopener\" href=\"https:\/\/csee.bangor.ac.uk\/project-rainbow\/introduction-to-processing\/\" target=\"_blank\">primitive<\/a> shapes are grouped together to make recognisable objects (rainbow, tree, etc). So we have one rainbow, that is made from several circles, and grass and sky that are made from rectangles, and the tree, which is made from rectangles and circles. <\/p>\n\n\n\n<p>Thinking this way is important. By breaking the scene into individual parts and thinking about it in a critical way, we can start to understand how we may implement it. Indeed, maybe we define a tree model, with a rectangles and leaves. Because now we have defined a tree model, we can make a forest, by replicating the tree model.<\/p>\n\n\n\n<p class=\"has-drop-cap\">Second, we can think about the appearances and <a href=\"https:\/\/csee.bangor.ac.uk\/project-rainbow\/introduction-to-processing\/\">attributes<\/a> of the scene. Each of the geometric shapes have specific colours and appearance. We have the rainbow made from red, orange, yellow, and so on, and the brown tree trunk, with green leaves, and any other colours and appearances we will use in the scene.<\/p>\n\n\n\n<p>Thinking this way is important. By breaking the scene into individual parts and thinking about it in a critical way, we can start to understand how we may implement it, and what the reusable parts would be. Indeed, with the tree model, we may define a brown colour for the trunk of the tree, perhaps rgb(150,75,0). Then another day, you may want a different type of tree. Something that is much darker brown. To achieve this new tree, we just change the trunk colour, for example we could set it to rgb(54,27,0). <\/p>\n\n\n\n<p class=\"has-drop-cap\">So, what are the parts to our scene? We should be able to write the parts. We can place them in panel \u2462. <\/p>\n\n\n\n<pre class=\"wp-block-verse\">Primitives: rainbow, tree, grass,\n\nAttributes: rainbow: red, orange, yellow, green, blue, indigo, violet; trunk colour, leaf colour.<\/pre>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<h2 class=\"has-accent-color has-text-color wp-block-heading\">Step 4. consider the algorithmic steps<\/h2>\n\n\n\n<p>We now need to turn our attention to the steps needed to draw the image. In other words, we need to think about the algorithmic steps, that we write in panel \u2463.<\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 41%\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"334\" height=\"239\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-sketch-scene-mockup-v2crop.png\" alt=\"Rainbow scene, mocked up in paper.\" class=\"wp-image-603\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-sketch-scene-mockup-v2crop.png 334w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-sketch-scene-mockup-v2crop-300x215.png 300w\" sizes=\"(max-width: 334px) 100vw, 334px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>To understand the graphics drawing process, I have created a physical mockup of the scene. This will help us think through the steps needed to create the picture.<\/p>\n\n\n\n<p>You do not need to do create the mockup, unless you want to!<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:29% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"581\" height=\"387\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-mockup-rainbow.jpeg\" alt=\"Mockup created by several coloured circles.\n\" class=\"wp-image-682\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-mockup-rainbow.jpeg 581w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-mockup-rainbow-300x200.jpeg 300w\" sizes=\"(max-width: 581px) 100vw, 581px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>The mockup is made from circles cut from paper, and coloured by the colours of the rainbow.  To start the scene, I placed the large red circle, and progressed through the individual rainbow colours, ending in white. This gives us 7 colours of the rainbow plus a white circle.<\/p>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-gallery columns-4 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"214\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-01.jpeg\" alt=\"Rainbow mockup - image 01\" data-id=\"667\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-01.jpeg\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=667\" class=\"wp-image-667\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-01.jpeg 320w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-01-300x201.jpeg 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"214\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-02.jpeg\" alt=\"Rainbow mockup - image 02\" data-id=\"668\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-02.jpeg\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=668\" class=\"wp-image-668\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-02.jpeg 320w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-02-300x201.jpeg 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"214\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-03.jpeg\" alt=\"Rainbow mockup - image 03\" data-id=\"669\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-03.jpeg\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=669\" class=\"wp-image-669\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-03.jpeg 320w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-03-300x201.jpeg 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"214\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-04.jpeg\" alt=\"Rainbow mockup - image 04\" data-id=\"670\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-04.jpeg\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=670\" class=\"wp-image-670\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-04.jpeg 320w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-04-300x201.jpeg 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"214\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-05.jpeg\" alt=\"Rainbow mockup - image 05\" data-id=\"671\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-05.jpeg\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=671\" class=\"wp-image-671\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-05.jpeg 320w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-05-300x201.jpeg 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"214\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-06.jpeg\" alt=\"Rainbow mockup - image 06\" data-id=\"672\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-06.jpeg\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=672\" class=\"wp-image-672\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-06.jpeg 320w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-06-300x201.jpeg 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"214\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-07.jpeg\" alt=\"Rainbow mockup - image 07\" data-id=\"673\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-07.jpeg\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=673\" class=\"wp-image-673\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-07.jpeg 320w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-07-300x201.jpeg 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"214\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-08.jpeg\" alt=\"Rainbow mockup - image 08\" data-id=\"674\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-08.jpeg\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=674\" class=\"wp-image-674\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-08.jpeg 320w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-08-300x201.jpeg 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-09.jpeg\" alt=\"Rainbow mockup - image 09\" class=\"wp-image-675\" width=\"285\" height=\"191\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-09.jpeg 320w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-09-300x201.jpeg 300w\" sizes=\"(max-width: 285px) 100vw, 285px\" \/><figcaption>Rainbow mockup with white rectangle, giving the appearance of arcs rather than circles.<\/figcaption><\/figure><\/div>\n\n\n\n<p>This demonstrates a common principle in computer graphics; one of order. The earlier painted objects look like they are placed at the back. Older models are naturally obscured by newer ones. In computer graphics terms, this is known as &#8220;depth order&#8221;. That is, if one object obscures another, we know that it is painted after that object. This property can help us create complex looking models, even if the models are made from simple shapes. We see this &#8220;visual illusion&#8221; taking place in the last picture &#8211; it actually looks likes the shapes are all donuts, rather than circles. And then by adding a white rectangle, the rainbow now looks like an arc. Actually the large white rectangle (in my picture) appears slightly transparent (you can just about see the underlying circles); likewise in computer graphics we can change the transparency (the alpha \u03b1 value) of the primitive, to allow objects that are behind to become seen.<\/p>\n\n\n\n<p>We can continue with the model, by adding grass, and then the trunk of the tree, before adding the leaves.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-3 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"214\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-10.jpeg\" alt=\"Rainbow mockup - image 10\" data-id=\"676\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-10.jpeg\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=676\" class=\"wp-image-676\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-10.jpeg 320w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-10-300x201.jpeg 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"214\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-11.jpeg\" alt=\"Rainbow mockup - image 11\" data-id=\"677\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-11.jpeg\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=677\" class=\"wp-image-677\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-11.jpeg 320w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-11-300x201.jpeg 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"214\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-12.jpeg\" alt=\"Rainbow mockup - image 12\" data-id=\"678\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-12.jpeg\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=678\" class=\"wp-image-678\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-12.jpeg 320w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/rainbow-mockup-12-300x201.jpeg 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"334\" height=\"239\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-sketch-scene-mockup-v2crop.png\" alt=\"Rainbow scene, mocked up in paper.\" data-id=\"603\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-sketch-scene-mockup-v2crop.png\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=603\" class=\"wp-image-603\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-sketch-scene-mockup-v2crop.png 334w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-sketch-scene-mockup-v2crop-300x215.png 300w\" sizes=\"(max-width: 334px) 100vw, 334px\" \/><figcaption class=\"blocks-gallery-item__caption\">Final mockup of the rainbow scene<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p class=\"has-text-color has-accent-color\">Now we can complete the 4th part of the Critical Thinking Sheet. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>draw rainbow     \/\/ made from 7 individual circles\n                 \/\/ and one centre white circle\ndraw grass       \/\/ made from one large rectangle\ndraw tree        \/\/ rectangle and two green circles<\/code><\/pre>\n\n\n\n<p>Notice, in this set of steps I have also added some comments. This is indicated by the two forward slashes &#8220;\/\/&#8221;. Anything written to the right of this symbol is non-executable code, and for comment.<\/p>\n\n\n\n<h2 class=\"has-accent-color has-text-color wp-block-heading\">Step 5. What now?<\/h2>\n\n\n\n<p>The final stage is to consider what we need to do now, to make this idea a reality! <\/p>\n\n\n\n<p>You probably have been asking yourself lots of questions. During your planning process you may have started to realise that you did not understand something. Perhaps you need to go back and do more research on <a href=\"https:\/\/csee.bangor.ac.uk\/project-rainbow\/rgb-colours\/\">RGB<\/a> colours. Possibly, you missed the <a href=\"https:\/\/csee.bangor.ac.uk\/project-rainbow\/introduction-to-processing\/\">Introduction to Processing<\/a> post, and you need to do that first. Or you realise that you could improve the model to make the rainbow appear smoother through using transparency. Or you want to make it animate in some way. There are lots of options and lots of things that you may need to consider when you are implementing your code.<\/p>\n\n\n\n<p>These thoughts are all good. They help you decide how to take this idea, and implement it. You are reflecting on your ideas.<\/p>\n\n\n\n<p>So, now in the final panel \u2464 make a list of all your concerns, caveats, or considerations that you need to make, such to make this concept a reality!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/cts-processing-sketch-sheet.jpeg\" alt=\"\" class=\"wp-image-703\" width=\"397\" height=\"561\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/cts-processing-sketch-sheet.jpeg 620w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/cts-processing-sketch-sheet-212x300.jpeg 212w\" sizes=\"(max-width: 397px) 100vw, 397px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-drop-cap\">You have now completed the Critical Thinking Sheet. Finally, reflect on your thought process, and what you have achieved.<\/p>\n\n\n\n<ul><li>\u2460 you have have carefully thought through the problem, and written a quick summary of the task; <\/li><li>\u2461 drawn a quick sketch, with annotations and labels, to describe your main idea, and what it will look like (to give you a goal to head towards, and something to check against); <\/li><li>\u2462 you have considered the main components and variables of the system;  <\/li><li>\u2463 considered the main algorithmic steps to create the code; <\/li><li>and finally \u2464 considered any caveats and conditions that you need to learn, understand or observe, to achieve your goal. <\/li><\/ul>\n\n\n\n<p>Now, how about using the Critical Thinking Sheet on another project, to help you think through your ideas.<\/p>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<h2 class=\"has-accent-color has-text-color wp-block-heading\">Looking further<\/h2>\n\n\n\n<p>We us this strategy in our <a href=\"https:\/\/www.bangor.ac.uk\/computer-science-and-electronic-engineering\/undergraduate-modules\/ICP-2036\" target=\"_blank\" rel=\"noreferrer noopener\">Computer Graphics<\/a> teaching, and have written several papers on this topic, that you may like to read. Including <a rel=\"noreferrer noopener\" href=\"https:\/\/research.bangor.ac.uk\/portal\/en\/researchoutputs\/critical-thinking-sheets-encouraging-critical-thought-and-sketched-implementation-design(431df9db-f2f0-4401-a705-a471e6ed22ea).html\" target=\"_blank\">Critical Thinking Sheets<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/diglib.eg.org\/bitstream\/handle\/10.2312\/eged20201029\/017-023.pdf\" target=\"_blank\">CTS for Design Thinking in Programming Courses<\/a>. <\/p>\n\n\n\n<p>Critical thinking is covered in chapter 3, of our book on Five Design-Sheets. The <em><a href=\"https:\/\/www.amazon.co.uk\/Five-Design-Sheets-Sketching-Computing-Visualisation-ebook\/dp\/B071ZMDVP6\/ref=sr_1_1?dchild=1&amp;keywords=five+design-sheets&amp;qid=1591084913&amp;sr=8-1\" target=\"_blank\" rel=\"noreferrer noopener\">Five Design-Sheet<\/a><\/em> method enables you to consider many different design solutions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Think about your program before you code. This post goes through the five steps of the Critical Thinking Sheet. <\/p>\n","protected":false},"author":2,"featured_media":712,"comment_status":"open","ping_status":"open","sticky":false,"template":"templates\/template-full-width.php","format":"standard","meta":{"footnotes":""},"categories":[6,7,13,16,17],"tags":[73,79,85,99,107,121],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Make a quick sketch before you code - Project Rainbow<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make a quick sketch before you code - Project Rainbow\" \/>\n<meta property=\"og:description\" content=\"Think about your program before you code. This post goes through the five steps of the Critical Thinking Sheet.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Rainbow\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-02T08:13:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-parts-small.png\" \/>\n\t<meta property=\"og:image:width\" content=\"168\" \/>\n\t<meta property=\"og:image:height\" content=\"235\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"projectrainbow\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"projectrainbow\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/\"},\"author\":{\"name\":\"projectrainbow\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6\"},\"headline\":\"Make a quick sketch before you code\",\"datePublished\":\"2020-06-02T08:13:21+00:00\",\"dateModified\":\"2020-06-02T08:13:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/\"},\"wordCount\":2095,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-parts-small.png\",\"keywords\":[\"java\",\"layers\",\"model\",\"processing\",\"rainbow\",\"sketch\"],\"articleSection\":[\"Beginner\",\"Colours\",\"Java\",\"Processing\",\"Project Rainbow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/\",\"name\":\"Make a quick sketch before you code - Project Rainbow\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-parts-small.png\",\"datePublished\":\"2020-06-02T08:13:21+00:00\",\"dateModified\":\"2020-06-02T08:13:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#primaryimage\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-parts-small.png\",\"contentUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-parts-small.png\",\"width\":168,\"height\":235,\"caption\":\"The parts of the Critical Thinking Sheet\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make a quick sketch before you code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\",\"name\":\"Project Rainbow\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\",\"name\":\"Project Rainbow\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/bangor_logo_c1_flush.png\",\"contentUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/bangor_logo_c1_flush.png\",\"width\":3356,\"height\":958,\"caption\":\"Project Rainbow\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6\",\"name\":\"projectrainbow\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/221f8a462bd270b3db788cf44a3c1757?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/221f8a462bd270b3db788cf44a3c1757?s=96&d=mm&r=g\",\"caption\":\"projectrainbow\"},\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/author\/projectrainbow\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Make a quick sketch before you code - Project Rainbow","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/","og_locale":"en_US","og_type":"article","og_title":"Make a quick sketch before you code - Project Rainbow","og_description":"Think about your program before you code. This post goes through the five steps of the Critical Thinking Sheet.","og_url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/","og_site_name":"Project Rainbow","article_published_time":"2020-06-02T08:13:21+00:00","og_image":[{"width":168,"height":235,"url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-parts-small.png","type":"image\/png"}],"author":"projectrainbow","twitter_card":"summary_large_image","twitter_misc":{"Written by":"projectrainbow","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#article","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/"},"author":{"name":"projectrainbow","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6"},"headline":"Make a quick sketch before you code","datePublished":"2020-06-02T08:13:21+00:00","dateModified":"2020-06-02T08:13:21+00:00","mainEntityOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/"},"wordCount":2095,"commentCount":0,"publisher":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-parts-small.png","keywords":["java","layers","model","processing","rainbow","sketch"],"articleSection":["Beginner","Colours","Java","Processing","Project Rainbow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/","name":"Make a quick sketch before you code - Project Rainbow","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website"},"primaryImageOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#primaryimage"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-parts-small.png","datePublished":"2020-06-02T08:13:21+00:00","dateModified":"2020-06-02T08:13:21+00:00","breadcrumb":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#primaryimage","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-parts-small.png","contentUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/CTS-Bangor-v1-2-parts-small.png","width":168,"height":235,"caption":"The parts of the Critical Thinking Sheet"},{"@type":"BreadcrumbList","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/02\/using-the-critical-thinking-sheet\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/"},{"@type":"ListItem","position":2,"name":"Make a quick sketch before you code"}]},{"@type":"WebSite","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/","name":"Project Rainbow","description":"","publisher":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization","name":"Project Rainbow","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/logo\/image\/","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/bangor_logo_c1_flush.png","contentUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/bangor_logo_c1_flush.png","width":3356,"height":958,"caption":"Project Rainbow"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6","name":"projectrainbow","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/221f8a462bd270b3db788cf44a3c1757?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/221f8a462bd270b3db788cf44a3c1757?s=96&d=mm&r=g","caption":"projectrainbow"},"url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/author\/projectrainbow\/"}]}},"_links":{"self":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts\/299"}],"collection":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/comments?post=299"}],"version-history":[{"count":0,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts\/299\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media\/712"}],"wp:attachment":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media?parent=299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/categories?post=299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/tags?post=299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}