{"id":798,"date":"2020-06-08T12:54:27","date_gmt":"2020-06-08T11:54:27","guid":{"rendered":"https:\/\/csee.bangor.ac.uk\/?p=798"},"modified":"2020-06-08T12:54:27","modified_gmt":"2020-06-08T11:54:27","slug":"create-a-rainbow-in-code","status":"publish","type":"post","link":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/","title":{"rendered":"Create a rainbow in code"},"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 create a rainbow in code using Processing. Processing is a “flexible software sketchbook and a language for learning how to code within the context of the visual arts”, see processing.org<\/a>.<\/p>\n\n\n\n

To do this activity <\/h2>\n\n\n\n
\"Processing<\/figure><\/div>\n\n\n\n
  1. You should have Processing already set up, <\/strong>and be familiar with some basic coding in Processing sketchbook, and have the sketchbook window open and running. Instructions for this activity are given in a post: set up the coding environment<\/a>.<\/li>
  2. You should have already prepared a quick sketch <\/strong>of the planned scene, using the critical thinking sheet<\/a>, and have it to hand.<\/li><\/ol>\n\n\n\n

    Step 1. A quick review of our plan<\/h2>\n\n\n\n

    In the previous activity you would have made the plan using the critical thinking sheet (CTS). This will give you five steps that will help you code better. Just to remind you, these are:<\/p>\n\n\n\n

    1. The summary statement of the problem<\/strong>. In our case this is “coding a simple rainbow in processing”.<\/li>
    2. The sketch of the scene. <\/strong>In our scene we had a rainbow, some grass that covers the lower part of the rainbow, and a basic tree with a brown trunk and green leaves.<\/li>
    3. List of the key components of the system.<\/strong> In our case, we have primitives<\/em> and attributes<\/em>. The primitives are the rainbow, grass and tree. And the main attributes are the colours of the rainbow, plus the trunk colour, leaf colour and grass colour.<\/li>
    4. The main processes and algorithm involved. <\/strong>Because this is a simple scene, we just have three steps: first draw the rainbow, then draw the grass that appears in front of the rainbow, and finally draw the tree, that is placed on top of the grass.<\/li>
    5. A final list of any concerns or issues.<\/strong> In our case these include RGB colour coding. If you have forgotten RGB colours, or wish to remind yourself, then you can take a look at the RGB Coding activity<\/a> again. <\/li><\/ol>\n\n\n\n
      \"Sketch
      Critical Thinking Sheet – for the rainbow scene<\/figcaption><\/figure><\/div>\n\n\n\n
      \"Rainbow<\/figure><\/div>\n\n\n\n

      Also, let us remember the mockup we made. In the mockup we cut out paper circles, that we coloured by the colours of the rainbow. They were placed on top of each other. Now, we will use the same idea, but now we will use code. We will place a circle on top of another circle, to create the colours of the rainbow, placing a final white circle to get the arch shape. We place the grass on top to obscure half of the rainbow. Finally we place the tree on top of the grass, to look like the tree is in the foreground.<\/p>\n\n\n\n

      Step 2. Set the scene and the variables<\/h2>\n\n\n\n

      The first stage to writing the code, is to set the window size and the background colour. This is like choosing the size of the paper, and colour of paper. Let’s set a wide window, that is three times wide as tall; 600 by 400 is suitable for our purpose.<\/p>\n\n\n\n

      size(600,400);\nbackground(255,255,255);<\/code><\/pre>\n\n\n\n
      From our Critical Thinking Sheet, we know already what the attributes<\/em> will be: we have different colours of the rainbow, trunk colour, grass and leaf colours.  We will define these by naming variables<\/strong>. In computing, a variable is a piece of storage. It holds a value that can be retrieved at a later point in the code, and also can be updated. <\/p>\n\n\n\n
      Top tip.<\/span><\/p>
      Choose descriptive variable names. trunkSize is better than using “t”.<\/p><\/blockquote><\/figure>\n\n\n\n
      In Processing the variables are typed<\/strong>. Meaning there are different categories of variable. For example, variables of type integer<\/em> can only hold whole numbers such as 1,2,3,4 etc. they cannot hold fractional values.  Whereas a floating<\/em> point type variable can hold a real number, such as 0.5, 0.0021, or -4.3333. <\/p>\n\n\n\n
      Processing defines a color<\/code> data type, to hold colours. We can define a colour, let us call it green, by writing the following code: color green = color(0,255,0);<\/code><\/p>\n\n\n\n
      color colRed    = color(255,0,0);\ncolor colOrange = color(255,127,0);\ncolor colYellow = color(255,255,0);\ncolor colGreen  = color(0,255,0);\ncolor colBlue   = color(0,0,255);\ncolor colIndigo = color(75,0,130);\ncolor colViolet = color(148,0,211);\ncolor colTrunk  = color(165,42,42);\ncolor colGrass  = color(80,250,80);\ncolor colLeaf   = color(80,150,80);\ncolor colWhite  = color(255,255,255);<\/code><\/pre>\n\n\n\n
      Step 3. Draw the rainbow<\/h2>\n\n\n\n
      In the Critical Thinking Sheet, we decided that there were three parts to the implementation: draw rainbow, draw grass, draw tree. Let’s draw the rainbow first.<\/p>\n\n\n\n
      To create the rainbow, let us take a look again at the mockup, from the previous post. We see that the rainbow was made from several circles placed on top of the other. Each a little smaller from the previous one, and ending with a white circle.<\/p>\n\n\n\n
      • \"Rainbow<\/figure><\/li>
      • \"Rainbow<\/figure><\/li>
      • \"Rainbow<\/figure><\/li>
      • \"Rainbow<\/figure><\/li>
      • \"Rainbow<\/figure><\/li>
      • \"Rainbow<\/figure><\/li>
      • \"Rainbow<\/figure><\/li>
      • \"Rainbow<\/figure><\/li><\/ul>
        Coloured circles from the rainbow mockup. <\/figcaption><\/figure>\n\n\n\n
        Circles in Processing are called ellipse<\/code>. An ellipse with equal width and height will be a circle. An ellipse takes in four values; so an ellipse placed on the (x,y)<\/code> position, with width w<\/code> and height h<\/code>, would be defined by ellipse(x, y, w, h)<\/code>. We need to place our circle in the right third of the screen, and about half way up. Therefore, because we already set the size of the screen to be 600<\/code> by 400<\/code>, a suitable value for x would be 400, and y to be 200. Let’s define two variables x, and y to save these positions.<\/p>\n\n\n\n
        int x = 400;\nint y = 200;<\/code><\/pre>\n\n\n\n
        The default colour of an ellipse is white, so we need to change it to the right colour. We do this by changing the fill<\/code> of the primitive. So if we write fill(colRed); <\/code>to change the fill of an object to red. <\/p>\n\n\n\n
        \"Circle,
        Red ellipse, positioned at (400,200) with a width of 200 and height 200.<\/figcaption><\/figure><\/div>\n\n\n\n
        fill sets the colour value for any shapes that use fill. Once a fill colour is set, it will stay that colour until we change it. Consequently, because each part of the rainbow needs to be shown with a different colour we will need to set a fill colour, draw an ellipse, set another fill colour, before drawing another ellipse, and so on.<\/p>\n\n\n\n
        Also, each subsequent ellipse will need to be slightly smaller. Let us define the first circle to be of width 200, and height 200. Then subsequent circles can be 20 less. We also need to end by circle drawing part with a white circle, to get the arc effect that we need for our rainbow.<\/p>\n\n\n\n
        • \"\"<\/figure><\/li>
        • \"\"<\/figure><\/li>
        • \"\"<\/figure><\/li>
        • \"\"<\/figure><\/li>
        • \"\"<\/figure><\/li>
        • \"\"<\/figure><\/li>
        • \"\"<\/figure><\/li>
        • \"\"
          A set of ellipses (circles) placed on top of each other. Each have a black line around them.<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n
          Top tip.<\/span><\/p>
          The term stroke<\/em> is used by other graphics libraries and tools, to change borders.<\/p><\/blockquote><\/figure>\n\n\n\n
          By default, each of the ellipses have a black line round them, this is called stroke<\/em>. You can see in the picture above that there is a black line around each circle. In Processing, we can change the stroke<\/em> width by changing the strokeWeight<\/code> value, and its colour by changing the value of stroke<\/code>. For example, strokeWeight(10)<\/code>will define a shape with a very thick line round it, and stroke(255) would make a white border, while stroke(0,255,0)<\/code>would make a green border. We probably don’t want the stroke to appear in our rainbow, so we will remove the border by typing: noStroke();<\/code><\/p>\n\n\n\n
          Finally, we need to end by drawing a white circle, to get the arc effect that we need for our rainbow.<\/p>\n\n\n\n
          noStroke();\nfill(colRed);    \nellipse(x,y,200,200);\nfill(colOrange); \nellipse(x,y,180,180);\nfill(colYellow);\nellipse(x,y, 160,160);\nfill(colGreen);\nellipse(x,y,140,140);\nfill(colBlue);\nellipse(x,y,120,120);\nfill(colIndigo);\nellipse(x,y,100,100);\nfill(colViolet); \nellipse(x,y,80,80);\nfill(colWhite);\nellipse(x,y,60,60);<\/code><\/pre>\n\n\n\n
          Step 4. Draw the grass<\/h2>\n\n\n\n
          Now we want to draw the grass. This will appear in the foreground, so we need to draw it after the rainbow. We can draw the grass by placing a large rectangle on top of everything.<\/p>\n\n\n\n
          \"Rectangle
          Rectangle, at (10,12) with a width of 30, and height 40<\/figcaption><\/figure><\/div>\n\n\n\n
          In Processing rectangles are created with the rect<\/code> function. The standard rect function takes in four parameters, x<\/code> and y<\/code> coordinates, and its width and height. Therefore rect(10,12,30,40) would create a small rectangle, positioned at coordinates (10,12), with a width of 30 and height 40.<\/p>\n\n\n\n
          We need a large rectangle that covers half of our window, and covers half of the rainbow. We can achieve this by starting the rectangle at 0,200 and going to the maximum width and height of the window, which is 600,400. Again we need to set the fill of the rectangle first to give it the grass colour.<\/p>\n\n\n\n
          \"Rainbow
          Rainbow with grass.<\/figcaption><\/figure><\/div>\n\n\n\n
          fill(colGrass);\nrect(0,200,600,400);<\/code><\/pre>\n\n\n\n
          Step 5. Draw the tree<\/h2>\n\n\n\n
          Finally we need a tree. We can draw the tree with one brown rectangle, and two green circles. Because these are drawn last they will appear on top of the grass.<\/p>\n\n\n\n
          fill(colTrunk);\nrect(100,170,20,150);\nfill(colLeaf);\nellipse(110,180,100,100);\nellipse(110,140,80,80);<\/code><\/pre>\n\n\n\n
          \"Rainbow
          Rainbow scene, with grass and a single tree.<\/figcaption><\/figure><\/div>\n\n\n\n
          Step 6. Additional activities<\/h2>\n\n\n\n
          You may like to adapt your picture. Here are some suggestions that you  like to try.<\/p>\n\n\n\n
          \"Rainbow
          Rainbow scene with five trees.<\/figcaption><\/figure><\/div>\n\n\n\n
          • Change the colours of the rainbow. Perhaps make the rainbow from greys.<\/li>
          • Alter the size of the rainbow, make it very big.<\/li>
          • Add several trees. Perhaps adding a black line around each tree trunk.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"
            In this activity you will create a rainbow in code using software sketchbook and a language “Processing”.<\/p>\n","protected":false},"author":2,"featured_media":853,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,7,13,16,17],"tags":[28,45,49,51,56,99,107,110,114,119,126],"yoast_head":"\nCreate a rainbow in 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\/08\/create-a-rainbow-in-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a rainbow in code - Project Rainbow\" \/>\n<meta property=\"og:description\" content=\"In this activity you will create a rainbow in code using software sketchbook and a language "Processing".\" \/>\n<meta property=\"og:url\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Rainbow\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-08T11:54:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-rainbow-scene.png\" \/>\n\t<meta property=\"og:image:width\" content=\"712\" \/>\n\t<meta property=\"og:image:height\" content=\"534\" \/>\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=\"8 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\/08\/create-a-rainbow-in-code\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/\"},\"author\":{\"name\":\"projectrainbow\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6\"},\"headline\":\"Create a rainbow in code\",\"datePublished\":\"2020-06-08T11:54:27+00:00\",\"dateModified\":\"2020-06-08T11:54:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/\"},\"wordCount\":1406,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-rainbow-scene.png\",\"keywords\":[\"beginner\",\"colours\",\"critical-thinking-sheet\",\"CTS\",\"ellipse\",\"processing\",\"rainbow\",\"rect\",\"rgb\",\"scene\",\"tree\"],\"articleSection\":[\"Beginner\",\"Colours\",\"Java\",\"Processing\",\"Project Rainbow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/\",\"name\":\"Create a rainbow in code - Project Rainbow\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-rainbow-scene.png\",\"datePublished\":\"2020-06-08T11:54:27+00:00\",\"dateModified\":\"2020-06-08T11:54:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#primaryimage\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-rainbow-scene.png\",\"contentUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-rainbow-scene.png\",\"width\":712,\"height\":534,\"caption\":\"Rainbow scene achieved in Processing\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a rainbow in 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":"Create a rainbow in 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\/08\/create-a-rainbow-in-code\/","og_locale":"en_US","og_type":"article","og_title":"Create a rainbow in code - Project Rainbow","og_description":"In this activity you will create a rainbow in code using software sketchbook and a language \"Processing\".","og_url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/","og_site_name":"Project Rainbow","article_published_time":"2020-06-08T11:54:27+00:00","og_image":[{"width":712,"height":534,"url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-rainbow-scene.png","type":"image\/png"}],"author":"projectrainbow","twitter_card":"summary_large_image","twitter_misc":{"Written by":"projectrainbow","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#article","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/"},"author":{"name":"projectrainbow","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6"},"headline":"Create a rainbow in code","datePublished":"2020-06-08T11:54:27+00:00","dateModified":"2020-06-08T11:54:27+00:00","mainEntityOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/"},"wordCount":1406,"commentCount":2,"publisher":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-rainbow-scene.png","keywords":["beginner","colours","critical-thinking-sheet","CTS","ellipse","processing","rainbow","rect","rgb","scene","tree"],"articleSection":["Beginner","Colours","Java","Processing","Project Rainbow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/","name":"Create a rainbow in code - Project Rainbow","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website"},"primaryImageOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#primaryimage"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-rainbow-scene.png","datePublished":"2020-06-08T11:54:27+00:00","dateModified":"2020-06-08T11:54:27+00:00","breadcrumb":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#primaryimage","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-rainbow-scene.png","contentUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-rainbow-scene.png","width":712,"height":534,"caption":"Rainbow scene achieved in Processing"},{"@type":"BreadcrumbList","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/06\/08\/create-a-rainbow-in-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/"},{"@type":"ListItem","position":2,"name":"Create a rainbow in 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\/798"}],"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=798"}],"version-history":[{"count":0,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts\/798\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media\/853"}],"wp:attachment":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media?parent=798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/categories?post=798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/tags?post=798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}