{"id":72509,"date":"2022-09-19T12:15:15","date_gmt":"2022-09-19T16:15:15","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72509"},"modified":"2022-09-19T12:15:15","modified_gmt":"2022-09-19T16:15:15","slug":"dynamic-drawing-meditating-stick-figure","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/19\/dynamic-drawing-meditating-stick-figure\/","title":{"rendered":"Dynamic Drawing &#8211; Meditating Stick  Figure"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><p>For my project I drew a stick figure that is mediating. There are shapes that come off from the hand. The color, opacity, number of sides, and size of the shape are all dependent on the position of the mouse.  The face of the stick figure is also dependent on the mouse. <\/p><div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-325.js\" data-width=\"450\" data-height=\"600\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"450\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Nakshatra Menon\n\/\/Section C \n\n\nfunction setup() {\n    createCanvas(450, 600);\n    background(\"white\");\n\n}\n\nvar size = 30;\nvar sides1 = 3;\nvar leftHandX = 84\nvar leftHandY = 300 \nvar rightHandX = 401\nvar rightHandY = 320\nvar color1 = 255\nvar color2 = 255\nvar color3 = 255\nvar color4 = 255 \nvar face = 1\n\n\n\nfunction draw() {\n    background(\"black\");\n    stroke(\"white\");\n    strokeWeight(1);\n    \/\/ carpet \n    color4 = (mouseX)\/4\n    fill(color4);\n    ellipse(232, 430, 438, 176); \n\n    \/\/ stick figure drawings\n    noFill(); \n    beginShape();       \/\/ left arm\n        vertex(233, 244);\n        vertex(157, 317);\n        vertex(105, 303);\n    endShape();\n    beginShape();      \/\/ right arm \n        vertex(233, 244);\n        vertex(315, 324);\n        vertex(380, 321);\n    endShape(); \n    beginShape();     \/\/ body and left leg \n        vertex(235, 214);\n        vertex(237, 395);\n        vertex(130, 315);\n        vertex(194, 374);\n        vertex(254, 417);\n    endShape(); \n    beginShape();      \/\/ right leg \n        vertex(237, 395);\n        vertex(354, 326);\n        vertex(291, 370);\n        vertex(240, 402);\n    endShape();     \n    beginShape();       \n        vertex(232, 408);\n        vertex(216, 415);\n    endShape();\n    ellipse(232, 152, 122, 116); \/\/ head\n    ellipse(leftHandX, leftHandY, 39, 6) \/\/ left hand\n    ellipse(rightHandX, rightHandY, 39, 6); \/\/right hand \n    ellipse(201, 415, 24, 6) \/\/ left foot\n    ellipse(269, 417, 24, 6); \/\/right foot \n\n    \/\/ face if mouse is on left \n    if(face == 1){    \n        beginShape();      \/\/ right eye \n        curveVertex(177, 140);\n        curveVertex(177, 140);\n        curveVertex(195, 152);\n        curveVertex(214, 145);\n        curveVertex(214, 145);\n    endShape();\n    beginShape();      \/\/ right eye \n        curveVertex(243, 147);\n        curveVertex(243, 147);\n        curveVertex(260, 158);\n        curveVertex(279, 152);\n        curveVertex(279, 152);\n    endShape();\n    beginShape();      \/\/ smile\n        curveVertex(226, 185);\n        curveVertex(226, 185);\n        curveVertex(246, 188);\n        curveVertex(255, 180);\n        curveVertex(255, 180);\n    endShape();} \n\n    \/\/ face if mouse is on right \n    if(face == 2){   \n    fill(\"white\");\n    stroke(\"grey\");\n    strokeWeight(7);\n    ellipse(195, 152, 25, 50);\n    ellipse(260, 158, 25, 50);\n    strokeWeight(1);\n    line(216, 200, 243, 200);\n    }\n\n    \/\/ face changes w\/ mouse \n    if(mouseX &lt;= 240){\n        face = 1\n    }\n\n    if(mouseX &gt;= 240){\n        face = 2\n    }\n\n\n    \/\/ sides increase as mouse goes right, size 15-25\n    if(mouseX &gt;= 120) {\n        sides1 = (mouseX\/30)\/2\n        size = constrain((2*(mouseY\/mouseX)*30), 5, 25)\n    }\n\n    \/\/ if the mouseX is on the left then the shapes are a tri\n    if(mouseX &lt; 120) {\n        sides1 = 3\n        size = 5\n    }\n\n    \/\/ the color changes based on the position of the mouse \n    color1 = mouseX\n    color2=  mouseY\n    color3 = (mouseX\/mouseY)*2\n\n\n    \/\/draw shape right   \n    fill(color1, color2, color3, mouseY-76);\n    polygon(rightHandX-29, rightHandY-71, size , sides1);\n    fill(color2, color3, color1, mouseY-113);\n    polygon(rightHandX+30, rightHandY-67, size, sides1);\n    fill(color3, color1, color2, mouseX-126);\n    polygon(rightHandX-51, rightHandY-160, size, sides1);\n    fill(color1\/2, color2\/2, color3\/2, mouseY-145);\n    polygon(rightHandX+20, rightHandY-201, size, sides1);\n    fill(color2\/2, color3\/2, color1\/2, mouseY-187);\n    polygon(rightHandX-69, rightHandY-243, size, sides1);\n    fill(color3\/2, color1\/2, color2\/2, mouseX-126);\n    polygon(leftHandX+54, rightHandY-266, size, sides1);\n    line(rightHandX, rightHandY, 320, 214 - (mouseY\/3))\n    line(rightHandX, rightHandY, 354, 99-(mouseY\/3))\n    line(rightHandX, rightHandY, 396, 28 -(mouseY\/3))\n    line(rightHandX, rightHandY, 430, 54-(mouseY-3))\n    line(rightHandX, rightHandY, 430, 200-(mouseY-3))\n\n    \/\/ draw shape left \n    fill(color1\/3, color2\/3, color3\/3, mouseY-166);\n    polygon(leftHandX-3, leftHandY-28, size, sides1);\n    fill(color1\/3, color2\/3, color2\/3,mouseY-183);\n    polygon(leftHandX-89, leftHandY-97, size, sides1);\n    fill(color3\/3, color2\/2, color1\/4, mouseY-114);\n    polygon(leftHandX-11, leftHandY-108, size, sides1);\n    fill(color3, color1, color2, mouseY-123);\n    polygon(leftHandX-63, leftHandY-140, size, sides1);\n    fill(color3, color2, color1, mouseX-153);\n    polygon(leftHandX-71, leftHandY-223, size, sides1);\n    fill(color2, color1, color2, mouseY-123);\n    polygon(leftHandX-1, leftHandY-254, size, sides1);\n    line(leftHandX, leftHandY, 8, 214 - (mouseY\/3))\n    line(leftHandX, leftHandY, 8, 99-(mouseY\/3))\n    line(leftHandX, leftHandY, 68, 28 -(mouseY\/3))\n    line(leftHandX, leftHandY, 177, 54-(mouseY-3))\n    line(leftHandX, leftHandY, 169, 200-(mouseY-3))\n\n\/\/ opposite direction  \n    \/\/ sides increase as mouse goes right \n    if(mouseX &lt;= 400) {\n        sides1 = ((width-mouseX)\/30)\/2\n        size = constrain((3*(mouseY)\/mouseX), 5, 25)\n    }\n\n    \/\/ if the mouseX is on the left then the shapes are a tri\n    if(mouseX &gt; 400) {\n        sides1 = 3\n        size = 5\n    }\n    \/\/ draw shape right \n    fill(color3, color3, color1, mouseX-50);\n    polygon(rightHandX+3, rightHandY-30, size, sides1);\n    fill(color3, color2, color2, mouseY-25);\n    polygon(rightHandX+8, rightHandY-79, size, sides1);\n    fill(color3, color2, color2, mouseY-46);\n    polygon(rightHandX+3, rightHandY-128, size, sides1);\n    fill(color1, color1, color2, mouseX-16);\n    polygon(rightHandX+12, rightHandY-136, size, sides1);\n    fill(color2, color3, color2, mouseY-19);\n    polygon(rightHandX-21, rightHandY-201, size, sides1);\n    fill(color1, color1, color2, mouseY-32);\n    polygon(rightHandX-21, rightHandY-274, size, sides1);\n\n    \/\/ draw shape left  \n    fill(color1, color2, color3\/4, mouseX-240);\n    polygon(leftHandX+46, leftHandY-56, size, sides1);\n    fill(color3, color1\/5, color2, mouseY-32);\n    polygon(leftHandX+5, leftHandY-63, size, sides1);\n    fill(color3, color2, color1, mouseY-45);\n    polygon(leftHandX-40, leftHandY-59, size, sides1);\n    fill(color3, color2\/3, color2\/2, mouseX-98);\n    polygon(leftHandX+38, leftHandY-173, size, sides1);\n    fill(color3\/2, color1, color2\/2, mouseY-134);\n    polygon(leftHandX-8, leftHandY-170, size, sides1);\n    fill(color3, color1\/3, color1\/2, mouseX-77);\n    polygon(leftHandX-63, leftHandY-209, size, sides1);    \n}\n\n\n\/\/ needed to draw polygon, got code from https:\/\/p5js.org\/examples\/form-regular-polygon.html\nfunction polygon(x, y, radius, npoints) {\n    let angle = TWO_PI \/ npoints;\n    beginShape();\n    for (let a = 0; a &lt; TWO_PI; a += angle) {\n    let sx = x + cos(a) * radius;\n    let sy = y + sin(a) * radius;\n    vertex(sx, sy);\n    }\n    endShape(CLOSE);\n}\n\n\n\n\n\n\n\n\n\n\n <\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For my project I drew a stick figure that is mediating. There are shapes that come off from the hand. The color, opacity, number of sides, and size of the shape are all dependent on the position of the mouse. The face of the stick figure is also dependent on the mouse. sketch \/\/Nakshatra Menon &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/19\/dynamic-drawing-meditating-stick-figure\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Dynamic Drawing &#8211; Meditating Stick  Figure&#8221;<\/span><\/a><\/p>\n","protected":false},"author":746,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72509"}],"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\/746"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72509"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72509\/revisions"}],"predecessor-version":[{"id":72512,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72509\/revisions\/72512"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}