{"id":66914,"date":"2021-10-02T20:35:08","date_gmt":"2021-10-03T00:35:08","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66914"},"modified":"2021-10-02T20:35:08","modified_gmt":"2021-10-03T00:35:08","slug":"project-5-wallpaper-9","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/02\/project-5-wallpaper-9\/","title":{"rendered":"Project 5: 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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"400\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-14.js\">kstargio proj 05<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-14.js\" class=\"wp-block-file__button\" download>Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"600\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Katherine Stargiotti, kstargio, B\n\nfunction setup() {\n    createCanvas(600, 400);\n    background(235, 220, 230);\n}\n\n\/\/draws a randomized flower-covered wallpaper with vines and leaves. \n\/\/color, placement, flower style, size, and rotation are all randomized to \n\/\/produce a completely new wallpaper each time the program runs:\nfunction draw() {\n\tfor (l=random(25); l&lt;width; l+=50) {\t\t\/\/vines go accross the entire canvas\n\t    drawVine(l, random(20));\t\t\t\t\/\/each vine is drawn before the flowers\n\t    for (d=0; d&lt;2; d+=1) {\t            \t\/\/ density of the flowers\n\t        for (h=random(45); h&lt;height+25; h+=random(45,75)) {\t\t\/\/parameters randomized to create variability throughout the piece\n\t\t        drawFlowerHead(l+random(-5, 5), h, random(.35, 1.25), int(random(4, 7)), int(random(3)));\n\t        } \n        }\n    }\n}\n\n\/\/draws a vine; random() used to add variation for weight, color, curve.\nfunction drawVine(x, y) {\n    push();\n    translate(x, y);\n\tvineColor = color(random(100, 150), random(150,200), random(100,150));\n\tstroke(vineColor);\n\tstrokeWeight(random(1,2));\n\tnoFill();\n\tden = random(10, 20)\t\t\t\n\tbeginShape();\n\t    curveVertex(0, -20);\n\t    curveVertex(0, -20);\n\t    curveVertex(3, height\/den);\n\t    curveVertex(0, 2*height\/den);\n\t    curveVertex(-3, 3*height\/den);\n\t    curveVertex(0, 4*height\/den);\n\t    curveVertex(3, 5*height\/den);\n\t    curveVertex(0, 6*height\/den);\n\t    curveVertex(-3, 7*height\/den);\n\t    curveVertex(0, 8*height\/den);\n\t    curveVertex(3, 9*height\/den);\n\t    curveVertex(0, 10*height\/den);\n\t    curveVertex(-3, 11*height\/den);\n\t    curveVertex(0, 12*height\/den);\n\t    curveVertex(3, 13*height\/den);\n\t    curveVertex(0, 14*height\/den);\n\t    curveVertex(-3, 15*height\/den);\n\t    curveVertex(0, 16*height\/den);\n\t    curveVertex(3, 17*height\/den);\n\t    curveVertex(0, 18*height\/den);\n\t    curveVertex(-3, 19*height\/den);\n\t    curveVertex(0, height);\n\t    curveVertex(0, height);\n\tendShape();\n\tdrawLeaves(0, vineColor);\n\tpop();\n}\n\n\/\/draws leaves onto a vine using the vineColor and x placement:\nfunction drawLeaves(x, vineColor) {\n\tfill(vineColor);\n\tfor (f=0; f&lt;height; f+=random(45, 65)) {\n\t\tdrawLeaf(x, f);\n\t}\n}\n\n\/\/draws one leaf of random size at point x,y:\nfunction drawLeaf(x, y) {\n\tlet leafSize = random(1, 3);\n\tx += random(-.5, .5);\n\t\/\/if the leaf is to the left of the vine it faces left; to the right is pointed right:\n\tif (x&gt;0) {\n\t\tbeginShape();\n\t\t\tvertex(x+(8*leafSize), y);\n\t   \t\tcurveVertex(x+(7*leafSize), (y-.2));\n\t   \t\tcurveVertex(x+(6*leafSize), (y-.5));\n\t   \t\tcurveVertex(x+(4.5*leafSize), (y-1.2));\n\t   \t\tcurveVertex(x+(3*leafSize), (y-2.1));\n\t    \tcurveVertex(x+(2.2*leafSize), (y-2.25));\n\t   \t\tcurveVertex(x+(1.5*leafSize), (y-2));\n\t   \t\tcurveVertex(x, (y-1.1));\n\t   \t\tcurveVertex(x, y);\n\t   \t\tcurveVertex(x, (y+1.1));\n\t   \t\tcurveVertex(x+(1.5*leafSize), (y+2));\n\t   \t\tcurveVertex(x+(2.2*leafSize), (y+2.25));\n\t   \t\tcurveVertex(x+(3*leafSize), (y+2.1));\n\t   \t\tcurveVertex(x+(4.5*leafSize), (y+1.2));\n\t   \t\tcurveVertex(x+(6*leafSize), (y+.5));\n\t   \t\tcurveVertex(x+(7*leafSize), (y+.2));\n\t   \t\tvertex(x+(8*leafSize), y);\n\t\tendShape(CLOSE);\n\t} else {\n\t\tbeginShape();\n\t\t\tvertex(x-(8*leafSize), y);\n\t   \t\tcurveVertex(x-(7*leafSize), (y-.2));\n\t   \t\tcurveVertex(x-(6*leafSize), (y-.5));\n\t   \t\tcurveVertex(x-(4.5*leafSize), (y-1.2));\n\t   \t\tcurveVertex(x-(3*leafSize), (y-2.1));\n\t    \tcurveVertex(x-(2.2*leafSize), (y-2.25));\n\t   \t\tcurveVertex(x-(1.5*leafSize), (y-2));\n\t   \t\tcurveVertex(x, (y-1.1));\n\t   \t\tcurveVertex(x, y);\n\t   \t\tcurveVertex(x, (y+1.1));\n\t   \t\tcurveVertex(x-(1.5*leafSize), (y+2));\n\t   \t\tcurveVertex(x-(2.2*leafSize), (y+2.25));\n\t   \t\tcurveVertex(x-(3*leafSize), (y+2.1));\n\t   \t\tcurveVertex(x-(4.5*leafSize), (y+1.2));\n\t   \t\tcurveVertex(x-(6*leafSize), (y+.5));\n\t   \t\tcurveVertex(x-(7*leafSize), (y+.2));\n\t   \t\tvertex(x-(8*leafSize), y);\n\t\tendShape(CLOSE);\n\t}\n\t\n}\n\n\/\/draws a flowerhead using petals:\nfunction drawFlowerHead(x, y, flowerSize, petalNum, style) { \n\tpush();\n\ttranslate(x, y);\t\t\/\/centers flower at (0,0)\n\t\/\/colors randomized in a specific range to create a cohesive pallet:\n    var c = color(random(170,225), random(100,180), random(130,200)); \n\tvar co = color(130, 110, 140);\t\t\/\/ purpley used for all flowers\n\tvar rot = random(180);\t\t\t\t\/\/ flowers start at different angles\n\t\/\/ drawing petals:\n\tfor (q=0; q&lt;petalNum; q++) {\n\t\trotate(rot);\n\t\tif (style == 0) { drawPetalA(flowerSize*2, 0, c, co, flowerSize) }\n\t\telse if (style == 1) {drawPetalB(flowerSize*2, 0, c, co, flowerSize) }\n\t\telse { drawPetalC(flowerSize*2, 0, c, co, flowerSize) }\n        rot = 2*PI\/petalNum;\t\t\t\/\/ rotation value based on number of petals\n    }\n    \/\/ center of flower drawn on top of petals:\n    fill(120, 100, 110);\n    circle(0, 0, flowerSize*5);\n    fill(127, 100, 110);\n    circle(0, 0, flowerSize*3);\n    fill(135, 100, 110);\n    circle(0, 0, flowerSize);\n    pop();\n}\n\n\/\/ draws a petal in the FIRST[0] style. (pointy)\nfunction drawPetalA(x, y, petalColor, outerColor, petalSize) {\n    petalSize = petalSize\/5;\n\tnoStroke();\t\n\tfill(outerColor);\n\tbeginShape();\n\t\tvertex((x+85)*petalSize, y*petalSize);\n\t    curveVertex((x+70)*petalSize, (y-2)*petalSize);\n\t    curveVertex((x+60)*petalSize, (y-5)*petalSize);\n\t    curveVertex((x+45)*petalSize, (y-12)*petalSize);\n\t    curveVertex((x+30)*petalSize, (y-21)*petalSize);\n\t    curveVertex((x+22)*petalSize, (y-22.5)*petalSize);\n\t    curveVertex((x+15)*petalSize, (y-20)*petalSize);\n\t    curveVertex((x+5)*petalSize, (y-11)*petalSize);\n\t    curveVertex(x, y);\n\t    curveVertex((x+5)*petalSize, (y+11)*petalSize);\n\t    curveVertex((x+15)*petalSize, (y+20)*petalSize);\n\t    curveVertex((x+22)*petalSize, (y+22.5)*petalSize);\n\t    curveVertex((x+30)*petalSize, (y+21)*petalSize);\n\t    curveVertex((x+45)*petalSize, (y+12)*petalSize);\n\t    curveVertex((x+60)*petalSize, (y+5)*petalSize);\n\t    curveVertex((x+70)*petalSize, (y+2)*petalSize);\n\t    vertex((x+85)*petalSize, y);\n\tendShape(CLOSE);\n\tfill(petalColor);\n\tbeginShape();\n\t\tvertex((x+75)*petalSize, y*petalSize);\n\t    curveVertex((x+60)*petalSize, (y-3)*petalSize);\n\t    curveVertex((x+45)*petalSize, (y-9)*petalSize);\n\t    curveVertex((x+30)*petalSize, (y-17)*petalSize);\n\t    curveVertex((x+15)*petalSize, (y-17)*petalSize);\n\t    curveVertex((x+5)*petalSize, (y-9)*petalSize);\n\t    curveVertex(x, y);\n\t    curveVertex((x+5)*petalSize, (y+9)*petalSize);\n\t    curveVertex((x+15)*petalSize, (y+17)*petalSize);\n\t    curveVertex((x+30)*petalSize, (y+17)*petalSize);\n\t    curveVertex((x+45)*petalSize, (y+9)*petalSize);\n\t    curveVertex((x+60)*petalSize, (y+3)*petalSize);\n\t    vertex((x+75)*petalSize, y);\n\tendShape(CLOSE);\n\tfill(outerColor);\n\tbeginShape();\n\t    curveVertex(x, y);\n\t    curveVertex(x+petalSize*15, y+7);\n\t    curveVertex(x+petalSize*35, y+2);\n\t    curveVertex(x+petalSize*15, y+6);\n\tendShape(CLOSE);\n\tbeginShape();\n\t    curveVertex(x, y);\n\t    curveVertex(x+petalSize*10, y+12);\n\t    curveVertex(x+petalSize*30, y+9);\n\t    curveVertex(x+petalSize*15, y+12);\n\tendShape(CLOSE);\n\tbeginShape();\n\t    curveVertex(x, y);\n\t    curveVertex(x+petalSize*15, y-7);\n\t    curveVertex(x+petalSize*35, y-2);\n\t    curveVertex(x+petalSize*15, y-6);\n\tendShape(CLOSE);\n\tbeginShape();\n\t    curveVertex(x, y);\n\t    curveVertex(x+petalSize*10, y-12);\n\t    curveVertex(x+petalSize*30, y-9);\n\t    curveVertex(x+petalSize*15, y-12);\n\tendShape(CLOSE);\n\tbeginShape();\n\t    curveVertex(x, y);\n\t    curveVertex(x+petalSize*17, y-.5);\n\t    curveVertex(x+petalSize*40, y);\n\t    curveVertex(x+petalSize*17, y+.5);\n\tendShape(CLOSE);\n\tnoLoop();\n}\n\n\/\/ draws a petal in the SECOND[1] style. (squiggled)\nfunction drawPetalB(x, y, petalColor, outerColor, petalSize) {\n    petalSize = petalSize\/5;\n\tnoStroke();\t\n\tfill(outerColor);\n\tbeginShape();\n\t\tvertex((x+80)*petalSize, y*petalSize);\n\t    curveVertex((x+70)*petalSize, (y-7)*petalSize);\n\t    curveVertex((x+60)*petalSize, (y-12)*petalSize);\n\t    curveVertex((x+45)*petalSize, (y-18)*petalSize);\n\t    curveVertex((x+30)*petalSize, (y-22)*petalSize);\n\t    curveVertex((x+22)*petalSize, (y-22.5)*petalSize);\n\t    curveVertex((x+15)*petalSize, (y-20)*petalSize);\n\t    curveVertex((x+5)*petalSize, (y-12)*petalSize);\n\t    curveVertex(x, y);\n\t    curveVertex((x+5)*petalSize, (y+12)*petalSize);\n\t    curveVertex((x+15)*petalSize, (y+20)*petalSize);\n\t    curveVertex((x+22)*petalSize, (y+22.5)*petalSize);\n\t    curveVertex((x+30)*petalSize, (y+22)*petalSize);\n\t    curveVertex((x+45)*petalSize, (y+18)*petalSize);\n\t    curveVertex((x+60)*petalSize, (y+12)*petalSize);\n\t    curveVertex((x+70)*petalSize, (y+7)*petalSize);\n\t    vertex((x+80)*petalSize, y);\n\tendShape(CLOSE);\n\tfill(petalColor);\n\tbeginShape();\n\t\tvertex((x+70)*petalSize, y*petalSize);\n\t    curveVertex((x+60)*petalSize, (y-2)*petalSize);\n\t    curveVertex((x+57)*petalSize, (y-4)*petalSize);\n\t    curveVertex((x+53)*petalSize, (y-2)*petalSize);\n\t    curveVertex((x+50)*petalSize, (y-4)*petalSize);\n\t    curveVertex((x+47)*petalSize, (y-9)*petalSize);\n\t    curveVertex((x+44)*petalSize, (y-12)*petalSize);\n\t    curveVertex((x+37)*petalSize, (y-10)*petalSize);\n\t    curveVertex((x+30)*petalSize, (y-17)*petalSize);\n\t    curveVertex((x+15)*petalSize, (y-17)*petalSize);\n\t    curveVertex((x+5)*petalSize, (y-9)*petalSize);\n\t    curveVertex(x, y);\n\t    curveVertex((x+5)*petalSize, (y+9)*petalSize);\n\t    curveVertex((x+15)*petalSize, (y+17)*petalSize);\n\t    curveVertex((x+30)*petalSize, (y+17)*petalSize);\n\t    curveVertex((x+37)*petalSize, (y+10)*petalSize);\n\t    curveVertex((x+44)*petalSize, (y+12)*petalSize);\n\t    curveVertex((x+47)*petalSize, (y+9)*petalSize);\n\t    curveVertex((x+50)*petalSize, (y+4)*petalSize);\n\t    curveVertex((x+53)*petalSize, (y+2)*petalSize);\n\t    curveVertex((x+57)*petalSize, (y+4)*petalSize);\n\t    curveVertex((x+60)*petalSize, (y+2)*petalSize);\n\t    vertex((x+70)*petalSize, y);\n\tendShape(CLOSE);\n\tnoLoop();\n}\n\n\/\/ draws a petal in the THIRD[2] style. (rounded)\nfunction drawPetalC(x, y, petalColor, outerColor, petalSize) {\n    petalSize = petalSize\/5;\n\tnoStroke();\t\n\tfill(outerColor);\n\tbeginShape();\n\t\tvertex((x+70)*petalSize, y*petalSize);\n\t    curveVertex((x+68)*petalSize, (y-6)*petalSize);\n\t    curveVertex((x+65)*petalSize, (y-10)*petalSize);\n\t    curveVertex((x+60)*petalSize, (y-15)*petalSize);\n\t    curveVertex((x+45)*petalSize, (y-22)*petalSize);\n\t    curveVertex((x+30)*petalSize, (y-25)*petalSize);\n\t    curveVertex((x+22)*petalSize, (y-24)*petalSize);\n\t    curveVertex((x+15)*petalSize, (y-22)*petalSize);\n\t    curveVertex((x+5)*petalSize, (y-11)*petalSize);\n\t    curveVertex(x, y);\n\t    curveVertex((x+5)*petalSize, (y+11)*petalSize);\n\t    curveVertex((x+15)*petalSize, (y+22)*petalSize);\n\t    curveVertex((x+22)*petalSize, (y+24)*petalSize);\n\t    curveVertex((x+30)*petalSize, (y+25)*petalSize);\n\t    curveVertex((x+45)*petalSize, (y+22)*petalSize);\n\t    curveVertex((x+60)*petalSize, (y+15)*petalSize);\n\t    curveVertex((x+65)*petalSize, (y+10)*petalSize);\n\t    curveVertex((x+68)*petalSize, (y+6)*petalSize);\n\t    vertex((x+70)*petalSize, y);\n\tendShape(CLOSE);\n\tfill(petalColor);\n\tbeginShape();\n\t\tvertex((x+60)*petalSize, y*petalSize);\n\t    curveVertex((x+58)*petalSize, (y-6)*petalSize);\n\t    curveVertex((x+45)*petalSize, (y-15)*petalSize);\n\t    curveVertex((x+30)*petalSize, (y-17)*petalSize);\n\t    curveVertex((x+15)*petalSize, (y-15)*petalSize);\n\t    curveVertex((x+5)*petalSize, (y-9)*petalSize);\n\t    curveVertex(x, y);\n\t    curveVertex((x+5)*petalSize, (y+9)*petalSize);\n\t    curveVertex((x+15)*petalSize, (y+15)*petalSize);\n\t    curveVertex((x+30)*petalSize, (y+17)*petalSize);\n\t    curveVertex((x+45)*petalSize, (y+15)*petalSize);\n\t    curveVertex((x+58)*petalSize, (y+6)*petalSize);\n\t    vertex((x+60)*petalSize, y);\n\tendShape(CLOSE);\n\tnoLoop();\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>I was inspired by flowers for this project. I did not sketch out any patterns before programming, but I knew that I wanted to create a few different types of petals that could be turned into many unique flowers. By starting with the petals and smaller units of the images, I was able to randomize parameters to produce completely different flowers each time the program is run. I also recorded my screen while creating this project and condensed the progress into a short video embedded below. <\/p>\n\n\n\n<p><a href=\"https:\/\/drive.google.com\/file\/d\/1REl6hKCS3eoD0rDR4iIEHYlZPLs4q0wp\/view?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">15-104 Project 05 video (google drive link)<\/a><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>kstargio proj 05Download \/\/ Katherine Stargiotti, kstargio, B function setup() { createCanvas(600, 400); background(235, 220, 230); } \/\/draws a randomized flower-covered wallpaper with vines and leaves. \/\/color, placement, flower style, size, and rotation are all randomized to \/\/produce a completely new wallpaper each time the program runs: function draw() { for (l=random(25); l&lt;width; l+=50) { &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/02\/project-5-wallpaper-9\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 5: Wallpaper&#8221;<\/span><\/a><\/p>\n","protected":false},"author":673,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66914"}],"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\/673"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66914"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66914\/revisions"}],"predecessor-version":[{"id":66918,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66914\/revisions\/66918"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}