{"id":66878,"date":"2021-10-02T17:52:09","date_gmt":"2021-10-02T21:52:09","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66878"},"modified":"2021-10-02T17:58:00","modified_gmt":"2021-10-02T21:58:00","slug":"project-5-wallpaper-8","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/02\/project-5-wallpaper-8\/","title":{"rendered":"Project 5: Wallpaper"},"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\"><\/div>\n\n\n\n<p><a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"540\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-9.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"600\" height=\"540\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">function setup() {\n    createCanvas(600, 540);\n}\n\nfunction draw() {\n    background(195, 230, 241);\n\n    \/\/steam\n    for (var yUp = 85; yUp &lt;= 500; yUp += 127) {\n        for (var xUp = 75; xUp &lt;= 600; xUp += 148) {\n            steam(xUp, yUp);\n        }\n}\n\n    \/\/pan\n    for (var yYah = 43; yYah &lt;= 450; yYah += 128) {\n        for (var xYah = 24; xYah &lt;= 580; xYah += 148) {\n            pan(xYah, yYah);\n        }\n    } \n\n    \/\/egg\n    for (var y = 80; y &lt;= 500; y += 128) {\n        for (var x = 47; x &lt;= 550; x += 148) {\n            egg(x, y);\n        }\n    }\n\n    \/\/handle\n    for (var yUp = 85; yUp &lt;= 500; yUp += 127) {\n        for (var xUp = 94; xUp &lt;= 600; xUp += 148) {\n            handle(xUp, yUp);\n        }\n}\n    \nfunction egg(x, y) {\n    \/\/whites\n    noStroke();\n    fill(\"white\")\n    circle(x + 3, y, 35)\n    circle(x + 8, y + 5, 35)\n    circle(x + 2, y + 7, 30)\n\n    \/\/shadow on whites\n    \/\/gray\n    noStroke();\n    fill(215, 215, 215)\n    circle(x + 11.5, y + 8.5, 17)\n    \/\/white\n    fill(\"white\")\n    circle(x + 8.5, y + 5.5, 21)\n\n    \/\/yolk shadow\n    fill(222, 181, 67)\n    circle(x - 2, y - 3, 13)\n\n    \/\/yolk\n    noStroke();\n    fill(237, 193, 72)\n    circle(x -3, y - 3, 11)\n\n    \/\/yolk highlight\n    noStroke();\n    fill(\"white\")\n    circle(x - 4, y - 5, 3)\n}\n\nfunction pan (x, y) {\n    \/\/outer\n    fill(161, 161, 161)\n    circle(x + 30, y + 40, 76.5)\n\n    \/\/inner\n    fill(0)\n    circle(x + 30, y + 40, 72)\n\n    \/\/most inner\n    fill(80, 80, 80)\n    circle(x + 30, y + 40, 54)\n}\n\nfunction handle(x, y) {\n    push();\n    \/\/translate(x,y)\n    rectMode(CENTER);\n    \/\/rotate(radians(40))\n    \/\/handle\n    fill(0)\n    rect(x + 26, y, 55, 13, 10)\n    \/\/connector\n    fill(196, 196, 196)\n    rect(x, y, 6, 18, 2)\n    pop();\n    \/\/hole\n    fill(195, 230, 241)\n    ellipse(x + 42, y, 10, 5)\n}\n}\n\nfunction steam(x, y) {\n    noStroke();\n    \/\/positive space\n    fill(245, 250);\n    ellipse(x + 5, y - 40, 35, 15)\n    ellipse(x - 5, y - 50, 35, 14)\n    ellipse(x - 3, y - 59, 30, 10)\n\n    \/\/negative space\n    fill(195, 230, 241)\n    ellipse(x - 3, y - 39, 28, 10)\n    ellipse(x + 6, y - 50.5, 28, 9)\n    ellipse(x - 13, y - 60, 28, 8)\n}<\/code><\/pre><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>This project was really fun. The hardest part was understanding what details should be added to make the wallpaper seem more dimensional and dynamic. The process was very additive in that I had to iterate a few times to see what was missing in the wallpaper compositionally.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"745\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-02-at-5.53.45-PM-1024x745.png\" alt=\"\" class=\"wp-image-66883\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-02-at-5.53.45-PM-1024x745.png 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-02-at-5.53.45-PM-300x218.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-02-at-5.53.45-PM-768x559.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-02-at-5.53.45-PM-1200x873.png 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-02-at-5.53.45-PM.png 1232w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"712\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-63-1024x712.png\" alt=\"\" class=\"wp-image-66884\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-63-1024x712.png 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-63-300x208.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-63-768x534.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-63-1536x1067.png 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-63-2048x1423.png 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Untitled_Artwork-63-1200x834.png 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This project was really fun. The hardest part was understanding what details should be added to make the wallpaper seem more dimensional and dynamic. The process was very additive in that I had to iterate a few times to see what was missing in the wallpaper compositionally.<\/p>\n","protected":false},"author":653,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[104,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66878"}],"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\/653"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66878"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66878\/revisions"}],"predecessor-version":[{"id":66885,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66878\/revisions\/66885"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}