{"id":154,"date":"2016-09-25T16:14:32","date_gmt":"2016-09-25T23:14:32","guid":{"rendered":"https:\/\/blogs.ubc.ca\/anniefang\/?page_id=154"},"modified":"2016-09-25T19:19:08","modified_gmt":"2016-09-26T02:19:08","slug":"processing","status":"publish","type":"page","link":"https:\/\/blogs.ubc.ca\/anniefang\/cartography\/processing\/","title":{"rendered":"Processing"},"content":{"rendered":"

For one of my assignments in my Research in Cartography class, I was asked to replicate an image using a programming language called Processing. The first image shown below is the original<\/a>\u00a0image, and the second is the replica<\/a> I created with processing. I have also created\u00a0a remixed<\/a> version of this image.<\/p>\n

\"Original<\/a>

Original Image<\/p><\/div>\n

 <\/p>\n

\"Replica<\/a>

Replica of original image using Processing<\/p><\/div>\n

 <\/p>\n

This is my code for my image below:<\/p>\n

\/\/Assignment\u00a02\u00a0Processing:\u00a0Replicate\u00a0the\u00a0Image<\/span>\r\n\/\/Annie\u00a0Fang<\/span>\r\n\r\nsize<\/span>(490, 670);\r\n\r\n\/\/222\u00a0219\u00a0204<\/span>\r\nbackground<\/span>(222, 219, 204);\r\n\r\n\/\/circle\u00a0black\u00a0fill<\/span>\r\nfill<\/span>(0, 0, 0);\r\nellipse<\/span>(183, 332, 216, 216);\r\n\r\n\/\/large\u00a0quad,\u00a0no\u00a0stroke,\u00a050\u00a0percent\u00a0transparency\u00a0fill<\/span>\r\nnoStroke<\/span>();\r\nfill<\/span>(0, 0, 0, 50);\r\nquad<\/span>(218, 98, 160, 156, 340, 334, 456, 334);\r\n\r\n\r\n\/\/x\u00a0is\u00a0an\u00a0integer\u00a0equal\u00a0to\u00a0237<\/span>\r\nint<\/span> x = 237;\r\n\r\n\/\/y\u00a0is\u00a0an\u00a0integer\u00a0equal\u00a0to\u00a0212<\/span>\r\nint<\/span> y = 212;\r\n\r\n\r\n\/\/medium\u00a0shadow\u00a0quad,\u00a075\u00a0fill<\/span>\r\nfill<\/span>(0, 0, 0, 75);\r\nquad<\/span>(171, 146, 171, 166, 237, 232, x, y);\r\n\r\n\/\/light\u00a0shadow\u00a0quad,\u00a0background\u00a0opaque\u00a0fill<\/span>\r\nfill<\/span>(222, 219, 204);\r\nquad<\/span>(171, 146, x, y, 257, 212, 191, 146);\r\n\r\n\/\/black\u00a0square<\/span>\r\nfill<\/span>(0, 0, 0);\r\nrect<\/span>(x, y, 20, 20);\r\n\r\n\/\/add\u00a0stroke<\/span>\r\nstroke<\/span>(0);\r\n\r\n\/\/horizontal\u00a0line<\/span>\r\nstrokeWeight<\/span>(2);\r\nline<\/span>(84, 233, 349, 233);\r\n\r\n\/\/vertical\u00a0line\u00a0middle\u00a0white\u00a0no\u00a0stroke<\/span>\r\nnoStroke<\/span>();\r\nfill<\/span>(222, 219, 204);\r\nquad<\/span>(339, 221, 339, 409, 341, 409, 341, 221);\r\n\r\n\/\/add\u00a0stroke<\/span>\r\nstroke<\/span>(0);\r\n\r\n\/\/vertical\u00a0line\u00a0left<\/span>\r\nstrokeWeight<\/span>(1);\r\nline<\/span>(339, 221, 339, 409);\r\n\r\n\/\/vertical\u00a0line\u00a0right<\/span>\r\nstrokeWeight<\/span>(1);\r\nline<\/span>(341, 221, 341, 409);\r\n\r\n\/\/diangonal\u00a0line<\/span>\r\nline<\/span>(82, 233, 322, 469);\r\n\r\n\/\/small\u00a0horizontal\u00a0line\u00a0bottom<\/span>\r\nline<\/span>(192, 469, 322, 469);\r\n\r\n\/\/small\u00a0horizontal\u00a0line\u00a0top<\/span>\r\nline<\/span>(192, 468, 321, 468);\r\n\r\n\/\/small\u00a0horizontal\u00a0rectangle<\/span>\r\nfill<\/span>(0, 0, 0);\r\nrect<\/span>(202, 471, 38, 5);\r\n\r\n\/\/top\u00a0small\u00a0rectangle<\/span>\r\nfill<\/span>(0, 0, 0, 100);\r\nnoStroke<\/span>();\r\nrect<\/span>(217, 445, 8, 23);\r\n\r\n\/\/small\u00a0bottom\u00a0rectangle<\/span>\r\nrect<\/span>(217, 477, 8, 13);\r\n\r\n\/\/save\u00a0image<\/span>\r\nsave<\/span>(\"assignment2part1.png\"<\/span>);\r\n\r\n<\/pre>\n
For the second part of the assignment, I created a remix of the original image to further develop my programming skills.<\/p>\n
\"Remix<\/a>
Remix of Original Image Using Processing<\/p><\/div>\n
 <\/p>\n
The code for my remixed image can be found below:<\/p>\n
\/\/Assignment\u00a02\u00a0Processing:\u00a0Remix\u00a0the\u00a0Image<\/span>\r\n\/\/Annie\u00a0Fang<\/span>\r\n\r\nsize<\/span>(490, 670);\r\n\r\n\/\/222\u00a0219\u00a0204<\/span>\r\nbackground<\/span>(250, 250, 250);\r\n\r\n\r\n\/\/large\u00a0quad<\/span>\r\nnoStroke<\/span>();\r\nfill<\/span>(0, 0, 0);\r\nquad<\/span>(218, 98, 160, 156, 340, 334, 456, 334);\r\n\r\n\/\/triangle\u00a0<\/span>\r\nbeginShape<\/span>(TRIANGLES<\/span>);\r\nfill<\/span>(255, 255, 255, 100);\r\nvertex<\/span>(341, 219);\r\nvertex<\/span>(341, 334);\r\nvertex<\/span>(456, 334);\r\nendShape<\/span>();\r\n\r\n\/\/thin\u00a0triangle\u00a0<\/span>\r\nbeginShape<\/span>(TRIANGLES<\/span>);\r\nfill<\/span>(255, 255, 255);\r\nvertex<\/span>(82, 233);\r\nvertex<\/span>(198, 469);\r\nvertex<\/span>(322, 469);\r\nendShape<\/span>();\r\n\r\n\r\n\/\/x\u00a0is\u00a0an\u00a0integer\u00a0equal\u00a0to\u00a0237<\/span>\r\nint<\/span> x = 237;\r\n\r\n\/\/y\u00a0is\u00a0an\u00a0integer\u00a0equal\u00a0to\u00a0212<\/span>\r\nint<\/span> y = 212;\r\n\r\n\r\n\/\/square<\/span>\r\nfill<\/span>(255, 0, 0, 100);\r\nrect<\/span>(x, y, 20, 20);\r\n\r\nfill<\/span>(255, 98, 0, 100);\r\nrect<\/span>(232, 207, 20, 20);\r\n\r\nfill<\/span>(255, 188, 0, 100);\r\nrect<\/span>(227, 202, 20, 20);\r\n\r\nfill<\/span>(255, 247, 0, 100);\r\nrect<\/span>(222, 197, 20, 20);\r\n\r\nfill<\/span>(178, 255, 0, 100);\r\nrect<\/span>(217, 192, 20, 20);\r\n\r\nfill<\/span>(0, 255, 27, 100);\r\nrect<\/span>(212, 187, 20, 20);\r\n\r\nfill<\/span>(0, 255, 142, 100);\r\nrect<\/span>(207, 182, 20, 20);\r\n\r\nfill<\/span>(0, 255, 189, 100);\r\nrect<\/span>(202, 177, 20, 20);\r\n\r\nfill<\/span>(0, 255, 255, 100);\r\nrect<\/span>(197, 172, 20, 20);\r\n\r\nfill<\/span>(0, 202, 255, 100);\r\nrect<\/span>(192, 167, 20, 20);\r\n\r\nfill<\/span>(0, 138, 255, 100);\r\nrect<\/span>(187, 162, 20, 20);\r\n\r\nfill<\/span>(0, 0, 255, 100);\r\nrect<\/span>(182, 157, 20, 20);\r\n\r\nfill<\/span>(109, 0, 255, 100);\r\nrect<\/span>(177, 152, 20, 20);\r\n\r\nfill<\/span>(195, 0, 255, 100);\r\nrect<\/span>(171, 146, 20, 20);\r\n\r\n\r\n\r\n\/\/medium\u00a0shadow\u00a0quad,\u00a075\u00a0fill<\/span>\r\nfill<\/span>(0, 0, 0, 100);\r\nquad<\/span>(171, 146, 171, 166, 237, 232, x, y);\r\n\r\n\/\/light\u00a0shadow\u00a0quad,\u00a0background\u00a0fill<\/span>\r\nfill<\/span>(229, 229, 229, 100);\r\nquad<\/span>(171, 146, x, y, 257, 212, 191, 146);\r\n\r\n\r\n\/\/add\u00a0stroke<\/span>\r\nstroke<\/span>(0);\r\n\r\n\/\/horizontal\u00a0line<\/span>\r\nstrokeWeight<\/span>(1);\r\nline<\/span>(84, 233, 300, 233);\r\n\r\n\/\/vertical\u00a0line\u00a0middle\u00a0white\u00a0no\u00a0stroke<\/span>\r\nnoStroke<\/span>();\r\nfill<\/span>(222, 219, 204);\r\nquad<\/span>(339, 221, 339, 409, 341, 409, 341, 221);\r\n\r\n\/\/add\u00a0stroke<\/span>\r\nstroke<\/span>(0);\r\n\r\n\/\/vertical\u00a0line\u00a0left<\/span>\r\nstrokeWeight<\/span>(1);\r\nline<\/span>(339, 221, 339, 409);\r\n\r\n\/\/vertical\u00a0line\u00a0right<\/span>\r\nstrokeWeight<\/span>(1);\r\nline<\/span>(341, 221, 341, 409);\r\n\r\n\/\/diangonal\u00a0line<\/span>\r\nline<\/span>(82, 233, 322, 469);\r\n\r\nline<\/span>(82, 233, 318, 469);\r\n\r\nline<\/span>(82, 233, 310, 469);\r\n\r\nline<\/span>(82, 233, 294, 469);\r\n\r\nline<\/span>(82, 233, 262, 469);\r\n\r\nline<\/span>(82, 233, 198, 469);\r\n\r\n\r\n\/\/colored\u00a0thin\u00a0triangles\u00a0<\/span>\r\nbeginShape<\/span>(TRIANGLES<\/span>);\r\nfill<\/span>(179, 41, 255, 150);\r\nvertex<\/span>(82, 233);\r\nvertex<\/span>(198, 469);\r\nvertex<\/span>(262, 469);\r\nendShape<\/span>();\r\n\r\nbeginShape<\/span>(TRIANGLES<\/span>);\r\nfill<\/span>(41, 160, 255, 150);\r\nvertex<\/span>(82, 233);\r\nvertex<\/span>(262, 469);\r\nvertex<\/span>(294, 469);\r\nendShape<\/span>();\r\n\r\nbeginShape<\/span>(TRIANGLES<\/span>);\r\nfill<\/span>(30, 245, 214, 150);\r\nvertex<\/span>(82, 233);\r\nvertex<\/span>(294, 469);\r\nvertex<\/span>(310, 469);\r\nendShape<\/span>();\r\n\r\nbeginShape<\/span>(TRIANGLES<\/span>);\r\nfill<\/span>(30, 245, 214, 50);\r\nvertex<\/span>(82, 233);\r\nvertex<\/span>(310, 469);\r\nvertex<\/span>(318, 469);\r\nendShape<\/span>();\r\n\r\n\r\n\/\/small\u00a0horizontal\u00a0line\u00a0bottom<\/span>\r\nline<\/span>(198, 469, 322, 469);\r\n\r\n\r\n\/\/small\u00a0horizontal\u00a0rectangle<\/span>\r\nfill<\/span>(0, 0, 0);\r\nrect<\/span>(202, 471, 38, 5);\r\n\r\n\/\/top\u00a0small\u00a0rectangle<\/span>\r\nfill<\/span>(0, 0, 0, 100);\r\nnoStroke<\/span>();\r\nrect<\/span>(217, 445, 8, 23);\r\n\r\n\/\/small\u00a0bottom\u00a0rectangle<\/span>\r\nrect<\/span>(217, 477, 8, 13);\r\n\r\n\r\n\r\n\/\/circle\u00a0light\u00a0blue\u00a0fill<\/span>\r\nfill<\/span>(2, 211, 216, 50);\r\nnoStroke<\/span>();\r\nellipse<\/span>(183, 332, 185, 185);\r\n\r\nfill<\/span>(2, 211, 216, 50);\r\nnoStroke<\/span>();\r\nellipse<\/span>(183, 332, 175, 175);\r\n\r\nfill<\/span>(2, 211, 216, 50);\r\nnoStroke<\/span>();\r\nellipse<\/span>(183, 332, 165, 165);\r\n\r\nfill<\/span>(2, 211, 216, 50);\r\nnoStroke<\/span>();\r\nellipse<\/span>(183, 332, 155, 155);\r\n\r\nfill<\/span>(2, 211, 216, 50);\r\nnoStroke<\/span>();\r\nellipse<\/span>(183, 332, 145, 145);\r\n\r\nfill<\/span>(2, 211, 216, 50);\r\nnoStroke<\/span>();\r\nellipse<\/span>(183, 332, 135, 135);\r\n\r\nfill<\/span>(2, 211, 216, 50);\r\nnoStroke<\/span>();\r\nellipse<\/span>(183, 332, 125, 125);\r\n\r\nfill<\/span>(2, 211, 216, 100);\r\nnoStroke<\/span>();\r\nellipse<\/span>(183, 332, 115, 115);\r\n\r\nfill<\/span>(2, 211, 216, 100);\r\nnoStroke<\/span>();\r\nellipse<\/span>(183, 332, 105, 105);\r\n\r\nfill<\/span>(2, 211, 216, 100);\r\nnoStroke<\/span>();\r\nellipse<\/span>(183, 332, 95, 95);\r\n\r\nfill<\/span>(2, 211, 216, 100);\r\nnoStroke<\/span>();\r\nellipse<\/span>(183, 332, 85, 85);\r\n\r\nfill<\/span>(2, 211, 216, 100);\r\nnoStroke<\/span>();\r\nellipse<\/span>(183, 332, 75, 75);\r\n\r\nfill<\/span>(2, 211, 216);\r\nnoStroke<\/span>();\r\nellipse<\/span>(183, 332, 55, 55);\r\n\r\n\/\/save\u00a0image<\/span>\r\nsave<\/span>(\"assignment2part2.png\"<\/span>);\r\n\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
For one of my assignments in my Research in Cartography class, I was asked to replicate an image using a programming language called Processing. The first image shown below is the original\u00a0image, and the second is the replica I created with processing. I have also created\u00a0a remixed version of this image.     This is my code for my image below: \/\/Assignment\u00a02\u00a0Processing:\u00a0Replicate\u00a0the\u00a0Image \/\/Annie\u00a0Fang size(490, 670); \/\/222\u00a0219\u00a0204 background(222, 219, 204); \/\/circle\u00a0black\u00a0fill fill(0, 0, 0); ellipse(183, 332, 216, 216); \/\/large\u00a0quad,\u00a0no\u00a0stroke,\u00a050\u00a0percent\u00a0transparency\u00a0fill noStroke(); fill(0, 0, 0, 50); quad(218, 98, 160, 156, 340, 334, 456,…read more<\/a><\/p>\n","protected":false},"author":35383,"featured_media":0,"parent":71,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-154","page","type-page","status-publish","hentry","et-no-image","et-bg-layout-dark","et-white-bg"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/anniefang\/wp-json\/wp\/v2\/pages\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/anniefang\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/anniefang\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/anniefang\/wp-json\/wp\/v2\/users\/35383"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/anniefang\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":19,"href":"https:\/\/blogs.ubc.ca\/anniefang\/wp-json\/wp\/v2\/pages\/154\/revisions"}],"predecessor-version":[{"id":182,"href":"https:\/\/blogs.ubc.ca\/anniefang\/wp-json\/wp\/v2\/pages\/154\/revisions\/182"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/anniefang\/wp-json\/wp\/v2\/pages\/71"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/anniefang\/wp-json\/wp\/v2\/media?parent=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}