{"id":65917,"date":"2021-09-17T17:30:29","date_gmt":"2021-09-17T21:30:29","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65917"},"modified":"2021-09-17T17:32:43","modified_gmt":"2021-09-17T21:32:43","slug":"project-3-dynamic-drawing","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/17\/project-3-dynamic-drawing\/","title":{"rendered":"Project 3: Dynamic Drawing"},"content":{"rendered":"\n

Dynamic Drawing<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\n\nfunction setup() {\n createCanvas(500, 500);\n \n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n\n \/\/setting up the background color\n let firstColor = color(45,0,85); \/\/first color to be blended from\n let secondColor = color(219,146,7); \/\/second color to be blended from\n bldval = map(mouseX, 0,width,0,1,true); \/\/the blending proportion \n bColor = lerpColor(firstColor,secondColor,bldval); \/\/ the background color based on mouseX\n background(bColor); \/\/setting background \n\n \/\/vertical and horizontal rectangle\n noStroke()\n rectColor = lerpColor(secondColor,firstColor,bldval);\n move = map(mouseY,0,height,300,320,true); \/\/constraining the position of the horizintal rectangle\n fill(rectColor);\n rect(mouseX-40,0,80,height); \/\/vertical rectangle\n rect(0,move-40,width,80); \/\/horizontal rectangle\n\n \/\/circle on top right moving to top left\n fill(255);\n ellipse(450 - mouseX,100,30,30);\n fill(rectColor);\n crcWidth = 100 - mouseX\/2;\n crcHeight = 200 - mouseX\/2;\n push();\n translate(450 - mouseX,100);\n rotate(0+mouseX);\n ellipse(0,0,crcWidth,crcHeight);\n pop();\n \n \/\/rotating white circles around mouse X and mouse Y\n push();\n fill(255)\n translate(mouseX,mouseY);\n rotate(mouseX\/10);\n ellipse(0,-30,+10,10);\n ellipse(0,30,-10,10);\n\n}\n<\/code><\/pre><\/p>\n\n\n\n<p>I enjoyed doing this. The hardest idea was possibly to start the project. After that it was pretty quick.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Dynamic Drawing function setup() { createCanvas(500, 500); text(“p5.js vers 0.9.0 test.”, 10, 15); } function draw() { \/\/setting up the background color let firstColor = color(45,0,85); \/\/first color to be blended from let secondColor = color(219,146,7); \/\/second color to be blended from bldval = map(mouseX, 0,width,0,1,true); \/\/the blending proportion bColor = lerpColor(firstColor,secondColor,bldval); \/\/ the background … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/17\/project-3-dynamic-drawing\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 3: Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":668,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65917"}],"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\/668"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65917"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65917\/revisions"}],"predecessor-version":[{"id":65923,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65917\/revisions\/65923"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}