{"id":66725,"date":"2021-09-29T23:39:18","date_gmt":"2021-09-30T03:39:18","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66725"},"modified":"2021-09-29T23:39:18","modified_gmt":"2021-09-30T03:39:18","slug":"project-05-wallpaper","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/29\/project-05-wallpaper\/","title":{"rendered":"Project 05: Wallpaper"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Alana Wu\n\/\/ID: alanawu\n\/\/Project 05: Wallpaper\n\n\nfunction setup()\n{\n createCanvas(400, 400);\n background(255);\n}\n\nfunction draw()\n{\n\n bigGrid (.25, 0);\n bigGrid(.125, 50);\n bigGrid(.0625, 75);\n noLoop();\n}\n\n\/\/blue, dark red, yellow color scheme\n\/*function bigGrid (s, dist)\n{\n for (var x = 0; x < 4; x ++)\n {\n for (var y = 0; y < 4; y ++)\n { \n push();\n translate (x*100 + dist, y*100 + dist);\n scale (s);\n grid (40, 0, 13, 78, 255, 100, 10); \/\/blue \n grid (15, 300, 100, 0, 255, 255, 30); \/\/violet\n grid (2, 150, 76, 25, 255, 120, 5); \/\/red\n grid(10, 200, 255, 0, 0, 100, 10); \/\/mustard\n grid (10, 300, 255, 236, 0, 150, 15); \/\/yellow\n pop();\n }\n }\n}*\/\n\n\/\/green, blue, yellow, red color scheme\nfunction bigGrid (s, dist)\n{\n for (var x = 0; x < 4; x ++)\n {\n for (var y = 0; y < 4; y ++)\n { \n push();\n translate (x*100 + dist, y*100 + dist);\n scale (s);\n grid (40, 0, 0, 255, 50, 150, 10); \/\/green \n grid (15, 300, 255, 0, 0, 255, 30); \/\/red\n grid (10, 150, 0, 0, 55, 180, 15); \/\/blue\n grid(10, 200, 255, 255, -200, 100, 10); \/\/yellow\n grid (10, 300, 180, -100, -100, 150, 15); \/\/dark red\n pop();\n }\n }\n}\n\n\/\/pastels color scheme\n\/*function bigGrid (s, dist)\n{\n for (var x = 0; x < 4; x ++)\n {\n for (var y = 0; y < 4; y ++)\n { \n noStroke();\n push();\n translate (x*100 + dist, y*100 + dist);\n scale (s);\n grid (40, 0, 150, 255, 255, 100, 10); \/\/pale blue \n grid (30, 300, 150, 150, 255, 255, 30); \/\/lavender\n grid (2, 150, 255, 80, 255, 120, 5); \/\/pale pink\n grid(10, 200, 255, 200, 200, 100, 10); \/\/pink\n grid (10, 300, 250, 250, 190, 150, 15); \/\/pale yellow\n pop();\n }\n }\n}*\/\n\n\nfunction grid (rectW, start, red, green, blue, opacity, dist)\n{\n for (x = start; x <= width - rectW; x += dist)\n {\n var count = 0;\n fill (red, green, blue, opacity);\n rect (x, 0, rectW, height);\n rect (0, x, width\/2, rectW);\n red += 10;\n blue += 20;\n green += 10;\n }\n\n}\n<\/code><\/pre><\/p>\n\n\n\n<p>To generate ideas for this project, I experimented with building different functions that played with a variety of geometric shapes. I eventually decided to use a function that interwove and layered rectangles in different colors and opacities. <\/p>\n\n\n\n<p>After building the initial function, I played around with a lot of different color schemes and opacities, a few of which are shown below (scroll down past the code). For the future, I think it’d be interesting to try and create optical illusions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-29-at-11.28.53-PM-1.png\" alt=\"\" class=\"wp-image-66733\" width=\"610\" height=\"610\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-29-at-11.28.53-PM-1-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-29-at-11.28.53-PM-1-150x150.png 150w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><div class=\"wp-block-image\"><figure class=\"alignleft\"><img loading=\"lazy\" width=\"806\" height=\"806\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-29-at-11.30.11-PM.png\" alt=\"\" class=\"wp-image-66734\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-29-at-11.30.11-PM.png 806w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-29-at-11.30.11-PM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-29-at-11.30.11-PM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-29-at-11.30.11-PM-768x768.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>To generate ideas for this project, I experimented with building different functions that played with a variety of geometric shapes. I eventually decided to use a function that interwove and layered rectangles in different colors and opacities. After building the initial function, I played around with a lot of different color schemes and opacities, a … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/29\/project-05-wallpaper\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 05: Wallpaper”<\/span><\/a><\/p>\n","protected":false},"author":677,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[104,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66725"}],"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\/677"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66725"}],"version-history":[{"count":7,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66725\/revisions"}],"predecessor-version":[{"id":66737,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66725\/revisions\/66737"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}