{"id":85,"date":"2016-09-24T17:08:52","date_gmt":"2016-09-25T00:08:52","guid":{"rendered":"https:\/\/blogs.ubc.ca\/manahashimoto\/?page_id=85"},"modified":"2016-12-13T15:36:32","modified_gmt":"2016-12-13T22:36:32","slug":"processing-learning-visual-coding","status":"publish","type":"page","link":"https:\/\/blogs.ubc.ca\/manahashimoto\/geob-472-advanced-cartography\/processing-learning-visual-coding\/","title":{"rendered":"Assignment #2: Using Processing"},"content":{"rendered":"<p>Learning the basics of Processing and how to use visual code.<\/p>\n<p>Learning Outcomes:<\/p>\n<ul>\n<li>Understand the basic concepts of programming visual outputs with code.<\/li>\n<li>Become familiar with writing simple code to draw shapes, lines, and colours in Processing.<\/li>\n<li>Explore the difference between static and dynamic displays as created by our code.<\/li>\n<li>Become acquainted with the sources of information and help available to \u2018part-time\u2019 coders.<\/li>\n<\/ul>\n<p>Part 1: Recreating a piece by <a href=\"https:\/\/theartstack.com\/artist\/el-lissitzky\/untitled-from-proun-1\">El Lissitzky<\/a><\/p>\n<div id=\"attachment_93\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/blogs.ubc.ca\/manahashimoto\/files\/2016\/09\/Screen-Shot-2016-09-26-at-2.24.18-PM.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-93\" class=\"wp-image-93 size-medium\" src=\"https:\/\/blogs.ubc.ca\/manahashimoto\/files\/2016\/09\/Screen-Shot-2016-09-26-at-2.24.18-PM-300x300.png\" width=\"300\" height=\"300\" srcset=\"https:\/\/blogs.ubc.ca\/manahashimoto\/files\/2016\/09\/Screen-Shot-2016-09-26-at-2.24.18-PM-300x300.png 300w, https:\/\/blogs.ubc.ca\/manahashimoto\/files\/2016\/09\/Screen-Shot-2016-09-26-at-2.24.18-PM-150x150.png 150w, https:\/\/blogs.ubc.ca\/manahashimoto\/files\/2016\/09\/Screen-Shot-2016-09-26-at-2.24.18-PM.png 476w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-93\" class=\"wp-caption-text\">&#8216;Untitled&#8217; (from Proun) by El Lissitzky- Original<\/p><\/div>\n<p>My replica, using generated by coding with\u00a0<em>Processing:<\/em><\/p>\n<p><a href=\"https:\/\/blogs.ubc.ca\/manahashimoto\/files\/2016\/09\/Screen-Shot-2016-09-26-at-2.12.59-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-91 aligncenter\" src=\"https:\/\/blogs.ubc.ca\/manahashimoto\/files\/2016\/09\/Screen-Shot-2016-09-26-at-2.12.59-PM-288x300.png\" alt=\"screen-shot-2016-09-26-at-2-12-59-pm\" width=\"288\" height=\"300\" srcset=\"https:\/\/blogs.ubc.ca\/manahashimoto\/files\/2016\/09\/Screen-Shot-2016-09-26-at-2.12.59-PM-288x300.png 288w, https:\/\/blogs.ubc.ca\/manahashimoto\/files\/2016\/09\/Screen-Shot-2016-09-26-at-2.12.59-PM.png 458w\" sizes=\"auto, (max-width: 288px) 100vw, 288px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>My code is as below:<\/p>\n<pre><span style=\"color: #666666;\">\/\/1.\u00a0background<\/span>\r\n<span style=\"color: #006699;\">size<\/span> (456, 457); \r\n<span style=\"color: #006699;\">background<\/span> (0); \r\n\r\n<span style=\"color: #666666;\">\/\/2.tan\u00a0background<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(191,185,171);\r\n\u00a0\u00a0<span style=\"color: #006699;\">rect<\/span>(62,0, 336, 457);\r\n\u00a0\u00a0\r\n<span style=\"color: #666666;\">\/\/3.\u00a0grey\u00a0rectangle<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(132,129,120);\r\n\u00a0\u00a0<span style=\"color: #006699;\">quad<\/span>(211,67,172,107,294,228,374,227);\r\n\u00a0\u00a0\r\n<span style=\"color: #666666;\">\/\/4.blacksquare\u00a0<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(0);\r\n\u00a0\u00a0<span style=\"color: #006699;\">rect<\/span>(223,146,14,14);\r\n\u00a0\u00a0\r\n<span style=\"color: #666666;\">\/\/5.\u00a0recA<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(191,185,171);\r\n\u00a0\u00a0<span style=\"color: #006699;\">quad<\/span>(192,99,180,101, 223,146, 237,145);\r\n\u00a0\u00a0\r\n<span style=\"color: #666666;\">\/\/6.\u00a0rectB<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(90,91,86);\r\n\u00a0\u00a0<span style=\"color: #006699;\">quad<\/span>(180,101,179,114,224,158,223,146);\r\n\r\n<span style=\"color: #666666;\">\/\/line1(gradient)<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">stroke<\/span> (100);\r\n\u00a0\u00a0<span style=\"color: #006699;\">noFill<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">strokeWeight<\/span>(2);\r\n\u00a0\u00a0<span style=\"color: #006699;\">line<\/span>(295,150, 295,280);\r\n\u00a0\r\n\r\n<span style=\"color: #666666;\">\/\/\u00a0line2<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">stroke<\/span>(0);\r\n\u00a0\u00a0<span style=\"color: #006699;\">strokeWeight<\/span>(2);\r\n\u00a0\u00a0<span style=\"color: #006699;\">line<\/span>(118,161,301,158);\r\n\u00a0\u00a0\r\n<span style=\"color: #666666;\">\/\/line3<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">stroke<\/span>(0);\r\n\u00a0\u00a0<span style=\"color: #006699;\">strokeWeight<\/span>(0);\r\n\u00a0\u00a0<span style=\"color: #006699;\">line<\/span>(118,161,282,322);\r\n\u00a0\r\n<span style=\"color: #666666;\">\/\/rect1vertical<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(50);\r\n\u00a0\u00a0<span style=\"color: #006699;\">rect<\/span>(212,306,6,31);\r\n\r\n<span style=\"color: #666666;\">\/\/line4<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">stroke<\/span>(0);\r\n\u00a0\u00a0<span style=\"color: #006699;\">strokeWeight<\/span>(1);\r\n\u00a0\u00a0<span style=\"color: #006699;\">line<\/span>(194,323, 282,322);\r\n\r\n<span style=\"color: #666666;\">\/\/rect2horizontal<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">stroke<\/span>(40);\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(0);\r\n\u00a0\u00a0<span style=\"color: #006699;\">rect<\/span>(201,323,27,6);\r\n\r\n<span style=\"color: #666666;\">\/\/blackellipse<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(0);\r\n\u00a0\u00a0<span style=\"color: #006699;\">ellipse<\/span>(187,230, 149, 150);\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Part 2: Creating a Dynamic Sketch Remix<\/p>\n<p>Using Variables and Looping:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/1YX-s_cXDJw\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>My code is as below:<\/p>\n<pre><span style=\"color: #e2661a;\">float<\/span> circleX;\r\n<span style=\"color: #e2661a;\">float<\/span> circleY;\r\n\r\n<span style=\"color: #666666;\">\/\/1.\u00a0background<\/span>\r\n<span style=\"color: #33997e;\">void<\/span> <span style=\"color: #006699;\"><b>setup<\/b><\/span>(){\r\n\u00a0\u00a0<span style=\"color: #006699;\">size<\/span> (456, 457); \r\n\u00a0\u00a0<span style=\"color: #006699;\">background<\/span> (191,206,200); \r\n\u00a0\u00a0circleX=\u00a0187;\r\n\u00a0\r\n}\r\n\r\n<span style=\"color: #33997e;\">void<\/span> <span style=\"color: #006699;\"><b>draw<\/b><\/span>(){\r\n\u00a0\u00a0\r\n\u00a0\u00a0circleX=<span style=\"color: #006699;\">random<\/span> (<span style=\"color: #d94a7a;\">width<\/span>);\r\n\u00a0\u00a0circleY=\u00a0<span style=\"color: #006699;\">random<\/span> (<span style=\"color: #d94a7a;\">height<\/span>);\r\n\u00a0\u00a0<span style=\"color: #669900;\">if<\/span> (<span style=\"color: #d94a7a;\">mousePressed<\/span>){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span style=\"color: #006699;\">background<\/span>(245,161,203);\r\n\u00a0\u00a0}\r\n\u00a0\u00a0\r\n<span style=\"color: #666666;\">\/\/2.tan\u00a0background<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(26,232,158);\r\n\u00a0\u00a0<span style=\"color: #006699;\">rect<\/span>(62,0, 336, 457);\r\n\u00a0\u00a0\r\n<span style=\"color: #666666;\">\/\/3.\u00a0grey\u00a0rectangle<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(143,240,60);\r\n\u00a0\u00a0<span style=\"color: #006699;\">quad<\/span>(211,67,172,107,294,228,374,227);\r\n\u00a0\u00a0\r\n<span style=\"color: #666666;\">\/\/4.blacksquare\u00a0<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(0);\r\n\u00a0\u00a0<span style=\"color: #006699;\">rect<\/span>(<span style=\"color: #d94a7a;\">mouseY<\/span>,<span style=\"color: #d94a7a;\">mouseX<\/span>,14,14);\r\n\u00a0\u00a0\r\n<span style=\"color: #666666;\">\/\/5.\u00a0recA<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(191,185,171);\r\n\u00a0\u00a0<span style=\"color: #006699;\">quad<\/span>(192,99,180,101, 223,146, 237,145);\r\n\u00a0\u00a0\r\n<span style=\"color: #666666;\">\/\/6.\u00a0rectB<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(90,91,86);\r\n\u00a0\u00a0<span style=\"color: #006699;\">quad<\/span>(180,101,179,114,224,158,223,146);\r\n\r\n<span style=\"color: #666666;\">\/\/line1(gradient)<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">stroke<\/span> (100);\r\n\u00a0\u00a0<span style=\"color: #006699;\">noFill<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">strokeWeight<\/span>(2);\r\n\u00a0\u00a0<span style=\"color: #006699;\">line<\/span>(295,150, 295,280);\r\n\u00a0\r\n\r\n<span style=\"color: #666666;\">\/\/\u00a0line2<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">stroke<\/span>(0);\r\n\u00a0\u00a0<span style=\"color: #006699;\">strokeWeight<\/span>(2);\r\n\u00a0\u00a0<span style=\"color: #006699;\">line<\/span>(118,161,301,158);\r\n\u00a0\u00a0\r\n<span style=\"color: #666666;\">\/\/line3<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">stroke<\/span>(0);\r\n\u00a0\u00a0<span style=\"color: #006699;\">strokeWeight<\/span>(0);\r\n\u00a0\u00a0<span style=\"color: #006699;\">line<\/span>(118,161,282,322);\r\n\u00a0\r\n<span style=\"color: #666666;\">\/\/rect1vertical<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(50);\r\n\u00a0\u00a0<span style=\"color: #006699;\">rect<\/span>(212,306,6,31);\r\n\r\n<span style=\"color: #666666;\">\/\/line4<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">stroke<\/span>(0);\r\n\u00a0\u00a0<span style=\"color: #006699;\">strokeWeight<\/span>(1);\r\n\u00a0\u00a0<span style=\"color: #006699;\">line<\/span>(194,323, 282,322);\r\n\r\n<span style=\"color: #666666;\">\/\/rect2horizontal<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">stroke<\/span>(40);\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(0);\r\n\u00a0\u00a0<span style=\"color: #006699;\">rect<\/span>(201,323,27,6);\r\n\r\n<span style=\"color: #666666;\">\/\/blackellipse<\/span>\r\n\u00a0\u00a0<span style=\"color: #006699;\">noStroke<\/span>();\r\n\u00a0\u00a0<span style=\"color: #006699;\">fill<\/span>(220,224,106);\r\n\u00a0\u00a0<span style=\"color: #006699;\">ellipse<\/span>(circleX,circleY, 149, 150);\r\n\r\n}\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learning the basics of Processing and how to use visual code. Learning Outcomes: Understand the basic concepts of programming visual outputs with code. Become familiar with writing simple code to draw shapes, lines, and colours in Processing. Explore the difference between static and dynamic displays as created by our code. Become acquainted with the sources [&hellip;]<\/p>\n","protected":false},"author":20970,"featured_media":0,"parent":69,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"template-full-width.php","meta":{"footnotes":""},"class_list":["post-85","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/manahashimoto\/wp-json\/wp\/v2\/pages\/85","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/manahashimoto\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/manahashimoto\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/manahashimoto\/wp-json\/wp\/v2\/users\/20970"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/manahashimoto\/wp-json\/wp\/v2\/comments?post=85"}],"version-history":[{"count":4,"href":"https:\/\/blogs.ubc.ca\/manahashimoto\/wp-json\/wp\/v2\/pages\/85\/revisions"}],"predecessor-version":[{"id":94,"href":"https:\/\/blogs.ubc.ca\/manahashimoto\/wp-json\/wp\/v2\/pages\/85\/revisions\/94"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/manahashimoto\/wp-json\/wp\/v2\/pages\/69"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/manahashimoto\/wp-json\/wp\/v2\/media?parent=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}