{"id":66229,"date":"2021-09-19T18:25:35","date_gmt":"2021-09-19T22:25:35","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66229"},"modified":"2021-09-19T18:34:05","modified_gmt":"2021-09-19T22:34:05","slug":"project-3-dynamic-drawing-15","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/19\/project-3-dynamic-drawing-15\/","title":{"rendered":"Project 3: Dynamic Drawing"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Jacky Lococo\n\/\/jlococo\n\/\/Section C\nvar Rc = 255 \/\/ color variables for the moving cirlce, top rectagle, small circles\nvar Gc = 193\nvar Bc = 193\nvar angle = 0\nvar Rr = 0\nvar Gr = 60\nvar Br = 255\nvar colorChange = 1\nvar strokeOpacity = 255\n\nfunction setup() {\n createCanvas(600, 600);\n}\n\nfunction draw() {\n background(255);\n strokeWeight(0);\n fill(Rr, Gr, Br);\n ellipse(160, 160, 200, 200);\n fill(255, 239, 239);\n rect(0, 300, 600, 300); \/\/pink rectangle\n\n strokeWeight(0);\n fill(Rc, Gc, Bc, 100);\n ellipse(mouseX + 10, mouseY + 10, min (mouseX, 200), min (mouseX,200));\n \/\/shadow of ellipse that follows mouse\n\n fill(255, 239, 239);\n ellipse(mouseX, mouseY, min (mouseX, 200), min (mouseX,200)); \n \/\/pale pink circle behind main ellipse\n\n fill(Rc, Gc, Bc, 200);\n ellipse(mouseX, mouseY, min (mouseX, 200), min (mouseX,200)); \n \/\/ellipse that follows the mouse and grows smaller at x=200\n\n fill(Rr, Gr, Br, 200);\n rect(0, 0, 600, 300)\n strokeWeight(0);\n fill(255, 239, 239);\n ellipse(150, 150, 200, 200);\n fill(Rc, Gc, Bc, 200);\n\n push(); \/\/for top rotating tiny circles\n translate(150, 150)\n rotate(radians(angle));\n ellipse(50, 50, 50, 50);\n angle += 1\n rotate(radians(angle));\n ellipse(50, 50, 50, 50);\n angle += 0.5\n rotate(radians(angle));\n ellipse(50, 50, 50, 50);\n angle +=0 \/\/ on circle slower at 0 speed\n if(mouseY > 300){\n angle += 1\n }\n pop();\n\n push(); \/\/ for mouse following rotating cirlces\n translate(mouseX, mouseY);\n rotate(radians(angle));\n ellipse(50, 50, 50, 50);\n angle += 1\n rotate(radians(angle));\n ellipse(50, 50, 50, 50);\n angle += 0.5\n rotate(radians(angle));\n ellipse(50, 50, 50, 50);\n angle += 0\n if(mouseY > 300){\n angle += 1\n }\n pop()\n\n strokeOpacity = mouseX - 150\n \/\/line that moves - starting from bottom of canvas\n strokeWeight(7)\n stroke(255, 255, 255, strokeOpacity);\n line(100, 0, 100, 600)\n\n \/\/line that moves - starting from top of canvas\n strokeWeight(7) \n stroke(255, 255, 255, strokeOpacity);\n line(140, 0, 140, 600)\n\n\n \/\/colors alternating with each press if the mouse\n if (colorChange == 1){\n Rc = 255\n Gc = 193\n Bc = 193\n Rr = 0\n Gr = 60\n Br = 255\n }\n if (colorChange == 2){\n Rc = 0\n Gc = 60\n Bc = 193\n Rr = 255\n Gr = 193\n Br = 193\n }\n \/\/text that follows the mouse\n strokeWeight(0);\n fill(255);\n textSize(15)\n text('p r e s s', mouseX, mouseY);\n} \n\n\/\/mouse pressed function that switches the colors\nfunction mousePressed () {\n colorChange = colorChange + 1\n if (colorChange == 3)\n colorChange = 1\n print(colorChange.toString);\n}\n\n\n\n<\/code><\/pre><\/p>\n\n\n\n<p>This project was a bit challenging at first, but I think once I had a clear sketch and idea for it, the tasks and process became a lot more manageable.<\/p>\n\n\n\n<p>Sketch:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"985\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Untitled_Artwork-2-1024x985.jpg\" alt=\"\" class=\"wp-image-66237\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Untitled_Artwork-2-1024x985.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Untitled_Artwork-2-300x288.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Untitled_Artwork-2-768x739.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Untitled_Artwork-2-1536x1477.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Untitled_Artwork-2-1200x1154.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Untitled_Artwork-2.jpg 1668w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Jacky Lococo \/\/jlococo \/\/Section C var Rc = 255 \/\/ color variables for the moving cirlce, top rectagle, small circles var Gc = 193 var Bc = 193 var angle = 0 var Rr = 0 var Gr = 60 var Br = 255 var colorChange = 1 var strokeOpacity = 255 function setup() … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/19\/project-3-dynamic-drawing-15\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 3: Dynamic Drawing”<\/span><\/a><\/p>\n","protected":false},"author":655,"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\/f2021\/wp-json\/wp\/v2\/posts\/66229"}],"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\/655"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66229"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66229\/revisions"}],"predecessor-version":[{"id":66238,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66229\/revisions\/66238"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}