{"id":73141,"date":"2022-09-26T15:19:26","date_gmt":"2022-09-26T19:19:26","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=73141"},"modified":"2022-09-26T15:19:26","modified_gmt":"2022-09-26T19:19:26","slug":"project-03-dynamic-drawing-15","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/26\/project-03-dynamic-drawing-15\/","title":{"rendered":"Project 03 &#8211; 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><a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"450\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-397.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/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\">\/* eliana fleischer\n    efleisch\n    section e *\/ \n\nvar d = 10\nvar x = 20\nvar y = 20 \/\/ sets up variables for x, y and the size of the heart\n    \nfunction setup() {\n    createCanvas(600, 450);\n    background(220);\n}\n\nfunction draw() {\n\n    background(255 - mouseX); \/\/makes background go from lighter to darker as the mouse moves in the positive x direction\n\n    x = mouseX; \/\/ makes x mouse x and y mouse y + 10 \n    y = mouseY + 10;\n    noStroke();\n    push(); \/\/ push so only small heart is filled blues\n    fill(0,0,mouseX); \/\/ fills in shades of blue relativeto the x position of the mouse\n    beginShape();\n    vertex(30, 40); \/\/ starting point for the small heart right side\n    bezierVertex(40, 10 , 55 , 50, 30 , 70); \/\/ anchor points for the small heart right side\n    vertex(30,40); \/\/ starting point for the small heart left side\n    bezierVertex(20, 10 , 5, 50, 30, 70); \/\/ anchor points for the small heart left side \n    endShape();\n    pop();\n\n    d = mouseX; \/\/ makes the size of the heart relative to the mouse position\n    d = constrain(d, 0, 300); \/\/ keeps the size fo the big heart from getting bigger than the canvas\n\n    if (mouseX &gt;= mouseY){ \/\/ filling the heart in a gradient relative to x and y\n        fill(mouseX,0,0);\n\n    } else {\n        fill(mouseY, 0, 0);\n    }\n\n    beginShape(); \n    vertex(x, y); \/\/ makes starting coordinates for the big heart x and y \n    bezierVertex(x + d, y - (d) , x + (d) , y , x , y + (d)); \/\/ anchor points scaled by d \n    vertex(x, y);\n    bezierVertex(x - d, y - (d) , x - (d), y, x, y + (d));\n    endShape();\n\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>I think the hardest part of this project for me was figuring out different ways to create the dynamic aspect of this project. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/* eliana fleischer efleisch section e *\/ var d = 10 var x = 20 var y = 20 \/\/ sets up variables for x, y and the size of the heart function setup() { createCanvas(600, 450); background(220); } function draw() { background(255 &#8211; mouseX); \/\/makes background go from lighter to darker as the &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/26\/project-03-dynamic-drawing-15\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 03 &#8211; Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":717,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73141"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/717"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=73141"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73141\/revisions"}],"predecessor-version":[{"id":73146,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73141\/revisions\/73146"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=73141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=73141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=73141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}