{"id":456,"date":"2017-09-25T10:39:29","date_gmt":"2017-09-25T15:39:29","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=456"},"modified":"2017-10-08T14:33:49","modified_gmt":"2017-10-08T19:33:49","slug":"processing-py-getting-started","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2017\/09\/25\/processing-py-getting-started\/","title":{"rendered":"Processing.py: Getting Started"},"content":{"rendered":"<p>Getting started with processing.py, this article follows the instructions found here:<br \/>\n<a href=\"http:\/\/py.processing.org\/tutorials\/gettingstarted\/\">http:\/\/py.processing.org\/tutorials\/gettingstarted\/<\/a><\/p>\n<ol>\n<li>The first step is to download the processing IDE <a href=\"https:\/\/processing.org\/download\/\">here<\/a>.<\/li>\n<li>Once downloaded create a &#8220;processing_py&#8221; folder on your desktop and drag the &#8220;processing-3.3.6&#8221; folder from the .zip into the new folder.<\/li>\n<li>Inside this folder, click the processing.exe file and the IDE will open. (No need for a traditional .msi install.) Note: This IDE is called the Processing Development Environment (PDE).<\/li>\n<li>On the upper right hand side of the IDE, click the Java down arrow and select &#8220;Add\u00a0 Mode&#8230;&#8221;. This will allow you to add Python (and optionally p5.js) as shown in this graphic:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-458\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/add_more.png\" alt=\"\" width=\"123\" height=\"123\" \/><\/li>\n<\/ol>\n<p>The rest of the Getting Started example shows how to create a simple circle with this code. The syntax is <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">ellipse(x, y, w, h)<\/code> where x and y are the location to place the ellipse on the screen and w and h are the width and height of the ellipse.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\">ellipse(50, 50, 80, 80)<\/pre>\n<p>which looks like this in the browser:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-464\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/ellipse.png\" alt=\"\" width=\"104\" height=\"100\" \/><\/p>\n<p>Then it shows how to create an interactive &#8220;sketch&#8221; that involves drawing circles interactively by following the mouse pointer and changing color of the circles by holding down the mouse button. The code in the IDE looks like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-466\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/processing_circles-300x188.png\" alt=\"\" width=\"533\" height=\"334\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/processing_circles-300x188.png 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/processing_circles.png 533w\" sizes=\"auto, (max-width: 533px) 100vw, 533px\" \/><\/p>\n<p>And here is an example of the output:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-468\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/circles-286x300.png\" alt=\"\" width=\"478\" height=\"501\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/circles-286x300.png 286w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/09\/circles.png 479w\" sizes=\"auto, (max-width: 478px) 100vw, 478px\" \/><\/p>\n<p>Here is the Processing Python code with some comments added to explain what the code is doing:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\">def setup():\r\n    \"\"\" A function to create the browser window that the code output will be\r\n    displayed in\"\"\"\r\n\r\n    # size is the width and height of the output window in pixels\r\n    # size(w, h)\r\n    size(480, 480)\r\n\r\ndef draw():\r\n    \"\"\" This function controls the graphics that are displayed on the screen\r\n    as well as user mouse events that control the graphics.\"\"\"\r\n\r\n    # mousePressed is a key word that gives boolean True if the mouse is pressed\r\n    if mousePressed:\r\n\r\n        # fill is like a paint bucket that fills the shape with whatever color\r\n        # is indicated. Colors are indicated as 0 (black) to 255 (white) (HEX)\r\n        fill(126)\r\n    else:\r\n        fill(255)\r\n\r\n    # ellipse is what draws a circle\r\n    # The four arguments are:\r\n    # ellipse(x, y, w, h)\r\n    # 1. # pixels from the left of the screen\r\n    # 2. # pixels from the top of the screen\r\n    # 3. width in pixels\r\n    # 4. height in pixels\r\n    ellipse(mouseX, mouseY, 80, 80)\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Getting started with processing.py, this article follows the instructions found here: http:\/\/py.processing.org\/tutorials\/gettingstarted\/ The first step is to download the processing IDE here. Once downloaded create a &#8220;processing_py&#8221; folder on your desktop and drag the &#8220;processing-3.3.6&#8221; folder from the .zip into the new folder. Inside this folder, click the processing.exe file and the IDE will open. &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2017\/09\/25\/processing-py-getting-started\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Processing.py: Getting Started<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,46],"tags":[36,4],"class_list":["post-456","post","type-post","status-publish","format-standard","hentry","category-processing-language","category-processing-py","tag-processing-py","tag-python"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/456","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=456"}],"version-history":[{"count":17,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/456\/revisions"}],"predecessor-version":[{"id":599,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/456\/revisions\/599"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}