{"id":73291,"date":"2022-09-30T19:09:09","date_gmt":"2022-09-30T23:09:09","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=73291"},"modified":"2022-09-30T19:15:34","modified_gmt":"2022-09-30T23:15:34","slug":"project-04-1950s-atomic-wallpaper","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/30\/project-04-1950s-atomic-wallpaper\/","title":{"rendered":"Project 05: 1950&#8217;s Atomic-Era 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><p>Re-live the Golden Days of American history with this nostalgic throwback Midcentury Atomic-Era Wallpaper!<\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"600\" id=\"wp-block-file--media-d0bdfb82-461d-4dca-8dc2-3bfe917cae26\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-405.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-405.js\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-d0bdfb82-461d-4dca-8dc2-3bfe917cae26\">Download<\/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=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Ilia Urgen\n\/\/ Section B\n\nlet shape_width = 90;\nlet shape_height = 160; \n\n\/\/ I created 4 different designs, which I named Quad 1, Quad 2, Quad 3, and Quad 4.\n\/\/ Each design is stored in a separate function below.\n\nfunction setup() {\n    createCanvas (600, 600);\n    background (200);\n}   \n\nfunction draw() {\n\n    \/\/ Quad 1 Coordinates\n    let x1 = 60;\n    let y1 = 60;\n\n    let x2 = 180;\n    let y2 = 220;\n\n\n    \/\/ Quad 2 Coordinates\n    let x3 = 60;\n    let y3 = 220;\n\n    let x4 = 180;\n    let y4 = 60;\n\n    \/\/ Quad 3 Coordinates\n    let x5 = 0;\n    let y5 = -20;\n\n    let x6 = 120;\n    let y6 = 140;\n\n    \/\/ Quad 4 Coordinates\n    let x7 = 0;\n    let y7 = 140;\n\n    let x8 = 120;\n    let y8 = -20;\n\n    let row_increase = 240;\n    let col_increase = 320;\n\n    background (210);\n    \n    \/\/ Prints outer Quad 1\n    for (var rowA = 1; rowA &lt;= 10; rowA += 1) {\n        for (var colA = 1; colA &lt;= 10; colA += 1) {\n\n            quad_2 (x1, y1);  \n            y1 += col_increase;\n        } \n\n        x1 += row_increase; \n        y1 = 60;\n    }\n\n    \/\/ Prints inner Quad 1\n    for (var rowB = 1; rowB &lt;= 10; rowB += 1) {\n        for (var colB = 1; colB &lt;= 10; colB += 1) {\n\n            quad_2 (x2, y2);  \n            y2 += col_increase;\n        } \n\n        x2 += row_increase; \n        y2 = 220;\n    }\n\n    \/\/ Prints outer Quad 2\n    for (var rowC = 1; rowC &lt;= 10; rowC += 1) {\n        for (var colC = 1; colC &lt;= 10; colC += 1) {\n\n            quad_1 (x3, y3);  \n            y3 += col_increase;\n        } \n\n        x3 += row_increase; \n        y3 = 220;\n    }\n\n    \/\/ Prints inner Quad 2\n    for (var rowD = 1; rowD &lt;= 10; rowD += 1) {  \n        for (var colD = 1; colD &lt;= 10; colD += 1) {\n\n            quad_1 (x4, y4);  \n            y4 += col_increase;\n        } \n\n        x4 += row_increase; \n        y4 = 60;\n    }\n    \n    \/\/ Prints outer Quad 3\n    for (var rowE = 1; rowE &lt;= 10; rowE += 1) {  \n        for (var colE = 1; colE &lt;= 10; colE += 1) {\n\n            quad_3 (x5, y5); \n            y5 += col_increase;\n        } \n\n        x5 += row_increase; \n        y5 = -20;\n    }\n    \n    \/\/ Prints inner Quad 3\n    for (var rowE = 1; rowE &lt;= 10; rowE += 1) {  \n        for (var colE = 1; colE &lt;= 10; colE += 1) {\n\n            quad_3 (x6, y6);  \n            y6 += col_increase;\n        } \n\n        x6 += row_increase; \n        y6 = 140;\n    }\n\n    \/\/ Prints outer Quad 4\n    for (var rowF = 1; rowF &lt;= 10; rowF += 1) {  \n        for (var colF = 1; colF &lt;= 10; colF += 1) {\n\n            quad_4 (x7, y7); \n            y7 += col_increase;\n        } \n\n        x7 += row_increase; \n        y7 = 140;\n    }\n    \n    \/\/ Prints inner Quad 4\n    for (var rowG = 1; rowG &lt;= 10; rowG += 1) {  \n        for (var colG = 1; colG &lt;= 10; colG += 1) {\n\n            quad_4 (x8, y8);  \n            y8 += col_increase;\n        } \n\n        x8 += row_increase; \n        y8 = -20;\n    }\n\n    noLoop();\n}\n\nfunction quad_1 (x1, y1) {\n    noStroke();\n    \n    fill (96,149,130);    \n    quad (x1 - shape_width\/2, y1,   x1 - shape_width\/3, y1,   x1, y1 - shape_height\/2,   x1 - shape_width\/6, y1 - shape_height\/2);\n    quad (x1 - shape_width\/2, y1,   x1 - shape_width\/3, y1,   x1, y1 + shape_height\/2,   x1 - shape_width\/6, y1 + shape_height\/2);\n    quad (x1 + shape_width\/2, y1,   x1 + shape_width\/3, y1,   x1, y1 + shape_height\/2,   x1 + shape_width\/6, y1 + shape_height\/2);\n    quad (x1 + shape_width\/2, y1,   x1 + shape_width\/3, y1,   x1, y1 - shape_height\/2,   x1 + shape_width\/6, y1 - shape_height\/2);\n\n    fill (114,102,78);\n    quad (x1 - shape_width\/3, y1,   x1 - shape_width\/3 - 5, y1,   x1 - 5, y1 - shape_height\/2, x1, y1 - shape_height\/2);   \n    quad (x1 - shape_width\/3, y1,   x1 - shape_width\/3 - 5, y1,   x1 - 5, y1 + shape_height\/2, x1, y1 + shape_height\/2);\n    quad (x1 + shape_width\/3, y1,   x1 + shape_width\/3 + 5, y1,   x1 + 5, y1 + shape_height\/2, x1, y1 + shape_height\/2);   \n    quad (x1 + shape_width\/3, y1,   x1 + shape_width\/3 + 5, y1,   x1 + 5, y1 - shape_height\/2, x1, y1 - shape_height\/2);\n\n    fill (53,98,115);\n    quad (x1 - shape_width\/3, y1,   x1, y1 - shape_height\/2,   x1 + shape_width\/3, y1,   x1, y1 + shape_height\/2);\n    \n    fill (32,64,60);\n    quad (x1 - shape_width\/4.5, y1,   x1, y1 - shape_height\/3,   x1 + shape_width\/4.5, y1,   x1, y1 + shape_height\/3);\n\n    stroke(255);\n    strokeWeight(1);\n    line (x1 - shape_width\/10, y1, x1 + shape_width\/10, y1);\n    line (x1, y1 - shape_height\/10, x1, y1 + shape_height\/10);\n    line (x1 - shape_width\/20, y1 - shape_height\/20, x1 + shape_width\/20, y1 + shape_height\/20);\n    line (x1 + shape_width\/20, y1 - shape_height\/20, x1 - shape_width\/20, y1 + shape_height\/20);\n\n    circle (x1 - shape_width\/10, y1, 3);\n    circle (x1 + shape_width\/10, y1, 3);\n    circle (x1, y1 - shape_height\/10, 3);\n    circle (x1, y1 + shape_height\/10, 3);\n\n    circle (x1 - shape_width\/20, y1 - shape_height\/20, 3);\n    circle (x1 + shape_width\/20, y1 + shape_height\/20, 3);\n    circle (x1 + shape_width\/20, y1 - shape_height\/20, 3);\n    circle (x1 - shape_width\/20, y1 + shape_height\/20, 3);\n}\n\nfunction quad_2 (x3, y3) {\n    noStroke();\n    \n    fill (53,98,115);    \n    quad (x3 - shape_width\/2, y3,   x3 - shape_width\/3, y3,   x3, y3 - shape_height\/2,   x3 - shape_width\/6, y3 - shape_height\/2);\n    quad (x3 - shape_width\/2, y3,   x3 - shape_width\/3, y3,   x3, y3 + shape_height\/2,   x3 - shape_width\/6, y3 + shape_height\/2);\n    quad (x3 + shape_width\/2, y3,   x3 + shape_width\/3, y3,   x3, y3 + shape_height\/2,   x3 + shape_width\/6, y3 + shape_height\/2);\n    quad (x3 + shape_width\/2, y3,   x3 + shape_width\/3, y3,   x3, y3 - shape_height\/2,   x3 + shape_width\/6, y3 - shape_height\/2);\n\n    fill (114,102,78);\n    quad (x3 - shape_width\/3, y3,   x3 - shape_width\/3 - 5, y3,   x3 - 5, y3 - shape_height\/2, x3, y3 - shape_height\/2);   \n    quad (x3 - shape_width\/3, y3,   x3 - shape_width\/3 - 5, y3,   x3 - 5, y3 + shape_height\/2, x3, y3 + shape_height\/2);\n    quad (x3 + shape_width\/3, y3,   x3 + shape_width\/3 + 5, y3,   x3 + 5, y3 + shape_height\/2, x3, y3 + shape_height\/2);   \n    quad (x3 + shape_width\/3, y3,   x3 + shape_width\/3 + 5, y3,   x3 + 5, y3 - shape_height\/2, x3, y3 - shape_height\/2);\n\n    fill (96,149,130);\n    quad (x3 - shape_width\/3, y3,   x3, y3 - shape_height\/2,   x3 + shape_width\/3, y3,   x3, y3 + shape_height\/2);\n    \n    fill (255);\n    quad (x3 - shape_width\/4.5, y3,   x3, y3 - shape_height\/3,   x3 + shape_width\/4.5, y3,   x3, y3 + shape_height\/3);\n\n    stroke(32,64,60);\n    strokeWeight(1);\n    line (x3 - shape_width\/10, y3, x3 + shape_width\/10, y3);\n    line (x3, y3 - shape_height\/10, x3, y3 + shape_height\/10);\n    line (x3 - shape_width\/20, y3 - shape_height\/20, x3 + shape_width\/20, y3 + shape_height\/20);\n    line (x3 + shape_width\/20, y3 - shape_height\/20, x3 - shape_width\/20, y3 + shape_height\/20);\n\n    circle (x3 - shape_width\/10, y3, 4);\n    circle (x3 + shape_width\/10, y3, 4);\n    circle (x3, y3 - shape_height\/10, 4);\n    circle (x3, y3 + shape_height\/10, 4);\n\n    circle (x3 - shape_width\/20, y3 - shape_height\/20, 4);\n    circle (x3 + shape_width\/20, y3 + shape_height\/20, 4);\n    circle (x3 + shape_width\/20, y3 - shape_height\/20, 4);\n    circle (x3 - shape_width\/20, y3 + shape_height\/20, 4);\n}\n\nfunction quad_3 (x5, y5) {\n    noStroke();\n    \n    fill (96,149,130);    \n    quad (x5 - shape_width\/2, y5,   x5 - shape_width\/3, y5,   x5, y5 - shape_height\/2,   x5 - shape_width\/6, y5 - shape_height\/2);\n    quad (x5 + shape_width\/2, y5,   x5 + shape_width\/3, y5,   x5, y5 + shape_height\/2,   x5 + shape_width\/6, y5 + shape_height\/2);\n\n    fill (53,98,115);\n    quad (x5 - shape_width\/2, y5,   x5 - shape_width\/3, y5,   x5, y5 + shape_height\/2,   x5 - shape_width\/6, y5 + shape_height\/2);\n    quad (x5 + shape_width\/2, y5,   x5 + shape_width\/3, y5,   x5, y5 - shape_height\/2,   x5 + shape_width\/6, y5 - shape_height\/2);\n\n    fill (253,217,181);\n    quad (x5 - shape_width\/3, y5,   x5 - shape_width\/3 - 5, y5,   x5 - 5, y5 - shape_height\/2, x5, y5 - shape_height\/2);   \n    quad (x5 - shape_width\/3, y5,   x5 - shape_width\/3 - 5, y5,   x5 - 5, y5 + shape_height\/2, x5, y5 + shape_height\/2);\n    quad (x5 + shape_width\/3, y5,   x5 + shape_width\/3 + 5, y5,   x5 + 5, y5 + shape_height\/2, x5, y5 + shape_height\/2);   \n    quad (x5 + shape_width\/3, y5,   x5 + shape_width\/3 + 5, y5,   x5 + 5, y5 - shape_height\/2, x5, y5 - shape_height\/2);\n\n    stroke (32,64,60);\n    strokeWeight (3);\n\n    fill (205,91,69);\n    quad (x5 - shape_width\/3, y5,   x5, y5 - shape_height\/2,   x5 + shape_width\/3, y5,   x5, y5 + shape_height\/2);\n    \n    strokeWeight (1.5);\n\n    line (x5 - shape_width\/10, y5, x5 + shape_width\/10, y5);\n    line (x5, y5 - shape_height\/10, x5, y5 + shape_height\/10);\n    line (x5 - shape_width\/20, y5 - shape_height\/20, x5 + shape_width\/20, y5 + shape_height\/20);\n    line (x5 + shape_width\/20, y5 - shape_height\/20, x5 - shape_width\/20, y5 + shape_height\/20);\n\n    circle (x5 - shape_width\/10, y5, 4);\n    circle (x5 + shape_width\/10, y5, 4);\n    circle (x5, y5 - shape_height\/10, 4);\n    circle (x5, y5 + shape_height\/10, 4);\n\n    circle (x5 - shape_width\/20, y5 - shape_height\/20, 4);\n    circle (x5 + shape_width\/20, y5 + shape_height\/20, 4);\n    circle (x5 + shape_width\/20, y5 - shape_height\/20, 4);\n    circle (x5 - shape_width\/20, y5 + shape_height\/20, 4);\n}\n\nfunction quad_4 (x7, y7) {\n    noStroke();\n    \n    fill (53,98,115);    \n    quad (x7 - shape_width\/2, y7,   x7 - shape_width\/3, y7,   x7, y7 - shape_height\/2,   x7 - shape_width\/6, y7 - shape_height\/2);\n    quad (x7 + shape_width\/2, y7,   x7 + shape_width\/3, y7,   x7, y7 + shape_height\/2,   x7 + shape_width\/6, y7 + shape_height\/2);\n    \n    fill (96,149,130);\n    quad (x7 - shape_width\/2, y7,   x7 - shape_width\/3, y7,   x7, y7 + shape_height\/2,   x7 - shape_width\/6, y7 + shape_height\/2);\n    quad (x7 + shape_width\/2, y7,   x7 + shape_width\/3, y7,   x7, y7 - shape_height\/2,   x7 + shape_width\/6, y7 - shape_height\/2);\n\n    fill (205,91,69);\n    quad (x7 - shape_width\/3, y7,   x7 - shape_width\/3 - 5, y7,   x7 - 5, y7 - shape_height\/2, x7, y7 - shape_height\/2);   \n    quad (x7 + shape_width\/3, y7,   x7 + shape_width\/3 + 5, y7,   x7 + 5, y7 + shape_height\/2, x7, y7 + shape_height\/2);   \n    quad (x7 - shape_width\/3, y7,   x7 - shape_width\/3 - 5, y7,   x7 - 5, y7 + shape_height\/2, x7, y7 + shape_height\/2);\n    quad (x7 + shape_width\/3, y7,   x7 + shape_width\/3 + 5, y7,   x7 + 5, y7 - shape_height\/2, x7, y7 - shape_height\/2);\n\n    stroke (32,64,60);\n    strokeWeight (3);\n\n    fill (253,217,181);\n    quad (x7 - shape_width\/3, y7,   x7, y7 - shape_height\/2,   x7 + shape_width\/3, y7,   x7, y7 + shape_height\/2);\n\n    strokeWeight (1.5);\n \n    line (x7 - shape_width\/10, y7, x7 + shape_width\/10, y7);\n    line (x7, y7 - shape_height\/10, x7, y7 + shape_height\/10);\n    line (x7 - shape_width\/20, y7 - shape_height\/20, x7 + shape_width\/20, y7 + shape_height\/20);\n    line (x7 + shape_width\/20, y7 - shape_height\/20, x7 - shape_width\/20, y7 + shape_height\/20);\n\n    circle (x7 - shape_width\/10, y7, 4);\n    circle (x7 + shape_width\/10, y7, 4);\n    circle (x7, y7 - shape_height\/10, 4);\n    circle (x7, y7 + shape_height\/10, 4);\n\n    circle (x7 - shape_width\/20, y7 - shape_height\/20, 4);\n    circle (x7 + shape_width\/20, y7 + shape_height\/20, 4);\n    circle (x7 + shape_width\/20, y7 - shape_height\/20, 4);\n    circle (x7 - shape_width\/20, y7 + shape_height\/20, 4);   \n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Re-live the Golden Days of American history with this nostalgic throwback Midcentury Atomic-Era Wallpaper!<\/p>\n","protected":false},"author":765,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[104,56],"tags":[88,81],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73291"}],"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\/765"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=73291"}],"version-history":[{"count":8,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73291\/revisions"}],"predecessor-version":[{"id":73301,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73291\/revisions\/73301"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=73291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=73291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=73291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}