{"id":66844,"date":"2021-10-02T13:50:12","date_gmt":"2021-10-02T17:50:12","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66844"},"modified":"2021-10-02T13:50:12","modified_gmt":"2021-10-02T17:50:12","slug":"project-5-wall-paper","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/02\/project-5-wall-paper\/","title":{"rendered":"Project 5 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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"600\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/10\/sketch-5.js\">sketch<\/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\">function setup() {\n    createCanvas(600, 600);\n    background(220);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n    noLoop();\n}\n\nvar s = 5\nvar xstar = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];\nvar ystar = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];\nfunction draw() {\n\/\/ background hexagons\n    push()\n    background(255)\n    for(var x = 0; x &lt;= 600; x += 15){\n        for (var y = 0; y &lt;= 600; y += 2*s*sqrt(3)\/2){\n            fill(random(100,160),random(200,220),random(220,255))\n            hexagon(x,y)\n            noLoop();\n        }\n    }\n    for (var x = 7.5; x &lt;= 600; x += 15){\n        for (var y = s*sqrt(3)\/2; y &lt;= 600; y += 2*s*sqrt(3)\/2){\n            fill(random(100,160),random(150,200),random(150,255))\n            hexagon(x,y)\n        }\n    }\n\/\/ stars\n    push()\n    translate(random(0,100),random(0,300))\n    scale(0.3)\n    strokeWeight(random(8,25))\n    stroke(random(30,80),random(20,50),random(150,230))\n    rotate(random(radians(50,360)))\n    fill(0)\n    var nPoints = xstar.length;\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        vertex(xstar[i], ystar[i]);\n    }\n    endShape(CLOSE);\n    pop()\n    push()\n    translate(random(100,200),random(0,300))\n    scale(0.3)\n    strokeWeight(random(8,25))\n    stroke(random(30,80),random(20,50),random(150,230))\n    rotate(random(radians(50,360)))\n    fill(0)\n    var nPoints = xstar.length;\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        vertex(xstar[i], ystar[i]);\n    }\n    endShape(CLOSE);\n    pop()\n\n    push()\n    translate(random(200,300),random(0,300))\n    scale(0.3)\n    strokeWeight(random(8,25))\n    stroke(random(30,80),random(20,50),random(150,230))\n    rotate(random(radians(50,360)))\n    fill(0)\n    var nPoints = xstar.length;\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        vertex(xstar[i], ystar[i]);\n    }\n    endShape(CLOSE);\n    pop()\n    push()\n    translate(random(300,400),random(0,300))\n    scale(0.3)\n    strokeWeight(random(8,25))\n    stroke(random(30,80),random(20,50),random(150,230))\n    rotate(random(radians(50,360)))\n    fill(0)\n    var nPoints = xstar.length;\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        vertex(xstar[i], ystar[i]);\n    }\n    endShape(CLOSE);\n    pop()\n\n    push()\n    translate(random(400,500),random(0,300))\n    scale(0.3)\n    strokeWeight(random(8,25))\n    stroke(random(30,80),random(20,50),random(150,230))\n    rotate(random(radians(50,360)))\n    fill(0)\n    var nPoints = xstar.length;\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        vertex(xstar[i], ystar[i]);\n    }\n    endShape(CLOSE);\n    pop()\n    push()\n    translate(random(500,600),random(0,300))\n    scale(0.3)\n    strokeWeight(random(8,25))\n    stroke(random(30,80),random(20,50),random(150,230))\n    rotate(random(radians(50,360)))\n    fill(0)\n    var nPoints = xstar.length;\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        vertex(xstar[i], ystar[i]);\n    }\n    endShape(CLOSE);\n    pop()\n\n    push()\n    translate(random(0,100),random(300,580))\n    scale(0.3)\n    strokeWeight(random(8,25))\n    stroke(random(30,80),random(20,50),random(150,230))\n    rotate(random(radians(50,360)))\n    fill(0)\n    var nPoints = xstar.length;\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        vertex(xstar[i], ystar[i]);\n    }\n    endShape(CLOSE);\n    pop()\n    push()\n    translate(random(100,200),random(300,580))\n    scale(0.3)\n    strokeWeight(random(8,25))\n    stroke(random(30,80),random(20,50),random(150,230))\n    rotate(random(radians(50,360)))\n    fill(0)\n    var nPoints = xstar.length;\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        vertex(xstar[i], ystar[i]);\n    }\n    endShape(CLOSE);\n    pop()\n\n    push()\n    translate(random(200,300),random(300,580))\n    scale(0.3)\n    strokeWeight(random(8,25))\n    stroke(random(30,80),random(20,50),random(150,230))\n    rotate(random(radians(50,360)))\n    fill(0)\n    var nPoints = xstar.length;\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        vertex(xstar[i], ystar[i]);\n    }\n    endShape(CLOSE);\n    pop()\n    push()\n    translate(random(300,400),random(300,580))\n    scale(0.3)\n    strokeWeight(random(8,25))\n    stroke(random(30,80),random(20,50),random(150,230))\n    rotate(random(radians(50,360)))\n    fill(0)\n    var nPoints = xstar.length;\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        vertex(xstar[i], ystar[i]);\n    }\n    endShape(CLOSE);\n    pop()\n\n    push()\n    translate(random(400,500),random(300,580))\n    scale(0.3)\n    strokeWeight(random(8,25))\n    stroke(random(30,80),random(20,50),random(40,200))\n    rotate(random(radians(50,360)))\n    fill(0)\n    var nPoints = xstar.length;\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        vertex(xstar[i], ystar[i]);\n    }\n    endShape(CLOSE);\n    pop()\n    push()\n    translate(random(500,600),random(300,580))\n    scale(0.3)\n    strokeWeight(random(8,25))\n    stroke(random(30,80),random(20,50),random(40,200))\n    rotate(random(radians(50,360)))\n    fill(0)\n    var nPoints = xstar.length;\n    beginShape();\n    for (var i = 0; i &lt; nPoints; i++) {\n        vertex(xstar[i], ystar[i]);\n    }\n    endShape(CLOSE);\n    pop()\n\/\/TEXT CMU SCHOOL OF MUSIC\n    for (var x = 0; x &lt;= 600; x += 150){\n        for (var y = 50; y &lt;= 600; y += 180){\n            push()\n            translate(x,y)\n            rotate(radians(45))\n            textSize(15);\n            textStyle(ITALIC)\n            stroke(0,0,128)\n            strokeWeight(1.8)\n            fill(0,0,128)\n            text(\"CMU SCHOOL OF MUSIC\",-50,-20)\n            pop()\n        }   \n    }\n\/\/TEXT ELECTRONIC MUSIC\n    for (var x = 0; x &lt;= 800; x += 150){\n        for (var y = 50; y &lt;= 800; y += 175){\n            push()\n            translate(x,y)\n            rotate(radians(45))\n            textSize(15);\n            textStyle(ITALIC)\n            stroke(225,112,133)\n            strokeWeight(1.8)\n            fill(255, 182, 193)\n            text(\"ELECTRONIC MUSIC\",-30,-80)\n            pop()\n        }   \n    }\n    pop()\n}\n\n\/\/self-defined function: hexagon\nfunction hexagon(x,y){\n    push();\n    translate(x,y)\n    noStroke();\n    triangle(0,0,-s,0,-s\/2,-s*sqrt(3)\/2)\n    triangle(0,0,-s\/2,-s*sqrt(3)\/2,s\/2,-s*sqrt(3)\/2)\n    triangle(0,0,s,0,s\/2,-s*sqrt(3)\/2)\n    triangle(0,0,-s,0,-s\/2,s*sqrt(3)\/2)\n    triangle(0,0,-s\/2,s*sqrt(3)\/2,s\/2,s*sqrt(3)\/2)\n    triangle(0,0,s,0,s\/2,s*sqrt(3)\/2)\n    pop();\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>I started the project by creating a background that consists of many small hexagons, I gave them random colors, but I decided on the general trend of the colors so they seem coherent. Then I drew stars appearing randomly in certain areas with random color(within a hue), random rotation, and random stroke and strokeWeight(within a range). Lastly, I drew the rotated pattern of the texts using for loops. Trying to keep them all rotated within the for loop was challenging for me. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I started the project by creating a background that consists of many small hexagons, I gave them random colors, but I decided on the general trend of the colors so they seem coherent. Then I drew stars appearing randomly in certain areas with random color(within a hue), random rotation, and random stroke and strokeWeight(within a &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/10\/02\/project-5-wall-paper\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 5 Wall Paper&#8221;<\/span><\/a><\/p>\n","protected":false},"author":667,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[104,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66844"}],"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\/667"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66844"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66844\/revisions"}],"predecessor-version":[{"id":66847,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66844\/revisions\/66847"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}