{"id":67711,"date":"2021-09-18T18:03:20","date_gmt":"2021-09-18T22:03:20","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67711"},"modified":"2021-10-16T18:03:59","modified_gmt":"2021-10-16T22:03:59","slug":"project-03-dynamic-drawing-13","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-03-dynamic-drawing-13\/","title":{"rendered":"Project-03-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><p><a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"450\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-96.js\">sketch<\/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 angle = 0; \/\/angle of rotation that will be determined by mouseX\nvar meow = 0; \/\/canvas size that will be filled with cats\n\nfunction setup() {\n    createCanvas(600, 450);\n}\n\nfunction draw() {\n    background(220);\n    \/\/begin of rotate function\n    fill(\"green\");\n    push();\n    angle = angle + mouseX*0.01\n    if (mouseX &lt; 300){\n       strokeWeight(1);\n       rotate(radians(angle));\n       rect(mouseX,mouseY,600 - mouseX, 450- mouseY);\n    } else{\n        rotate(radians(angle));\n        strokeWeight(2);\n        circle(mouseX,mouseY,mouseX+50,mouseY+70);\n    }\n    pop(); \n    \/\/end of rotate\n\n  \n    \/\/begin of cat eye\n    strokeWeight(3);\n    line(mouseX,mouseY,mouseX+mouseX*0.5,mouseY-mouseY*0.5);\n    line(mouseX,mouseY,mouseX-mouseX*0.5,mouseY-mouseY*0.5);\n    line(mouseX,mouseY,mouseX,mouseY-mouseY*0.9);\n\n    strokeWeight(1);\n    if (mouseX &lt; 300){\n        fill(\"magenta\");\n        ellipse(mouseX,mouseY,mouseY,mouseX);\n    }else if (mouseX &lt; 450 & mouseX > 300) {\n        fill(\"blue\");\n        ellipse(mouseX,mouseY,mouseY,mouseX);\n    }else {\n        fill(\"orange\")\n        ellipse(mouseX,mouseY,mouseY,mouseX);\n    }\n    fill(0);\n    ellipse(mouseX,mouseY,mouseX*0.2,mouseY*0.2);\n    \/\/end of cat eye\n\n\n\n    \/\/begin of cat\n    meow = 0 + mouseX*0.7\n    for (var x = 5; x &lt; meow; x = x+50){\n        for (var y = 5; y &lt; meow; y = y+50){\n            if(mouseY &lt; 300){\n                push();\n                translate(x, y);            \n                drawCat();\n                pop();\n            }\n        }   \n    }   \n    \/\/end of cat\n\n\/\/bottom rectangle and text\nfill(\"brown\");\nrect(0,400,600,50);\n\ntext(\"Welcome to Meow World\",425,390);\n}\n\nfunction drawCat() {\n    if (mouseX&gt;500){\n        fill(random(0,255),random(0,255),random(0,255));\n    }else{\n        fill(\"yellow\")\n    }\n    triangle(7, 0, 0, 7, 14, 7);\n    triangle(21,0,28,7,14,7);\n    rect(0,7,28,25);\n    fill(0);\n    ellipse(10,10,4,7);\n    ellipse(18,10,4,7);\n    ellipse(14,19,6,4);\n    line(-3,11,8,15);\n    line(8,15,-3,21);\n    line(21,15,38,11);\n    line(21,15,38,21);\n}\n\n<\/code><\/pre><\/p><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var angle = 0; \/\/angle of rotation that will be determined by mouseX var meow = 0; \/\/canvas size that will be filled with cats function setup() { createCanvas(600, 450); } function draw() { background(220); \/\/begin of rotate function fill(&#8220;green&#8221;); push(); angle = angle + mouseX*0.01 if (mouseX &lt; 300){ strokeWeight(1); rotate(radians(angle)); rect(mouseX,mouseY,600 &#8211; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/18\/project-03-dynamic-drawing-13\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-03-Dynamic-Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":672,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67711"}],"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\/672"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67711"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67711\/revisions"}],"predecessor-version":[{"id":67713,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67711\/revisions\/67713"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}