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: [],
goal2: [],
goal3: [],
goal4: [],
goal5: [],
r: [0,200,255,5,255,255,112,255,169,255,255,255,206,38,0,2,2,0],
g: [72,0,206,172,85,51,200,206,0,128,51,153,168,151,171,200,116,72],
b: [108,0,4,10,0,51,255,4,56,0,153,51,78,41,255,35,174,108],
};
var logo;
function preload() {
table = loadTable("17goalsdata.csv", "header");
logo = loadImage("logo.png");
}
function setup() {
createCanvas(1000,600);
numRows = table.getRowCount();
angleMode(DEGREES);
imageMode(CENTER);
for (var i = 0; i < 19; i++) {
ptx[i] = r1*cos(7*trapAngle+((i+1)*trapAngle));
pty[i] = r1*sin(7*trapAngle+((i+1)*trapAngle));
}
for (var i = 0; i < 19; i++) {
ptx2[i] = r2*cos(7*trapAngle+((i+1)*trapAngle));
pty2[i] = r2*sin(7*trapAngle+((i+1)*trapAngle));
}
for (var i = 0; i < 19; i++) {
numberx[i] = ((r1+r2)/2)*cos((7*trapAngle+((i+1)*trapAngle))+(trapAngle/2));
numbery[i] = ((r1+r2)/2)*sin((7*trapAngle+((i+1)*trapAngle))+(trapAngle/2));
}
for (var i = 0; i < numRows; i++) {
pages.title1[i] = table.getString(i,"Title");
pages.goal1[i] = table.getString(i,"Goal1")
pages.goal2[i] = table.getString(i,"Goal2")
pages.goal3[i] = table.getString(i,"Goal3")
pages.goal4[i] = table.getString(i,"Goal4")
pages.goal5[i] = table.getString(i,"Goal5")
pages.minititle1[i] = table.getString(i,"MiniTitle");
}
}
function draw() {
push();
translate(width/2,height/2);
strokeWeight(10);
noFill();
background(220);
image(logo,0,-20,1024*r1/879,r1);
if (!bool) {
for (var i = 0; i < 19; i++) {
drawTrapezoid(i);
}
angle = atan2(mouseY - height/2,mouseX - width/2);
pieceNum = 8+ceil(angle/(trapAngle));
d = dist(width/2,height/2,mouseX,mouseY);
menuSelector(d);
}
else {
pop();
if (d<r1 & d>r2) {
if (pieceNum==0) {
pieceNum=17;
}
let col = color(pages.r[pieceNum],pages.g[pieceNum],pages.b[pieceNum]);
drawTitle(pages.title1[pieceNum-1],col);
drawGoals(pages,60);
}
drawExitButton();
}
}
function drawExitButton() {
stroke(0);
fill(200,0,0);
rect(width-105,height-105,100,100,20);
fill(0);
strokeWeight(1);
text("Back",width-75,height-50)
noStroke();
}
function drawTitle(title1,col) {
background(col);
strokeWeight(10);
stroke(0);
line(5,5,width-5,5);
line(5,5,5,height-5);
line(5,height-5,width-5,height-5);
line(width-5,height-5,width-5,5)
strokeWeight(2);
fill(255);
rect(5,5,100,100,20);
fill(0);
strokeWeight(2);
textSize(50);
textAlign(CENTER)
rectMode(CORNER);
text(pieceNum, 50,65);
textSize(40)
noStroke();
text(title1,120,25,840,300);
}
function drawGoals(pages,spacing) {
fill(0);
textAlign(LEFT)
strokeWeight(2);
textSize(30);
text("By 2030:", 100,200-spacing,800);
textSize(20);
for (var i = 0; i < 5; i++) {
text("Goal " + (i+1) + ":", 50, (i*spacing)+215);
}
text(pages.goal1[pieceNum-1],120,200,800);
text(pages.goal2[pieceNum-1],120,200+spacing,800);
text(pages.goal3[pieceNum-1],120,200+(2*spacing),800);
text(pages.goal4[pieceNum-1],120,200+(3*spacing),800);
text(pages.goal5[pieceNum-1],120,200+(4*spacing),800);
}
function drawTrapezoid(i) {
stroke(0);
beginShape();
vertex(ptx2[i],pty2[i]);
vertex(ptx2[i+1],pty2[i+1]);
vertex(ptx[i+1],pty[i+1]);
vertex(ptx[i],pty[i]);
endShape(CLOSE);
rectMode(CENTER);
noStroke();
if (i<18 & i>0) {
fill(0);
textSize(17);
textAlign(CENTER);
rectMode(CENTER);
text(i,numberx[i],numbery[i])
noFill();
}
//rect(numberx[i],numbery[i],10,10);
rectMode(CORNER);
}
function mousePressed() {
if (d<r1 & d>r2) {
bool = true;
}
if (mouseX>895 & mouseY>485) {
bool = false;
}
}
function menuSelector(d) {
if (d<r1 & d>r2) {
for (var i = 0; i <= 18; i++) {
let col = color(pages.r[pieceNum],pages.g[pieceNum],pages.b[pieceNum])
fill(col);
ellipse(0,0,(2*r2)-5);
noStroke();
fill(0);
//rectMode(CENTER);
textSize(30)
text(pages.minititle1[pieceNum],-r2+10,-20,(2*r2)-5,(2*r2)-5);
fill(col);
drawTrapezoid(pieceNum);
}
}
}
Steps to Run Project:
- Go into “Final Project” folder
a. Location: handin-14-finalproject –> btyi-14-project –> Final Project - Navigating to this location in your console/commandprompt/etc.
- Run local host by typing [php -S localhost:8000] (may be different for non-Windows users)
- Type in localhost:8000 into your Google Chrome URL bar
Description:
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.
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.
Inspiration:
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’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’s website, with the basic and important information consolidated into one place.
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.