\n
$\"\"$
Sketch<\/figcaption><\/figure><\/div>\n\n\n
<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/* Evan Stuhlfire\n** estuhlfi@andrew.cmu.edu, section B\n** Project 05: Wallpaper *\/\n\nvar dot = 5;\nvar bigDot = 10;\n\nfunction setup() {\n createCanvas(600, 400);\n background(224, 223, 214);\n rectMode(CENTER);\n}\n\nfunction draw() {\n var rowHeight = 150;\n var colCount = 1; \n var circleDiam = 50;\n var circleOffset = 10;\n var cosAmplitude = 40; \/\/ height of cos wave\n var sinAmplitude = 60; \/\/ height of sin wave\n var sinInc = 5; \/\/ increase for sin offset\n\n \/\/ Iterate over row to create rows of sin and cos waves\n for(var row = 0; row < height + rowHeight; row += rowHeight) {\n var colCounter = 0; \/\/ reset column counter for new row\n\n \/\/ iterate over theta to draw cos waves in background\n for(var theta = 0; theta < width; theta++) {\n stroke(49, 54, 56, 45);\n circle(theta, row + cosAmplitude * cos(radians(theta)), .2);\n circle(theta, row + cosAmplitude * -cos(radians(theta)), .2);\n }\n\n \/\/ iterate over theta to draw sin waves\n for(var theta = 0; theta < width + circleDiam; theta++) {\n stroke(49, 54, 56, 70);\n fill(49, 54, 56, 70);\n \/\/ draw sin waves as circles as theta moves across canvas\n \/\/ increment the sinAmplitude to create layered affect\n \/\/ decrease diam of circles to decrease line weight\n circle(theta, row + sinAmplitude * sin(radians(theta)), 2);\n circle(theta, row + (sinAmplitude + sinInc) * \n sin(radians(theta)), 1);\n circle(theta, row + (sinAmplitude + 2 * sinInc) * \n sin(radians(theta)), .2);\n circle(theta, row + sinAmplitude * -sin(radians(theta)), 2);\n circle(theta, row + (sinAmplitude + sinInc) * \n -sin(radians(theta)), 1);\n circle(theta, row + (sinAmplitude + 2 * sinInc) * \n -sin(radians(theta)), .2);\n\n \/\/ every 90 degrees draw a design\n if(theta % 90 == 0) {\n colCounter++;\n \/\/ when inside the sin waves draw circle of life\n if(colCounter % 2 == 0) {\n stroke(49, 54, 56, 175);\n fill(224, 223, 214);\n drawLife(theta, row);\n } else {\n \/\/ draw ellipses at intersection of sin waves\n stroke(49, 54, 56, 50);\n fill(224, 223, 214);\n \/\/ draws concentric ellipses\n for(var i = circleDiam; i >= 15; i -= 15){\n ellipse(theta, row, i + circleOffset, i);\n }\n fill(49, 54, 56, 140);\n ellipse(theta, row, bigDot); \/\/ draw dots at intersections\n\n \/\/ draw little flowers\n drawLittleFlowers(theta, row);\n } \n }\n }\n }\n noLoop();\n}\n\nfunction drawLife(theta, row) {\n \/\/ draw the circle of life\n \/\/ set variable for circle dimensions and offset angles\n var bigDiam = 110;\n var diam = 30; \/\/ set smaller circle diameter\n var ellipseOffset = 20;\n var rad = diam\/2;\n var angle1 = 30;\n var angle2 = 5 * angle1;\n var angle3 = 45;\n var oneEighty = 180;\n var angleOffset = 2;\n var diamOffset = 5;\n\n push(); \/\/ save settings\n translate(theta, row); \/\/ reposition origin\n stroke(49, 54, 56, 90); \/\/ lighten inner circles\n \/\/ draw larger ellipse\n ellipse(0, 0, bigDiam, bigDiam - ellipseOffset);\n\n \/\/ draw center circle\n circle(0, 0, diam);\n\n noFill();\n \/\/ draw layers of circles with drawMoreCircles with \n \/\/ distance from center, diameter, and angle of offset\n \/\/ inner layer of circles\n drawMoreCircles(rad, diam, oneEighty\/2);\n drawMoreCircles(rad, diam, angle1);\n drawMoreCircles(rad, diam, angle2);\n\n \/\/ second layer of circles\n drawMoreCircles(diam, diam, oneEighty\/2);\n drawMoreCircles(diam, diam, angle1);\n drawMoreCircles(diam, diam, angle2);\n drawMoreCircles(diam - diamOffset, diam, oneEighty);\n drawMoreCircles(diam - diamOffset, diam, 0);\n drawMoreCircles(diam - diamOffset, diam, angleOffset * angle1); \n drawMoreCircles(diam - diamOffset, diam, 2 * angleOffset * angle1);\n \n \/\/ third layer of circles\n \/\/ adjustments to offset diam and angle\n drawMoreCircles(diam + rad - diamOffset, diam, oneEighty - \n (5 * angleOffset));\n drawMoreCircles(diam + rad - diamOffset, diam, -5 * angleOffset)\n\n pop(); \/\/ retore settings\n fill(120); \/\/ solid grey\n \/\/ draw center flower dot\n ellipse(theta, row, dot);\n}\n\nfunction drawMoreCircles(expand, diam, angle) {\n \/\/ draw two circles at opposite angles defines by the \n \/\/ distance from the center, diameter, and offset angle\n circle(expand * cos(radians(angle)), expand * sin(radians(angle)), diam);\n if(angle != 180 & angle != 0){\n circle(expand * cos(radians(-angle)), expand * \n sin(radians(-angle)), diam);\n }\n}\n\nfunction drawLittleFlowers(theta, row) {\n var rowOffset = 75;\n var petalLength = 15;\n var petalWidth = 4;\n var petals = 6;\n var angle = 30;\n var angleIncrease = 60;\n var diam = 30;\n var accentOffset1 = 7;\n var accentOffset2 = 10;\n var ellipseOffset = 10;\n\n \/\/ set color for flower petals\n stroke(49, 54, 56, 100);\n fill(224, 223, 214);\n\n \/\/ draw circle to contain flower\n ellipse(theta, row + rowOffset, diam + ellipseOffset, diam);\n circle(theta, row + rowOffset, diam);\n \/\/ draw the petals\n for(var i = 0; i < petals; i++){\n push(); \/\/ save settings\n translate(theta, row + rowOffset);\n rotate(radians(angle)); \n ellipse(petalLength\/2, 0, petalLength, petalWidth);\n\n \/\/ draw accent lines with offsets\n line(petalLength + accentOffset1, 0, petalLength + accentOffset2, 0);\n pop(); \/\/ restore settings\n\n angle += angleIncrease;\n }\n \/\/ draw the center dot\n fill(120); \/\/ solid grey\n ellipse(theta, row + rowOffset, dot);\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Flower of Life Wallpaper<\/p>\n","protected":false},"author":760,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[104,56,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73508"}],"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\/760"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=73508"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73508\/revisions"}],"predecessor-version":[{"id":73520,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73508\/revisions\/73520"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=73508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=73508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=73508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}