This is my project for dynamic drawing. The most difficult part for me is understanding the relationship between the size of the hearts and the distance between the hearts and my mouse. <\/p>\n
<\/p><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Jenny Wang\n\/\/Section B\n\nfunction setup() {\n createCanvas(600,450);\n background(220);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n smooth();\n noStroke();\n}\n\nvar s = 30 \/\/space in between\nvar x = 0\nvar y = 0\nvar heart\nvar angle = 0\nfunction draw() {\n background(\"lightblue\");\n\n \/\/set color variation\n var R = (dist(x,y,mouseX,mouseY)\/100)*30;\n var G = (dist(x,y,mouseX,mouseY)\/100)*20;\n var B = (dist(x,y,mouseX,mouseY)\/100)*30;\n\n \n \n \/\/draw hearts with for loops\n var maxD = 50;\n var maxS = 3;\n\n for (x = 0; x < width; x += s) {\n for (y = 0; y < height; y += s) {\n fill (R,G,B);\n var size = (dist(x,y,mouseX,mouseY)\/maxD)*maxS;\n \/\/set size variation\n heart(x+s\/2, y+s\/2, size);\n }\n }\n\n \/\/draw heart\n var r = mouseX\/2\n \n push()\/\/square1\n fill(\"lightyellow\");\n translate(width\/2,height\/2);\n rotate(radians(angle)+10);\n ellipse(mouseX\/2,mouseY\/2,r*2+mouseX\/2);\n pop();\n angle += 2;\n\n push()\/\/square2\n fill(\"lightgreen\");\n translate(width\/2,height\/2);\n rotate(radians(angle)+20);\n ellipse(mouseX\/2,mouseY\/2,r*2+mouseX\/2);\n pop();\n angle += 2;\n \n\n push();\n fill(\"pink\");\/\/circle 3\n translate(width\/2,height\/2);\n rotate(radians(angle)+30);\n ellipse(mouseX\/2,mouseY\/2,r*2+mouseX\/2);\n pop()\n angle += 2;\n\n\nfunction heart (x,y,size){\n \/\/ fill(R,G,B);\n beginShape();\n vertex(x, y);\n bezierVertex(x - size \/ 2, y - size \/ 2, x - size, y + size \/ 3, x, y + size);\n bezierVertex(x + size, y + size \/ 3, x + size \/ 2, y - size \/ 2, x, y);\n endShape(CLOSE);\n}\n\/\/draw a heart\n\n\n}\n\n\n\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This is my project for dynamic drawing. The most difficult part for me is understanding the relationship between the size of the hearts and the distance between the hearts and my mouse. sketch \/\/Jenny Wang \/\/Section B function setup() { createCanvas(600,450); background(220); text(“p5.js vers 0.9.0 test.”, 10, 15); smooth(); noStroke(); } var s = 30 … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 03: Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":769,"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\/f2022\/wp-json\/wp\/v2\/posts\/71995"}],"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\/769"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71995"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71995\/revisions"}],"predecessor-version":[{"id":71997,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71995\/revisions\/71997"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}