xxxxxxxxxx693
//This distribution graph is created with the open access API of Cleveland Museum of Art. The mapped data is calculated with moving average to create a smooth graphic effect.let fontBold;let fontReg;let fontMed;let myData;let total_age_avg = 59.3;let female_age_avg = 56.7;let male_age_avg = 60.0;let sceneNum = 0;function preload() { fontBold = loadFont('fontBold.otf'); fontReg = loadFont('fontReg.otf'); fontMed = loadFont('fontMed.otf'); myData = loadJSON('data1.json');}function setup() { createCanvas(600, 750); } function draw() { //female() switch (sceneNum) { case 0: groupview(); break; case 1: female(); break; case 2: male(); break; case 3: total(); break; } }function total() { clear(); background(240); textFont(fontReg); textSize(16); //buttons //total push(); noStroke(); fill(255,140,0,85); circle(225,670,25); textAlign(CENTER); textSize(10); fill(0); text('total artists',217,690,20,30); pop(); //male push(); noStroke(); fill(0,0,250,80); circle(275,670,25); textAlign(CENTER); textSize(10); fill(0); text('male artists',267,690,20,30); pop(); //female push(); noStroke(); fill(250,0,0,80) circle(325,670,25) textAlign(CENTER) textSize(10) fill(0); text('female artists',317,690,20,30) pop(); //group push(); noStroke(); fill(20,20,20,80) circle(375,670,25) textAlign(CENTER) textSize(10) fill(0); text('group view',367,690,20,30) pop(); //title textFont(fontReg); textSize(16); push(); textAlign(CENTER); text("Age distribution of artists upon entering the collection of Cleveland Museum of Art",80,20,440,40); pop(); //y axis stroke(0); textSize(12); line(80,100,80,600); line(520,100,520,600); push(); strokeWeight(1) text("Age", 50, 80); pop(); push(); fill(0); strokeWeight(5); for (let i = 0; i < 9 ; i++ ) { point(80,110+i*60); point(520,110+i*60); } pop(); push(); textSize(10); for (let i = 0; i < 9 ; i++ ) { text(100-i*10,50,110+i*60); } pop(); //x axis push(); noStroke(); fill(75,0,130); textSize(10); textAlign(CENTER); text('0',width/2,600); text('35',width/2+96,600); text('35',width/2-96,600); pop(); //import artist data for (let i = 3; i < 77; i++){ push(); stroke(255,140,0,80); rectMode(CENTER); //draw trail of points for total artists for (let a = 7; a > 2; a--){ strokeWeight(a); point(width/2 - myData.total_avg[i] *(1.5+0.3*a),590-i*6); point(width/2 + myData.total_avg[i] *(1.5+0.3*a),590-i*6); } pop(); } //avg line push(); stroke(255,160,0); line(70,110+(100-total_age_avg)*6,530,110+(100-total_age_avg)*6); noStroke(); fill(255,140,0); text('avg '+ total_age_avg, 535,90+(100-total_age_avg)*6,10,60); pop();}function male() { clear(); background(240); textFont(fontReg); textSize(16); //buttons //total push(); noStroke(); fill(255,140,0,85) circle(225,670,25) textAlign(CENTER) textSize(10) fill(0); text('total artists',217,690,20,30) pop(); //male push(); noStroke(); fill(0,0,250,80) circle(275,670,25) textAlign(CENTER) textSize(10) fill(0); text('male artists',267,690,20,30) pop(); //female push(); noStroke(); fill(250,0,0,80) circle(325,670,25) textAlign(CENTER) textSize(10) fill(0); text('female artists',317,690,20,30) pop(); //group push(); noStroke(); fill(20,20,20,80) circle(375,670,25) textAlign(CENTER) textSize(10) fill(0); text('group view',367,690,20,30) pop(); //title textFont(fontReg); textSize(16); push(); textAlign(CENTER); text("Age distribution of artists upon entering the collection of Cleveland Museum of Art",80,20,440,40); pop(); //y axis stroke(0); textSize(12); line(80,100,80,600); line(520,100,520,600); push(); strokeWeight(1) text("Age", 50, 80); pop(); push(); fill(0); strokeWeight(5); for (let i = 0; i < 9 ; i++ ) { point(80,110+i*60); point(520,110+i*60); } pop(); push(); textSize(10); for (let i = 0; i < 9 ; i++ ) { text(100-i*10,50,110+i*60); } pop(); //x axis push(); noStroke(); fill(75,0,130); textSize(10); textAlign(CENTER); text('0',width/2,600); text('35',width/2+96,600); text('35',width/2-96,600); pop(); //avg line push(); stroke(0,0,250,80); line(70,110+(100-male_age_avg)*6,530,110+(100-male_age_avg)*6); noStroke(); fill(0,0,250); text('avg '+ male_age_avg, 535,90+(100-male_age_avg)*6,10,60); pop(); //import male artist data for (let i = 3; i < 77; i++){ push(); stroke(0,0,220,80); rectMode(CENTER); //draw trail of points for male artists for (let a = 5; a > 1; a--){ strokeWeight(a); point(width/2 - myData.male_avg[i] *(1.5+0.3*a),590-i*6); point(width/2 + myData.male_avg[i] *(1.5+0.3*a),590-i*6); } pop(); }}function female() { clear(); background(240); textFont(fontReg); textSize(16); //buttons //total push(); noStroke(); fill(255,140,0,85) circle(225,670,25) textAlign(CENTER) textSize(10) fill(0); text('total artists',217,690,20,30) pop(); //male push(); noStroke(); fill(0,0,250,80) circle(275,670,25) textAlign(CENTER) textSize(10) fill(0); text('male artists',267,690,20,30) pop(); //female push(); noStroke(); fill(250,0,0,80) circle(325,670,25) textAlign(CENTER) textSize(10) fill(0); text('female artists',317,690,20,30) pop(); //group push(); noStroke(); fill(20,20,20,80) circle(375,670,25) textAlign(CENTER) textSize(10) fill(0); text('group view',367,690,20,30) pop(); //title textFont(fontReg); textSize(16); push(); textAlign(CENTER); text("Age distribution of artists upon entering the collection of Cleveland Museum of Art",80,20,440,40); pop(); //y axis stroke(0); textSize(12); line(80,100,80,600); line(520,100,520,600); push(); strokeWeight(1) text("Age", 50, 80); pop(); push(); fill(0); strokeWeight(5); for (let i = 0; i < 9 ; i++ ) { point(80,110+i*60); point(520,110+i*60); } pop(); push(); textSize(10); for (let i = 0; i < 9 ; i++ ) { text(100-i*10,50,110+i*60); } pop(); //x axis push(); noStroke(); fill(75,0,130); textSize(10); textAlign(CENTER); text('0',width/2,600); text('35',width/2+96,600); text('35',width/2-96,600); pop(); //avg line push(); stroke(250,0,0,80); line(70,110+(100-female_age_avg)*6,530,110+(100-female_age_avg)*6); noStroke(); fill(250,0,0); text('avg '+ female_age_avg, 535,95+(100-female_age_avg)*6,10,60); pop(); //import female artist data for (let i = 3; i < 77; i++){ push(); stroke(250,0,0,60); rectMode(CENTER); //draw trail of points for female artists for (let a = 5; a > 1; a--){ strokeWeight(a); point(width/2 - myData.female_avg[i] *(1.5+0.5*a),590-i*6); point(width/2 + myData.female_avg[i] *(1.5+0.5*a),590-i*6); } pop(); } }function groupview() { clear(); background(240); textFont(fontReg); textSize(16); //buttons //total push(); noStroke(); fill(255,140,0,85) circle(225,670,25) textAlign(CENTER) textSize(10) fill(0); text('total artists',217,690,20,30) pop(); //male push(); noStroke(); fill(0,0,250,80) circle(275,670,25) textAlign(CENTER) textSize(10) fill(0); text('male artists',267,690,20,30) pop(); //female push(); noStroke(); fill(250,0,0,80) circle(325,670,25) textAlign(CENTER) textSize(10) fill(0); text('female artists',317,690,20,30) pop(); //group push(); noStroke(); fill(20,20,20,80) circle(375,670,25) textAlign(CENTER) textSize(10) fill(0); text('group view',367,690,20,30) pop(); //title textFont(fontReg); textSize(16); push(); textAlign(CENTER); text("Age distribution of artists upon entering the collection of Cleveland Museum of Art",80,20,440,40); pop(); //y axis stroke(0); textSize(12); line(80,100,80,600); line(520,100,520,600); push(); strokeWeight(1) text("Age", 50, 80); pop(); push(); fill(0); strokeWeight(5); for (let i = 0; i < 9 ; i++ ) { point(80,110+i*60); point(520,110+i*60); } pop(); push(); textSize(10); for (let i = 0; i < 9 ; i++ ) { text(100-i*10,50,110+i*60); } pop(); //x axis push(); noStroke(); fill(75,0,130); textSize(10); textAlign(CENTER); text('0',width/2,600); text('35',width/2+96,600); text('35',width/2-96,600); pop(); //import artist data for (let i = 3; i < 77; i++){ push(); stroke(255,140,0,80); rectMode(CENTER); //draw trail of points for total artists for (let a = 7; a > 2; a--){ strokeWeight(a); point(width/2 - myData.total_avg[i] *(1.5+0.3*a),590-i*6); point(width/2 + myData.total_avg[i] *(1.5+0.3*a),590-i*6); } pop(); } //avg line push(); stroke(255,160,0); line(70,110+(100-total_age_avg)*6,530,110+(100-total_age_avg)*6); noStroke(); fill(255,140,0); text('avg '+ total_age_avg, 535,90+(100-total_age_avg)*6,10,60); pop(); push(); stroke(250,0,0,80); line(70,110+(100-female_age_avg)*6,530,110+(100-female_age_avg)*6); noStroke(); fill(250,0,0); text('avg '+ female_age_avg, 535,105+(100-female_age_avg)*6,10,60); pop(); push(); stroke(0,0,250,80); line(70,110+(100-male_age_avg)*6,530,110+(100-male_age_avg)*6); noStroke(); fill(0,0,250); text('avg '+ male_age_avg, 535,70+(100-male_age_avg)*6,10,60); pop(); //import female artist data for (let i = 3; i < 77; i++){ push(); stroke(250,0,0,60); rectMode(CENTER); //draw trail of points for female artists for (let a = 5; a > 1; a--){ strokeWeight(a); point(width/2 - myData.female_avg[i] *(1.5+0.5*a),590-i*6); point(width/2 + myData.female_avg[i] *(1.5+0.5*a),590-i*6); } pop(); } //import male artist data for (let i = 3; i < 77; i++){ push(); stroke(0,0,220,80); rectMode(CENTER); //draw trail of points for male artists for (let a = 5; a > 1; a--){ strokeWeight(a); point(width/2 - myData.male_avg[i] *(1.5+0.3*a),590-i*6); point(width/2 + myData.male_avg[i] *(1.5+0.3*a),590-i*6); } pop(); } } function mouseClicked(){ if(mouseX > 300 && mouseX < 350 && mouseY > 645 && mouseY < 695){ sceneNum = 1 } if(mouseX > 250 && mouseX < 300 && mouseY > 645 && mouseY < 695){ sceneNum = 2 } if(mouseX > 200 && mouseX < 250 && mouseY > 645 && mouseY < 695){ sceneNum = 3 } if(mouseX > 350 && mouseX < 400 && mouseY > 645 && mouseY < 695){ sceneNum = 0 }}