{"id":66174,"date":"2021-09-19T02:52:32","date_gmt":"2021-09-19T06:52:32","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66174"},"modified":"2021-09-19T03:00:38","modified_gmt":"2021-09-19T07:00:38","slug":"project-3-dynamic-drawing-12","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/19\/project-3-dynamic-drawing-12\/","title":{"rendered":"Project 3: 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><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-152.js\">sketch<\/a><a class=\"wp-block-file__button\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-152.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=\"\" height=\"\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var r = 161;\nvar g = 242;\nvar b = 228;\nvar eyesX = 5;\nvar eyesY =7;\ns\nfunction setup() {\n    createCanvas(600, 450);\n    background(r, g, b);\n    fill(255);\n    text(\"ribbit\", 550, 430);\n    \n}\n\nfunction draw() {\n\/\/setup for color of the water\n    background(r, g, b, 100);\n    noFill();\n    stroke(255);\n    strokeWeight(0.5);\n    ellipse(mouseX, mouseY, 50, 50);\n    if(mouseX&lt;200){\n        background(17, 38, 92, 100);\n    } else if (mouseX&lt;400){\n        background(26, 147, 139, 100);\n    }\n\n\/\/this draws water ripples\nnoFill();\nstroke(255);\n\/\/left most ripple\nellipse(5, height\/2, 200*mouseX*0.01, 200*mouseX*0.01);\nellipse(5, height\/2, 200*mouseX*0.004, 200*mouseX*0.004);\n\/\/bottom ripple\nellipse(300, 360, 200*mouseX*0.01, 200*mouseX*0.01);\nellipse(300, 360, 200*mouseX*0.004, 200*mouseX*0.004);\n\n\/\/right ripple\nellipse(580, 160, 200*mouseX*0.01, 200*mouseX*0.01);\nellipse(580, 160, 200*mouseX*0.004, 200*mouseX*0.004);\n\n\n\n\n\/\/draws lilypads above the water\n    noStroke();\n    fill(112, 221, 85, 255);\n    if(mouseX&lt;200){\n        fill(21, 57, 42, 255);\n    } else if (mouseX&lt;400) {\n        fill(25, 131, 36, 255);\n    }\n    ellipse(70, 90, 150, 95);\n    ellipse(190, 50, 190, 110);\n    ellipse(300, 280, 165, 110);\n    ellipse(80, 400, 170, 140);\n    ellipse(550, 90, 230, 120);\n    ellipse(430, 135, 160, 95);\n    ellipse(530, 430, 220, 130);\n\n\n\n\/\/draws shadow of lilypads\n    fill(112, 221, 85, 70);\n    if(mouseX&lt;200){\n        fill(21, 57, 42, 70);\n    } else if (mouseX&lt;400) {\n        fill(25, 131, 36, 70);\n    }\n    ellipse(60, 90, 130, 95);\n    ellipse(180, 50, 190, 110);\n    ellipse(290, 280, 165, 110);\n    ellipse(70, 400, 170, 140);\n    ellipse(540, 90, 230, 120);\n    ellipse(420, 135, 160, 95);\n    ellipse(520, 430, 220, 130);\n\n\/\/draws frog figure\n    fill(63, 190, 31, 255);\n    if(mouseX&lt;200){\n        fill(11, 129, 80);\n    } else if(mouseX&lt;400){\n        fill(9, 101, 18);\n    }\n    rect(40, 60, 50, 50);\n    rect(40, 50, 20, 20);\n    rect(70, 50, 20, 20);\n    rect(77, 89, 21, 21);\n    rect(30, 89, 21, 21);\n\/\/frog tummy\n    fill(119, 202, 137);\n    rect(51, 85, 28, 25);\n\/\/frog eyes\n    fill(255);\n    rect(45, 52, 10, 10);\n    rect(75, 52, 10, 10);\n\n\/\/frog pupils\n    fill(0);\n    rect(47, 55, eyesX, eyesY);\n    rect(77, 55, eyesX, eyesY);\n    rect(50, 70, 29, 2);\n    rect(39, 96, 1, 14);\n    rect(89, 96, 1, 14);\n\n\/\/draws frog under water\nfill(63, 190, 31, 255);\n    if(mouseX&lt;200){\n        fill(11, 129, 80);\n    } else if(mouseX&lt;400){\n        fill(9, 101, 18);\n    }\n    rect(40+mouseX*0.5, 190, 60, 20);\n    rect(40+mouseX*0.5, 180, 20, 20);\n    rect(80+mouseX*0.5, 180, 20, 20);\n\n\/\/frog eyes\nfill(255);\nrect(45+mouseX*0.5, 182, 10, 10);\nrect(85+mouseX*0.5, 182, 10, 10);\n\n\/\/frog pupils\nfill(0);\nrect(47+mouseX*0.5, 185, eyesX, eyesY);\nrect(87+mouseX*0.5, 185, eyesX, eyesY);\nrect(55+mouseX*0.5, 200, 29, 2);\n}\n<\/code><\/pre><\/div>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload var r = 161; var g = 242; var b = 228; var eyesX = 5; var eyesY =7; s function setup() { createCanvas(600, 450); background(r, g, b); fill(255); text(&#8220;ribbit&#8221;, 550, 430); } function draw() { \/\/setup for color of the water background(r, g, b, 100); noFill(); stroke(255); strokeWeight(0.5); ellipse(mouseX, mouseY, 50, 50); if(mouseX&lt;200){ &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/19\/project-3-dynamic-drawing-12\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 3: Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":678,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66174"}],"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\/678"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66174"}],"version-history":[{"count":7,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66174\/revisions"}],"predecessor-version":[{"id":66185,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66174\/revisions\/66185"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}