{"id":774,"date":"2020-06-03T22:52:54","date_gmt":"2020-06-03T21:52:54","guid":{"rendered":"https:\/\/csee.bangor.ac.uk\/?page_id=774"},"modified":"2024-06-25T11:27:37","modified_gmt":"2024-06-25T11:27:37","slug":"activities","status":"publish","type":"page","link":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/","title":{"rendered":"Activities"},"content":{"rendered":"\n<p>The activities are graded Beginner, Intermediate and Advanced. Check out the different activities and learn something about colour and coding. If you are new to colour and coding, then follow the activities in the order below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-accent-color has-text-color\">Beginner<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h4 class=\"wp-block-heading\">Colours<\/h4>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:27% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"283\" height=\"213\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/rainbow-2-small.jpeg\" alt=\"Double rainbow (Photograph by Prof J.C.Roberts)\" class=\"wp-image-67 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-small-font-size\"><span class=\"has-inline-color has-accent-color\"><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/introduction-to-rainbows-and-colours\/\">Rainbows and Colours<\/a><\/span><br>Understand rainbows, why we typically think it has 7 colours, and make a colour spinner.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:27% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"231\" height=\"211\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/block-simulated-additive-colour-mixing.png\" alt=\"Simulated (idealised) additive colour mixing\" class=\"wp-image-146 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-small-font-size\"><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/rgb-colours\/\">Learn RGB colour coding<\/a><br>Values of Red, Green and Blue colours are used to code colours on a computer. Learn how to create different colours from RGB values.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:27% auto\"><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Pint-Glass-Beam-Bending-Angharad-2-819x1024.jpg\" alt=\"Pint glass with red laser.\" class=\"wp-image-573 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-small-font-size\"><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/pint-glass-beam-bending\/\">Pint Glass Beam Bending<\/a><br>Have fun with a laser pointer.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:26% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"408\" height=\"306\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/BangorPierPhoto-withRainbow2.png\" alt=\"Bangor pier with rainbow\" class=\"wp-image-918 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/BangorPierPhoto-withRainbow2.png 408w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/BangorPierPhoto-withRainbow2-300x225.png 300w\" sizes=\"(max-width: 408px) 100vw, 408px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/add-a-rainbow-to-an-image-with-photoshop\/\">Create a rainbow in Photoshop and add it to an image.<\/a><\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<hr class=\"wp-block-separator has-css-opacity is-style-dots\"\/>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h4 class=\"wp-block-heading\">Coding colour<\/h4>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:26% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"133\" height=\"131\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-intro-picts-sml.png\" alt=\"The processing-sketch coding environment.\" class=\"wp-image-462 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-small-font-size\"><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/introduction-to-processing\/\">Setup the coding environment<\/a><br>The computer programming language &#8220;Processing&#8221;, is a great way to start coding. This post starts you off with Processing.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:23% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"877\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/cts-processing-sketch-sheet.jpeg\" alt=\"Sketch of a rainbow.\" class=\"wp-image-703 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/cts-processing-sketch-sheet.jpeg 620w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/cts-processing-sketch-sheet-212x300.jpeg 212w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-small-font-size\"><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/using-the-critical-thinking-sheet\/\">Make a quick sketch before you code<\/a><br>This lesson guides you through five steps to make a plan for your coding.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:28% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"712\" height=\"534\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-rainbow-scene.png\" alt=\"Rainbow scene achieved in Processing\" class=\"wp-image-853 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-rainbow-scene.png 712w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/processing-rainbow-scene-300x225.png 300w\" sizes=\"(max-width: 712px) 100vw, 712px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-small-font-size\"><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/create-a-rainbow-in-code\/\">Create a rainbow in &#8220;Processing&#8221; code<\/a>, based on our sketch of the scene.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:21% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"292\" height=\"280\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/hsv-model-circular.png\" alt=\"HSB circular model\" class=\"wp-image-968 size-full\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/learn-hue-saturation-and-brightness-hsb-colour-coding\/\">Learn about the Hue, Saturation and Brightness<\/a> colour model (HSB).<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:22% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"912\" height=\"674\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles-randomY.png\" alt=\"Spectrum of coloured rectangles, with random Y\" class=\"wp-image-1040 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles-randomY.png 912w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles-randomY-300x222.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles-randomY-768x568.png 768w\" sizes=\"(max-width: 912px) 100vw, 912px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/create-a-spectrum-of-coloured-squares\/\">Create a spectrum of coloured squares in Processing (part 1)<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:27% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"912\" height=\"674\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles-SizedTransparent.png\" alt=\"Coloured rectangles, with changed size and transparency.\" class=\"wp-image-1073 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles-SizedTransparent.png 912w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles-SizedTransparent-300x222.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/rainbow-rectangles-SizedTransparent-768x568.png 768w\" sizes=\"(max-width: 912px) 100vw, 912px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/create-a-spectrum-of-coloured-squares-in-processing-part-2\/\">Create a spectrum of coloured squares in Processing,  (part 2) and adapt their appearance.<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:31% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"912\" height=\"334\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/08\/screenshot-40-col-rect-w-circles.png\" alt=\"Screenshot of 40 coloured rectangles with centred circles\" class=\"wp-image-1163 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/08\/screenshot-40-col-rect-w-circles.png 912w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/08\/screenshot-40-col-rect-w-circles-300x110.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/08\/screenshot-40-col-rect-w-circles-768x281.png 768w\" sizes=\"(max-width: 912px) 100vw, 912px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/plot-40-rectangles-and-circles\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create 40 coloured rectangles, use a for-loop, the critical thinking sheet, and do some code refactoring.<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile alignwide\" style=\"grid-template-columns:34% auto\"><figure class=\"wp-block-media-text__media\"><a href=\"https:\/\/csee.bangor.ac.uk\/uncategorized\/create-a-coloured-grid-in-processing\/\"><img loading=\"lazy\" decoding=\"async\" width=\"712\" height=\"334\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/09\/regularGrid-rainbow-colours-jittered.png\" alt=\"Rainbow coloured grid, that has been jittered.\" class=\"wp-image-1197 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/09\/regularGrid-rainbow-colours-jittered.png 712w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/09\/regularGrid-rainbow-colours-jittered-300x141.png 300w\" sizes=\"(max-width: 712px) 100vw, 712px\" \/><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<p><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/create-a-coloured-grid-in-processing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create a coloured grid in Processing<\/a><\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-dots\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h4 class=\"wp-block-heading\">Colour use<\/h4>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"130\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/name-10-colours-1024x130.png\" alt=\"Image shows 10 rectangles on a white background. Each rectangle has a different hue, and is numbered 1 to 10.\" class=\"wp-image-1234 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/name-10-colours-1024x130.png 1024w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/name-10-colours-300x38.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/name-10-colours-768x98.png 768w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/name-10-colours-1536x195.png 1536w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/name-10-colours.png 2029w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/learn-about-the-relative-nature-of-colour\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn about the relative nature of colour<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:42% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"783\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/cts-blocks-of-value-SketchOfDesign-1024x783.jpg\" alt=\"Sketch of design for the blocks of value activity\" class=\"wp-image-1272 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/cts-blocks-of-value-SketchOfDesign-1024x783.jpg 1024w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/cts-blocks-of-value-SketchOfDesign-300x229.jpg 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/cts-blocks-of-value-SketchOfDesign-768x587.jpg 768w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/cts-blocks-of-value-SketchOfDesign-1536x1175.jpg 1536w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/cts-blocks-of-value-SketchOfDesign.jpg 1569w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/create-colour-blocks-per-value-introduction-to-mapping-data-to-colours\/\">Create colour blocks per value \u2013 introduction to mapping data to colours<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:40% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"814\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers.png\" alt=\"Blue and red coloured squares, after Josef Albers\" class=\"wp-image-1318 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers.png 792w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers-292x300.png 292w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/colour-squares-from-albers-768x789.png 768w\" sizes=\"(max-width: 792px) 100vw, 792px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/create-colour-effect-examples\/\">Create colour effect examples<\/a>. Exercises from Johannes Itten and Josef Albers.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"632\" height=\"654\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/line-art-set-of-diagonal-lines-transparent.png\" alt=\"Line art, showing lines of varying hue and semi transparent\" class=\"wp-image-1334 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/line-art-set-of-diagonal-lines-transparent.png 632w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2022\/01\/line-art-set-of-diagonal-lines-transparent-290x300.png 290w\" sizes=\"(max-width: 632px) 100vw, 632px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p><a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/string-art-inspired-rainbow-graphics\/\">String-art inspired rainbow graphics<\/a>. Draw several lines of different hues, and change explore different transparency effects<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-accent-color has-text-color\">Intermediate<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h4 class=\"wp-block-heading\">Virtual Reality<\/h4>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:30% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"568\" height=\"285\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/VR-rainbow.png\" alt=\"VR rainbow\" class=\"wp-image-781 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/VR-rainbow.png 568w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/06\/VR-rainbow-300x151.png 300w\" sizes=\"(max-width: 568px) 100vw, 568px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-small-font-size\">In part I, learn how to use <a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/introduction-to-web-based-xr-part-i\/\">A-Frame and WebXR <\/a>to create a Virtual Reality Rainbow.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:30% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"395\" height=\"322\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/AR_Rainbow-sml.png\" alt=\"AR Rainbow small\" class=\"wp-image-1064 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/AR_Rainbow-sml.png 395w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/07\/AR_Rainbow-sml-300x245.png 300w\" sizes=\"(max-width: 395px) 100vw, 395px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>In part II now learn how to extend the <a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/introduction-to-web-based-xr-part-ii\/\"> virtual rainbow from part 1, to create an Augmented Reality demonstration.<\/a><\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-accent-color has-text-color\">Advanced<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<h4 class=\"wp-block-heading\">Advanced coding, CSS and JavaScript<\/h4>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:29% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"383\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE-1024x383.png\" alt=\"Picture of D3 Data-driven documents\" class=\"wp-image-108 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE-1024x383.png 1024w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE-300x112.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE-768x288.png 768w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE-1536x575.png 1536w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-small-font-size\">Explore D3 JavaScript programming to <a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/sing-a-rainbow-with-d3-js\/\">Sing a rainbow in D3, JavaScript<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:37% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"335\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34-1024x335.png\" alt=\"Rainbows created by CSS\" class=\"wp-image-630 size-full\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34-1024x335.png 1024w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34-300x98.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34-768x251.png 768w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34-1536x502.png 1536w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/Screenshot-2020-05-29-at-19.49.34.png 1616w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-small-font-size\">Learn how to <a href=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/pure-css-rainbows\/\">create a rainbow in pure CSS<\/a><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The activities are graded Beginner, Intermediate and Advanced. Check out the different activities and learn something about colour and coding. If you are new to colour and coding, then follow the activities in the order below. Beginner Colours Rainbows and ColoursUnderstand rainbows, why we typically think it has 7 colours, and make a colour spinner. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-full-width.php","meta":{"footnotes":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Activities - 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\/activities\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Activities - Project Rainbow\" \/>\n<meta property=\"og:description\" content=\"The activities are graded Beginner, Intermediate and Advanced. Check out the different activities and learn something about colour and coding. If you are new to colour and coding, then follow the activities in the order below. Beginner Colours Rainbows and ColoursUnderstand rainbows, why we typically think it has 7 colours, and make a colour spinner. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Rainbow\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-25T11:27:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/rainbow-2-small.jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/\",\"name\":\"Activities - Project Rainbow\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/rainbow-2-small.jpeg\",\"datePublished\":\"2020-06-03T21:52:54+00:00\",\"dateModified\":\"2024-06-25T11:27:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/#primaryimage\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/rainbow-2-small.jpeg\",\"contentUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/rainbow-2-small.jpeg\",\"width\":283,\"height\":213,\"caption\":\"Double Rainbow photograph\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Activities\"}]},{\"@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\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Activities - 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\/activities\/","og_locale":"en_US","og_type":"article","og_title":"Activities - Project Rainbow","og_description":"The activities are graded Beginner, Intermediate and Advanced. Check out the different activities and learn something about colour and coding. If you are new to colour and coding, then follow the activities in the order below. Beginner Colours Rainbows and ColoursUnderstand rainbows, why we typically think it has 7 colours, and make a colour spinner. [&hellip;]","og_url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/","og_site_name":"Project Rainbow","article_modified_time":"2024-06-25T11:27:37+00:00","og_image":[{"url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/rainbow-2-small.jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/","name":"Activities - Project Rainbow","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website"},"primaryImageOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/#primaryimage"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/rainbow-2-small.jpeg","datePublished":"2020-06-03T21:52:54+00:00","dateModified":"2024-06-25T11:27:37+00:00","breadcrumb":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/#primaryimage","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/rainbow-2-small.jpeg","contentUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/rainbow-2-small.jpeg","width":283,"height":213,"caption":"Double Rainbow photograph"},{"@type":"BreadcrumbList","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/activities\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/"},{"@type":"ListItem","position":2,"name":"Activities"}]},{"@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\/"}}]}},"_links":{"self":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/pages\/774"}],"collection":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/types\/page"}],"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=774"}],"version-history":[{"count":3,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/pages\/774\/revisions"}],"predecessor-version":[{"id":1363,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/pages\/774\/revisions\/1363"}],"wp:attachment":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media?parent=774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}