{"id":72273,"date":"2022-09-24T23:49:28","date_gmt":"2022-09-25T03:49:28","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72273"},"modified":"2022-09-24T23:49:28","modified_gmt":"2022-09-25T03:49:28","slug":"project-3-dynamic-drawing-7","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/24\/project-3-dynamic-drawing-7\/","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\" data-width=\"600\" data-height=\"450\" id=\"wp-block-file--media-09ea0400-ecd5-4499-ae2a-500e7d1c0bf2\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-377.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-377.js\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-09ea0400-ecd5-4499-ae2a-500e7d1c0bf2\"><\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/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\">\/\/Ilyas Khan\r\n\/\/Section D\r\n\/\/this program focuses on the y axis with minimal to no change in the x\r\n\r\nlet yChange = 0; \/\/the rate of change for most of the shape dimensions in this program.\r\nfunction setup() {\r\n    createCanvas(600, 450);\r\n    background(0);\r\n}\r\nfunction draw() {\r\n    yChange = mouseY\/50 \/\/the rate of change for most of the shape dimensions in this program.\r\n    background(0);\r\n\r\n    fill(255, 231, 179);\r\n    stroke(240, 203, 158);\r\n    quad(300,175\/yChange,220,150,300,130,380,150); \/\/top\r\n    \/\/dome (made of ellipses to appear dome-like from a distance)\r\n    fill(119, 199, 195); \r\n    stroke(240, 176, 0)\r\n    strokeWeight(0.1);\r\n    ellipse(300,150,100,25);\r\n    ellipse(300,148,100,25);\r\n    ellipse(300,146,100,25);\r\n    ellipse(300,144,96,24);\r\n    ellipse(300,142,96,24);\r\n    ellipse(300,140,92,23);\r\n    ellipse(300,138,92,23);\r\n    ellipse(300,136,84,22);\r\n    ellipse(300,134,84,22);\r\n    ellipse(300,132,74,21);\r\n    ellipse(300,130,74,21);\r\n    ellipse(300,128,62,18);\r\n    ellipse(300,126,62,16);\r\n    ellipse(300,124,46,14);\r\n    ellipse(300,122,36,12);\r\n    ellipse(300,120,26,10);\r\n    ellipse(300,118,16,8);\r\n    fill(255, 231, 179);\r\n    stroke(240, 203, 158);\r\n    quad(220,150,300,175\/yChange,300,300\/yChange,220,275\/yChange); \/\/left side\r\n    quad(300,300\/yChange,300,175\/yChange,380,150,380,275\/yChange); \/\/right side\r\n    \r\n    if (mouseY &lt; 50) { \/\/the top view of the cube\r\n        scaleY = (20-mouseY)\/5; \/\/\"zoom factor\" for zooming in on the cube\r\n        if (scaleY &lt; 1) {\r\n            scaleY = 1;\r\n        }\r\n        background(0);\r\n        translate(300,175); \/\/translation to the center of the cube for \"zooming\"\r\n        newY = 175;\r\n        scale(scaleY);\r\n        quad(0,0,-80,-25,0,-45,80,-25); \/\/top\r\n        quad(-80,-25,0,0,0,125,-80,100); \/\/left side \r\n        quad(0,125,0,0,80,-25,80,100); \/\/right side\r\n        \/\/dome (composed of ellipses to appear dome-like from a distance)\r\n        fill(119+(mouseY),199+(mouseY),195+(mouseY)); \r\n        stroke(240, 176, 0)\r\n        strokeWeight(0.1);\r\n        ellipse(0,150-newY,100,25);\r\n        ellipse(0,148-newY,100,25);\r\n        ellipse(0,146-newY,100,25);\r\n        ellipse(0,144-newY,96,24);\r\n        ellipse(0,142-newY,96,24);\r\n        ellipse(0,140-newY,92,23);\r\n        ellipse(0,138-newY,92,23);\r\n        ellipse(0,136-newY,84,22);\r\n        ellipse(0,134-newY,84,22);\r\n        ellipse(0,132-newY,74,21);\r\n        ellipse(0,130-newY,74,21);\r\n        ellipse(0,128-newY,62,18);\r\n        ellipse(0,126-newY,62,16);\r\n        ellipse(0,124-newY,46,14);\r\n        ellipse(0,122-newY,36,12);\r\n        ellipse(0,120-newY,26,10);\r\n        ellipse(0,118-newY,16,8);\r\n    }\r\n    if(mouseY &gt;= 91){  \/\/the beginning of the interior cube view\r\n        background(mouseY-91*(mouseY\/91)+(mouseX\/10),mouseY-27*(mouseY\/91)+(mouseX\/10),mouseY-38*(mouseY\/91)+(mouseX\/10)); \/\/a background that changes color\r\n        quad(300,175\/(91\/50),220,150,300,300\/(91\/50)+(mouseY-91),380,150); \/\/bottom\r\n        quad(220,150-(mouseY-91),300,175\/(91\/50)-(mouseY-91),300,300\/yChange-(yChange*10),220,275\/(91\/50)); \/\/left side\r\n        quad(300,300\/yChange-(yChange*10),300,175\/(91\/50)-(mouseY-91),380,150-(mouseY-91),380,275\/(91\/50)); \/\/right side\r\n        \/\/pillar\r\n        fill(mouseY-100);\r\n        stroke(240, 176, 0)\r\n        beginShape();\r\n        vertex(270,140-(yChange*10));\r\n        vertex(285,150-(yChange*10));\r\n        vertex(315,150-(yChange*10));\r\n        vertex(330,140-(yChange*10));\r\n        vertex(315,130-(yChange*10));\r\n        vertex(285,130-(yChange*10));\r\n        endShape(CLOSE);\r\n        quad(270,140,285,150,285,150-(yChange*10),270,140-(yChange*10));\r\n        quad(315,150,330,140,330,140-(yChange*10),315,150-(yChange*10));\r\n        noStroke();\r\n        quad(285,150-(yChange*10),315,150-(yChange*10),315,150,285,150);\r\n        if(mouseY &gt;= 124){ \/\/the filling out of the interior cube view\r\n            background(mouseY-91*(mouseY\/91)+(mouseX\/10),mouseY-27*(mouseY\/91)+(mouseX\/10),mouseY-38*(mouseY\/91)+(mouseX\/10));\r\n            fill(255, 231, 179);\r\n            stroke(240, 203, 158);\r\n            quad(220,150-(mouseY-91),300,175\/(91\/50)-(mouseY-91),300,300\/(91\/50),220,275\/(91\/50)); \/\/left side\r\n            quad(300,300\/(91\/50),300,175\/(91\/50)-(mouseY-91),380,150-(mouseY-91),380,275\/(91\/50)); \/\/right side\r\n            quad(300,175\/(91\/50),220,150,300,300\/(91\/50)+(mouseY-91),380,150); \/\/bottom\r\n            \/\/pillar\r\n            fill(mouseY-100);\r\n            stroke(240, 176, 0)\r\n            beginShape();\r\n            vertex(270,140-(mouseY-91));\r\n            vertex(285,150-(mouseY-91));\r\n            vertex(315,150-(mouseY-91));\r\n            vertex(330,140-(mouseY-91));\r\n            vertex(315,130-(mouseY-91));\r\n            vertex(285,130-(mouseY-91));\r\n            endShape(CLOSE);\r\n            quad(270,140,285,150,285,150-(mouseY-91),270,140-(mouseY-91));\r\n            quad(315,150,330,140,330,140-(mouseY-91),315,150-(mouseY-91));\r\n            noStroke();\r\n            quad(285,150-(mouseY-91),315,150-(mouseY-91),315,150,285,150);\r\n            if (mouseY &gt;= 185){ \/\/the zooming part of the inner cube view\r\n                background(mouseY-91*(mouseY\/91)+(mouseX\/10),mouseY-27*(mouseY\/91)+(mouseX\/10),mouseY-38*(mouseY\/91)+(mouseX\/10));\r\n                scaleY = -1*(185-mouseY)\/8; \/\/the \"zoom\" factor for the zoom in on the cube\r\n                if (scaleY &lt; 1) {\r\n                    scaleY = 1;\r\n                }\r\n                fill(255, 231, 179);\r\n                stroke(240, 203, 158);\r\n                translate(300,175\/(91\/50)); \/\/translates to the center of the cube for \"zooming\"\r\n                scale(scaleY); \r\n                quad(-80,150-(185-91)-175\/(91\/50),0,175\/(91\/50)-(185-91)-175\/(91\/50),0,300\/(91\/50)-175\/(91\/50),-80,275\/(91\/50)-175\/(91\/50)); \/\/left side\r\n                quad(0,300\/(91\/50)-175\/(91\/50),0,175\/(91\/50)-(185-91)-175\/(91\/50),80,150-(185-91)-175\/(91\/50),80,275\/(91\/50)-175\/(91\/50)); \/\/right side\r\n                quad(0,175\/(91\/50)-175\/(91\/50),-80,150-175\/(91\/50),0,300\/(91\/50)+(185-91)-175\/(91\/50),80,150-175\/(91\/50)); \/\/bottom\r\n                \/\/pillar\r\n                fill(mouseY-100);\r\n                stroke(240, 176, 0)\r\n                beginShape();\r\n                vertex(-30,140-(mouseY-91)-175\/(91\/50));\r\n                vertex(-15,150-(mouseY-91)-175\/(91\/50));\r\n                vertex(15,150-(mouseY-91)-175\/(91\/50));\r\n                vertex(30,140-(mouseY-91)-175\/(91\/50));\r\n                vertex(15,130-(mouseY-91)-175\/(91\/50));\r\n                vertex(-15,130-(mouseY-91)-175\/(91\/50));\r\n                endShape(CLOSE);\r\n                quad(-30,140-175\/(91\/50),-15,150-175\/(91\/50),-15,150-(mouseY-91)-175\/(91\/50),-30,140-(mouseY-91)-175\/(91\/50));\r\n                quad(15,150-175\/(91\/50),30,140-175\/(91\/50),30,140-(mouseY-91)-175\/(91\/50),15,150-(mouseY-91)-175\/(91\/50));\r\n                noStroke();\r\n                quad(-15,150-(mouseY-91)-175\/(91\/50),15,150-(mouseY-91)-175\/(91\/50),15,150-175\/(91\/50),-15,150-175\/(91\/50));\r\n            }\r\n            \r\n        }\r\n    }\r\n    print(mouseY);\r\n\r\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":725,"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\/f2022\/wp-json\/wp\/v2\/posts\/72273"}],"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\/725"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72273"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72273\/revisions"}],"predecessor-version":[{"id":72977,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72273\/revisions\/72977"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}