{"id":67046,"date":"2021-10-03T22:28:20","date_gmt":"2021-10-04T02:28:20","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=67046"},"modified":"2021-10-03T22:28:20","modified_gmt":"2021-10-04T02:28:20","slug":"project-05-wallpaper-11","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/03\/project-05-wallpaper-11\/","title":{"rendered":"Project 05 – Wallpaper"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/gnmarino\n\/\/Gia Marino\n\/\/Section D\n\nvar sizeChange = .1; \/\/makes everything 1\/10th the original size\n\nfunction setup() {\n createCanvas(600, 600);\n background(121, 181, 177); \/\/cyan\n\n}\n\nfunction draw() {\n\n fill(250, 250, 236); \/\/cream\n stroke(169, 96, 0); \/\/dark orange\n\n scale(sizeChange);\n\n \/\/ makes the 1st row of mandalas and alternates every other row \n \/\/ continues till it reaches border of canvas\n for (var xSpacing = 0; xSpacing < 10000; xSpacing += 900){\n for (var ySpacing = 0; ySpacing < 10000; ySpacing += 1800){\n \/\/push and pop makes it so spacing doesn't compound\n push();\n mandala(xSpacing, ySpacing);\n pop();\n \n }\n }\n\n \/\/ makes 2nd row of mandalas and alternates every other row \n \/\/continues till it reaches the point where it will not be on the page\n for (var xSpacing = -450; xSpacing < 9000; xSpacing += 900){\n for (var ySpacing = 900; ySpacing < 10000; ySpacing += 1800){\n \/\/push and pop makes it so spacing doesn't compound\n push();\n mandala(xSpacing, ySpacing);\n pop();\n }\n }\n \/\/draws diamond pattern\n for (var dxSpacing = 450; dxSpacing < 9000; dxSpacing += 900){\n for (var dySpacing = 450; dySpacing < 10000; dySpacing += 900) {\n \/\/push and pop makes it so spacing doesn't compound\n push();\n diamond(dxSpacing, dySpacing);\n pop();\n }\n }\n\n noLoop();\n}\n\nfunction diamond (x2, y2) {\n \/\/ translate with parameters allows the loop functions in draw to move the whole design easily\n translate(x2, y2);\n\n \/\/push and pop to avoid settings effecting other functions\n push();\n translate (300, 300);\n noStroke();\n fill(169, 96, 0); \/\/dark orange\n triangle (-30, 0, 30, 0, 0, 30);\n triangle(-30, 0, 30, 0, 0, -30);\n\n pop();\n}\n\nfunction mandala(x, y) {\n \/\/ translate with parameters allows the loop functions in draw to move the whole design easily\n translate (x, y);\n\n \/\/whole shape is roughly 500 X 600 pixels before scaling\n threeLeafShape();\n circleBorder();\n flowerAndCircle();\n}\n\nfunction threeLeafShape() {\n \n \/\/push pop makes it so the settings in this function doesn't effect other functions\n push();\n \n \/\/moves top leaf to the middle of the mandala\n translate(200, 0);\n strokeWeight(5);\n\n \/\/draws top leaf\n beginShape();\n vertex(100, 200);\n quadraticVertex(70, 125, 0, 100);\n quadraticVertex(60, 90, 85, 115);\n quadraticVertex(90, 40, 50, 20);\n quadraticVertex(115, 40, 115, 115);\n quadraticVertex(135, 85, 175, 80);\n quadraticVertex(120, 125, 100, 200);\n endShape();\n\n \/\/push pop makes it so the translation and rotation for the bottom leaf does not effect top leaf\n push();\n \/\/translate and rotate moves bottom leaf so it's mirrored directly undernenth top leaf\n translate(200, 600);\n rotate(radians(180));\n\n \/\/draws bottom leaf\n beginShape();\n vertex(100, 200);\n quadraticVertex(70, 125, 0, 100);\n quadraticVertex(60, 90, 85, 115);\n quadraticVertex(90, 40, 50, 20);\n quadraticVertex(115, 40, 115, 115);\n quadraticVertex(135, 85, 175, 80);\n quadraticVertex(120, 125, 100, 200);\n endShape();\n\n pop ();\n\n pop();\n\n}\n\nfunction circleBorder () {\n\n \/\/push pop makes it so the settings in this function doesn't effect other functions\n push();\n \n \/\/translate to center of canvas to make it easier to make a border in a circular formation\n translate(300, 300);\n strokeWeight(4);\n\n \/\/radius of basline circle for the tiny circles to follow and make a border along \n var r = 250;\n \n \/\/makes tiny circle border on right side\n \/\/constrained from theta -55 to theta 55 so circles do not collide with the 2 leaf shapes\n for (var theta = -55; theta < 55; theta += 15) {\n cx = r * cos(radians(theta));\n cy = r * sin(radians(theta));\n circle(cx, cy, 40);\n \n }\n \/\/makes tiny circle border on left side\n \/\/constrained from theta 125 to theta 235 so circles do not collide with the 2 leaf shapes\n for (var theta = 125; theta < 235; theta += 15) {\n cx = r * cos(radians(theta));\n cy = r * sin(radians(theta));\n circle(cx, cy, 40);\n \n }\n\n pop();\n}\n\nfunction flowerAndCircle () {\n\n \/\/(push pop 1)push and pop make it so translated origin does not effect next function\n push();\n \n\n \/\/puts origin in center so it is easier to draw in a circular formation\n translate (300, 300);\n\n \/\/circle around flower\n \/\/push and pop so nofill doesn't effect flower\n push(); \n noFill();\n strokeWeight(5);\n circle(0, 0, 200);\n pop();\n\n \/\/flower center\n strokeWeight(5);\n circle (0, 0, 35); \n\n \/\/draws 8 flower petals that rotates around the center origin\n for (theta = 30; theta <= 360; theta += 45){\n \/\/(push pop 2) \n \/\/the push and pop in this loop makes it so it rotates only 45 each time and not 45 + theta\n push(); \n rotate(radians(theta));\n ellipse( 55, 0, 45, 20);\n \/\/pop uses push 2\n pop();\n }\n \/\/this pop uses push 1\n pop();\n}\n<\/code><\/pre><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"969\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_8092-1024x969.jpg\" alt=\"\" class=\"wp-image-67056\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_8092-1024x969.jpg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_8092-300x284.jpg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_8092-768x727.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_8092-1536x1454.jpg 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_8092-2048x1938.jpg 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_8092-1200x1136.jpg 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>Drawings<\/figcaption><\/figure><p>I started off with deciding a design that I could then repeat over and over. Then after I decided, I made the design in a 500×600 pixels dimensions. Then I scaled it down and looped it. Then I felt like the pattern needed something in-between the mandala I created so I made a diamond and made a separate nested loop to repeat it so it went in the empty spaces. I had to make two nested loops for the mandala so the columns were staggered and not lined up perfectly. For the circle border I used polar coordinates so I could space it out and also not have to complete the circle. But for the flower I had to use rotation so the ellipse turned and went in a circle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"777\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-01-at-6.04.46-PM-1024x777.png\" alt=\"\" class=\"wp-image-67057\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-01-at-6.04.46-PM-1024x777.png 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-01-at-6.04.46-PM-300x228.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-01-at-6.04.46-PM-768x583.png 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-01-at-6.04.46-PM-1536x1165.png 1536w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-01-at-6.04.46-PM-2048x1553.png 2048w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-01-at-6.04.46-PM-1200x910.png 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\"><figcaption>the process of make the 3 leaf shape<\/figcaption><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/gnmarino \/\/Gia Marino \/\/Section D var sizeChange = .1; \/\/makes everything 1\/10th the original size function setup() { createCanvas(600, 600); background(121, 181, 177); \/\/cyan } function draw() { fill(250, 250, 236); \/\/cream stroke(169, 96, 0); \/\/dark orange scale(sizeChange); \/\/ makes the 1st row of mandalas and alternates every other row \/\/ continues till it … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/03\/project-05-wallpaper-11\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 05 – Wallpaper”<\/span><\/a><\/p>\n","protected":false},"author":658,"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\/67046"}],"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\/658"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=67046"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67046\/revisions"}],"predecessor-version":[{"id":67066,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/67046\/revisions\/67066"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=67046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=67046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=67046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}