{"id":275,"date":"2020-05-27T13:46:39","date_gmt":"2020-05-27T12:46:39","guid":{"rendered":"https:\/\/csee.bangor.ac.uk\/?p=275"},"modified":"2020-05-27T13:46:39","modified_gmt":"2020-05-27T12:46:39","slug":"introduction-to-processing","status":"publish","type":"post","link":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/","title":{"rendered":"Set up the coding environment"},"content":{"rendered":"\n<!-- Custom post code :: Pure CSS Rainbows -->\n<!-- Adds prettyprint for code snippets -->\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<p class=\"has-drop-cap\"><a href=\"https:\/\/processing.org\">Processing<\/a> is a great way to start to code, and even to continue coding! It provides a simple sketchbook interface, which is an integrated development environment (IDE), where you enter the code. You can quickly create visual pictures. As we shall see, how cool is it to see the results of your own programming, just from a few lines of code! Also, when you are using Processing, you are actually developing code in Java, so you are also learning Java.<\/p>\n\n\n\n<h2 class=\"has-accent-color has-text-color wp-block-heading\">A little history<\/h2>\n\n\n\n<p class=\"has-drop-cap\"><strong>Processing <\/strong>was started in 2001, by Ben Fry and Casey Reas, who were both previously at the Aesthetics and Computation Group at the MIT Media Lab. And then in 2012, with Dan Shiffman, they started the Processing Foundation. Processing is more than one language; it is more about developing software literacy, with a focus on visual arts and technology. Consequently, there are several different versions to choose, including: <a href=\"https:\/\/p5js.org\">p5.js<\/a> which is a JavaScript library where processing sketches can be developed for a browser. <a href=\"https:\/\/py.processing.org\">Processing.py<\/a> allows processing to be coded in Python. Also, <a href=\"https:\/\/android.processing.org\">Processing for Android<\/a>, and <a href=\"https:\/\/pi.processing.org\">Processing for Pi<\/a> enables you to code on the Raspberry Pi. Additionally, Dan Shiffman has written a book using Processing, called the <a rel=\"noreferrer noopener\" href=\"https:\/\/natureofcode.com\/\" target=\"_blank\">Nature of Code<\/a>, that focuses on modelling the unpredictable evolutionary and emergent properties of nature.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"385\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-food-prices-1024x385.png\" alt=\"\" data-id=\"289\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-food-prices.png\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=289\" class=\"wp-image-289\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-food-prices-1024x385.png 1024w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-food-prices-300x113.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-food-prices-768x288.png 768w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-food-prices.png 1406w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"blocks-gallery-item__caption\">Rising food prices, application in Processing<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"550\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-station-footfall-1024x550.png\" alt=\"\" data-id=\"290\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-station-footfall.png\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=290\" class=\"wp-image-290\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-station-footfall-1024x550.png 1024w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-station-footfall-300x161.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-station-footfall-768x412.png 768w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-station-footfall.png 1291w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"blocks-gallery-item__caption\">UK Station footfall visualisation, in Processing<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>Learning Processing is a good investment in your time. In fact, we have been using Processing, to teach computing principles, in some of our modules at the University. These include the 2nd year Computer Graphics module, and the Masters level Information Visualisation module. The montage above shows some of our students&#8217; work. In addition, we have used it to develop more advanced computer programs. The picture below was developed using the Processing libraries, as contribution to a Doctor of Philosophy (PhD). The tool, named Vinca<sup><a href=\"https:\/\/link.springer.com\/article\/10.1007\/s12665-014-3283-9\">1<\/a>,<a href=\"https:\/\/www.researchgate.net\/profile\/Panagiotis_Ritsos\/publication\/262104940_Interactive_Oceanographic_Visualization_using_spatially-aggregated_Parallel_Coordinate_Plots\/links\/55e476f608ae2fac4722e2bd.pdf\">2<\/a><\/sup>, visualises water and sediment transport along estuaries. <\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"177\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-Vinca.png\" alt=\"\" data-id=\"293\" data-full-url=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-Vinca.png\" data-link=\"https:\/\/csee.bangor.ac.uk\/?attachment_id=293\" class=\"wp-image-293\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-Vinca.png 320w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-vis-Vinca-300x166.png 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><figcaption class=\"blocks-gallery-item__caption\">Estuary visualisation (Vinca) by Dr Richard George, using Processing<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h2 class=\"has-accent-color has-text-color wp-block-heading\">Step 1. Download and install<\/h2>\n\n\n\n<div class=\"wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"685\" height=\"219\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-download-image.png\" alt=\"Download Processing. Available for Windows, MacOS, Linux.\" class=\"wp-image-296\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-download-image.png 685w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-download-image-300x96.png 300w\" sizes=\"(max-width: 685px) 100vw, 685px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>First, you need to download and install Processing. Go to <a href=\"http:\/\/processing.org\/download\/\">http:\/\/processing.org\/download\/<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 35%\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"442\" height=\"438\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-first-screen.png\" alt=\"\" class=\"wp-image-301\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-first-screen.png 442w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-first-screen-300x297.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-first-screen-150x150.png 150w\" sizes=\"(max-width: 442px) 100vw, 442px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Run processing, to make sure that it has been properly installed. A window should appear. It will have a play button <img loading=\"lazy\" decoding=\"async\" width=\"38\" height=\"36\" class=\"wp-image-303\" style=\"width: 38px\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-play-button.png\" alt=\"Processing play button\"> and a stop button<img loading=\"lazy\" decoding=\"async\" width=\"39\" height=\"37\" class=\"wp-image-304\" style=\"width: 39px\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-stop-button.png\" alt=\"Processing stop button\"> at the top. Processing will create a default file name (which you can later change). You can type code in the Sketch area, and any text output will appear in the Console tab, or errors in the Errors tab.<\/p>\n\n\n\n<p>Now press Play <img loading=\"lazy\" decoding=\"async\" width=\"38\" height=\"36\" class=\"wp-image-303\" style=\"width: 38px\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-play-button.png\" alt=\"Processing play button\">. A small window should appear. This is where your pictures will appear. At the moment, because we don&#8217;t have any code, it will just show a grey box in a small window labelled &#8220;sketch&#8230;&#8221; <img loading=\"lazy\" decoding=\"async\" width=\"128\" height=\"150\" class=\"wp-image-306\" style=\"width: 128px\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-first-output.png\" alt=\"Processing - first sketch output (it is a blank page of grey colour).\"><\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"has-accent-color has-text-color wp-block-heading\">Step 2. start by drawing a line<\/h2>\n\n\n\n<p class=\"has-drop-cap\">To draw a line in Processing we use the command <code>line<\/code>. Start off your coding journey by writing the following: <code>line(15,25,70,90);<\/code><\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 26%\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"403\" height=\"471\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-line-drawn.png\" alt=\"\" class=\"wp-image-383\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-line-drawn.png 403w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-line-drawn-257x300.png 257w\" sizes=\"(max-width: 403px) 100vw, 403px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Now play the code. This will create a single line. <\/p>\n\n\n\n<p>Because Processing is clever, it has a whole set of default values. The size of the screen, the colour of the line, and the background colour have already been set for you. We can change them later, but for now: the line colour is black, background is grey, and size is 100 by 100.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 35%\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"837\" height=\"689\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-line-explained.png\" alt=\"\" class=\"wp-image-385\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-line-explained.png 837w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-line-explained-300x247.png 300w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-line-explained-768x632.png 768w\" sizes=\"(max-width: 837px) 100vw, 837px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>The line has been drawn between the x and y coordinates (15,25) and the second x,y coordinates of (70,90). We can think of the <code>line<\/code> function receiving four parameters (x1, y1, x2, y2) and drawing the line with the current colour on the page. Remember, we said that it uses a default set of values, and the page has already been set at 100 by 100. We see from our picture that the (0,0) position is at the top left. <\/p>\n\n\n\n<p>It is possible to draw things off the screen, so be careful what values you enter! How about trying out the following lines of code.<\/p>\n<\/div><\/div>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">line(-15, -10, 100, 100);\nline(-15, -25, -70, -90);<\/pre>\n\n\n\n<p>The code will run, without problems. But the first line is half off the page, while the second is drawn off screen, and so it is not seen in the current screen size and position.<\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 34%\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"240\" height=\"262\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-three-lines-arrow.png\" alt=\"Processing result: thee lines making an arrow shape.\" class=\"wp-image-436\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Now let&#8217;s draw three lines, to make an arrow symbol. We can even change the width of the line. We control this by changing <code>strokeWeight<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">strokeWeight(10);\nline(10, 10, 80, 10);\nstrokeWeight(5);\nline(10, 10, 80, 80);\nstrokeWeight(10);\nline(10, 10, 10, 80);\n<\/pre>\n<\/div><\/div>\n\n\n\n<h2 class=\"has-accent-color has-text-color wp-block-heading\">Step 3. Add some colour<\/h2>\n\n\n\n<p class=\"has-drop-cap\">If you don&#8217;t know about RGB colour, then I suggest you take a look at a previous post on <a href=\"https:\/\/csee.bangor.ac.uk\/project-rainbow\/rgb-colours\/\">RGB colours<\/a>. <\/p>\n\n\n\n<p>In processing, RGB colours are defined by values between 0 and 255. To change the line colour, we need to adapt the colour value that is set in <code>stroke<\/code>.  <\/p>\n\n\n\n<p><span class=\"has-inline-color has-accent-color\">Let&#8217;s change the line colour.<\/span> To change it to <span class=\"has-inline-color has-accent-color\">red<\/span> we write <code>stroke(255,0,0)<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">strokeWeight(10);\nstroke(255,0,0);\nline(10, 10, 80, 10);\nstrokeWeight(5);\nline(10, 10, 80, 80);\nstrokeWeight(10);\nline(10, 10, 10, 80);<\/pre>\n\n\n\n<h4 class=\"has-accent-color has-text-color wp-block-heading\">Primitives and Attributes <\/h4>\n\n\n\n<p>Let&#8217;s note a few things with the code so far:<\/p>\n\n\n\n<p><strong>First<\/strong>, <code>stroke<\/code> (like many other commands) has a default value. Stroke&#8217;s default colour is black. <\/p>\n\n\n\n<p><strong>Second<\/strong>, there are two different types of things. We have a <code>line<\/code> command that defines the shape of the object we are placing, and <code>strokeWeight<\/code> and <code>stroke<\/code> that describe how it will appear. In computer graphics terms, these are named <em>primitives<\/em> and <em>attribute<\/em>s, respectively. Primitives are the geometric objects. They are basic shapes. Attributes describe how those shapes appear. <\/p>\n\n\n\n<p><strong>Third<\/strong>, we notice that there is an order to our lines of code. We first change the values of some attributes, such as strokeWeight, and stroke colour (this order of these two does not matter), but then we draw the line. In other words, we need to define how it will appear first (by defining its attributes) before explaining what we will draw. <\/p>\n\n\n\n<p><strong>Fourth<\/strong>, we don&#8217;t need to keep changing the <code>stroke<\/code> colour, if every line will be the same colour. What we do is to set the <em>attribute<\/em> value once and then the graphics library remembers the value. <\/p>\n\n\n\n<p><strong>Fifth<\/strong>, when an attribute value is set, it will affect all following primitives that use that attribute. So, for example, if you define the stroke colour, any following objects (whether ellipses, rectangles or whatever) would be affected.<\/p>\n\n\n\n<h2 class=\"has-accent-color has-text-color wp-block-heading\">Step 4. Change different attributes<\/h2>\n\n\n\n<p class=\"has-drop-cap\">Let us also change a few different attributes. <\/p>\n\n\n\n<p><span class=\"has-inline-color has-accent-color\"><strong>First we will change the window <code>size<\/code>. <\/strong><\/span>To change the window size, we use the function <code>size<\/code>. The default size is 100 by 100. It is a small square. We&#8217;ll make it larger. Let&#8217;s have it 200 by 200.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">size(200,200);<\/pre>\n\n\n\n<p class=\"has-text-color has-primary-color\"><span class=\"has-inline-color has-accent-color\"><strong>Now let us change the <code>background<\/code> colour.<\/strong><\/span> The default background colour is a light grey colour. Remember from the <a href=\"https:\/\/csee.bangor.ac.uk\/project-rainbow\/rgb-colours\/\">RGB colour <\/a>post, we need to max out the value to get white. So <code>background(255)<\/code>will change the background colour to white, and background(45) will make it dark grey, and background(0,0,255) blue, and background(160,255,160) will change the background to a very light green. (You should try different background colours). For now, let&#8217;s stick to white.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">background(255);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5. Different coloured lines<\/h2>\n\n\n\n<p class=\"has-drop-cap\">In the final task, we look at generating several coloured lines. (We will explore methods to make this code better in the future, but for now, we will copy lines down the page). <\/p>\n\n\n\n<p>In this exercise, we will use <code>random<\/code>. This function does what it says: it returns unexpected values! So if we write <code>random(10)<\/code> it will give us a new, and unexpected value, somewhere between <code>0<\/code> and <code>1<\/code>. This is really useful. We can use it to change to the colours to an unexpected one! We can also use it to change the line to random x, y positions. <\/p>\n\n\n\n<p>Let us take what we have learnt so far, and draw three lines, with a <code>strokeWeight<\/code> of 2, each with <code>random<\/code> positions of each of the coordinates of the line (x1,y1,x2,y2), and each with random colours. All placed in a 200 by 200 sized window, with a white background.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">size(200,200);\nbackground(255);\nstrokeWeight(2);\nstroke(random(255),random(255),random(255));\nline(random(200), random(200), random(200), random(200));\nstroke(random(255),random(255),random(255));\nline(random(200), random(200), random(200), random(200));\nstroke(random(255),random(255),random(255));\nline(random(200), random(200), random(200), random(200));<\/pre>\n\n\n\n<div class=\"wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile\" style=\"grid-template-columns:auto 31%\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"312\" height=\"334\" src=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-three-randomly-coloured-lines.png\" alt=\"Image produced with Processing, describing three randomly positioned lines, with random colours.\" class=\"wp-image-455\" srcset=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-three-randomly-coloured-lines.png 312w, https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-three-randomly-coloured-lines-280x300.png 280w\" sizes=\"(max-width: 312px) 100vw, 312px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p>Every time you press play, it will create a different output. Have a go! <\/p>\n\n\n\n<p>Also, note that we have set some values, of the input to random, to 200, and others to 255. The command <code>random(255)<\/code>, as shown on line 4, 6 and 8 (above) are used because RGB colour is defined between 0 and 255, while <code>random(200)<\/code> is written because we have set the <code>size<\/code> of the output window to 200 by 200.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"has-accent-color has-text-color wp-block-heading\">Step 6. Additional exercises<\/h2>\n\n\n\n<ul><li>Try changing the colours to appear in a random grey colour.<\/li><li>Make the size of the window larger (to say) 300 by 300, and adapt rest of the code appropriately. Notice what you have changed.<\/li><li>Add another 10 random lines (in this case use copy and paste!) and <em>think<\/em> how you could make this code better.<\/li><\/ul>\n\n\n\n<p>REFERENCES.<\/p>\n\n\n\n<ol><li>R. L. S. F. George, P. E. Robins, A. G. Davies, P. D. Ritsos, and J. C. Roberts, \u201c<a href=\"https:\/\/link.springer.com\/article\/10.1007\/s12665-014-3283-9\">Interactive visual analytics of hydrodynamic flux for the coastal zone,<\/a>\u201d&nbsp;<em>Environmental Earth Sciences<\/em>, vol. 72, no. 10, pp. 3753\u20133766, Nov. 2014.&nbsp;<\/li><li>R. L. S. F. George, P. D. Ritsos, and J. C. Roberts, \u201cInteractive Oceanographic Visualization using spatially-aggregated Parallel Coordinate Plots,\u201d in&nbsp;<em>Posters presented at EuroVis 2014, June 9-13 , Swansea, Wales, UK<\/em>, 2014.&nbsp;<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>This post starts you off with Processing. Download, run and draw some coloured lines. The computer programming language Processing, is a great way to start coding. You get a quick visual result from a few lines of code. <\/p>\n","protected":false},"author":2,"featured_media":462,"comment_status":"open","ping_status":"open","sticky":false,"template":"templates\/template-full-width.php","format":"standard","meta":{"footnotes":""},"categories":[6,7,13,16,17],"tags":[28,45,72,73,99,101],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Set up the coding environment - 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\/05\/27\/introduction-to-processing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Set up the coding environment - Project Rainbow\" \/>\n<meta property=\"og:description\" content=\"This post starts you off with Processing. Download, run and draw some coloured lines. The computer programming language Processing, is a great way to start coding. You get a quick visual result from a few lines of code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Rainbow\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-27T12:46:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-intro-picts-sml.png\" \/>\n\t<meta property=\"og:image:width\" content=\"133\" \/>\n\t<meta property=\"og:image:height\" content=\"131\" \/>\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\/05\/27\/introduction-to-processing\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/\"},\"author\":{\"name\":\"projectrainbow\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6\"},\"headline\":\"Set up the coding environment\",\"datePublished\":\"2020-05-27T12:46:39+00:00\",\"dateModified\":\"2020-05-27T12:46:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/\"},\"wordCount\":1472,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-intro-picts-sml.png\",\"keywords\":[\"beginner\",\"colours\",\"introduction\",\"java\",\"processing\",\"programming\"],\"articleSection\":[\"Beginner\",\"Colours\",\"Java\",\"Processing\",\"Project Rainbow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/\",\"name\":\"Set up the coding environment - Project Rainbow\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-intro-picts-sml.png\",\"datePublished\":\"2020-05-27T12:46:39+00:00\",\"dateModified\":\"2020-05-27T12:46:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#primaryimage\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-intro-picts-sml.png\",\"contentUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-intro-picts-sml.png\",\"width\":133,\"height\":131},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Set up the coding environment\"}]},{\"@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":"Set up the coding environment - 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\/05\/27\/introduction-to-processing\/","og_locale":"en_US","og_type":"article","og_title":"Set up the coding environment - Project Rainbow","og_description":"This post starts you off with Processing. Download, run and draw some coloured lines. The computer programming language Processing, is a great way to start coding. You get a quick visual result from a few lines of code.","og_url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/","og_site_name":"Project Rainbow","article_published_time":"2020-05-27T12:46:39+00:00","og_image":[{"width":133,"height":131,"url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-intro-picts-sml.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\/05\/27\/introduction-to-processing\/#article","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/"},"author":{"name":"projectrainbow","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/fa50357aa55dc7c9e38a6114bf64f1f6"},"headline":"Set up the coding environment","datePublished":"2020-05-27T12:46:39+00:00","dateModified":"2020-05-27T12:46:39+00:00","mainEntityOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/"},"wordCount":1472,"commentCount":0,"publisher":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-intro-picts-sml.png","keywords":["beginner","colours","introduction","java","processing","programming"],"articleSection":["Beginner","Colours","Java","Processing","Project Rainbow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/","name":"Set up the coding environment - Project Rainbow","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website"},"primaryImageOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#primaryimage"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-intro-picts-sml.png","datePublished":"2020-05-27T12:46:39+00:00","dateModified":"2020-05-27T12:46:39+00:00","breadcrumb":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#primaryimage","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-intro-picts-sml.png","contentUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/processing-intro-picts-sml.png","width":133,"height":131},{"@type":"BreadcrumbList","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/27\/introduction-to-processing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/"},{"@type":"ListItem","position":2,"name":"Set up the coding environment"}]},{"@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\/275"}],"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=275"}],"version-history":[{"count":0,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts\/275\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media\/462"}],"wp:attachment":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media?parent=275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/categories?post=275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/tags?post=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}