{"id":73710,"date":"2022-10-02T22:28:30","date_gmt":"2022-10-03T02:28:30","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=73710"},"modified":"2022-10-07T21:34:29","modified_gmt":"2022-10-08T01:34:29","slug":"project-05-wall-paper","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/02\/project-05-wall-paper\/","title":{"rendered":"Project-05 Wall Paper"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><p>I want to create textile patterns inspired by traditional Chinese symbols<\/p>\n\n\n\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/10\/sketch-44.js\" data-width=\"705\" data-height=\"630\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"705\" height=\"630\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Michael Li\n\/\/Section C \nvar radi = 30\nfunction setup() {\n    createCanvas(755, 630);\n    background(220);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n    background (220);\n\n}\n\nfunction draw() {\n    background(30, 28, 27);\n\n    var color = 0; \/\/set variable color\n    \/\/create a line with the for loop\n    for (var x = 0; x &lt;= width+80; x += 4.2*radi){\n        color += 1; \/\/ increment color by 1\n            if (color % 2 == 1){ \/\/ test color \n                stroke(255, 204, 51); \/\/bright yellow\n            } else {\n                stroke(182, 156, 129); \/\/grey\n            }\n        \/\/create a grid\n        for(var y = 0; y&lt;= height+80; y += 4.2*radi){\n            color += 1;\n            \/\/test for color\n            if (color % 2 == 1){\n                stroke(255, 204, 51); \/\/bright yellow\n            } else {\n                stroke(182, 156, 129); \/\/grey\n            }\n            \/\/two if statements in each for loop creates the alternating color pattern\n            pattern1(x, y); \/\/ call to draw function pattern 1\n            print(color.toString());\n            \n        }\n    }\n    \/\/draw a grid of pattern two\n    \/\/reposition x and y initial position\n    for (var x = 63; x &lt;= width + 80; x += 4.2*radi){\n        for(var y = 0; y &lt;= height + 80; y += 4.2*radi){\n\n        pattern2(x, y); \/\/draw pattern 2\n    }\n    }\n   \n    noLoop();\/\/draw once\n}\n    var flip1 = 1; \/\/set varibales for  flip\n    var flip2 = 1;\n\nfunction pattern1(x, y){\n    strokeWeight(2); \n    noFill();\n    \/\/only stroke no fill\n\n    push();\n\n    translate(x, y); \/\/ translate object to input x and y\n\n    \/\/top and bottom semi circle\n    arc(0, 0, radi*2, radi*2, PI+radians(7), 0-radians(7));\n    arc(0, 0, radi*2, radi*2, 0+radians(7), PI-radians(7));\n    \/\/middle long line\n    line(0-radi\/1.3, 0, 0+radi\/1.3, 0);\n\n    var xSpaing = 3.5;\/\/set a uniformed spacing\n\n    \/\/draw the same line 4 time\n    for (var i = 0; i&lt;= 4; i += 1){\n        \/\/test which loop number it is to flip the drawing\n        if (i == 1 || i == 3){\n            flip1 = -flip1; \/\/on first and third loop, flip the x position\n        } else if (i == 2){\n            flip2 = -flip2; \/\/on the second loop, flip the y position\n        }\n        line(0-flip1*radi\/1.1, 0-(flip2*6), \n        0-flip1*radi\/1.5, 0-(flip2*6)); \/\/ horizontal short\n        line(0+(flip1*xSpaing), 0+(flip2*radi\/1.1), \n        0+(flip1*xSpaing), 0+(flip2*radi\/1.3)); \/\/verticle short 1\n        line(0+(flip1*xSpaing), 0+(flip2*radi\/1.8), \n        0+(flip1*xSpaing), 0+(flip2*radi\/2.5)); \/\/ verticle short 2, closer to middle\n        line(0+(flip1*20), 0+(flip2*radi\/2.5), \n        0+(flip1*xSpaing), 0+(flip2*radi\/2.5)); \/\/ horizontal longer, at 4 corners\n    }\n\n    \/\/middle line top and bottom\n    line(0+radi\/2.2, 0+6, 0-radi\/2.2, 0+6); \/\/bottom middle\n    line(0+radi\/2.2, 0-6, 0-radi\/2.2, 0-6); \/\/top middle\n\n    \/\/four small arcs\n    arc(0, 0, radi*1.6, radi*1.6, radians(30), radians(63));\n    arc(0, 0, radi*1.6, radi*1.6, radians(85+30), radians(85+63));\n    arc(0, 0, radi*1.6, radi*1.6, radians(180+30), radians(180+63));\n    arc(0, 0, radi*1.6, radi*1.6, radians(265+30), radians(265+63));\n    pop();\n\n    push();\n    translate(x, y); \/\/translate to input x and y\n    rotate(radians(45)); \/\/ rotate around x, y by 45 degrees\n    rectMode(CENTER); \/\/draw rect around origin\n    \/\/draw rectangle to frame the pattern\n    rect(0, 0, radi*3, radi*3);\n        \/\/draw 4 times\n        for(var i = 0; i&lt;=4; i +=1){\n        \/\/test for which loop increment\n        if (i == 1 || i == 3){ \/\/first and third flip the x position\n            flip1 = -flip1;\n        } else if (i == 2){ \/\/second loop flip the y position\n            flip2 = -flip2;\n        }\n        \/\/draw 3 small squares by the corner of the big square\n        \/\/repeat for each corner using the for loop\n        rect(flip1*1.5*radi, flip2*1.5*radi, radi, radi);\n        rect(flip1*1.34*radi, flip2*1.34*radi, radi\/4, radi\/4);\n        rect(flip1*0.9*radi, flip2*1.34*radi, radi\/4, radi\/4);\n        rect(flip1*1.34*radi, flip2*0.9*radi, radi\/4, radi\/4);\n   }\n   pop()\n}\n\n\n\/\/second pattern, new arguments g and h\nfunction pattern2 (g, h){\n    push();\n    translate(g, h); \/\/ translate origin to g, h\n    rotate(radians(45)); \/\/rotate around origin by 45 degrees\n    rectMode(CENTER); \/\/ set rectMode\n    strokeWeight(2);\n    stroke(255, 204, 51, 100); \/\/ grey line color\n    fill(182, 156, 129, 100); \/\/ lower transparency\n    rect (1.5*radi, 1.5*radi, radi*1.8, radi*1.8); \/\/ medium size square\n    pop();\n\n    push();\n    translate(g, h);\n    stroke(182, 156, 129);\n    rectMode(CENTER);\n\n    rect(0, 2.1*radi, radi\/3, radi\/3); \/\/ small square inside\n\n    line(0, 0,  0, height); \/\/verticle lines\n    pop();\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I want to create textile patterns inspired by traditional Chinese symbols sketch \/\/Michael Li \/\/Section C var radi = 30 function setup() { createCanvas(755, 630); background(220); text(&#8220;p5.js vers 0.9.0 test.&#8221;, 10, 15); background (220); } function draw() { background(30, 28, 27); var color = 0; \/\/set variable color \/\/create a line with the for loop &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/10\/02\/project-05-wall-paper\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-05 Wall Paper&#8221;<\/span><\/a><\/p>\n","protected":false},"author":739,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[104,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73710"}],"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\/739"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=73710"}],"version-history":[{"count":9,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73710\/revisions"}],"predecessor-version":[{"id":73719,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/73710\/revisions\/73719"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=73710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=73710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=73710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}