{"id":72412,"date":"2022-09-19T02:22:46","date_gmt":"2022-09-19T06:22:46","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72412"},"modified":"2022-09-19T02:22:46","modified_gmt":"2022-09-19T06:22:46","slug":"project-03-dynamic-drawing-13","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/19\/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>This is my dynamic drawing of a cityscape with the fore, mid, and background each moving at a different pace as the mouse moves from left to right. The sun also rises and sets and the moon rises while the background changes color. The buildings also reverse in color as the background changes color<\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-314.js\" data-width=\"600\" data-height=\"450\">sketch<\/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\">\/\/Michael Li\n\/\/Section C \n\nfunction setup() {\n    createCanvas(600, 450);\n    rectMode(CENTER);\n   \n}\n\nvar diam = 50 \/\/ diameter for sun & moon\nvar opacity = 255 \/\/set opacity & grey value\nvar timer = 0 \/\/ for star blinking\n\nfunction draw() {\n\n    \/\/Background Change color\n\n    \/\/the opacity value is remapped so mouseX would return \n    \/\/0-255 by inputing canvas width\n    opacity = map(constrain(mouseX, 0, width), 0, width, 0, 255)\n    background(192, 215, 218)\n    background(4, 27, 46, opacity); \/\/revealing the second background color as mouse moves to the right\n    \n    fill(255, 255, 0);\n\n    \/\/ restrict mouseX within the canvas\n    \/\/remapping the mouseX value in different domains by inputing the canvas width\n\n    \/\/three different remapped values for each layer of the cityscape's translation\n    var mapX = map(constrain(mouseX, 0, width), 0, width, 0, width*2);\n    var mapX2 = map(constrain(mouseX, 0, width), 0, width, 200, width*2-200);\n    var mapX3 = map(constrain(mouseX, 0, width), 0, width, 400, width*2-400);\n\n    \/\/variables used to change the sun&moon sizes\n    var mapSunSizeX = map(constrain(mouseX, 0, width), 0, width, 0, 40);\n    var mapSunSizeY = map(constrain(mouseY, 0, height), 0, height, 0, 100);\n\n    var mapSun = map(constrain(mouseX, 0, width), 0, width, 180, 310);\n    var mapMoon = map(constrain(mouseX, 0, width), width\/2, width, 180, 270); \n    \/\/width\/2 so the moon appears halfway of the canvas\n\n    \/\/variables used to change the building heights\n    var bSizeY = map(constrain(mouseY, 0, height), 0, height, 0, 40);\n    var bSizeY2 = map(constrain(mouseY, 0, height), 0, height, 0, 20);\n    var bSizeY3 = map(constrain(mouseY, 0, height), 0, height, 0, 10);\n    fill(0)\n    \n\n    \/\/Sun\n    push() \/\/saves all the conditions set before\n\n    diam = 30 - mapSunSizeX +  mapSunSizeY \n    \/\/the sun size changes as mouse moves across the canvas\n    \n    strokeWeight(0);\n    translate(mapSun+diam\/4, height*1);\n    rotate(radians(mapSun));\n    \/\/the sun moves and rotates as the mouse moves \n\n    \/\/two different stages of the sun\n    \/\/the opacity decreases to reveal the other sun\n    fill(247, 240, 25); \/\/yellow\n    ellipse(width\/2, height\/2, diam, diam);\n\n    fill(243, 88, 22, constrain(map(opacity, 0, 125, 0, 80), 0, 80));\/\/orange glow\n    ellipse(width\/2, height\/2, diam*2, diam*2);\n\n    fill(243, 88, 22, opacity); \/\/orange\n    ellipse(width\/2, height\/2, diam, diam);\n\n    pop() \/\/return to previous set conditions\n\n    \/\/Moon\n    push()\n\n    noStroke();\n\n    translate(mapMoon+diam\/4, height*1);\n    rotate(radians(mapMoon));\n    \/\/the moon moves and rotates with the mouse\n\n    fill(255); \/\/white\n    ellipse(width\/2, height\/2, diam, diam); \/\/cirlce for moon\n\n    \/\/circle to block the moon to form a crescent \n    fill(151, 202, 240)\n    ellipse(width\/2+diam\/3, height\/2+diam\/3, diam, diam);\n    fill(4, 27, 46, opacity)\n    ellipse(width\/2+diam\/3, height\/2+diam\/3, diam, diam);\n    \n    pop()\n\n    \/\/clouds\n\n    push()\n\n    translate(mapSun+diam\/4, height*1);\n    \/\/clouds move with the sun, but only 1\/4 the distance traveled\n\n    \/\/ellipses to form the clouds\n    fill(255, 120);\n    strokeWeight(0);\n    ellipse (0, 0-height*9\/10, 200, 50);\n    ellipse (30, 0-height*8.5\/10, 200, 50);\n    pop()\n\n    \/\/Stars\n\n    push()\n\n    timer += 1 \/\/the timer ticks\n    if (timer%40 ==0){ \/\/every interval of 40 the stars blink once\n        if (opacity &gt;= 120){ \n        \/\/the stars only appear when the background is in trasition between two colors\n            for (var i = 0; i &lt;= 300; i++){\n                \/\/use variable i to count, and draws 300 stars in the range set\n                fill(255);\n                ellipse(random(0-width*3\/5, width*2.7-width*3\/5), \n                random(0-height, height*2), random(3, 8), random(3, 8));\n            }\n        }\n    }\n\n    pop()\n\n    \/\/Translate Layer 0\n    \/\/the last layer in the back\n\n    push()\n\n    opacity = map(constrain(mouseX, 0, width), 0, width, 30, 200);\n    \/\/remap the grey value to create a gradient of grey\n\n    fill(opacity);\n    translate(mapX, 0);\n    strokeWeight(0);\n    rectMode(CORNER); \/\/changes so the rectangles draw from the left corner\n\n    \/\/ground\n    rect(0-width*1.9, height*7\/8+ bSizeY, width*3, height\/5);\n    var bSize = map(constrain(mouseX, 0, width), 0, width, 20, 50);\n\n    \/\/buildings last layer\n    \/\/drawing each individual building with variious set heights and width\n    \/\/the height changes by the value of bSizeY\n    rect(0-width*2, height*3\/5 + bSizeY, 60, height);\n    rect(0-width*1.95, height*2\/5 + bSizeY, 75, height);\n\n    rect(0-width*1.75, height*2.5\/5 + bSizeY, 40, height);\n    rect(0-width*1.7, height*1.5\/5 + bSizeY, 60, height);\n    rect(0-width*1.6, height*1.8\/5 + bSizeY, 40, height);\n\n    rect(0-width*1.5, height*2\/5 + bSizeY, 40, height);\n\n    rect(0-width*1.4, height*1.5\/5 + bSizeY, 80, height);\n    rect(0-width*1.35, height*2\/5 + bSizeY, 50, height);\n\n    rect(0-width*1.35, height*2\/5 + bSizeY, 50, height);\n\n    rect(0-width*1.25, height*3\/5 + bSizeY, 50, height);\n    rect(0-width*1.2, height*2\/5 + bSizeY, 50, height);\n\n    rect(0-width*1.1, height*1\/5 + bSizeY, 50, height);\n    rect(0-width*1.05, height*3\/5 + bSizeY, 70, height);\n    rect(0-width*1.03, height*2\/5 + bSizeY, 40, height);\n\n    rect(0-width*0.8, height*1\/5 + bSizeY, 50, height);\n    rect(0-width*0.85, height*2.3\/5 + bSizeY, 70, height);\n    rect(0-width*0.7, height*2\/5 + bSizeY, 40, height);\n\n    rect(0-width*0.8, height*1\/5 + bSizeY, 50, height);\n    rect(0-width*0.85, height*2.3\/5 + bSizeY, 70, height);\n    rect(0-width*0.7, height*2\/5 + bSizeY, 40, height);\n\n    rect(0-width*0.6, height*1.5\/5 + bSizeY, 50, height);\n    rect(0-width*0.55, height*2.7\/5 + bSizeY, 70, height);\n    rect(0-width*0.44, height*1.5\/5 + bSizeY, 50, height);\n\n    rect(0-width*0.3, height*3\/5 + bSizeY, 50, height);\n    rect(0-width*0.22, height*2.5\/5 + bSizeY, 50, height);\n\n    rect(0-width*0.1, height*2.8\/5 + bSizeY, 50, height);\n\n    rect(0+width*0.02, height*2.3\/5 + bSizeY, 70, height);\n    rect(0+width*0.1, height*1.8\/5 + bSizeY, 60, height);\n    rect(0+width*0.15, height*3.2\/5 + bSizeY, 60, height);\n    pop();\n\n\n   \/\/Translate Layer 1\n   \/\/second layer of buildings\n   push()\n    opacity = map(constrain(mouseX, 0, width), 0, width, 60, 150);\n    \/\/grey value is remapped to have a smaller range than layer 0\n\n    fill(opacity)\n    translate(mapX2, 0)\n    strokeWeight(0);\n    rectMode(CORNER)\n\n    \/\/buildings second layer\n    \/\/drawing each individual building with height varing by bSizeY2\n    rect(0-width*1.9, height*11\/12 + bSizeY2, width*2.8, height\/5)\n\n    rect(0-width*1.7, height*1.8\/5 + bSizeY2, 100, height)\n\n    rect(0-width*1.5, height*3\/5 + bSizeY2, 80, height)\n    rect(0-width*1.4, height*3.2\/5 + bSizeY2, 40, height)\n\n    rect(0-width*1.3, height*3\/5 + bSizeY2, 80, height)\n    rect(0-width*1.25, height*2.2\/5 + bSizeY2, 60, height)\n\n    rect(0-width*1.12, height*2.2\/5 + bSizeY2, 80, height)\n    rect(0-width*1.05, height*3.2\/5 + bSizeY2, 60, height)\n\n    rect(0-width*0.8, height*2.2\/5 + bSizeY2, 80, height)\n    rect(0-width*0.75, height*3.2\/5 + bSizeY2, 60, height)\n\n    rect(0-width*0.6, height*3.2\/5 + bSizeY2, 80, height)\n    rect(0-width*0.5, height*2.2\/5 + bSizeY2, 60, height)\n\n    rect(0-width*0.2, height*3.3\/5 + bSizeY2, 80, height)\n    rect(0-width*0.1, height*4.2\/5 + bSizeY2, 60, height)\n    pop()\n\n\/\/Translate Layer 2\n\/\/front layer\n\n    push();\n\n    opacity = map(constrain(mouseX, 0, width), 0, width, 90, 100);\n    \/\/grey values are further remapped to be in a lesser raneg than layer 1\n    fill(opacity)\n    translate(mapX3, 0)\n    strokeWeight(0);\n    rectMode(CORNER);\n\n    \/\/buidlings front layer\n    \/\/drawing buildings with varied heights adjusted by bSizeY3\n    rect(0-width*1.35, height*17\/18 + bSizeY3, width*2.8, height\/5)\n\n    rect(0-width*1.35, height*3.2\/5 + bSizeY3, 100, height)\n\n    rect(0-width*1.1, height*2.8\/5 + bSizeY3, 100, height)\n\n    rect(0-width*1.0, height*4\/5 + bSizeY3, 80, height)\n    rect(0-width*0.9, height*4.2\/5 + bSizeY3, 40, height)\n\n    rect(0-width*0.85, height*4\/5 + bSizeY3, 80, height)\n    rect(0-width*0.8, height*3.2\/5 + bSizeY3, 60, height)\n\n    rect(0-width*0.6, height*2.9\/5 + bSizeY3, 50, height)\n    rect(0-width*0.55, height*3.8\/5 + bSizeY3, 60, height)\n\n    pop();\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This is my dynamic drawing of a cityscape with the fore, mid, and background each moving at a different pace as the mouse moves from left to right. The sun also rises and sets and the moon rises while the background changes color. The buildings also reverse in color as the background changes color sketch &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/19\/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":739,"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\/f2022\/wp-json\/wp\/v2\/posts\/72412"}],"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\/739"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72412"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72412\/revisions"}],"predecessor-version":[{"id":73163,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72412\/revisions\/73163"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}