{"id":1277,"date":"2022-01-19T20:30:17","date_gmt":"2022-01-19T20:30:17","guid":{"rendered":"https:\/\/csee.bangor.ac.uk\/?p=1277"},"modified":"2022-01-19T20:30:17","modified_gmt":"2022-01-19T20:30:17","slug":"create-colour-effect-examples","status":"publish","type":"post","link":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/","title":{"rendered":"Create colour effect examples"},"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 set of exercises are inspired from Johannes Itten’s book, The Elements of Color. In these activities we will create some coloured blocks and investigate colour effect<\/em>. We will use Processing.org and output the images into PDFs that can be printed, and start off with the Critical Thinking Sheet.<\/p>\n\n\n\n

The activities develop from previous ones. So take a look at the following activities:<\/p>\n\n\n\n

  1. The activity to make a quick sketch before you code<\/a>, introduces the Critical Thinking Sheet. You can find a copy of the CTS sheet here<\/a>.<\/li>
  2. The RGB colour coding activity<\/a>.<\/li>
  3. The activity titled \u201cLearn about the relative nature of colour<\/a>\u201d goes over the ideas that we\u2019ll cover in this post.<\/li><\/ol>\n\n\n\n

    Activity 1. Create some large blocks of colour, print and cut them out.<\/h2>\n\n\n\n

    In this activity we will create some blocks of colour in Processing<\/a>. We will use the PDF output of the language. But let’s start by making a plan.<\/p>\n\n\n\n

    Step 1. Make a plan – use the Critical Thinking Sheet<\/h4>\n\n\n\n

    Complete the Critical Thinking Sheet. While this is a simple project, it is much easier to write the values down on paper, rather than typing them straight into code and just trying to get them right!<\/p>\n\n\n\n

    We need two versions of the program. One to print out and cut up, and one to observe on the screen.<\/p>\n\n\n\n

    \n
    \n
    \"Colours
    Colours after Itten; to print and cut<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n
    \"Colours
    Colours after Itten; for screen display<\/figcaption><\/figure>\n\n\n\n

    <\/p>\n<\/div>\n<\/div>\n\n\n\n

    For the print version<\/strong>, we need two blocks of background colour, and several (same colour) extra rectangles. Set the size to (640,660). Make each background colour (320,360) and the rectangles at the bottom (120,120).<\/p>\n\n\n\n

    For the screen version<\/strong>. Set the page to be size(640, 360); the two background blocks to fill the page (one on the left half and the other on the right). Set the internal rectangles to be a square of 120 width and height. <\/p>\n\n\n\n

    \"Critical<\/figure>
    \n
    1. If you have not done so already: print out the Critical Thinking Sheet<\/a>. Complete the problem, name and add today\u2019s date, and 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 challenge. In today’s challenge we need to choose PDF output, put the left and right background coloured blocks and two (same colour) rectangles on top.<\/li>
    4. In panel \u2463 we can now summarise the steps of the process.<\/li>
    5. Finally, consider what to do next. Definitely we need to think more about the colour model (HSB), how to print in PDF and move down the page.<\/li><\/ol>\n\n\n\n

      <\/p>\n<\/div><\/div>\n\n\n\n

      Step 2. Create the code<\/h4>\n\n\n\n

      We can now create the code. From the previous activities, it should be straight forward to create the processing code.<\/p>\n\n\n\n

      import processing.pdf.*;          \/\/ Import PDF code\nsize(640, 660);\nbeginRecord(PDF, \"line.pdf\");     \/\/ Start writing to PDF\nnoStroke();\ncolor colOne = color(200, 100, 0);\ncolor colTwo = color(200, 150, 0);\ncolor colThree = color(150, 50, 0);\n\nfill(colOne);\nrect(0, 0, 320, 360);\nfill(colTwo);\nrect(320, 0, 320, 360);\n\n\/\/ The extra 3 rectangles with the same colour \nfill(colThree);\nrect(0, 520, 120, 120);\nrect(200, 520, 120, 120);\nrect(400, 520, 120, 120);<\/code><\/pre>\n\n\n\n
      \n
      \n
      When the page has been printed, we can start to explore the colours. Placing the coloured squares on top of each other shows that they are the same colour. When placed on top of the different coloured backgrounds they appear different tints.<\/p>\n<\/div>\n\n\n\n
      \n
      \"Printed
      Printed blocks of colour, to investigate different effects<\/figcaption><\/figure><\/div>\n\n\n\n
      Step 3. Explore different colour combinations<\/h3>\n\n\n\n
      Now change the colours in the blocks. Try greys. Different tints of blue or green. Print them out and explore how they look.<\/p>\n<\/div>\n\n\n\n
      \n
      \"Printed
      Printed blocks of colour laid on top of different background colours<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
      Activity 2. Create some square patterns, after Josef Albers (from his book Interaction of Color).<\/h2>\n\n\n\n
      The aim of this second activity is to create blocks of colour in a style that Josef Albers designed.<\/p>\n\n\n\n
      \"Colour
      Colour example after Josef Itten<\/figcaption><\/figure>\n\n\n\n
       The easiest way to achieve this is to create functions for each set of blue squares, and another for the set of red squares. This means that we can treat each function in its own small coordinated system, and move them around the page. The blue set of squares to the left, the red to the right, another blue set below along with a scaled red set of squares on top, and similarly for the final version.<\/p>\n\n\n\n
      We can achieve this in Processing by creating our own function (e.g., void redSquares( )<\/code> ), and using translate<\/code> to move them around, and scale<\/code> to change their size. <\/p>\n\n\n\n
      Step 1. Use and setup the active mode in Processing.<\/h4>\n\n\n\n
      We need to use the active mode in Processing, so that we can use functions. We will use setup( )<\/code> and draw( )<\/code>. The setup<\/code> method gets called once at the start of running the program. While the draw<\/code> method gets called every frame. The system will try to run as many frames per second that your system can handle. <\/p>\n\n\n\n
      void setup(){\n  size(680, 680);\n  background(255);\n  noStroke();\n}\n\n\/\/ we will put the functions here\n\nvoid draw(){\n\/\/ we will put the draw code here\n}<\/code><\/pre>\n\n\n\n
      Step 2. Create functions for each coloured rectangle<\/h4>\n\n\n\n
      Let us create the rectangles 160 by 160. <\/p>\n\n\n\n
      We can define the first set of rectangles in the following coordinates:<\/p>\n\n\n\n
      (0, 0), (160,0), (0,160) <\/code>and (160,16<\/code>) each  with a width and height of 160 by 160. This is easy to create.<\/p>\n\n\n\n
      To colour them we can use the RGB values (that we have listed in the image above). <\/p>\n\n\n\n
      To create the function we can do so by creating a new void function, such as void blueSquares() { .. }<\/code>. This function is just going to be called, so we do not need to return a value, so we define it as returning a void<\/code> value.<\/p>\n\n\n\n
      void blueSquares(){\n  fill(33,87,146);    rect(0, 0, 160, 160);\n  fill(131,192,231);  rect(160, 0, 160,160);\n  fill(88,128,192);   rect(0, 160, 160, 160);\n  fill(115,160,202);  rect(160, 160, 160,160);\n}<\/code><\/pre>\n\n\n\n
      Now we can create the red squares in a similar way. We can use the same coordinates, but now with the red RGB values.<\/p>\n\n\n\n
      void redSquares(){\n  fill(175,58,106);    rect(0, 0, 160, 160);\n  fill(232,189,199);  rect(160, 0, 160,160);\n  fill(201,102,135);   rect(0, 160, 160, 160);\n  fill(216,139,145);  rect(160, 160, 160,160);\n}<\/code><\/pre>\n\n\n\n
      Step 3. Call the functions, and push\/pop the transformations stack<\/h4>\n\n\n\n
      If we call the functions one after the other, we won’t get our desired effect, because they will appear on top of each other. We need to translate the position of the second one, before calling it. <\/p>\n\n\n\n
      blueSquares();\ntranslate(360,0);\nredSquares();<\/code><\/pre>\n\n\n\n
      Top Tip.
      <\/span>Use pushMatrix() to 
      remember the 
      transformation state.
      Use popMatrix() to go
      back to the remembered
      state.<\/p><\/blockquote><\/figure>\n\n\n\n
      The translate function moves the whole page. So now, everything that gets plotted is also translated. So what we need to do is, hold onto the current set of positions (the state of the positions of everything) and then do the translation, and then pop back to the previous state of play.<\/p>\n\n\n\n
      We can do this by using the pushMatrix() <\/code>and popMatrix() <\/code>functions. The “matrix” word comes from the fact that the transformations are stored in a matrix form, and we are “pushing” the state onto a stack, and then “popping” off the last one from the memory stack. So putting this together we get the following code:<\/p>\n\n\n\n
      void draw(){\n  blueSquares();\n  pushMatrix(); \/\/ push the transformation stack\n  translate(360,0); \/\/ now translate the whole page\n  redSquares(); \/\/ draw the red squares\n  popMatrix(); \/\/ pop to the previous transformation\n \/\/.. put more drawing stuff here\n\n} \/\/ end the draw method<\/code><\/pre>\n\n\n\n
      Using the mixture of pushMatrix()<\/code>, popMatrix()<\/code>, translate() <\/code>and also scale()<\/code> we can control the position of each of the remaining blocks of colour, without explicitly changing the coordinates of the squares. What we have done is to use “local coordinates”.<\/p>\n\n\n\n
      Top Tip.<\/span>
      Using local coordinates 
      is the best way 
      to model different objects<\/p><\/blockquote><\/figure>\n\n\n\n
      Using local coordinates makes our life much easier, because we can easily create objects in a well-defined and easy-to-understand coordinate space, and then translate, scale, rotate it to the right position.<\/p>\n\n\n\n
      \"Blue
      Blue and red coloured squares, after Josef Albers<\/figcaption><\/figure>\n\n\n\n
      Go further<\/h2>\n\n\n\n
      There are many different colour combinations that you may like to try.  Try the following:<\/p>\n\n\n\n
      1. Shades of green<\/li>
      2. Shades of grey<\/li>
      3. Yellows and blues<\/li><\/ol>\n\n\n\n
        Create some large colour pictures of different colours, and then print them out using the beginRecord(PDF, \"filename.pdf\");<\/code> and endRecord(); <\/code>functions. If you are unsure how to do this, see PRINT<\/a> on the Processing.org website.<\/p>\n\n\n\n
        Try printing out different colour combinations, from the first activity in this post, and get your friends to see if they realise that the centre block is actually the same colour.<\/p>\n\n\n\n
        Want to read more?<\/h2>\n\n\n\n
        Take a look at work by Swiss artist Johannes Itten (1888-1967). For example, take a look at The Elements of Color: A Treatise on the Color System of Johannes Itten, Based on Itten\u2019s Book \u201cThe Art of Color\u201d Hardcover \u2013 31 Jan. 1970 \u00b7 ISBN-10. 0471289299.<\/p>\n\n\n\n
        Have a look at the work by Josef Albers. There is a lot of information on the Albers\u2019 foundation<\/a> website. Or pick up a copy of his book \u201cInteraction of color\u201d.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Create coloured squares (after Johannes Itten) to be printed and cut out, and coloured rectangles (after Josef Albers) <\/p>\n","protected":false},"author":2,"featured_media":1318,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,7,16,17],"tags":[36,47,48,76,77,95,96,100,105,114,118,121,125],"yoast_head":"\nCreate colour effect examples - 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\/2022\/01\/19\/create-colour-effect-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create colour effect examples - Project Rainbow\" \/>\n<meta property=\"og:description\" content=\"Create coloured squares (after Johannes Itten) to be printed and cut out, and coloured rectangles (after Josef Albers)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Rainbow\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-19T20:30:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers.png\" \/>\n\t<meta property=\"og:image:width\" content=\"792\" \/>\n\t<meta property=\"og:image:height\" content=\"814\" \/>\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=\"7 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\/2022\/01\/19\/create-colour-effect-examples\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/\"},\"author\":{\"name\":\"projectrainbow\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6\"},\"headline\":\"Create colour effect examples\",\"datePublished\":\"2022-01-19T20:30:17+00:00\",\"dateModified\":\"2022-01-19T20:30:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/\"},\"wordCount\":1319,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers.png\",\"keywords\":[\"colour\",\"critical thinking\",\"critical thinking sheet\",\"Johannes Itten\",\"Josef Albers\",\"plan\",\"popMatrix()\",\"processing.org\",\"pushMatrix()\",\"rgb\",\"scale\",\"sketch\",\"transformation\"],\"articleSection\":[\"Beginner\",\"Colours\",\"Processing\",\"Project Rainbow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/\",\"name\":\"Create colour effect examples - Project Rainbow\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers.png\",\"datePublished\":\"2022-01-19T20:30:17+00:00\",\"dateModified\":\"2022-01-19T20:30:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#primaryimage\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers.png\",\"contentUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers.png\",\"width\":792,\"height\":814,\"caption\":\"Blue and red coloured squares, after Josef Albers\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create colour effect examples\"}]},{\"@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 colour effect examples - 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\/2022\/01\/19\/create-colour-effect-examples\/","og_locale":"en_US","og_type":"article","og_title":"Create colour effect examples - Project Rainbow","og_description":"Create coloured squares (after Johannes Itten) to be printed and cut out, and coloured rectangles (after Josef Albers)","og_url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/","og_site_name":"Project Rainbow","article_published_time":"2022-01-19T20:30:17+00:00","og_image":[{"width":792,"height":814,"url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers.png","type":"image\/png"}],"author":"projectrainbow","twitter_card":"summary_large_image","twitter_misc":{"Written by":"projectrainbow","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#article","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/"},"author":{"name":"projectrainbow","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6"},"headline":"Create colour effect examples","datePublished":"2022-01-19T20:30:17+00:00","dateModified":"2022-01-19T20:30:17+00:00","mainEntityOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/"},"wordCount":1319,"commentCount":0,"publisher":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers.png","keywords":["colour","critical thinking","critical thinking sheet","Johannes Itten","Josef Albers","plan","popMatrix()","processing.org","pushMatrix()","rgb","scale","sketch","transformation"],"articleSection":["Beginner","Colours","Processing","Project Rainbow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/","name":"Create colour effect examples - Project Rainbow","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website"},"primaryImageOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#primaryimage"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers.png","datePublished":"2022-01-19T20:30:17+00:00","dateModified":"2022-01-19T20:30:17+00:00","breadcrumb":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#primaryimage","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers.png","contentUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers.png","width":792,"height":814,"caption":"Blue and red coloured squares, after Josef Albers"},{"@type":"BreadcrumbList","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-effect-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/"},{"@type":"ListItem","position":2,"name":"Create colour effect examples"}]},{"@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\/1277"}],"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=1277"}],"version-history":[{"count":0,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts\/1277\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media\/1318"}],"wp:attachment":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media?parent=1277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/categories?post=1277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/tags?post=1277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}