{"id":72064,"date":"2022-09-17T17:23:06","date_gmt":"2022-09-17T21:23:06","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72064"},"modified":"2022-09-17T20:56:10","modified_gmt":"2022-09-18T00:56:10","slug":"anabelles-project-03","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/anabelles-project-03\/","title":{"rendered":"anabelle&#8217;s project 03"},"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 project! Try making the sky change from sundown to midnight, see the moon change phases, and the stars glitter! You can try to pet the cat as well &lt;3<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-277.js\" data-width=\"480\" 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=\"480\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ kayla anabelle lee (kaylalee)\n\/\/ section c\n\/\/ project 03 ^^\n\nmoonX = 200; \nmoonY = 150;\noutline = 55;\ninline = 50;\n\nlet direction = 0.8;\nlet speed = 1;\nlet starDiam = 20; \n\nlet redValue = 231;\nlet greenValue = 157;\nlet blueValue = 193;\n\nlet skyScraperX = 300;\nlet skyScraperY = 100;\n\nlet happyMouthX = 60;\nlet happyMouthY = 450;\n\nlet triangleWindowX = 225;\nlet triangleWindowY = 185;\nlet catDirection = 1;\nlet catAngle = 1;\nlet moonSpin = 0;\n\nfunction setup () {\n    createCanvas(450, 600);\n}\n\nfunction draw() {\n    print(catAngle);\n    background(redValue, greenValue, blueValue);\n\n    \/\/ constrain the rbg values to the 2 sky colors i want\n    redValue = constrain(redValue, 46, 231);\n    greenValue = constrain(greenValue, 26, 157);\n    blueValue = constrain(blueValue, 71, 193);\n\n    \/\/ turns dusk when mouse on left, turns night when mouse on right\n    if (mouseX &gt; width\/2) { \n        redValue -= 3;\n        blueValue -= 3;\n        greenValue -= 3;\n\n    } if (mouseX &lt; width\/2) {\n        redValue += 3;\n        blueValue += 3;\n        greenValue += 3;\n    }\n\n    \/\/ moon cycle\n    if (mouseX &lt;= 100) {\n        newMoon(35, 290, 30, 30);\n    } if (100 &lt; mouseX & mouseX <= 200) {\n        crescentMoon(115, 110, 30, 30);\n    } if (200 &lt; mouseX & mouseX <= 300) {\n        gibbousMoon(190, 50, 30, 30);\n    } if (300 &lt; mouseX) {\n        fullMoon(300, 50, 30, 30);\n    }\n\n    \/\/ triangular building\n    stroke(164, 96, 175);\n    strokeWeight(1);\n    fill(119, 127, 199);\n    fill(230, 209, 242);\n    quad(95, 600, 220, 170, 390, 170, 390, 600);\n\n    \/\/ triangle building windows\n    \/\/ im sorry i couldnt use a forLoop for these as well -- whenever i tried, the program wouldnt load\n\n    triangleWindow(triangleWindowX,triangleWindowY);\n    triangleWindow(triangleWindowX - 5, triangleWindowY + 20);\n    triangleWindow(triangleWindowX - 10, triangleWindowY + 40);\n    triangleWindow(triangleWindowX - 15, triangleWindowY + 60);\n    triangleWindow(triangleWindowX - 20, triangleWindowY + 80);\n    triangleWindow(triangleWindowX - 25, triangleWindowY + 100);\n    triangleWindow(triangleWindowX - 30, triangleWindowY + 120);\n    triangleWindow(triangleWindowX - 35, triangleWindowY + 140);\n    triangleWindow(triangleWindowX - 40, triangleWindowY + 160);\n    triangleWindow(triangleWindowX - 45, triangleWindowY + 180);\n    triangleWindow(triangleWindowX - 50, triangleWindowY + 200);\n    triangleWindow(triangleWindowX - 55, triangleWindowY + 220);\n    triangleWindow(triangleWindowX - 60, triangleWindowY + 240);\n    triangleWindow(triangleWindowX - 65, triangleWindowY + 260);\n\n    \/\/ skyscraper\n    fill(217, 196, 236);\n    stroke(164, 96, 175);\n    strokeWeight(1);\n\n    rect(300, 100, 150, 500);\n    rect(350, 45, 100, 55);\n    triangle(350, 40, 450, 0, 530, 40);\n\n    \/\/ skyscraper windows\n    for(skyScraperX = 300; skyScraperX &lt; 440; skyScraperX += 40) {\n        for(skyScraperY = 100; skyScraperY &lt; 650; skyScraperY +=40) {\n            push(); \n            translate(20, 20);\n            skyWindow();\n            pop();\n        }\n    }\n\n    \/\/ happymouth building\n    stroke(164, 96, 175);\n    strokeWeight(1);\n    fill(204, 183, 229);\n    rect(40, 430, 195, 170);\n    rect(50, 380, 170, 40);\n\n    textSize(25);\n    fill(244, 244, 211);\n    stroke(119, 127, 199);\n    text(\"happyMouth()\", 60, 405);\n\n    \/\/ happymouth windows\n    for(happyMouthX = 40; happyMouthX &lt; 200; happyMouthX += 60) {\n        for(happyMouthY = 420; happyMouthY &lt; 600; happyMouthY += 30) {\n            push(); \n            translate(15, 30);\n            happyWindow();\n            pop(); \n        }\n    }\n\n    \/\/ if mouse on happymouth sign, stars pulse AND crescent moon rotates\n    if (dist(135, 390, mouseX, mouseY) &lt; 30) {\n        starrySky();\n        starDiam += direction * speed;\n\n        if (starDiam &gt; 30) {\n            direction = -direction;\n            starDiam = 30;\n\n        } if (starDiam &lt; 0) {\n            direction = -direction;\n            starDiam = 0;  \n        } \n\n    } else starrySky();\n\n    \/\/ rooftop building\n    fill(177, 156, 216);\n    stroke(64, 96, 175);\n    quad(185, 550, 270, 420, 430, 420, 410, 550);\n    fill(190, 169, 223);\n    rect(185, 550, 225, 50);\n    quad(410, 600, 410, 550, 430, 420, 430, 600);\n\n    \/\/ cat perch and cat\n    fill(117, 80, 166);\n    rect(0, 180, 150, 60);\n\n    cat(130, 120, 10, 10)\n    triangle(43, 69, 39, 78, 45, 78);\n    triangle(74, 82, 64, 84, 72, 93);\n\n    push();\n    rotate(radians(catAngle*catDirection));\n    push();\n    scale(0.7);\n    rotate(radians(-20));\n    catTail(-50, 250, catAngle*catDirection); \n    pop();\n    pop();\n\n    \/\/ cat tail animation\n    if (dist(60, 50, mouseX, mouseY) &lt; 50) { \n        push();\n        rotate(radians(catAngle*catDirection));\n        push();\n        scale(0.7);\n        rotate(radians(-20));\n        catTail(-50, 250, catAngle*catDirection); \n        pop();\n        pop();\n    \n        catAngle -= 1;\n        if (catAngle &lt; -10) {\n            catAngle = -10;\n        }\n\n        } if (dist(40, 120, mouseX, mouseY) &lt; 50) {\n            catAngle += 1;\n            if (catAngle &gt; 10){\n                catAngle = 10;\n            }\n   \n        }\n    }\n\n\/\/ my catalogue of functions \n\nfunction cat(x, y, w, h) { \n    fill(50);\n    noStroke();\n    ellipse(x\/2, y\/2, 50, 50);\n    ellipse(x\/2 + 17, y\/2 + 5, 25, 28);\n    ellipse(x\/2 - 20, y\/2 + 65, 70, 100);\n    arc(x\/2 - 20, y\/2 + 120, 90, 70, radians(180), radians(0));\n\n    triangle(x\/2 + 5, y\/2 - 15, x\/2 + 20, y\/2 - 15, x\/2 + 13, y\/2 - 35);\n    triangle(x\/2 - 5, y\/2 - 15, x\/2 - 20, y\/2 - 15, x\/2 - 13, y\/2 - 35);\n\n    bezier(x\/2 - 20, y\/2 + 5, x\/2 - 30, y\/2 + 30, x\/2 - 30, y\/2 + 20, x\/2 - 40, y\/2 + 25);\n    bezier(x\/2 + 10, y\/2 + 20, x\/2 + 5, y\/2 + 30, x\/2 + 5, y\/2 + 40, x\/2 + 13, y\/2 + 55);\n}\n\nfunction catTail(x, y, catAngle) {\n    noStroke();\n    beginShape();\n    curveVertex(x, y);\n    curveVertex(x, y);\n    curveVertex(x - 5, y + 40);\n    curveVertex(x + 20, y + 100);\n    curveVertex(x + 80, y + 140);\n    curveVertex(x + 150, y + 150);\n    curveVertex(x + 160, y + 140);\n    curveVertex(x + 145, y + 120);\n    curveVertex(x + 70, y + 100);\n    curveVertex(x + 40, y + 50)\n    curveVertex(x + 30, y);\n    curveVertex(x + 30, y);\n    endShape();\n}\n\nfunction triangleWindow(triangleWindowX, triangleWindowY) {\n    fill(244, 244, 211);\n    quad(triangleWindowX, triangleWindowY, triangleWindowX -5, triangleWindowY + 15, triangleWindowX + 200, triangleWindowY + 15, triangleWindowX + 200, triangleWindowY);\n}\n\nfunction happyWindow() {\n    rect(happyMouthX, happyMouthY, 50, 15);\n}\n\nfunction skyWindow() {\n    fill(244, 244, 211);\n    rect(skyScraperX, skyScraperY, 20, 20);\n} \n\nfunction newMoon(newX, newY, w, h) {\n    outline = 55;\n    inline = 50;\n\n    stroke(255);\n    fill(redValue, greenValue, blueValue);\n    ellipse(newX, newY, outline, outline);\n    ellipse(newX, newY, inline, inline);\n}\n   \nfunction crescentMoon(crescentX, crescentY, w, h) {\n    outline = 55;\n    inline = 50;\n\n    fill(255);\n    ellipse(crescentX, crescentY, inline, inline);\n    fill(redValue, greenValue, blueValue);\n    noStroke();\n    rect(115, 80, outline\/2, outline)\n    stroke(255);\n    noFill();\n    ellipse(crescentX, crescentY, outline, outline);\n    fill(redValue, greenValue, blueValue);\n    noStroke();\n    ellipse(crescentX, crescentY, inline\/2, inline);\n}\n   \nfunction gibbousMoon(gibbousX, gibbousY, w, h) {\n    outline = 55;\n    inline = 50;\n\n    noStroke();\n    fill(255);\n    ellipse(gibbousX, gibbousY, inline, inline);\n    fill(redValue, greenValue, blueValue);\n    noStroke();\n    fill(redValue, greenValue, blueValue);\n    rect(190, 24, outline\/2, outline);\n    stroke(255);\n    noFill();\/\/Outline\n    ellipse(gibbousX, gibbousY, outline, outline);\n    fill(255)\n    arc(gibbousX, gibbousY, inline\/2, inline, PI\/2, -PI\/2);\n}\n\nfunction fullMoon (fullX, fullY, w, h) {\n    outline = 55;\n    inline = 50;\n\n    noFill();\n    stroke(255);\n    ellipse(fullX, fullY, outline, outline);\n    fill(255);\n    ellipse(fullX, fullY, inline, inline);\n}\n\nfunction starrySky() {\n    noStroke();\n    fill(253, 253, 150);\n\n    circle(140, 30, starDiam\/5);\n    circle(275, 136, starDiam\/7);\n    circle(61, 303, starDiam\/4);\n    circle(167, 38, starDiam\/6);\n    circle(10, 34, starDiam\/7);\n    circle(163, 147, starDiam\/3);\n    circle(292, 121, starDiam\/8);\n    circle(154, 328, starDiam\/5);\n    circle(360, 15, starDiam\/2);\n    circle(19, 386, starDiam\/6);\n}\n\n\n\/\/ ALL moon functions were made by brantschen at https:\/\/editor.p5js.org\/brantschen\/sketches\/bGH-klhrY\n\/\/ cat mechanics inspired by jiatong li\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This is my project! Try making the sky change from sundown to midnight, see the moon change phases, and the stars glitter! You can try to pet the cat as well &lt;3 sketch \/\/ kayla anabelle lee (kaylalee) \/\/ section c \/\/ project 03 ^^ moonX = 200; moonY = 150; outline = 55; inline &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/17\/anabelles-project-03\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;anabelle&#8217;s project 03&#8221;<\/span><\/a><\/p>\n","protected":false},"author":734,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,57,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72064"}],"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\/734"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72064"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72064\/revisions"}],"predecessor-version":[{"id":72139,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72064\/revisions\/72139"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72064"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}