{"id":66062,"date":"2021-09-18T21:23:32","date_gmt":"2021-09-19T01:23:32","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66062"},"modified":"2021-09-18T21:23:32","modified_gmt":"2021-09-19T01:23:32","slug":"project-03-dynamic-drawing-7","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-03-dynamic-drawing-7\/","title":{"rendered":"Project 03- Dynamic Drawing"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Catherine Liu\n\/\/jianingl@andrew.cmu.edu\n\/\/Section D\n\n\/\/ bee follows cursor and creates flowers when it gets near stems\nvar x = 300;\nvar y = 200;\nvar dx = 0;\nvar dy = 0;\nvar angle = 0;\n\n\nfunction setup() {\n createCanvas(600, 450);\n background(204,255,255);\n}\n\nfunction draw() {\n noStroke()\n \/\/bee follows mouse\n dx = mouseX - x;\n dy = mouseY - y;\n x = x + 1*dx;\n y = y + 1*dy \n background(204,255,255);\n \/\/sun rotates according to mouse\n fill(0,153,0)\n push();\n fill(255,128,0);\n translate(300,450\/2);\n rotate(radians(abs(mouseX\/3)));\n ellipse(-200,-70,100,100)\n pop();\n rect(0,height-40,width,40);\n fill(0,255,0); \/\/flower stems\n rect(445,370,10,80);\n rect(295,370,10,80);\n rect(145,370,10,80);\n\n if (dist(mouseX, mouseY, 450, 350) < 50) {\n if (dist(mouseX, mouseY, 450, 350) < 25) {\n fill(255,153,255); \/\/ flower petal is pink\n } else {\n fill(255,0,0) \/\/ flower petal is red\n }\n ellipse(450, 350, max(mouseX-340,mouseY-340), max(mouseX-340,mouseY-340));\n fill(255,255,0); \/\/ flower center\n ellipse(450, 350, max(mouseX-380,mouseY-380), max(mouseX-380,mouseY-380)); \/\/make right flower bigger\n\n fill(255,0,0); \/\/ flower petal\n ellipse(300, 350, 250-(max(mouseX-250,mouseY-250)), 250-(max(mouseX-250,mouseY-250)));\n fill(255,255,0); \/\/ flower center\n ellipse(300, 350, 180-(max(mouseX-290,mouseY-290)), 180-(max(mouseX-290,mouseY-290))); \/\/make middle flower smaller\n\n fill(255,0,0); \/\/ flower petal\n ellipse(150, 350, 250-(max(mouseX-250,mouseY-250)), 250-(max(mouseX-250,mouseY-250)));\n fill(255,255,0); \/\/ flower center\n ellipse(150, 350, 180-(max(mouseX-290,mouseY-290)), 180-(max(mouseX-290,mouseY-290))); \/\/make left flower smaller\n\n } else if (dist(mouseX, mouseY, 300, 350) < 50) {\n if (dist(mouseX, mouseY, 300, 350) < 25) {\n fill(255,128,0); \/\/ flower petal is orange\n } else {\n fill(255,0,0) \/\/ flower petal is red\n }\n ellipse(300, 350, max(mouseX-250,mouseY-250), max(mouseX-250,mouseY-250));\n fill(255,255,0); \/\/ flower center\n ellipse(300, 350, max(mouseX-290,mouseY-290), max(mouseX-290,mouseY-290)); \/\/ make middle flower bigger\n\n fill(255,0,0); \/\/ flower petal\n ellipse(450, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));\n fill(255,255,0); \/\/ flower center\n ellipse(450, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290))); \/\/make right flower smaller\n\n fill(255,0,0); \/\/ flower petal\n ellipse(150, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));\n fill(255,255,0); \/\/ flower center\n ellipse(150, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290))); \/\/make left flower smaller\n\n } else if (dist(mouseX, mouseY, 150, 350) < 50) {\n if (dist(mouseX, mouseY, 150, 350) < 25) {\n fill(178,102,255); \/\/ flower petal is purple\n } else {\n fill(255,0,0) \/\/ flower petal is red\n }\n ellipse(150, 350, max(mouseX-250,mouseY-250), max(mouseX-250,mouseY-250));\n fill(255,255,0); \/\/ flower center\n ellipse(150, 350, max(mouseX-300,mouseY-300), max(mouseX-300,mouseY-300)); \/\/ make left flower bigger\n\n fill(255,0,0); \/\/ flower petal\n ellipse(450, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));\n fill(255,255,0); \/\/ flower center\n ellipse(450, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290))); \/\/make right flower smaller\n\n fill(255,0,0); \/\/ flower petal\n ellipse(300, 350, 170-(max(mouseX-250,mouseY-250)), 170-(max(mouseX-250,mouseY-250)));\n fill(255,255,0); \/\/ flower center\n ellipse(300, 350, 100-(max(mouseX-290,mouseY-290)), 100-(max(mouseX-290,mouseY-290)));\/\/make middle flower smaller\n }\n fill(255)\n ellipse(x-20,y-30,20,40); \/\/bee wing\n ellipse(x-10,y-30,20,40); \/\/bee wing\n fill(255,174,66);\n ellipse(x-15,y,50,25); \/\/bee body\n fill(0)\n ellipse(x,y,5,5); \/\/ bee eye\n rect(x-55,y-5,20,10); \/\/ bee stinger\n}\n<\/code><\/pre><\/p>\n\n\n\n<p>It took a while coming up with an idea but in the end I decided to do something fun and interactive like a game. When you move the bee close to the flower stems, a flower “blooms” while the others get smaller. I spent a long time making sure the sizes and numbers were correct but I’m happy with the end result. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"768\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_2847-1024x768.jpg\" alt=\"\" class=\"wp-image-66075\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_2847-1024x768.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_2847-300x225.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_2847-768x576.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_2847-1536x1152.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_2847-2048x1536.jpg 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/IMG_2847-1200x900.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>initial idea sketch on whiteboard<\/figcaption><\/figure><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Catherine Liu \/\/jianingl@andrew.cmu.edu \/\/Section D \/\/ bee follows cursor and creates flowers when it gets near stems var x = 300; var y = 200; var dx = 0; var dy = 0; var angle = 0; function setup() { createCanvas(600, 450); background(204,255,255); } function draw() { noStroke() \/\/bee follows mouse dx = mouseX … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-03-dynamic-drawing-7\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 03- Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":654,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,58,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66062"}],"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\/654"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66062"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66062\/revisions"}],"predecessor-version":[{"id":66077,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66062\/revisions\/66077"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}