{"id":72086,"date":"2022-09-17T19:15:52","date_gmt":"2022-09-17T23:15:52","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72086"},"modified":"2022-09-17T19:15:52","modified_gmt":"2022-09-17T23:15:52","slug":"project-03-dynamic-drawing-srauch","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-srauch\/","title":{"rendered":"Project 03 &#8211; Dynamic Drawing &#8211; srauch"},"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>Here is my interactive picture! As you move your mouse left to right, it gets dark outside and the moon comes up, and as you move your mouse up and down, the plant grows and its leaves open up.<\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-278.js\" data-width=\"450\" data-height=\"600\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"450\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Sam Rauch \/ srauch \/ section B\n\/\/This code creates an interactive picture of a plant with a window behind it. As you move\n\/\/the mouse up and down, it gets darker and lighter outside. As you move the mouse side to\n\/\/side, the plant grows bigger and smaller. \n\nvar windowTransparent \/\/alpha for transparency of blue window, ie how light outside\nvar moonY = 300; \/\/y position of moon\nvar moonview = 0; \/\/alpha for transparency of moon\nvar potCenterX; \/\/x center of pot\nvar potCenterY; \/\/y center of pot\nvar bluefade = 0; \/\/amount of blue added to colors as it gets darker outside\nvar colorfade = 0; \/\/amount of color subtracted to colors as it gets darker outside\nvar plantTipY; \/\/y tip of plant\nvar stemweight = 10;\nvar leafSizeX = 50; \/\/width of leaf\nvar leafSizeY = 25; \/\/height of leaf\nvar leftRotate; \/\/rotates left-side leaves\nvar rightRotate; \/\/rotates right-side leaves\n\nvar width;\nvar height;\n\nfunction setup() {\n    createCanvas(450, 600);\n    background(220);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n\n    width = 450;\n    height = 600;\n    windowTransparent = 255;\n    potCenterX = 200; \n    potCenterY = 500; \n    plantTipY = potCenterY; \/\/start the tip of the plant in the center of the pot\n\n    leftRotate = 270;\n    rightRotate = 90;\n\n}\n\n\/\/draws an ellipse where the first two parameters are the ellipse's left tip\nfunction lefttipellipse(tipX, tipY, wide, tall) {\n    ellipseMode(CORNER);\n    ellipse(tipX, tipY-tall\/2, wide, tall);\n    ellipseMode(CENTER);\n}\n\n\/\/draws an ellipse where the first two parameters are the ellipse's right tip\nfunction righttipellipse(tipX, tipY, wide, tall) {\n    ellipseMode(CORNER);\n    ellipse(tipX-wide, tipY-tall\/2, wide, tall);\n    ellipseMode(CENTER);\n}\n\nfunction draw() {\n\n    background(230-colorfade*1.5, 230-colorfade*1.5, 120+bluefade);\n\n    \/\/window\n    fill(240-colorfade, 240-colorfade, 230+bluefade);\n    noStroke();\n    rect(100, 0, 350, 450);\n\n    \/\/dark blue rect\n    fill(26, 32, 128);\n    rect(125, 0, 325, 425);\n\n    \/\/moon\n    noStroke();\n    fill(250, 250, 240, moonview); \/\/moon white\n    ellipse(300, moonY, 80);\n    fill(26, 32, 128); \/\/dark blue circle to make it a crescent\n    ellipse(290, moonY-10, 70);\n\n    \/\/light blue sky color\n    fill(185, 240, 250, windowTransparent);\n    rect(125, 0, 325, 425);\n\n    \/\/table\n    fill(110-colorfade, 60-colorfade, 37+bluefade); \/\/brown\n    rect(0, height-50, width, 50);\n    \/\/fill(100, 50, 27); \/\/darker brown\n\n    \/\/plant stem\n    stroke(74-colorfade, 150-colorfade, 74+bluefade); \/\/green\n    strokeWeight(stemweight);\n    strokeCap(ROUND);\n    line(potCenterX, potCenterY, potCenterX, plantTipY);\n    noStroke();\n\n    \/\/ the y coordinate of a point half the distance up the stem\n    var yspot1 = potCenterY-(dist(potCenterX, potCenterY, potCenterX, plantTipY)\/2);\n\n    \/\/ y coordinate of a point 3\/4 the distance up the stem\n    var yspot2 = potCenterY-(dist(potCenterX, potCenterY, potCenterX, plantTipY)*(3\/4));\n\n    \/\/ y coordinate of a point at the top of the stem\n    var yspot3 = potCenterY-(dist(potCenterX, potCenterY, potCenterX, plantTipY));\n\n    \/\/drawing them leaves at set points up the stem\n\n    fill(90-colorfade*2, 180-colorfade*2, 90+bluefade); \/\/leaf green\n\n    \/\/bottom right\n    push();\n    translate(potCenterX, yspot1);\n    rotate(leftRotate);\n    lefttipellipse(0, 0, leafSizeX, leafSizeY);\n    pop();\n\n    \/\/bottom left\n    push();\n    translate(potCenterX, yspot1);\n    rotate(rightRotate);\n    righttipellipse(0, 0, leafSizeX, leafSizeY);\n    pop();\n\n    \/\/middle right\n    push();\n    translate(potCenterX, yspot2);\n    rotate(leftRotate);\n    lefttipellipse(0, 0, leafSizeX*(7\/8), leafSizeY*(7\/8));\n    pop();\n\n    \/\/middle left\n    push();\n    translate(potCenterX, yspot2);\n    rotate(rightRotate);\n    righttipellipse(0, 0, leafSizeX*(7\/8), leafSizeY*(7\/8));\n    pop();\n\n    \/\/top right\n    push();\n    translate(potCenterX, yspot3);\n    rotate(leftRotate);\n    lefttipellipse(0, 0, leafSizeX*(2\/3), leafSizeY*(2\/3));\n    pop();\n\n    \/\/top left\n    push();\n    translate(potCenterX, yspot3);\n    rotate(rightRotate);\n    righttipellipse(0, 0, leafSizeX*(2\/3), leafSizeY*(2\/3));\n    pop();\n\n    \/\/pot\n    fill(230-colorfade, 140-colorfade, 83+bluefade); \/\/salmon\n    rectMode(CENTER);\n    rect(potCenterX, potCenterY, 120, 150);\n    triangle(potCenterX-60, potCenterY-75, potCenterX-60,\n        potCenterY+75, potCenterX-80, potCenterY-75);\n    triangle(potCenterX+60, potCenterY-75, potCenterX+60,\n        potCenterY+75, potCenterX+80, potCenterY-75);\n    fill(240-colorfade, 150-colorfade, 93+bluefade);\n    rect(potCenterX, potCenterY-90, 170, 60);\n    rectMode(CORNER);\n\n    \/\/as move mouse left to right, the sky gets darker and colors fade to bluer shade\n    windowTransparent = map(mouseX, width, 0, 0, 255);\n    bluefade = map(mouseX, width, 0, 0, 40, true);\n    colorfade = map(mouseX, 0, width, 0, 40, true);\n\n    \/\/as move mouse left to right, moon comes up\n    moonY = map(mouseX, 0, width, 375, 100, true);\n    moonview = map(mouseX, 0, 450, 0, 255);\n\n    \/\/as move mouse up and down, plant grows\n    plantTipY = map (mouseY, height, 0, potCenterY, 230); \/\/gets taller\n    stemweight = map (mouseY, height, 0, 5, 25); \/\/stem gets thicker\n    leafSizeX = map (mouseY, height, 0, 50, 150); \/\/leaves get longer\n    leafSizeY = map (mouseY, height, 0, 30, leafSizeX\/3); \/\/leaves get taller\n    leftRotate = radians(map(mouseY, height, 0, 270, 340)); \/\/right leaves open up\n    rightRotate = radians(map(mouseY, height, 0, 90, 20)); \/\/left leaves open up\n    \/\/plant pot\n\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Here is my interactive picture! As you move your mouse left to right, it gets dark outside and the moon comes up, and as you move your mouse up and down, the plant grows and its leaves open up. sketch \/\/Sam Rauch \/ srauch \/ section B \/\/This code creates an interactive picture of a &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/project-03-dynamic-drawing-srauch\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 03 &#8211; Dynamic Drawing &#8211; srauch&#8221;<\/span><\/a><\/p>\n","protected":false},"author":754,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72086"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/754"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72086"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72086\/revisions"}],"predecessor-version":[{"id":72090,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72086\/revisions\/72090"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}