{"id":1092,"date":"2020-09-02T19:05:07","date_gmt":"2020-09-02T18:05:07","guid":{"rendered":"https:\/\/csee.bangor.ac.uk\/?p=1092"},"modified":"2020-09-02T19:05:07","modified_gmt":"2020-09-02T18:05:07","slug":"create-a-coloured-grid-in-processing","status":"publish","type":"post","link":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/","title":{"rendered":"Create a coloured grid in Processing"},"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 coding activity we will use the Processing library to create a grid of coloured squares. We will use the Hue Saturation Brightness (HSB) colour model to assign the colours, which I covered in a previous activity. Consequently, this activity follows from previous ones and I suggest you achieve those activities first:<\/p>\n\n\n\n

  1. Setting up the programming environment<\/a>, <\/li>
  2. The activity to make a quick sketch before you code<\/a>, and <\/li>
  3. Hue Saturation Brightness<\/a> activities first.<\/li>
  4. Create a spectrum of coloured squares in Processing (part 1)<\/a><\/li><\/ol>\n\n\n\n
    \"Regular
    Regular grid, coloured in a spectrum of colours, with a black stroke around each cell.<\/figcaption><\/figure>\n\n\n\n

    At the end of this activity, <\/span>I want you to realise that (in coding) it is best to separate the index (position) of each grid cell and its actual x,y plotted position. This makes code that can be easily applied to different situations.<\/p>\n\n\n\n

    Step 1. Plan the picture<\/h2>\n\n\n\n

    Whatever project you are doing, it is good to know where you are heading! The Critical Thinking Sheet can help you think and plan your code. <\/p>\n\n\n\n

    Our activity today <\/strong>is to create a picture of a grid of coloured shapes, where each square is placed alongside the other. <\/span><\/p>\n\n\n\n

    \"Coloured
    Small regular grid of random coloured squares.<\/figcaption><\/figure><\/div>\n\n\n\n

    We can think about this idea as a grid of cells, where each cell is the same size, sits next to another cell, and each cell includes one object. We could place different shapes in each cell (such as a rectangle or a circle), but let’s start by placing coloured squares. We could also change the colours of the circles to create various patterns, but let’s start simple and shade them by random colours. <\/p>\n\n\n\n

    \"Critical<\/figure><\/div>\n\n\n\n
    1. If you have not done so already: print out the Critical Thinking Sheet<\/a>. On the printout, now complete the problem, name and add today’s date. Also explain the challenge part \u2460 <\/li>
    2. In panel \u2461 make a sketch of the problem output, and annotate the diagram. <\/li>
    3. In panel \u2462 you can explain the main components of the system. In this challenge there are three main aspects: (i) the shape that we will plot, (ii) the colour that it will be, and (iii) the position we will place it in. <\/li>
    4. In panel \u2463 we can now explain the process (algorithm). A simple process is to run through every cell position (we can do this by going through all x positions and then all y positions), then set the required colour, and finally plot the shape.<\/li>
    5. Finally, we need to consider what to do next. Definitely we need to think more about the cell, and how to index each part, and about the colour model.<\/li><\/ol>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Step 2. Set up the basic window<\/h2>\n\n\n\n

      Setting up the Processing environment with basic code should easy now. <\/p>\n\n\n\n

      • Set the window size<\/code> to 600 by 200<\/li>
      • Set background<\/code> to white<\/li>
      • Choose the colorMode<\/code> to be HSB, and set all values (for now) to be 100<\/li>
      • Plot a grey rectangle, to make sure it all works fine.<\/li><\/ul>\n\n\n\n
        \"\"
        Test picture, make sure that the Processing environment has been setup correctly. Showing one rectangle at 10,10, width and height being 100, and grey colour, with a white stroke,<\/figcaption><\/figure>\n\n\n\n
        size(800,200);<\/code>\ncolorMode(HSB, 100, 100, 100);<\/code>\nbackground(100);<\/code>\n\/\/ Do a test with one rectangle<\/code>\n\/\/ just to make sure that everything is working<\/code> fine <\/code>\n\nfill(50);<\/code>\nstroke(100);<\/code>\nstrokeWeight(2);<\/code>\nrect(10,10,100,100);<\/code><\/pre>\n\n\n\n
        Step 3. Understand the grid and coordinate system<\/h2>\n\n\n\n
        Let us remind ourselves about the coordinate system in Processing.<\/span><\/p>\n\n\n\n
        \"Rectangle<\/figure>
        \n
        We can plot a rectangle in Processing, by describing the location of the top left position of the rectangle, and set its width and height. <\/p>\n<\/div><\/div>\n\n\n\n
        Top Tip.<\/span>
        A unit square sets each side to be 1.<\/p><\/blockquote><\/figure>\n\n\n\n
        Let us assume (for now) that the width and height of the rectangle is one.  This provides a really nice way to index every grid point. The first square is placed at (0,0), and then moving to the right we get the second at (1,0), third at (2,0) and so on. We are using the unit square, to simplify the code.<\/p>\n\n\n\n
        \"Unit
        Plotting lots of unit squares, we can plot the first at (0,0) then (1,0) and so on.<\/figcaption><\/figure>\n\n\n\n
        This indexing scheme fits really well with a for<\/strong> loop. For example we can use two for<\/strong> loops to index positions in a 2D grid between 0 and 9 as follows:<\/p>\n\n\n\n
        for(int x=0; x<10; x++)\n   for(int y=0; y<10; y++){\n   \/\/ loop code goes here\n}<\/code><\/pre>\n\n\n\n
        But, if we directly plot 1 by 1 rectangles – they would be very small. Indeed, so small that they are only revealed when we zoom into the screenshot.<\/p>\n\n\n\n
        \"Two
        Two small 1-sided rectangles, plotted in Processing, one at (0,0) and the other at (1,1)<\/figcaption><\/figure><\/div>\n\n\n\n
        We need to scale everything up. In computer graphics scaling is performed through multiplication. So to scale everything by 10, we can multiple the index position x<\/strong> and y<\/strong> by 10 to get the real location, and multiple the unit rectangle by 10, to create a rectangle of 10 width by 10 height. Perhaps we want a grid of 12 rectangles by 12 rectangles, we just change the end conditions of both for-loop to 12. As follows:<\/p>\n\n\n\n
        for(int x=0; x<12; x++)\n   for(int y=0; y<12; y++){\n   rect( x * 10, y * 10, 10, 10);\n}<\/code><\/pre>\n\n\n\n
        Top Tip.<\/span><\/p>
        Separate the quantity of items, and how they are indexed, from their use.<\/p><\/blockquote><\/figure>\n\n\n\n
        This is a really good strategy<\/strong>: separate the quantity of the things, and how they are indexed, from their use (or in our case, their position).<\/span><\/p>\n\n\n\n
        \"Regular
        Regular grid, 12 by 12 grid of rectangles, all coloured grey, with white stroke.<\/figcaption><\/figure><\/div>\n\n\n\n
        Refactor the code.<\/strong><\/p>\n\n\n\n
        Let us improve the code making it more descriptive, and remove magic numbers. To do this we need to define some variables. <\/p>\n\n\n\n
        • We can set myScale<\/code> to be 10, <\/li>
        • the width<\/code> and height<\/code> of each rectangle to be cellSize<\/code>, <\/li>
        • the size of the index could be different in X and the Y direction, so let’s define gridQuantity<\/code>X and gridQuantityY also to 10. The code to achieve this result is as follows:<\/li><\/ul>\n\n\n\n
          size(200,200);\ncolorMode(HSB, 100, 100, 100);\nbackground(100);\n\nfill(50);\nstroke(100);\nstrokeWeight(1);\n\nfloat myScale = 10;\nfloat cellSize  = 10;\nint gridQuantityX = 12;\nint gridQuantityY = 12;\n\nfor(int x=0; x<gridQuantityX; x++)\n   for(int y=0; y<gridQuantityY; y++){\n   rect( x * myScale, y * myScale, cellSize, cellSize);\n}<\/code><\/pre>\n\n\n\n
          Some observations with this code:<\/strong><\/p>\n\n\n\n
          • if cellSize<\/code> is bigger than myScale<\/code> then the rectangles overlap, <\/li>
          • if cellSize<\/code> is smaller then myScale<\/code> there is a small gap between each rectangle. <\/li>
          • if  the result of gridQuantityX*cellSize<\/code> is larger than the width or gridQuantityY*cellSize<\/code> greater than the width of the window then not all the rectangles would be seen on that window.<\/li><\/ul>\n\n\n\n
            Step 5. Colour the squares and make the grid fill the window<\/h2>\n\n\n\n
            Let’s change the code (slightly) to make the grid fill the window.  We can do this by setting the rectangle dimensions, and calculating the quantity of rectangles that will fit in the window. We also need to re-organise the code order to make it work; especially set the colorMode<\/code> later, when we know the colour range.<\/p>\n\n\n\n
            Top Tip.<\/p>
            Remember to refactor your code. <\/p><\/blockquote><\/figure>\n\n\n\n
            • set the cellSize<\/code> to 20<\/code><\/li>
            • Calculate the (integer) quantity of cells that will fit in the window width, by floor(width\/cellSize);<\/code><\/li>
            • Calculate the (integer) quantity of cells that will fit in the window height, by floor(height\/cellSize);<\/code> <\/li>
            • Set the scale to the cellSize<\/code>.<\/li>
            • Set the colourRange in the HSB space to the x<\/code> value of the gridQuantity;<\/li>
            • Fill the colour based on the x<\/code> value.<\/li><\/ul>\n\n\n\n
              size(600,200);\nbackground(255);\n\nfloat cellSize    = 10;\nint gridQuantityX = floor(width\/cellSize);\nint gridQuantityY = floor(height\/cellSize);\n\nfloat myScale = cellSize;\nint colourRange = gridQuantityX;\n\ncolorMode(HSB, colourRange, 100, 100);\nstroke(0); \/\/ make it black\nstrokeWeight(2);\n\nfor(int x=0; x<gridQuantityX; x++)\n   for(int y=0; y<gridQuantityY; y++){\n     fill(x,100,100);\n      rect( x * myScale, y * myScale, cellSize, cellSize);\n}<\/code><\/pre>\n\n\n\n
              \"Rainbow
              Rainbow of colours, in a window 600 by 200, and cellSize to 10<\/figcaption><\/figure><\/div>\n\n\n\n
              Step 6. Now your turn. Add variation and try different values<\/h2>\n\n\n\n
              Now we can change the basic code, to make it more interesting. <\/span><\/p>\n\n\n\n
              Try different colour combinations<\/strong>. Perhaps make them all one colour, random colours, or a small range of colours (such as light blue to dark blue.<\/p>\n\n\n\n
              Top Tip.<\/span><\/p>
              Don’t guess values for your code. Instead imagine the end result, then choose values to achieve that result!<\/strong><\/p><\/blockquote><\/figure>\n\n\n\n
              Adapt the size of the rectangles<\/strong>. Try to make them bigger or smaller. Even make them really small, so that individually the rectangles cannot be seen.<\/p>\n\n\n\n
              \n
              \n
              \"Regular
              Regular grid of very large rectangles<\/figcaption><\/figure>\n<\/div>\n\n\n\n
              \n
              \"Regular
              Regular grid of very small rectangles.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
              Change the stroke and appearance of each rectangle.<\/strong> White strokes, coloured stroke, black stroke, to noStroke<\/code>.<\/p>\n\n\n\n
              Add some noise<\/em>.<\/strong> One thing we could add some randomness into the colour choice.  Rather than plotting an exact colour, we can add or delete a random value from a fixed colour blue. We are adding a deterministic jitter to the colour value. We can easily achieve this by adding a random value to the colour.  For instance, we can use a random range created by random(-5,5)<\/code>. By choosing a fixed colour blue, we can make a swimming pool tiling pattern, as follows:<\/p>\n\n\n\n
              \n
              \n
              \"A
              A regular grid of blue rectangles.<\/figcaption><\/figure>\n<\/div>\n\n\n\n
              \n
              \"A
              A regular grid of blue rectangles that have been jittered.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
              We can do the same with the spectrum colour choice: choose the spectrum colour, and then jitter the colour by +random(-5,5)<\/code>.<\/p>\n\n\n\n
              \"A
              A regular grid, with spectrum of colours that have been jittered +-5.<\/figcaption><\/figure><\/div>\n\n\n\n
              <\/p>\n","protected":false},"excerpt":{"rendered":"
              Learn how to create a grid of coloured shapes, plotted in Processing.<\/p>\n","protected":false},"author":2,"featured_media":1197,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,7,13,16,17],"tags":[32,36,58,61,66,68,69,75,109,117,127],"yoast_head":"\nCreate a coloured grid in Processing - 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\/09\/02\/create-a-coloured-grid-in-processing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a coloured grid in Processing - Project Rainbow\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a grid of coloured shapes, plotted in Processing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Rainbow\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-02T18:05:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/09\/regularGrid-rainbow-colours-jittered.png\" \/>\n\t<meta property=\"og:image:width\" content=\"712\" \/>\n\t<meta property=\"og:image:height\" content=\"334\" \/>\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\/09\/02\/create-a-coloured-grid-in-processing\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/\"},\"author\":{\"name\":\"projectrainbow\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6\"},\"headline\":\"Create a coloured grid in Processing\",\"datePublished\":\"2020-09-02T18:05:07+00:00\",\"dateModified\":\"2020-09-02T18:05:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/\"},\"wordCount\":1382,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/09\/regularGrid-rainbow-colours-jittered.png\",\"keywords\":[\"cell\",\"colour\",\"for-loop\",\"grid\",\"hsb\",\"hue\",\"index\",\"jitter\",\"random\",\"saturation\",\"value\"],\"articleSection\":[\"Beginner\",\"Colours\",\"Java\",\"Processing\",\"Project Rainbow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/\",\"name\":\"Create a coloured grid in Processing - Project Rainbow\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/09\/regularGrid-rainbow-colours-jittered.png\",\"datePublished\":\"2020-09-02T18:05:07+00:00\",\"dateModified\":\"2020-09-02T18:05:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#primaryimage\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/09\/regularGrid-rainbow-colours-jittered.png\",\"contentUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/09\/regularGrid-rainbow-colours-jittered.png\",\"width\":712,\"height\":334,\"caption\":\"Rainbow coloured grid, that has been jittered.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a coloured grid in Processing\"}]},{\"@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 coloured grid in Processing - 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\/09\/02\/create-a-coloured-grid-in-processing\/","og_locale":"en_US","og_type":"article","og_title":"Create a coloured grid in Processing - Project Rainbow","og_description":"Learn how to create a grid of coloured shapes, plotted in Processing.","og_url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/","og_site_name":"Project Rainbow","article_published_time":"2020-09-02T18:05:07+00:00","og_image":[{"width":712,"height":334,"url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/09\/regularGrid-rainbow-colours-jittered.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\/09\/02\/create-a-coloured-grid-in-processing\/#article","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/"},"author":{"name":"projectrainbow","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6"},"headline":"Create a coloured grid in Processing","datePublished":"2020-09-02T18:05:07+00:00","dateModified":"2020-09-02T18:05:07+00:00","mainEntityOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/"},"wordCount":1382,"commentCount":1,"publisher":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/09\/regularGrid-rainbow-colours-jittered.png","keywords":["cell","colour","for-loop","grid","hsb","hue","index","jitter","random","saturation","value"],"articleSection":["Beginner","Colours","Java","Processing","Project Rainbow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/","name":"Create a coloured grid in Processing - Project Rainbow","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website"},"primaryImageOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#primaryimage"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/09\/regularGrid-rainbow-colours-jittered.png","datePublished":"2020-09-02T18:05:07+00:00","dateModified":"2020-09-02T18:05:07+00:00","breadcrumb":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#primaryimage","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/09\/regularGrid-rainbow-colours-jittered.png","contentUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/09\/regularGrid-rainbow-colours-jittered.png","width":712,"height":334,"caption":"Rainbow coloured grid, that has been jittered."},{"@type":"BreadcrumbList","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/09\/02\/create-a-coloured-grid-in-processing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/"},{"@type":"ListItem","position":2,"name":"Create a coloured grid in Processing"}]},{"@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\/1092"}],"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=1092"}],"version-history":[{"count":0,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts\/1092\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media\/1197"}],"wp:attachment":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media?parent=1092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/categories?post=1092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/tags?post=1092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}