{"id":1052,"date":"2020-07-14T18:04:12","date_gmt":"2020-07-14T17:04:12","guid":{"rendered":"https:\/\/csee.bangor.ac.uk\/?p=1052"},"modified":"2020-07-14T18:04:12","modified_gmt":"2020-07-14T17:04:12","slug":"create-a-spectrum-of-coloured-squares-in-processing-part-2","status":"publish","type":"post","link":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/","title":{"rendered":"Create a spectrum of coloured squares in Processing (part 2)"},"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

This is part 2, and we continue the coding activity from part 1,<\/a> and now vary the size of the rectangles and their transparency.<\/p>\n\n\n\n

\"Spectrum
Spectrum of coloured squares, with different sizes and transparency.<\/figcaption><\/figure><\/div>\n\n\n\n

In this coding activity we extend the code of part 1<\/a> and create hundreds of rectangles that will show a spectrum of colour, with each rectangle showing a variety of effects, such as colour or transparency changes. We use the Processing library, and the Hue Saturation Brightness (HSB) colour model. This activity follows from previous activities and I suggest (if you have not already) that you follow the following three activities first: <\/p>\n\n\n\n

  1. Setting up the programming environment<\/a>,\u00a0<\/li>
  2. The activity to\u00a0make a quick sketch before you code<\/a>, and\u00a0<\/li>
  3. Hue Saturation Brightness<\/a>\u00a0activities first.<\/li>
  4. Create a spectrum of coloured squares in Processing (part 1)<\/a><\/li><\/ol>\n\n\n\n

    Step 1. Recap, and getting the basics working<\/h2>\n\n\n\n

    Load Processing and the saved rectangles activity (part 1). Make sure you have gotton this far.<\/p>\n\n\n\n

    In part 1, we plot rectangles while the myX<\/code> variable had a value less than the width<\/span><\/font>. We incremented the myX<\/code> variable every time we went round the loop, and changed the colour depending on the myX<\/code> value. We defined the y position by a random amount (between 0 and height). This gives red squares on the left and purple on the right.<\/p>\n\n\n\n

    \/\/Rectangles coloured by the spectrum\nsize(800,540);\nbackground(255,255,255);\ncolorMode(HSB,800,100,100,100);\nfloat myX=0;\n\nwhile(myX<width){\n  fill(myX,100,100);\n  rect(myX,random(height),20,20);\n  myX += 0.5;\n}<\/code><\/pre>\n\n\n\n
    \"Spectrum<\/figure>\n\n\n\n
    Now we extend the code in several ways.<\/p>\n\n\n\n
    Step 2. Center and adapt the size of the rectangles<\/h2>\n\n\n\n
    We first centre the rectangles. Currently the rectangles are plotted in positions defined by the top left hand corner. We use rectMode( mode ) <\/code>to set how we define the location of the plotted rectangles. The mode can be either CORNER<\/code>, CORNERS<\/code>, CENTER<\/code>, or RADIUS<\/code>. See the processing website for a long description of each setting for rectMode<\/code><\/a>. The default rectMode<\/code> is CORNER<\/code>, we will use CENTER<\/code> to put the x,y<\/code> position in the centre of the rectangle.<\/p>\n\n\n\n
    rectMode(CENTER);<\/code><\/pre>\n\n\n\n
    Let’s revisit the x and y variables. Before we just used myX<\/code>, and set the y value when we needed it. Let us now define a myY<\/code> variable: <\/p>\n\n\n\n
    float myY = 0;<\/code><\/pre>\n\n\n\n
    and set this to the random value every time we go round the loop.<\/p>\n\n\n\n
    myY = random(height);<\/code><\/pre>\n\n\n\n
    Now, let’s change the size of the rectangles every time we go round the while loop. To achieve this task, let us think about what we want:<\/p>\n\n\n\n
    1. We need to use a random<\/strong> value to change the size of the squares.<\/li>
    2. We want to have squares<\/strong>. So we’ll need to define a variable to hold the value such that the width and height of the rectangle is the same.<\/li>
    3. We don’t want extremely small squares<\/strong>, so we need a minimum size. <\/li><\/ol>\n\n\n\n
      Let us now set a few more variables. We need a variable for the minimum width of the rectangle (let’s set this initially to 1), another variable to set the maximum size (let’s set this to 80), and a final one to hold the current size (initially 0). <\/p>\n\n\n\n
      float myRectSizeMin = 1;\nfloat myRectSizeMax = 80;\nfloat myRectSize    = 0;<\/code><\/pre>\n\n\n\n
      Every time we go round the while loop, we need to update the myRectSize<\/code>, with a random value between the minimum and maximum value. We can achieve this as follows:<\/p>\n\n\n\n
      myRectSize = random(myRectSizeMin, myRectSizeMax);<\/code><\/pre>\n\n\n\n
      Note that (with the current set variables) this now gives us a random number between 1 up to (and not including) 80. To summarise so far, we now have the following code:<\/p>\n\n\n\n
      \/\/Rectangles random sized, and coloured by the spectrum\nsize(800,540);\nbackground(255,255,255);\ncolorMode(HSB,800,100,100,100);\nrectMode(CENTER);\nfloat myX=0;\nfloat myY=0;\nfloat mySizeAdapter=0;\nfloat myRectSizeMin = 1;\nfloat myRectSizeMax = 80;\nfloat myRectSize    = 0;\n\nwhile(myX<width){\n  myRectSize = random(myRectSizeMin, myRectSizeMax);\n  myY = random(height);\n  fill(myX,100,100);\n  rect(myX,myY,myRectSize,myRectSize);\n  myX += 3;\n}<\/code><\/pre>\n\n\n\n
      \"\"
      Rectangles random sized, and coloured by the spectrum<\/figcaption><\/figure><\/div>\n\n\n\n
      Step 3. Adapt opacity<\/h2>\n\n\n\n
      We have already setup the HSB colour mode to be colorMode(HSB,800,100,100,100);<\/code> remember that this setting gives us the Hue<\/strong> range between 0 and 800, with each of Saturation<\/strong>, Brightness<\/strong> and Opacity<\/strong> between 0 and 100.<\/p>\n\n\n\n
      We need to define a variable to hold the opacity, let’s define the following:<\/p>\n\n\n\n
      float myOpacity = 0;<\/code><\/pre>\n\n\n\n
      Let’s set the opacity between 20 and 80. We don’t want it too translucent, otherwise it won’t be seen. We don’t want it too opaque because it will cover other rectangles. Every time round the loop we need to call the following:<\/p>\n\n\n\n
      myOpacity  = random(20,80);<\/code><\/pre>\n\n\n\n
      And also set the fill to change the opacity, as follows:<\/p>\n\n\n\n
      fill(myX,100,100,myOpacity);<\/code><\/pre>\n\n\n\n
      This now gives us code with a set of variables, and a while loop that is starting to do many commands.<\/p>\n\n\n\n
      \n
      \n
      \/\/random sized rectangles coloured by the spectrum, with random opacity (alpha value)\nsize(800,540);\nbackground(255,255,255);\ncolorMode(HSB,800,100,100,100);\nrectMode(CENTER);\nfloat myX=0;\nfloat myY=0;\nfloat mySizeAdapter = 0;\nfloat myRectSizeMin = 1;\nfloat myRectSizeMax = 80;\nfloat myRectSize    = 0;\nfloat myOpacity     = 0;\n\nwhile(myX<width){\n  myRectSize = random(myRectSizeMin, myRectSizeMax);\n  myOpacity  = random(20,80);\n  myY        = random(height);\n  fill(myX,100,100,myOpacity);\n  rect(myX,myY,myRectSize,myRectSize);\n  myX += 3;\n}<\/code><\/pre>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
      \"Squares
      Squares example sized and with change in opacity<\/figcaption><\/figure>\n\n\n\n
      Step 4. Your turn<\/h2>\n\n\n\n
      We now have a completed picture. When we run it, because we have random variables, we will create a different picture. Yours will be different. But there are many aspects you can change, or adapt. Have a go at the following:<\/p>\n\n\n\n
      Top tip.<\/span><\/p>
      To change Saturation<\/em> and even Brightness<\/em> you could use random(). E.g., random(0,100) <\/strong><\/p><\/blockquote><\/figure>\n\n\n\n
      • Try changing the variable values. For instance, (1) display many more rectangles, (2) change the range of the opacity, (3) change the range of the rectangle sizes (e.g., make some really big!)<\/li>
      • Try changing the Brightness<\/strong> and the Saturation<\/strong> of the colours too.<\/li><\/ul>\n\n\n\n
        \"Rainbow
        Rainbow rectangles, with hue, saturation, brightness and opacity randomised.<\/figcaption><\/figure><\/div>\n\n\n\n
        Top Tip.<\/span><\/p>
        ellipse<\/code>() uses the same parameters as rect<\/code>().<\/strong><\/p><\/blockquote><\/figure>\n\n\n\n
        • Swap the rectangles with circles. In Processing we can create circles by using the method ellipse()<\/code>. <\/li><\/ul>\n\n\n\n
          \"Rainbow
          Rainbow circles, sized and transparent.<\/figcaption><\/figure><\/div>\n\n\n\n
          • Try to plot a centre region with a different appearance to the outer ones. E.g., change the stroke and transparency of the inner ones in comparison to the outer ones. <\/li><\/ul>\n\n\n\n
            Top tip.<\/span><\/p>
            You will need to define the inside<\/em> region using an if<\/code> statement and many ANDs.<\/p><\/blockquote><\/figure>\n\n\n\n
            \"Rainbow
            Rainbow rectangles, which are plotted differently inside a defined region.<\/figcaption><\/figure><\/div>\n\n\n\n
            <\/p>\n","protected":false},"excerpt":{"rendered":"
            Learn how to use the HSB model, and plot hundreds of coloured squares with different effects.<\/p>\n","protected":false},"author":2,"featured_media":1024,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,13,16,17],"tags":[31,36,40,66,68,99,111,117,124],"yoast_head":"\nCreate a spectrum of coloured squares in Processing (part 2) - 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\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a spectrum of coloured squares in Processing (part 2) - Project Rainbow\" \/>\n<meta property=\"og:description\" content=\"Learn how to use the HSB model, and plot hundreds of coloured squares with different effects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Rainbow\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-14T17:04:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles.png\" \/>\n\t<meta property=\"og:image:width\" content=\"788\" \/>\n\t<meta property=\"og:image:height\" content=\"280\" \/>\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=\"5 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\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/\"},\"author\":{\"name\":\"projectrainbow\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6\"},\"headline\":\"Create a spectrum of coloured squares in Processing (part 2)\",\"datePublished\":\"2020-07-14T17:04:12+00:00\",\"dateModified\":\"2020-07-14T17:04:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/\"},\"wordCount\":899,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles.png\",\"keywords\":[\"brightness\",\"colour\",\"colour model\",\"hsb\",\"hue\",\"processing\",\"rectangles\",\"saturation\",\"squares\"],\"articleSection\":[\"Colours\",\"Java\",\"Processing\",\"Project Rainbow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/\",\"name\":\"Create a spectrum of coloured squares in Processing (part 2) - Project Rainbow\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles.png\",\"datePublished\":\"2020-07-14T17:04:12+00:00\",\"dateModified\":\"2020-07-14T17:04:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#primaryimage\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles.png\",\"contentUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles.png\",\"width\":788,\"height\":280,\"caption\":\"Hue Saturation Value, coloured squares\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a spectrum of coloured squares in Processing (part 2)\"}]},{\"@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 spectrum of coloured squares in Processing (part 2) - 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\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/","og_locale":"en_US","og_type":"article","og_title":"Create a spectrum of coloured squares in Processing (part 2) - Project Rainbow","og_description":"Learn how to use the HSB model, and plot hundreds of coloured squares with different effects.","og_url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/","og_site_name":"Project Rainbow","article_published_time":"2020-07-14T17:04:12+00:00","og_image":[{"width":788,"height":280,"url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles.png","type":"image\/png"}],"author":"projectrainbow","twitter_card":"summary_large_image","twitter_misc":{"Written by":"projectrainbow","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#article","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/"},"author":{"name":"projectrainbow","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6"},"headline":"Create a spectrum of coloured squares in Processing (part 2)","datePublished":"2020-07-14T17:04:12+00:00","dateModified":"2020-07-14T17:04:12+00:00","mainEntityOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/"},"wordCount":899,"commentCount":0,"publisher":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles.png","keywords":["brightness","colour","colour model","hsb","hue","processing","rectangles","saturation","squares"],"articleSection":["Colours","Java","Processing","Project Rainbow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/","name":"Create a spectrum of coloured squares in Processing (part 2) - Project Rainbow","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website"},"primaryImageOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#primaryimage"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles.png","datePublished":"2020-07-14T17:04:12+00:00","dateModified":"2020-07-14T17:04:12+00:00","breadcrumb":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#primaryimage","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles.png","contentUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles.png","width":788,"height":280,"caption":"Hue Saturation Value, coloured squares"},{"@type":"BreadcrumbList","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/07\/14\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/"},{"@type":"ListItem","position":2,"name":"Create a spectrum of coloured squares in Processing (part 2)"}]},{"@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\/1052"}],"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=1052"}],"version-history":[{"count":0,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts\/1052\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media\/1024"}],"wp:attachment":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media?parent=1052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/categories?post=1052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/tags?post=1052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}