{"id":66109,"date":"2021-09-18T22:51:42","date_gmt":"2021-09-19T02:51:42","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66109"},"modified":"2021-09-18T23:08:28","modified_gmt":"2021-09-19T03:08:28","slug":"dynamic-drawing-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/dynamic-drawing-3\/","title":{"rendered":"Dynamic Drawing"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var angle = 80;\n\nfunction setup() {\n createCanvas(600,450);\n background(220);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n\tbackground(mouseX,mouseY, 155);\n\n\t\/\/leaves\n\t\/*This part of the code draws two ellipses of grass green color. I used push() and pop()\n\tcommans to remember new positions of two ellipses due to translation and rotation*\/\n\tif(mouseX>300) {\n\t\tpush();\n\t noStroke();\n\t fill(124, 252, 0);\n\t translate(300, 300); \/\/chnages a (0, 0) point to (300, 300)\n\t rotate(radians(50)); \/\/rotates an ellipse 50 degrees in radians clockwise\n\t ellipse(66, 20, 30, 70);\n\t rotate(radians(-83)); \/\/rotates an ellipse 80 degrees in radians counterclockwise\n\t ellipse(-30, 20, 25, 50);\n\t pop();\n }\n\n\t\/\/This part of the code draws dark green stem of a flower\n\tnoStroke();\n\tfill(0, 100, 0);\n\trect(298, 230, 5, mouseX);\n \n \/\/This part of the code restricts mouseX to 0-115\n\tvar m = max(min(mouseX, 115), 0);\n var size = m * 350.0 \/ 400.0;\n\n \/*I used push() and pop() commands to remember new positions of petals becuase I used \n translation and rotation. I drew 9 petals of a flower by rotating them 40 degrees in radians\n from previous petal's location*\/\n push();\n stroke(255);\n strokeWeight(1);\n fill(55, mouseX, mouseY, 150); \/*This changes the color of petals in regards with (x,y)\n location and it has 150 transparency*\/\n translate(300, 225); \/\/changes a (0, 0) point to (300, 225)\n rotate(radians(40));\n ellipse(0 + m * 190.0 \/ 400.0, 0, 100, 35); \n rotate(radians(40));\n ellipse(0 + m * 190.0 \/ 400.0, 0, 100, 35);\n rotate(radians(40));\n ellipse(0 + m * 190.0 \/ 400.0, 0, 100, 35);\n rotate(radians(40));\n ellipse(0 + m * 190.0 \/ 400.0, 0, 100, 35);\n rotate(radians(40));\n ellipse(0 + m * 190.0 \/ 400.0, 0, 100, 35);\n rotate(radians(40));\n ellipse(0 + m * 190.0 \/ 400.0, 0, 100, 35);\n rotate(radians(40));\n ellipse(0 + m * 190.0 \/ 400.0, 0, 100, 35);\n rotate(radians(40));\n ellipse(0 + m * 190.0 \/ 400.0, 0, 100, 35);\n rotate(radians(40));\n ellipse(0 + m * 190.0 \/ 400.0, 0, 100, 35);\n pop();\n \n \/\/This part of the code draws a stigma of a flower\n noStroke();\n fill(150, mouseX, mouseY); \/*This changes the color of stigma in regards with (x,y)\n location*\/\n circle(300, 225, 15);\t\n\n \/\/This part of the code draws 3 cluds that are moving with regards of mouseX\n noStroke();\n fill(max(mouseX, mouseY)); \/*This changes clouds' color by choosing the greater value from\n mouseX and mouseY locations*\/\n ellipse(mouseX, 50, 70, 35);\n ellipse(mouseX+25, 40, 50, 20);\n ellipse(mouseX-25, 60, 50, 20);\n \n ellipse(mouseX+120, 80, 70, 35);\n ellipse(mouseX+145, 70, 50, 20);\n ellipse(mouseX+95, 90, 50, 20);\n\n ellipse(mouseX+240, 25, 70, 35);\n ellipse(mouseX+265, 15, 50, 20);\n ellipse(mouseX+215, 35, 50, 20);\n \n \/\/This part of the code draws grass\n fill(55, 143, 80); \n noStroke(); \n \/\/first moving part of grass in regards with mouseX\n triangle(mouseX-540, 450, mouseX-530, 400, mouseX-520, 450);\n triangle(mouseX-520, 450, mouseX-510, 400, mouseX-500, 450);\n triangle(mouseX-500, 450, mouseX-490, 400, mouseX-480, 450);\n triangle(mouseX-480, 450, mouseX-470, 400, mouseX-460, 450);\n triangle(mouseX-460, 450, mouseX-450, 400, mouseX-440, 450);\n triangle(mouseX-440, 450, mouseX-430, 400, mouseX-420, 450);\n triangle(mouseX-420, 450, mouseX-410, 400, mouseX-400, 450);\n triangle(mouseX-400, 450, mouseX-390, 400, mouseX-380, 450);\n triangle(mouseX-380, 450, mouseX-370, 400, mouseX-360, 450);\n triangle(mouseX-360, 450, mouseX-350, 400, mouseX-340, 450);\n triangle(mouseX-340, 450, mouseX-330, 400, mouseX-320, 450);\n \n \/\/constant part of grass\n triangle(200, 450, 210, 400, 220, 450);\n triangle(220, 450, 230, 400, 240, 450);\n triangle(240, 450, 250, 400, 260, 450);\n triangle(260, 450, 270, 400, 280, 450);\n triangle(280, 450, 290, 400, 300, 450);\n triangle(300, 450, 310, 400, 320, 450);\n triangle(320, 450, 330, 400, 340, 450);\n triangle(340, 450, 350, 400, 360, 450);\n triangle(360, 450, 370, 400, 380, 450);\n triangle(380, 450, 390, 400, 400, 450);\n\n \/\/second moving part of grass in regards with mouseX\n triangle(mouseX-930, 450, mouseX-920, 400, mouseX-910, 450);\n triangle(mouseX-910, 450, mouseX-900, 400, mouseX-890, 450);\n triangle(mouseX-890, 450, mouseX-880, 400, mouseX-870, 450);\n triangle(mouseX-870, 450, mouseX-860, 400, mouseX-850, 450);\n triangle(mouseX-850, 450, mouseX-840, 400, mouseX-830, 450);\n triangle(mouseX-830, 450, mouseX-820, 400, mouseX-810, 450);\n triangle(mouseX-810, 450, mouseX-800, 400, mouseX-790, 450);\n triangle(mouseX-790, 450, mouseX-780, 400, mouseX-770, 450);\n triangle(mouseX-770, 450, mouseX-760, 400, mouseX-750, 450);\n triangle(mouseX-750, 450, mouseX-740, 400, mouseX-730, 450);\n\n \n if(mouseX>width\/2){ \/\/checks if mouseX is on the right side of a screen\n \ttranslate(500, 100); \/\/changes a (0, 0) point to (500, 100)\n\n \tvar mapX = map(mouseX, 100, 300, 250, 250); \/\/remaping a mouseX from one range to another.\n var mapY = map(mouseY, 100, 0, 100, 200); \/\/remaping a mouseY from one range to another.\n \n \/\/This part of the code draws sunrays that will follow mouseX and mouseY\n strokeWeight(5);\n stroke(255,165,0); \/\/orange\n line(0, 0, mapX, mapY);\n line(0, 0, mapX-20, mapY-20);\n line(0, 0, mapX-80, mapY-80);\n line(0, 0, mapX-140, mapY-140);\n line(0, 0, mapX-200, mapY-200);\n\n stroke(218,165,32); \/\/golden rod\n line(0, 0, mapX, mapY);\n line(0, 0, mapX+20, mapY-20);\n line(0, 0, mapX+80, mapY+80);\n line(0, 0, map-140, mapY+140);\n line(0, 0, mapX+200, mapY+200);\n\n stroke(255,215,0); \/\/gold\n line(0, 0, mapX*1, mapY*1);\n line(0, 0, mapX*1.5, mapY*1.5);\n line(0, 0, mapX*2, mapY*2);\n line(0, 0, mapX*0.5, mapY*0.5);\n line(0, 0, mapX, mapY*1.5);\n line(0, 0, mapX*1.5, mapY);\n\n stroke(255,69,0); \/\/orange red\n line(0, 0, mapX-50, mapY+20);\n line(0, 0, mapX+200, mapY);\n line(0, 0, mapX-30, mapY+55);\n line(0, 0, mapX*0.2, mapY+100);\n line(0, 0, mapX-20, mapY+130);\n line(0, 0, mapX*1.4, mapY\/1.2);\n\n \/\/This part of the code draws a sun\n \tstrokeWeight(3);\n \tstroke(255);\n \tfill(249, 215, 28);\n \tcircle(0, 0, 70); \n } \n} \n\n\n<\/code><\/pre><\/p>\n\n\n\n<p>During the process of my work, I thought of things that change their position or their colors all the time in real world and I came up with a small drawings of a flower, clouds, grass, sun and sky. I followed the idea that flowers grow and clouds move which made it easier to follow the procedures. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var angle = 80; function setup() { createCanvas(600,450); background(220); text(“p5.js vers 0.9.0 test.”, 10, 15); } function draw() { background(mouseX,mouseY, 155); \/\/leaves \/*This part of the code draws two ellipses of grass green color. I used push() and pop() commans to remember new positions of two ellipses due to translation and rotation*\/ if(mouseX>300) { … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/dynamic-drawing-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":670,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66109"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/670"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66109"}],"version-history":[{"count":7,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66109\/revisions"}],"predecessor-version":[{"id":66125,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66109\/revisions\/66125"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}