{"id":66037,"date":"2021-09-18T19:35:10","date_gmt":"2021-09-18T23:35:10","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66037"},"modified":"2021-09-18T19:35:37","modified_gmt":"2021-09-18T23:35:37","slug":"project-2-dynamic-drawing","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-2-dynamic-drawing\/","title":{"rendered":"Project 3: Dynamic Drawing"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/wpf-dynamic-drawing.js\" data-width=\"600\" data-height=\"450\">wpf-dynamic-drawing<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"600\" height=\"450\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">function setup() {\n    createCanvas(600, 450);\n}\n\nfunction draw() {\n    var positionY = constrain(mouseY, 80, 400); \/\/relative Y position for everything that is constrained so the sun doesnt shoot off into the sky etc\n    background(139,214,241);\n    fill(21,8,29, mouseY - 80); \/\/transitions background to night sky by decreasing transparency with mouseY position\n    rect(0,0,600,300);\n\n    var rainbowAlpha = map(constrain(mouseY,80,400), 80, 250, 255, 0); \/\/variable to control transparency of the rainbow as it goes down\n\n    noStroke();\n    \n    fill(255,0,0,rainbowAlpha); \/\/the rainbow: red\n    ellipse(300, positionY + 100, 700, 200);\n    fill(254,98,48,rainbowAlpha); \/\/orange\n    ellipse(300, positionY + 120, 700, 200);\n    fill(255,246,2,rainbowAlpha); \/\/yellow\n    ellipse(300, positionY + 140, 700, 200);\n    fill(1,179,2,rainbowAlpha); \/\/green\n    ellipse(300, positionY + 160, 700, 200);\n    fill(4,1,119,rainbowAlpha); \/\/blue\n    ellipse(300, positionY + 180, 700, 200);\n    fill(35,3,114,rainbowAlpha); \/\/violet\n    ellipse(300, positionY + 200, 700, 200,);\n    fill(139,214,241); \/\/\"clear\" ellipse that is the same color as the day background\n    ellipse(300, positionY + 220, 700, 200,); \n    fill(21,8,29, mouseY - 80); \/\/\"clear\" ellipse that tranistions to night sky same why the regular background does\n    ellipse(300, positionY + 220, 700, 200); \n\n\n    fill(255,246,2); \/\/sun\n    circle(150, positionY - 50, 50);\n\n    fill(241,222,150); \/\/moon\n    circle(390, positionY - 325, 30);\n\n    fill(233,233,255,mouseY - 250); \/\/stars\n    circle(40,96,10);\n    circle(250,15,10);\n    circle(330,62,10);\n    circle(470,340,10);\n    circle(580,70,10);\n    circle(346,54,10);\n    circle(200,30,10);\n    circle(475,120,10);\n    circle(175,60,10);\n    circle(275,115,10);\n    circle(430,50,10);\n    circle(20,20,10);\n    circle(100,40,10);\n    circle(270,50,10);\n    circle(80,130,10);\n    circle(500,25,10);\n    circle(400,100,10);\n    circle(150,85,10);\n    circle(500,55,10);\n\n\n    var positionX = constrain(mouseX,35,565);\n\n    fill(141,196,39); \/\/green \"field\"\n    rect(0,300,600, 150);\n\n    var oppositeX = map(positionX, 0, 600, 600, 0);\n\n    fill(103,62,16); \/\/left dog\n    ellipse(positionX, 350,30,15); \/\/body\n    circle(positionX + 15, 345,15); \/\/head\n    ellipse(positionX-10,355, 5,8); \/\/leg\n    ellipse(positionX + 10, 355, 5, 8); \/\/leg\n    ellipse(positionX-15,350,15,5); \/\/tail\n    triangle(positionX+9,340,positionX+12,335,positionX+16,340); \/\/ear\n    triangle(positionX+14,340,positionX+17,335,positionX+20,340); \/\/ear\n    fill(0);\n    circle(positionX+16,343,2); \/\/eyes\n    circle(positionX+19,343,2);\n\n    fill(103,62,16); \/\/right dog\n    ellipse(oppositeX, 390,30,15); \/\/body\n    circle(oppositeX - 15, 385,15); \/\/head\n    ellipse(oppositeX + 10,395, 5,8); \/\/leg\n    ellipse(oppositeX - 10, 395, 5, 8); \/\/leg\n    ellipse(oppositeX + 15,390,15,5); \/\/tail\n    triangle(oppositeX - 9,380,oppositeX - 12,375,oppositeX - 16,380); \/\/ear\n    triangle(oppositeX - 14,380,oppositeX - 17,375,oppositeX - 20,380); \/\/ear\n    fill(0);\n    circle(oppositeX - 16,383,2); \/\/eyes\n    circle(oppositeX - 19,383,2);\n\n\n\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>I had difficulty with this project. I had a hard time coming up with something to draw. Once I had an idea I really enjoyed coming up with ways as to how I could incorporate dynamic elements into it. One thing, in particular, I am proud of is figuring out that the map function can work backwards, with the higher value being the start point and the lower value being the stop point, which allows you to invert the value of a variable in a sense.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>wpf-dynamic-drawing function setup() { createCanvas(600, 450); } function draw() { var positionY = constrain(mouseY, 80, 400); \/\/relative Y position for everything that is constrained so the sun doesnt shoot off into the sky etc background(139,214,241); fill(21,8,29, mouseY &#8211; 80); \/\/transitions background to night sky by decreasing transparency with mouseY position rect(0,0,600,300); var rainbowAlpha = map(constrain(mouseY,80,400), &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-2-dynamic-drawing\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 3: Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":648,"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\/66037"}],"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\/648"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66037"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66037\/revisions"}],"predecessor-version":[{"id":66052,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66037\/revisions\/66052"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}