{"id":65951,"date":"2021-09-18T12:48:22","date_gmt":"2021-09-18T16:48:22","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65951"},"modified":"2021-09-18T12:48:22","modified_gmt":"2021-09-18T16:48:22","slug":"project-3-dynamic-drawing-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-3-dynamic-drawing-3\/","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\/sketch-130.js\" data-width=\"600\" data-height=\"450\">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\">var angle = 0;\n\nfunction setup() {\n    createCanvas(600, 450);\n    \n}\n\nfunction draw() {\n    \/\/ change the background color from light -&gt; dark blue as mouse top -&gt; bottom of canvas\n    if (mouseY &lt; height\/7) { \n        background (188, 210, 232); \/\/lightest blue\n    } else if (mouseY &lt; (height\/7)*2) {\n        background (145, 186, 214);\n    } else if (mouseY &lt; (height\/7)*3) {\n        background (115, 165, 198);\n    } else if (mouseY &lt; (height\/7)*4) {\n        background (82, 138, 174);\n    } else if (mouseY &lt; (height\/7)*5) {\n        background (46, 89, 132);\n    } else if (mouseY &lt; (height\/7)*6) {\n        background (30, 63, 102);\n    } else {\n        background (23, 47, 77); \/\/darkest blue\n    }\n\n    \/\/a box at the center of the canvas\n    stroke(0);\n    strokeWeight(3);\n    line(250, 175, 250, 275); \/\/left border of box\n    line(250, 175, 350, 175); \/\/top border of box\n    line(350, 175, 350, 275); \/\/right border of box\n    line(250, 275, 350, 275); \/\/bottom border of box\n    fill(79, 37, 37); \/\/brown color for box\n    rect(250, 175, 100, 100);\n\n    \/\/open side of box if mouse touches border\n    if (mouseX &lt; 250 & mouseY > 175 && mouseY < 275) { \/\/if open left side\n        line(200, 150, 250, 175);\n        line(200, 300, 250, 275);\n        var r = 255; \/\/pink fill\n        var g = 180;\n        var b = 200;\n        fill(r, g, b);\n        circle(mouseX, mouseY, 300-mouseX); \/\/small circle attached to mouse\n        fill(r-mouseX, g-mouseX, b-mouseX); \/\/opposite color from small circle\n        circle(0, mouseY, mouseX); \/\/large circle on the side of canvas\n\n    } else if (mouseX &gt; 350 & mouseY > 175 && mouseY < 275) { \/\/if open right side\n        line(350, 175, 400, 150);\n        line(350, 275, 400, 300);\n        \/\/rectangle spin on center, change size and spin angle \n        if(mouseX &gt; 350 & mouseX <450) {\n            fill(235, 207, 52); \/\/yellow\n        } else {\n            fill(52, 235, 116); \/\/green\n        }\n        push();\n        translate(350, 225);\n        rotate(radians(angle));\n        rectMode(CENTER);\n        rect(50, 50, mouseX-300, mouseX-300); \/\/size of rect increases as mouse goes to the right\n        pop();\n        if (mouseX &gt; 350 & mouseX < 450){ \/\/if on left side\n            angle += 3; \/\/rotate clock-wise\n        } else { \/\/if on right side\n            angle -= 3; \/\/rotate counter clock-wise\n        }\n\n    } else if (mouseY &lt; 175 & mouseX > 250 && mouseX < 350) { \/\/if open top side\n        line(200, 150, 250, 175);\n        line(350, 175, 400, 150);\n        var circleX = 300;\n        var circleY = 150;\n        \/\/let circle size depend on how close mouse is to circles\n        var size = constrain(dist(mouseX, mouseY, circleX, circleY),0, 30); \n        fill(115, 105, 205); \/\/fill purple\n        circle(circleX, circleY, size); \/\/first circle\n        circle(circleX, circleY-30, size*2); \/\/2nd circle\n        circle(circleX, circleY-60, size); \/\/3rd circle\n        circle(circleX, circleY-90, size*2); \/\/4th circle\n        circle(circleX, circleY-120, size); \/\/5th circle\n\n    } else if (mouseY &gt; 275 & mouseX > 250 && mouseX < 350) { \/\/if open bottom side\n        line(200, 300, 250, 275);\n        line(350, 275, 400, 300);\n        \/\/random neon spike of lines that follows the mouse \n        stroke(255, 230, 0); \/\/bright yellow\n        line(287.5, 362.5, mouseX, mouseY);\n        line(287.5, 362.5, mapx, mapy+180);\n        line(287.5, 362.5, mapx+40, mapy);\n        line(287.5, 362.5, mapx, mapy+200);\n\n        var mapx = map(mouseX, 250, 350, 210, 310); \/\/map to a shorter length\n        var mapy = map(mouseY, 275, 450, 235, 410); \/\/map to a shorter length\n        \n        stroke(122, 255, 105); \/\/bright green\n        line(287.5, 362.5, mapx, mapy);\n        line(287.5, 362.5, mapx-130, mapy-50);\n        line(287.5, 362.5, mapx-40, mapy-20);\n        line(287.5, 362.5, mapx-130, mapy+150);\n        line(287.5, 362.5, mapx-150, mapy-39);\n\n        stroke(248, 59, 255); \/\/bright purple\n        line(287.5, 362.5, mapx*2, mapy*2);\n        line(287.5, 362.5, mapx*1.1, mapy);\n        line(287.5, 362.5, mapx, mapy+220);\n        line(287.5, 362.5, mapx+50, mapy);\n        line(287.5, 362.5, mapx-80, mapy);\n\n        stroke(150, 255, 250); \/\/bright blue\n        line(287.5, 362.5, mapx*1.5, mapy);\n        line(287.5, 362.5, mapx-195, mapy+239);\n        line(287.5, 362.5, mapx-230, mapy+180);\n        line(287.5, 362.5, mapx+10, mapy+50);\n        line(287.5, 362.5, mapx, mapy+190);\n        line(287.5, 362.5, mapx*0.2, mapy*2);\n\n        stroke(255, 150, 217); \/\/bright pink\n        line(287.5, 362.5, mapx-20, mapy);\n        line(287.5, 362.5, mapx-100, mapy);\n        line(287.5, 362.5, mapx-170, mapy+20);\n    }\n\n}\n<\/code><\/pre><\/div>\n\n\n<p>The idea behind this drawing is a box that reveals different changing elements depending on where you put your mouse. The most challenging part of this project was figuring out how to make the elements change based on their interaction with mouseX and mouseY. I had to do some trial-and-error to get the effects that I wanted. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>dynamic drawing var angle = 0; function setup() { createCanvas(600, 450); } function draw() { \/\/ change the background color from light -&gt; dark blue as mouse top -&gt; bottom of canvas if (mouseY &lt; height\/7) { background (188, 210, 232); \/\/lightest blue } else if (mouseY &lt; (height\/7)*2) { background (145, 186, 214); } &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-3-dynamic-drawing-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 3: Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":671,"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\/65951"}],"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\/671"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65951"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65951\/revisions"}],"predecessor-version":[{"id":65955,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65951\/revisions\/65955"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}