{"id":69268,"date":"2021-12-03T15:10:16","date_gmt":"2021-12-03T20:10:16","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69268"},"modified":"2021-12-03T15:10:16","modified_gmt":"2021-12-03T20:10:16","slug":"final-project-brandon-yi","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/03\/final-project-brandon-yi\/","title":{"rendered":"Final Project &#8211; Brandon Yi"},"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=\"1000\" data-height=\"600\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/sketch-8.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=\"1000\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">ptx = [];\npty = [];\nptx2 = []; \npty2 = [];\nnumberx = [];\nnumbery = [];\nvar d;\nvar angle;\nvar pieceNum;\nvar trapAngle = 360\/17;\nvar r1 = 280;\nvar r2 = 180;\nvar bool = false;\nvar table;\nvar numRows;\nvar pages = {   \n                title1: [], \n                minititle1: [],\n                goal1: [],\n                goal2: [],\n                goal3: [],\n                goal4: [],\n                goal5: [],\n                r: [0,200,255,5,255,255,112,255,169,255,255,255,206,38,0,2,2,0],\n                g: [72,0,206,172,85,51,200,206,0,128,51,153,168,151,171,200,116,72],\n                b: [108,0,4,10,0,51,255,4,56,0,153,51,78,41,255,35,174,108],\n            };\nvar logo;\n\nfunction preload() {\n    table = loadTable(\"17goalsdata.csv\", \"header\");\n    logo = loadImage(\"logo.png\");\n}\n\nfunction setup() {\n    createCanvas(1000,600);\n    numRows = table.getRowCount();\n    angleMode(DEGREES);\n    imageMode(CENTER);\n\n    for (var i = 0; i &lt; 19; i++) {\n        ptx[i] = r1*cos(7*trapAngle+((i+1)*trapAngle));\n        pty[i] = r1*sin(7*trapAngle+((i+1)*trapAngle));\n    }\n    for (var i = 0; i &lt; 19; i++) {\n        ptx2[i] = r2*cos(7*trapAngle+((i+1)*trapAngle));\n        pty2[i] = r2*sin(7*trapAngle+((i+1)*trapAngle));\n    } \n    for (var i = 0; i &lt; 19; i++) {\n        numberx[i] = ((r1+r2)\/2)*cos((7*trapAngle+((i+1)*trapAngle))+(trapAngle\/2));\n        numbery[i] = ((r1+r2)\/2)*sin((7*trapAngle+((i+1)*trapAngle))+(trapAngle\/2));\n    }   \n\n    for (var i = 0; i &lt; numRows; i++) {\n        pages.title1[i] = table.getString(i,\"Title\");\n        pages.goal1[i] = table.getString(i,\"Goal1\")\n        pages.goal2[i] = table.getString(i,\"Goal2\")\n        pages.goal3[i] = table.getString(i,\"Goal3\")\n        pages.goal4[i] = table.getString(i,\"Goal4\")\n        pages.goal5[i] = table.getString(i,\"Goal5\")\n        pages.minititle1[i] = table.getString(i,\"MiniTitle\");\n    }\n}\n\nfunction draw() {\n    push();\n    translate(width\/2,height\/2);\n    strokeWeight(10);\n    noFill();\n    background(220);\n    image(logo,0,-20,1024*r1\/879,r1);\n    \n    if (!bool) {\n        for (var i = 0; i &lt; 19; i++) {\n            drawTrapezoid(i);\n        }\n        angle = atan2(mouseY - height\/2,mouseX - width\/2);\n        pieceNum = 8+ceil(angle\/(trapAngle));\n        d = dist(width\/2,height\/2,mouseX,mouseY);\n        menuSelector(d);\n    }\n    else {\n        pop();\n\n        if (d&lt;r1 & d>r2) {\n            if (pieceNum==0) {\n                pieceNum=17;\n            }\n            let col = color(pages.r[pieceNum],pages.g[pieceNum],pages.b[pieceNum]);\n            drawTitle(pages.title1[pieceNum-1],col);\n            drawGoals(pages,60);\n        }\n        drawExitButton();\n    }\n}\n\nfunction drawExitButton() {\n    stroke(0);\n    fill(200,0,0);\n    rect(width-105,height-105,100,100,20);\n    fill(0);\n    strokeWeight(1);\n    text(\"Back\",width-75,height-50)\n    noStroke();\n}\n\nfunction drawTitle(title1,col) {\n    background(col);\n    strokeWeight(10);\n    stroke(0);\n    line(5,5,width-5,5);\n    line(5,5,5,height-5);\n    line(5,height-5,width-5,height-5);\n    line(width-5,height-5,width-5,5)\n    strokeWeight(2);\n    fill(255);\n    rect(5,5,100,100,20);\n    fill(0);\n    strokeWeight(2);\n    textSize(50);\n    textAlign(CENTER)\n    rectMode(CORNER);\n    text(pieceNum, 50,65);\n    textSize(40)\n    noStroke();\n    text(title1,120,25,840,300);\n}\n\nfunction drawGoals(pages,spacing) {\n    fill(0);\n    textAlign(LEFT)\n    strokeWeight(2);\n    textSize(30);\n    text(\"By 2030:\", 100,200-spacing,800);\n    textSize(20);\n    for (var i = 0; i &lt; 5; i++) {\n        text(\"Goal \" + (i+1) + \":\", 50, (i*spacing)+215);\n    }\n    text(pages.goal1[pieceNum-1],120,200,800);\n    text(pages.goal2[pieceNum-1],120,200+spacing,800);\n    text(pages.goal3[pieceNum-1],120,200+(2*spacing),800);\n    text(pages.goal4[pieceNum-1],120,200+(3*spacing),800);\n    text(pages.goal5[pieceNum-1],120,200+(4*spacing),800);\n}\n\nfunction drawTrapezoid(i) {\n    stroke(0);\n    beginShape();    \n    vertex(ptx2[i],pty2[i]);\n    vertex(ptx2[i+1],pty2[i+1]);\n    vertex(ptx[i+1],pty[i+1]);\n    vertex(ptx[i],pty[i]);\n    endShape(CLOSE);\n    rectMode(CENTER);\n    noStroke();\n    if (i&lt;18 & i>0) {\n        fill(0);\n        textSize(17);\n        textAlign(CENTER);\n        rectMode(CENTER);\n        text(i,numberx[i],numbery[i])\n        noFill();   \n    }\n    \n    \/\/rect(numberx[i],numbery[i],10,10);\n    rectMode(CORNER);\n}\n\nfunction mousePressed() {\n    if (d&lt;r1 & d>r2) {\n        bool = true;\n    }\n    if (mouseX&gt;895 & mouseY>485) {\n        bool = false;\n    }\n}\n\nfunction menuSelector(d) {\n    if (d&lt;r1 & d>r2) {\n        for (var i = 0; i &lt;= 18; i++) {\n            let col = color(pages.r[pieceNum],pages.g[pieceNum],pages.b[pieceNum])\n            fill(col);\n            ellipse(0,0,(2*r2)-5);\n            noStroke();\n            fill(0);\n            \/\/rectMode(CENTER);\n            textSize(30)\n            text(pages.minititle1[pieceNum],-r2+10,-20,(2*r2)-5,(2*r2)-5);\n            fill(col);\n            drawTrapezoid(pieceNum); \n        }\n    }\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>Steps to Run Project:<\/p>\n\n\n\n<ol><li>Go into &ldquo;Final Project&rdquo; folder<br>a. Location: handin-14-finalproject &ndash;&gt; btyi-14-project &ndash;&gt; Final Project<\/li><li>Navigating to this location in your console\/commandprompt\/etc.<\/li><li>Run local host by typing [php -S localhost:8000] (may be different for non-Windows users)<\/li><li>Type in localhost:8000 into your Google Chrome URL bar<\/li><\/ol><p>Description:<br>My program is a simplified display of the 17 Sustainable Development Goals of the United Nations. Essentially, I have created a summary of all 17 Goals, which 5 of the sub-targets of each of these goals and created a display of all that information.<br>Inside the Brainstorming folder, I put different drafts and other ideas I had made prior to completing my final draft. I also put all the information that I collected from the UN website into separate notes sheets before I converted to Excel, so those are located in the brainstorming folder as well.<\/p>\n\n\n\n<p>Inspiration:<br>Up until a couple of years ago, I had never heard of the 17 Sustainable Development Goals. Then when I learned about them, it surprised me that these goals weren&rsquo;t more readily available and advertised worldwide. But when I looked into these 17 goals, I realized that there was so much content that was put on the website, that I had no idea where to start. Therefore, for this project, I wanted to create a summarized\/simpler version of the UN&rsquo;s website, with the basic and important information consolidated into one place.<br>If I had more time, I would probably have wanted to add a little more information to the display, as well as make the transitions smoother and make the appearance look more professional. Functionality-wise, if I had more time I think I would have liked to add more user interaction, such as different operations using different keys on the keyboard, or maybe some sliders and other user-oriented devices.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch ptx = []; pty = []; ptx2 = []; pty2 = []; numberx = []; numbery = []; var d; var angle; var pieceNum; var trapAngle = 360\/17; var r1 = 280; var r2 = 180; var bool = false; var table; var numRows; var pages = { title1: [], minititle1: [], goal1: [], &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/03\/final-project-brandon-yi\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Final Project &#8211; Brandon Yi&#8221;<\/span><\/a><\/p>\n","protected":false},"author":679,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[116,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69268"}],"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\/679"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69268"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69268\/revisions"}],"predecessor-version":[{"id":69271,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69268\/revisions\/69271"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}