{"id":66819,"date":"2021-10-02T00:26:00","date_gmt":"2021-10-02T04:26:00","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66819"},"modified":"2021-10-02T00:26:11","modified_gmt":"2021-10-02T04:26:11","slug":"project-5-wallpaper-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/02\/project-5-wallpaper-3\/","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\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/wpf-wallpaper.js\" data-width=\"600\" data-height=\"600\">wpf-wallpaper<\/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=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var size = 40; \/\/variable that determines the size of the indvidiual flowers\nvar ypos = size;\nvar xpos = size;\nvar oDist = size * 1.4 \/\/distance between two origins for the rings\nvar storedY; \/\/variable to store previous ypos\n\nfunction setup() {\n    createCanvas(600, 600);\n    background(231,227,210);\n}\n\nfunction draw() {\n    for(ypos = size; ypos &lt;= height; ypos +=(2*size)+oDist) { \/\/loop that increases the ypos and repeats the x loops\n\n        for(var xpos = size; xpos &lt;= width + size; xpos += 2*size){ \/\/loop to draw the line of flowers\n            storedY = ypos; \/\/stores ypos\n            fill(0);\n            push();\n            translate(xpos,ypos);\n            flower(0,0);\n            pop();\n        }\n        ypos += oDist + (7*size\/24);\n\n        for(var xpos = oDist\/2; xpos &lt;= width + size; xpos += oDist){ \/\/loop to draw the line of rings\n            push();\n            fill(230,192,71);\n            translate(xpos,ypos);\n            criss(0,0);\n            pop();\n        }\n        ypos = storedY; \/\/sets ypos back to what it was when the loop began so the loop iteration works properly and fills the screen\n    }\n    noLoop();\n}\n\nfunction criss(x,y){ \/\/function that draws the ring shaps by drawing rotated flowers\n    push();\n    rotate(radians(45));\n    flower(x,y);\n    pop();\n}\n\nfunction flower(a,b){ \/\/function that draws the flower by drawing a petal and then rotating 90 degrees and repeating\n    petal(a,b);\n    push();\n    rotate(radians(90));\n    petal(a,b);\n    pop();\n    push();\n    rotate(radians(180));\n    petal(a,b);\n    pop();\n    push();\n    rotate(radians(270));\n    petal(a,b);\n    pop();\n}\n\nfunction petal(x,y) { \/\/function that draws an idvidual petal composed of two triangles and a square\n    noStroke();\n    var side = size\/(1+sqrt(3)); \/\/variable that determins the length of the side of the square and equilateral triangle\n    var triHigh = side*(sqrt(3)\/2); \/\/variable that determins the height of the triangle based on the length of the side\n    triangle(x,y,x-(side\/2),y+triHigh,x+(side\/2),y+triHigh);\n    square(x-(side\/2),y+triHigh,side);\n    triangle(x,y+size,x-(side\/2),y+size-triHigh,x+(side\/2),y+size-triHigh);\n}<\/code><\/pre><\/div>\n\n\n\n<p>I loved this project. I had a really great time breaking down the steps of drawing into individual functions to make the process easier. Additionally, it was very satisfying to get the loops working properly because I had to iterate on that a few times. The patterns would either be too far apart or on top of one another. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>wpf-wallpaper var size = 40; \/\/variable that determines the size of the indvidiual flowers var ypos = size; var xpos = size; var oDist = size * 1.4 \/\/distance between two origins for the rings var storedY; \/\/variable to store previous ypos function setup() { createCanvas(600, 600); background(231,227,210); } function draw() { for(ypos = size; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/02\/project-5-wallpaper-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 5: Wallpaper&#8221;<\/span><\/a><\/p>\n","protected":false},"author":648,"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\/66819"}],"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\/648"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66819"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66819\/revisions"}],"predecessor-version":[{"id":66823,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66819\/revisions\/66823"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}