{"id":66303,"date":"2021-09-20T20:56:37","date_gmt":"2021-09-21T00:56:37","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66303"},"modified":"2021-09-20T21:01:29","modified_gmt":"2021-09-21T01:01:29","slug":"project-03-dynamic-drawing-12","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/20\/project-03-dynamic-drawing-12\/","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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"300\" data-height=\"400\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-163.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-163.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=\"300\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\nvar angle;  \nvar rStart = 209; \nvar rSlope = -186\/400; \nvar bStart = 237;\nvar bSlope = -173\/400; \nvar gStart = 255;\nvar gSlope = -163\/400;\nvar oSlope = 235\/400; \n\nfunction setup() {\n    createCanvas(300, 400);\n    background(220);\n}\n\nfunction get_color(mouseY) { \/\/background color \n    if (mouseY &lt;= 400) {\n        var r = rStart + (mouseY*rSlope); \n        var g = bStart + (mouseY*bSlope); \n        var b = gStart + (mouseY*gSlope); \n        return [r, g, b];\n    }\n    else { \/\/if mouse exceeds bounds\n        return [23, 64, 92]; \/\/keep color same \n    }\n}\n\nfunction get_opacity(mouseY) { \/\/flower opacity\n    if (mouseY &lt;= 400) { \n        var opacity = 255 - (mouseY*oSlope);\n        return opacity; \n    }\n    else { \/\/if mouse exceeds bounds \n        return 20; \/\/keep opacity same\n    }\n}\n\nfunction get_grass(mouseX) { \/\/????\n    if (mouseX &lt;= 300) {\n        if (mouseX &lt;= 150) {\n            var grR = ((65\/150)*(mouseX) + 56);\n            return [grR, 121, 18];\n        }\n        else {\n            var grG = ((-37\/150)*(mouseX-150) + 121);\n            return [121, grG, 18];\n        }\n    }\n    else { \/\/if mouse exceeds bounds\n        return [121,84,18]; \/\/brown\n    }\n}\n\n\nfunction draw() {\n    var rgb = get_color(mouseY);\n    var opacity = get_opacity(mouseY);\n    var [gr,gg,gb] = get_grass(mouseX);\n    background(rgb[0], rgb[1], rgb[2]);\n\n\n    \/\/flower\n        noFill();\n            stroke(143, 167, 65, opacity);\n            strokeWeight(8)\n            bezier(135,225,180,230,190,300,158,380); \/\/leftstem\n            bezier(224,168,250,180,220,320,150,370); \/\/rightstem\n        noStroke();\n            fill(178, 123, 210, opacity); \/\/lightpurple\n                ellipse(130,210,30);\n                ellipse(150,220,30);\n                ellipse(143,243,30);\n                ellipse(120,235,30); \/\/end of flower left\n                ellipse(220,150,30);\n                ellipse(243,160,30);\n                ellipse(233,183,30);\n                ellipse(210,175,30); \/\/end of flower right\n            noStroke();\n            fill(223, 186, 244, opacity);\n            ellipse(224,168,15) \/\/topflowermiddle\n            fill(223, 186, 244, opacity);\n            ellipse(135,225,15); \/\/bottomflowermiddle\n\n    \/\/leaves \n        noStroke();\n        fill(143,167,65, opacity);\n        arc(175,280,190,190, 0, PI\/2, OPEN); \/\/rightleafright\n        fill(143,167,65, opacity);\n        arc(270,375,190,190, PI,-PI\/2, OPEN); \/\/rightleafleft\n        noStroke();\n        fill(143,167,65, opacity);\n        arc(79,375,190,190, -PI\/2, 0,OPEN); \/\/leftleafright\n        fill(143,167,65, opacity);\n        arc(174,280,190,190, PI\/2, PI, OPEN); \/\/leftleafleft\n\n    \/\/grass\n    dy = 0\n    if(mouseY &gt; 300){\n        dy = -30\n    }\n    noStroke();\n        fill(gr,gg,gb); \/\/greengrasscolor\n            triangle(0,dy+400,25,dy+400,0,dy+330); \/\/blades of grass from left to right\n            triangle(8,dy+400,35,dy+400,18,dy+290); \n            triangle(15,dy+400,30,dy+400,30,dy+305); \n            triangle(30,dy+400,50,dy+400,45,dy+305);\n            triangle(45,dy+400,75,dy+400,68,dy+320);\n            triangle(70,dy+400,100,dy+400,80,dy+330);\n            triangle(80,dy+400,110,dy+400,95,dy+320);\n            triangle(108,dy+400,135,dy+400,118,dy+300); \n            triangle(115,dy+400,130,dy+400,130,dy+315); \n            triangle(130,dy+400,150,dy+400,145,dy+315);\n            triangle(130,dy+400,150,dy+400,145,dy+305);\n            triangle(145,dy+400,175,dy+400,168,dy+320);\n            triangle(170,dy+400,200,dy+400,180,dy+330);\n            triangle(180,dy+400,210,dy+400,195,dy+320);\n            triangle(200,dy+400,225,dy+400,220,dy+320);\n            triangle(180,dy+400,200,dy+400,195,dy+305);\n            triangle(215,dy+400,245,dy+400,238,dy+320);\n            triangle(240,dy+400,270,dy+400,260,dy+310);\n            triangle(250,dy+400,275,dy+400,270,dy+315);\n            triangle(270,dy+400,290,dy+400,285,dy+325);\n            triangle(285,dy+400,300,dy+400,297,dy+310);\n            rect(0,dy+395,300,dy+100);\n                \n\n    fill(212, 220, 192);\n    noStroke();\n    textSize(12);\n    textAlign(CENTER);\n    text(\"ISAIAH 40:8\",262,393);\n\n    \/\/bible\n    rotate(angle - QUARTER_PI);\n    noStroke();\n    fill(75, 45, 20);\n    rect(35,40,150,90);\n    noStroke();\n    fill(255, 239, 226);\n    ellipse(125,49,35);\n    ellipse(95,49,35);\n    noFill();\n    strokeWeight(3);\n    stroke(255, 239, 226);\n    bezier(45,50,70,60,90,10,110,48); \/\/toplineleft\n    bezier(45,120,70,130,90,90,110,120); \/\/bottomlineleft\n    line(45,50,45,120);\n    line(175,50,175,120);\n    bezier(110,120,130,90,150,130,175,120); \/\/bottomlineright\n    bezier(110,48,130,10,150,60,175,50); \/\/toplineright\n    fill(255, 239, 226); \/\/biblefill\n    quad(45,51,45,107,175,107,175,51);\n    quad(45,120,45,105,100,105,55,120); \/\/bottomleftcorner\n    quad(175,120,175,105,120,105,165,120); \/\/bottomrightcorner\n    triangle(61,50,80,40,70,100); \/\/toplefttri\n    triangle(155,48,132,38,70,100); \/\/toprighttri\n    triangle(110,120,85,90,135,90); \/\/bottomtri\n    noStroke();\n    fill(224, 211, 184);\n    quad(110,40,110,122,120,110,120,32);\n    push();\n\n    \/\/biblerotate\n    if (mouseX &gt; 115 & mouseX < 205){\n        angle = mouseX * (1\/200);\n    }\n}\n\n<\/code><\/pre><\/div>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchDownload var angle; var rStart = 209; var rSlope = -186\/400; var bStart = 237; var bSlope = -173\/400; var gStart = 255; var gSlope = -163\/400; var oSlope = 235\/400; function setup() { createCanvas(300, 400); background(220); } function get_color(mouseY) { \/\/background color if (mouseY &lt;= 400) { var r = rStart + (mouseY*rSlope); var &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/20\/project-03-dynamic-drawing-12\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 03: Dynamic Drawing&#8221;<\/span><\/a><\/p>\n","protected":false},"author":646,"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\/66303"}],"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\/646"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66303"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66303\/revisions"}],"predecessor-version":[{"id":66306,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66303\/revisions\/66306"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}