{"id":66096,"date":"2021-09-18T22:01:15","date_gmt":"2021-09-19T02:01:15","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66096"},"modified":"2021-09-18T22:01:15","modified_gmt":"2021-09-19T02:01:15","slug":"project03-dynamic-drawing","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project03-dynamic-drawing\/","title":{"rendered":"Project03-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 class=\"wp-block-file\"><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-145.js\" data-width=\"600\" data-height=\"450\">sketch<\/a><a class=\"wp-block-file__button\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-145.js\" 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 R=255;\nvar G=153;\nvar B=203;\nvar x=380;\nvar y=280;\n\nfunction setup(){\n    createCanvas(600, 450);\n    background(0);\n}\n\nfunction draw() {\n    background(0);\n    stroke(0);\n    line(600,0,mouseX,mouseY);\n   \/\/change angle\n    var angle=mouseX;\n    push();\n    \/\/change origin\n    if(mouseY&gt;225){\n        translate(200,225);\n    }\n    else{translate(400,225);\n    }\n    rotate(radians(angle));\n    fill(R,G,B);\n    var x=mouseX;\n    var y=mouseY;\n    circle(x,y,200);\n    circle(x+30,y-160,50);\n    circle(x-160,y+30,70);\n    circle(x-140,y+50,30);\n    \/\/change color\n    if(mouseY&lt;150){\n        R=0,\n        G=255;\n        B=255;\n    }\n    else if(mouseY&gt;300){\n        R=255;\n        G=255;\n        B=102;\n    }\n    else{\n        R=255;\n        G=153;\n        B=203;\n    }\n    \/\/change scale\n    if(mouseX&lt;200){\n        scale(0.6);\n        fill(R,G,B);\n        circle(x,y,300);\n        circle(x+30,y-160,50);\n        circle(x-160,y+30,70);\n        circle(x-140,y+50,30);\n    }\n    else if(mouseX&gt;400){\n        scale(0.4);\n        fill(R,G,B);\n        circle(x,y,300);\n        circle(x+30,y-160,50);\n        circle(x-160,y+30,70);\n        circle(x-140,y+50,30);\n    }\n    else{\n        scale(0.2);\n        fill(R,G,B);\n        circle(x,y,300);\n        circle(x+30,y-160,50);\n        circle(x-160,y+30,70);\n        circle(x-140,y+50,30);\n    }\n    pop();\n\n}\n<\/code><\/pre><\/div>\n\n\n<p>When I first started this dynamic drawing, I have no idea what to do. Therefore, I simply drew 4 circles, and then changed their color, rotating position, scaling size, and rotating angle. I encountered several difficulties on making my drawing move by my logic, because I didn&rsquo;t fully understand how certain function work in computer logic. As I look at detailed instructions on these function, I made it work eventually, and I had a more comprehensive understanding of these functions.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload var R=255; var G=153; var B=203; var x=380; var y=280; function setup(){ createCanvas(600, 450); background(0); } function draw() { background(0); stroke(0); line(600,0,mouseX,mouseY); \/\/change angle var angle=mouseX; push(); \/\/change origin if(mouseY&gt;225){ translate(200,225); } else{translate(400,225); } rotate(radians(angle)); fill(R,G,B); var x=mouseX; var y=mouseY; circle(x,y,200); circle(x+30,y-160,50); circle(x-160,y+30,70); circle(x-140,y+50,30); \/\/change color if(mouseY&lt;150){ R=0, G=255; B=255; } else if(mouseY&gt;300){ R=255; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project03-dynamic-drawing\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project03-Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":676,"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\/66096"}],"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\/676"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66096"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66096\/revisions"}],"predecessor-version":[{"id":66100,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66096\/revisions\/66100"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}