{"id":66043,"date":"2021-09-18T19:40:44","date_gmt":"2021-09-18T23:40:44","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66043"},"modified":"2021-09-18T19:40:44","modified_gmt":"2021-09-18T23:40:44","slug":"project-03-dynamic-drawing-groovy","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-03-dynamic-drawing-groovy\/","title":{"rendered":"Project-03: Dynamic Drawing, &#8220;groovy&#8221;"},"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\" data-width=\"600\" data-height=\"450\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-139.js\">kstargio03proj<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-139.js\" class=\"wp-block-file__button\" download>Download<\/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 thickness = 20;\t\t\/\/ &lt;-- value for weight of image parts (element: size)\nvar r = 0;\t\t\t\t\/\/ &lt;-- value for rotation angle (element: angle)\nvar p = -40;\t\t\t\/\/ &lt;-- value for disco ball placement (element: position)\nvar b = 0;\t\t\t\t\/\/ &lt;-- value for brightness (element: color)\n\nfunction setup() {\n    createCanvas(600, 450);\n    rectMode(CENTER);\n}\n\nfunction draw() {\n    background(0);\n\t\tstroke(0);\n\t\tfill(100);\n\trect(width\/4, p-75, 5, 200);\n\trect(3*width\/4, p-75, 5, 200);\n\tif (int(b)==b) {\t\t\/\/ color variation for disco ball\n\t\tfill(162+b);\n\t} else {\n\t\tfill(162);\n\t}\n\/\/disco ball:\n    ellipse(width\/4, p, 80, 80);\n    line(width\/4, p-40, width\/4, p+40);\n    line(width\/4-5, p-40, width\/4-5, p+40);\n    line(width\/4-10, p-40, width\/4-10, p+40);\n    line(width\/4-15, p-40, width\/4-15, p+40);\n    line(width\/4-20, p-40, width\/4-20, p+40);\n    line(width\/4-25, p-40, width\/4-25, p+40);\n    line(width\/4-30, p-40, width\/4-30, p+40);\n    line(width\/4-35, p-40, width\/4-35, p+40);\n    line(width\/4-40, p-40, width\/4-40, p+40);\n    line(width\/4+5, p-40, width\/4+5, p+40);\n    line(width\/4+10, p-40, width\/4+10, p+40);\n    line(width\/4+15, p-40, width\/4+15, p+40);\n    line(width\/4+20, p-40, width\/4+20, p+40);\n    line(width\/4+25, p-40, width\/4+25, p+40);\n    line(width\/4+30, p-40, width\/4+30, p+40);\n    line(width\/4+35, p-40, width\/4+35, p+40);\n    line(width\/4+40, p-40, width\/4+40, p+40);\n    line(width\/4-40, p, width\/4+40, p);\n    line(width\/4-40, p-5, width\/4+40, p-5);\n    line(width\/4-40, p-10, width\/4+40, p-10);\n    line(width\/4-40, p-15, width\/4+40, p-15);\n    line(width\/4-40, p-20, width\/4+40, p-20);\n    line(width\/4-40, p-25, width\/4+40, p-25);\n    line(width\/4-40, p-30, width\/4+40, p-30);\n    line(width\/4-40, p-35, width\/4+40, p-35);\n    line(width\/4-40, p-40, width\/4+40, p-40);\n    line(width\/4-40, p+5, width\/4+40, p+5);\n    line(width\/4-40, p+10, width\/4+40, p+10);\n    line(width\/4-40, p+15, width\/4+40, p+15);\n    line(width\/4-40, p+20, width\/4+40, p+20);\n    line(width\/4-40, p+25, width\/4+40, p+25);\n    line(width\/4-40, p+30, width\/4+40, p+30);\n    line(width\/4-40, p+35, width\/4+40, p+35);\n    line(width\/4-40, p+40, width\/4+40, p+40);\n    \/\/second disco ball:\n\tellipse(3*width\/4, p, 80, 80);\n    line(3*width\/4, p-40, 3*width\/4, p+40);\n    line(3*width\/4-5, p-40, 3*width\/4-5, p+40);\n    line(3*width\/4-10, p-40, 3*width\/4-10, p+40);\n    line(3*width\/4-15, p-40, 3*width\/4-15, p+40);\n    line(3*width\/4-20, p-40, 3*width\/4-20, p+40);\n    line(3*width\/4-25, p-40, 3*width\/4-25, p+40);\n    line(3*width\/4-30, p-40, 3*width\/4-30, p+40);\n    line(3*width\/4-35, p-40, 3*width\/4-35, p+40);\n    line(3*width\/4-40, p-40, 3*width\/4-40, p+40);\n    line(3*width\/4+5, p-40, 3*width\/4+5, p+40);\n    line(3*width\/4+10, p-40, 3*width\/4+10, p+40);\n    line(3*width\/4+15, p-40, 3*width\/4+15, p+40);\n    line(3*width\/4+20, p-40, 3*width\/4+20, p+40);\n    line(3*width\/4+25, p-40, 3*width\/4+25, p+40);\n    line(3*width\/4+30, p-40, 3*width\/4+30, p+40);\n    line(3*width\/4+35, p-40, 3*width\/4+35, p+40);\n    line(3*width\/4+40, p-40, 3*width\/4+40, p+40);\n    line(3*width\/4-40, p, 3*width\/4+40, p);\n    line(3*width\/4-40, p-5, 3*width\/4+40, p-5);\n    line(3*width\/4-40, p-10, 3*width\/4+40, p-10);\n    line(3*width\/4-40, p-15, 3*width\/4+40, p-15);\n    line(3*width\/4-40, p-20, 3*width\/4+40, p-20);\n    line(3*width\/4-40, p-25, 3*width\/4+40, p-25);\n    line(3*width\/4-40, p-30, 3*width\/4+40, p-30);\n    line(3*width\/4-40, p-35, 3*width\/4+40, p-35);\n    line(3*width\/4-40, p-40, 3*width\/4+40, p-40);\n    line(3*width\/4-40, p+5, 3*width\/4+40, p+5);\n    line(3*width\/4-40, p+10, 3*width\/4+40, p+10);\n    line(3*width\/4-40, p+15, 3*width\/4+40, p+15);\n    line(3*width\/4-40, p+20, 3*width\/4+40, p+20);\n    line(3*width\/4-40, p+25, 3*width\/4+40, p+25);\n    line(3*width\/4-40, p+30, 3*width\/4+40, p+30);\n    line(3*width\/4-40, p+35, 3*width\/4+40, p+35);\n    line(3*width\/4-40, p+40, 3*width\/4+40, p+40);\n    translate(width\/2, height\/3);\n    rotate(radians(-r));\n\/\/BODY of image:\n        noStroke();\n    \tfill(255);\n    triangle(-7, -thickness\/2+1, 7, -thickness\/2+1, 0, -50);\t\/\/neck\n    ellipse(0, -60, 60+thickness\/2, 60+thickness\/2);\t\t\/\/ head\n    \tfill(200+b, 100-b, 50+b);\t\t\/\/ variable used for color change\n    rect(0, 0, width\/4, thickness);\t\t\/\/ shoulders\n    if (constrain(mouseX, width\/10, 2*width\/10) == mouseX ||\t\/\/dancing motion! for body\n      constrain(mouseX, 3*width\/10, 4*width\/10) == mouseX || \n      constrain(mouseX, 5*width\/10, 6*width\/10) == mouseX || \n      constrain(mouseX, 7*width\/10, 8*width\/10) == mouseX || \n      constrain(mouseX, 9*width\/10, width) == mouseX) {\n\t    quad(-thickness,0, thickness,0, width\/8+5, height\/3, -width\/8+5, height\/3);\t\t\/\/ body\n    } else {\n\t\tquad(-thickness,0, thickness,0, width\/8-5, height\/3, -width\/8-5, height\/3);\t\t\/\/ body\n    }\t\n\t\tfill(255);\n    quad(-width\/8+1,thickness\/2, -width\/8+1,-thickness\/2,  -width\/16,-thickness+70, -width\/16,+70);  \/\/ left arm   \n    if (mouseX &lt; width\/2 & mouseX > width\/4 || mouseX > 3*width\/4) {\n\t    quad(width\/8-1,thickness\/2, width\/8-1,-thickness\/2,  0,-thickness+75, 0,75); \/\/right arm\n\t} else {    \n\t    quad(width\/8-1,thickness\/2, width\/8-1,-thickness\/2,  width\/4-1,-thickness-50, width\/4-1,-50);    \/\/disco baby! \t\n    }\t\n    quad(-10,height\/3-1, -10-thickness,height\/3-1, -20-thickness,height\/3+50, -20,height\/3+50);\t\/\/left leg\n    quad(10,height\/3-1, 10+thickness,height\/3-1, 20+thickness,height\/3+50, 20,height\/3+50);\t\t\/\/ right leg \n    \tfill(100);\n    triangle(-20-thickness,height\/3+50, -20,height\/3+50, -30-thickness, height\/3+65);\t\/\/left shoe\n    triangle(20+thickness,height\/3+50, 20,height\/3+50, 30+thickness, height\/3+65);\t\t\/\/ right shoe \n    \tnoFill();\n    \tstroke(0);\n    arc(0, -60, 30+thickness\/2, 30+thickness\/2, 0, PI);\t\t\/\/ smile\n    arc(-10, -70, 15, 15, PI, 0);\t\t\/\/eye\n    arc(10, -70, 15, 15, PI, 0);\t\t\/\/eye\n\n\/\/rotation limits:\n    if ((mouseX - width\/2)\/10 &lt;= -20) {\n\t    r = -20;\n\t} else if ((mouseX - width\/2)\/10 &gt;= 20) {\n\t\tr = 20;\n\t} else {\n\t\tr = (mouseX - width\/2)\/10;\n\t}\n\t\n    if (mouseY\/10 &lt;= 10) {\n\t    thickness = 10;\n\t} else if (mouseY\/10 &gt;= 35) {\n\t\tthickness = 35;\n\t} else {\n        thickness = (mouseY)\/10;\n\t}\n\/\/color change:\n    b = r*5;\n\/\/disco drop:\n    if (-mouseY + 300 &lt;= -40) {\n\t    p = -40;\n\t} else if (-mouseY + 300 &gt;= 100) {\n\t\tp = 100;\n\t} else {\n        p = - mouseY + 300;\n    }\n\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>When I read the requirements for this assignment, I kept thinking about watching the shapes &lsquo;dance&rsquo; around on the screen, which inspired the image I created. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>kstargio03projDownload var thickness = 20; \/\/ &lt;&#8211; value for weight of image parts (element: size) var r = 0; \/\/ &lt;&#8211; value for rotation angle (element: angle) var p = -40; \/\/ &lt;&#8211; value for disco ball placement (element: position) var b = 0; \/\/ &lt;&#8211; value for brightness (element: color) function setup() { createCanvas(600, &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-03-dynamic-drawing-groovy\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-03: Dynamic Drawing, &#8220;groovy&#8221;&#8221;<\/span><\/a><\/p>\n","protected":false},"author":673,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66043"}],"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\/673"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66043"}],"version-history":[{"count":7,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66043\/revisions"}],"predecessor-version":[{"id":66057,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66043\/revisions\/66057"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}