{"id":66775,"date":"2021-10-01T11:16:00","date_gmt":"2021-10-01T15:16:00","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66775"},"modified":"2021-10-01T11:17:33","modified_gmt":"2021-10-01T15:17:33","slug":"project-5-wallpaper-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/01\/project-5-wallpaper-2\/","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=\"400\" data-height=\"400\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch.js\">wallpaper<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">function setup() {\n    createCanvas(400, 400);\n    background(0);\n    noLoop();\n}\n\nfunction draw() {\n    stroke(255, 202, 141); \/\/yellow\n    strokeWeight(0.5); \/\/for diagonal lines\n\n    for (var x = 0; x &lt;= 400; x += 50) { \/\/draw diagonal lines\n        for (var y = 0; y &lt;= 400; y += 50) {\n            line(x, y+height\/8, x+width\/8, y); \/\/ diagonal lines\n            line(x, y, x-width\/8, y-height\/8); \/\/ diagonal lines\n        }\n    }\n\n    strokeWeight(1.5); \/\/for petals\n    hpetal (0, 50); \/\/initial petal \n    for (var x = 0; x &lt;= 400; x+=100) { \/\/draw petals\n        for (var y = 50; y &lt;= 450; y+=100) {\n            hpetal(x, y); \n            hpetal(x+50, y+50);\n            hpetal(x-50, y-50);\n        }\n    } \n}\n\nfunction hpetal (x, y) {\n    \/\/left petal\n    fill(231, 193, 206); \/\/pink\n    beginShape();\n    curveVertex(x, y);\n    curveVertex(x, y);\n    curveVertex(x+25, y-10);\n    curveVertex(x+50, y);\n    curveVertex(x+25, y+10);\n    curveVertex(x, y);\n    curveVertex(x, y);\n    endShape();\n\n    \/\/right petal\n    fill(170, 201, 206); \/\/pale green\n    beginShape();\n    curveVertex(x+50, y);\n    curveVertex(x+50, y);\n    curveVertex(x+75, y-10);\n    curveVertex(x+100, y);\n    curveVertex(x+75, y+10);\n    curveVertex(x+50, y);\n    curveVertex(x+50, y);\n    endShape();\n\n    \/\/top petal\n    fill(244, 220, 208); \/\/pale pink\n    beginShape();\n    curveVertex(x+50, y-50);\n    curveVertex(x+50, y-50);\n    curveVertex(x+60, y-25);\n    curveVertex(x+50, y);\n    curveVertex(x+40, y-25);\n    curveVertex(x+50, y-50);\n    curveVertex(x+50, y-50);\n    endShape(); \n\n    \/\/bottom petal\n    fill(170, 201, 229); \/\/pale blue\n    beginShape();\n    curveVertex(x+50, y);\n    curveVertex(x+50, y);\n    curveVertex(x+60, y+25);\n    curveVertex(x+50, y+50);\n    curveVertex(x+40, y+25);\n    curveVertex(x+50, y);\n    curveVertex(x+50, y);\n    endShape(); \n\n}\n<\/code><\/pre><\/div>\n\n\n<p>Through this project, I became more comfortable with using nested loops and understood better how they work. This is my initial sketch: <\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_A2580D66F4FA-1-1024x1013.jpeg\" alt=\"\" class=\"wp-image-66780\" width=\"512\" height=\"507\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_A2580D66F4FA-1-1024x1013.jpeg 1024w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_A2580D66F4FA-1-300x297.jpeg 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_A2580D66F4FA-1-150x150.jpeg 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_A2580D66F4FA-1-768x760.jpeg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/IMG_A2580D66F4FA-1.jpeg 1137w\" sizes=\"(max-width: 512px) 85vw, 512px\"><\/figure><\/div>\n\n\n\n<p>I wanted to create a wallpaper that involved these symmetrical petals, and so I started by drawing them. Then I explored a little by shifting and overlapping the petals for a more interesting effect. This is the version without the overlaps, which I quite enjoy as well:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-01-at-10.56.26-AM.png\" alt=\"\" class=\"wp-image-66786\" width=\"600\" height=\"599\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-01-at-10.56.26-AM.png 800w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-01-at-10.56.26-AM-300x300.png 300w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-01-at-10.56.26-AM-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-01-at-10.56.26-AM-768x766.png 768w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><\/div>\n\n\n\n<p>My design doesn&rsquo;t quite remind me of wallpaper, instead, I see it more as a pattern for a silk square scarf. I really enjoyed testing and adding different elements to generate a pattern for this project! <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>wallpaper function setup() { createCanvas(400, 400); background(0); noLoop(); } function draw() { stroke(255, 202, 141); \/\/yellow strokeWeight(0.5); \/\/for diagonal lines for (var x = 0; x &lt;= 400; x += 50) { \/\/draw diagonal lines for (var y = 0; y &lt;= 400; y += 50) { line(x, y+height\/8, x+width\/8, y); \/\/ diagonal lines line(x, &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/01\/project-5-wallpaper-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 5: Wallpaper&#8221;<\/span><\/a><\/p>\n","protected":false},"author":671,"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\/66775"}],"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\/671"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66775"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66775\/revisions"}],"predecessor-version":[{"id":67887,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66775\/revisions\/67887"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}