{"id":66933,"date":"2021-10-02T23:00:17","date_gmt":"2021-10-03T03:00:17","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66933"},"modified":"2021-10-02T23:00:17","modified_gmt":"2021-10-03T03:00:17","slug":"project-05-wallpaper-6","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/02\/project-05-wallpaper-6\/","title":{"rendered":"Project-05: Wallpaper"},"content":{"rendered":"\n

My Work<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/cbtruong;\n\/\/Section B;\n\nfunction setup() {\n createCanvas(600, 600);\n \/\/cream background color that goes with the wallpaper-esque idea;\n background(248, 241, 196);\n text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n background(248, 241, 196);\n \/\/two for loops to draw repeated versions of pattern 1;\n \/\/inner loop is the x coordinate while the outer is the y coordinate;\n \/\/both i and j are initialized as width\/height \/4 to allow for centering;\n for (var j = height\/4; j < height*2; j += 300){\n for (var i = width\/4; i < width*2; i += 300){\n pattern1(i, j);\n }\n }\n \/\/two for loops to draw repeated versions of pattern 2;\n \/\/inner loop is the x coordinate while the outer is the y coordinate;\n \/\/both l and m are intialized as width\/height \/2 to allow for centering;\n \/\/between pattern 1;\n for (var m = height\/2; m < height*2; m += 300){\n for (var l = width\/2; l < width*2; l += 300){\n pattern2(l, m);\n }\n\n }\n}\n\n\nfunction pattern1 (x, y) {\n \/\/scaled it down by 0.5 by encasing;\n \/\/the entire pattern in a push\/pop;\n push();\n\n scale(0.5);\n strokeWeight(1);\n noFill();\n \/\/connecting lines;\n line(x, y, x - 50, y);\n line(x, y, x + 50, y);\n curve(x + 50, y, x - 50, y, x - 50, y - 50, x + 50 , y);\n curve(x - 50, y, x + 50, y, x + 50, y + 50, x - 50, y);\n \/\/white circle;\n fill(255);\n circle(x, y, 15);\n \/\/muted blue color rectangle;\n fill(92, 143, 191);\n rect(x - 50, y - 70, 20, 40);\n \/\/muted red color rectangle;\n fill(182, 30, 40);\n rect(x + 30, y + 30, 20, 40);\n \/\/reddish lines;\n fill(196, 59, 62);\n strokeWeight(4);\n line(x - 40, y - 10, x - 5, y - 40);\n line(x - 35, y - 5, x, y - 35);\n line(x + 5, y + 40, x + 40, y + 10);\n line(x, y + 35, x + 35, y + 5);\n \/\/muted green triangles;\n strokeWeight(1);\n fill(62, 167, 32);\n triangle(x + 45, y + 50, x + 25, y + 70, x - 15, y + 60);\n triangle(x - 45, y - 50, x - 25, y - 70, x + 15, y - 60);\n \/\/second set of connecting lines;\n line(x, y, y - 40, y + 40);\n line(x, y, y + 40, y - 40);\n noFill();\n curve(x, y, x - 40, y + 40, x - 50, y, x, y);\n curve(x, y, x + 40, y - 40, x + 50, y, x, y);\n \/\/yellow ellipse tilted using push\/pop;\n push();\n translate(x - 30, y + 50);\n rotate(radians(45));\n fill(217, 227, 10);\n ellipse(0, 0, 20, 50);\n pop();\n \/\/orange ellipse tilted using push\/pop;\n push();\n translate(x + 30, y - 50);\n rotate(radians(45));\n fill(226, 160, 29);\n ellipse(0, 0, 20, 50);\n pop();\n\n pop();\n noLoop();\n}\n\nfunction pattern2 (x, y){\n \/\/scaled it down by 0.5 as well;\n \/\/also encased it in a push\/pop to allow scaling;\n push();\n scale(0.5);\n\n \/\/draws aquamarine rectangle;\n fill(69, 166, 159);\n rectMode(CENTER);\n rect(x, y, 30, 30);\n \/\/draws connecting lines;\n line(x - 20, y + 15, x - 35, y + 35);\n line(x + 20, y - 15, x + 35, y - 35);\n line(x + 35, y - 35, x - 15, y - 35);\n line(x - 35, y + 35, x + 15, y + 35);\n line(x - 20, y + 15, x - 20, y - 15);\n line(x + 20, y - 15, x + 20, y + 15);\n \/\/draws muted pink circles;\n fill(153, 139, 102);\n circle(x - 35, y - 35, 40);\n circle(x + 35, y + 35, 40);\n \/\/draws muted reddish triangles;\n fill(196, 59, 62);\n triangle(x - 20, y - 15, x - 30, y + 20, x - 60, y);\n triangle(x + 20, y + 15, x + 30, y - 20, x + 60, y);\n \/\/draws tilted muted yellow rectangles;\n fill(187, 164, 91);\n push();\n translate(x - 10, y + 40);\n rotate(radians(315));\n rect(0, 0, 20, 30);\n pop();\n push();\n translate(x + 10, y - 40);\n rotate(radians(315));\n rect(0, 0, 20, 30);\n pop();\n\n pop();\n}\n\n<\/code><\/pre><\/p>\n\n\n\n<\/p><\/p>\n\n\n\nI based it off of the early 20th Century Russian Art Movement known as Suprematism<\/em>. I had the most fun so far creating this Program. Overall, it is very simple in terms of its creation. I just used pre-defined shapes and muted colors. I also used push\/pop transformations to angle somethings and to make the main two patterns fit better on the 600×600 canvas.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"I based it off of the early 20th Century Russian Art Movement known as Suprematism. I had the most fun so far creating this Program. Overall, it is very simple in terms of its creation. I just used pre-defined shapes and muted colors. I also used push\/pop transformations to angle somethings and to make the … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/02\/project-05-wallpaper-6\/\" class=\"more-link\">Continue reading “Project-05: Wallpaper”<\/span><\/a><\/p>\n","protected":false},"author":675,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[104,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66933"}],"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\/675"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66933"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66933\/revisions"}],"predecessor-version":[{"id":66938,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66933\/revisions\/66938"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}