finalproject-karen

//https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=99cfea65a5bb30650b3d31eb1713233e:15:73386102&q=china

var input, button, keyword;

//for search button

​

var api = 'https://api.nytimes.com/svc/search/v2/articlesearch.json?';

var apikey = 'api-key=99cfea65a5bb30650b3d31eb1713233e:15:73386102';

var query = '&q=china';

var call = api + apikey + query;

//china news article api

​

var keycompare = [];//variable that compares keyword input with keywords in each article

var newsData;//JSON file data inside this variable

var docno = []; //position of documents found

var k = 0;

var diameter=100;

var speed=50;

var song;

​

var font1;

var font2;

var font3;

​

var img;//dragon image

​

function preload() { //*use preload to load data before the sketch starts.*

  newsData = loadJSON(call);//load JSON file

  song = loadSound('Waltz-of-the-flowers.mp3');//load mp3 music file

  img = loadImage("dragon.png"); 

  font1 = loadFont('PlayfairDisplay-Black.otf');

  font2 = loadFont('KaushanScript-Regular.otf');

  font3 = loadFont('Sofia-Regular.otf');

}

​

function setup() {

  gotData(); //*because we put loadJSON in preload, we can call gotData just as a normal function.*

  createCanvas(windowWidth, windowHeight);//create canvas

  input = createInput();

  input.position(20, 65);//position of the input 

  /*create an input box*/

  button = createButton('search');

  button.position(input.x + input.width, 65);//position of the button

  button.mousePressed(search);//everytime the mouse is pressed on button, search function is called

  /*create an search button*/

​

  keyword = createElement('h2', 'keyword');

  keyword.position(20, 5);//position of keyword

  /*display keyword*/

​

  textAlign(CENTER);

  textSize(50);

​

  console.log(newsData); //check we are getting the data

  song.loop();

  /*start playing the music*/

​

}

​

function gotData() { 

  for (var i = 0; i < newsData.response.docs.length; i++) {

    keycompare[i] = [];

    for (var j = 0; j < newsData.response.docs[i].keywords.length; j++) {

      keycompare[i][j] = newsData.response.docs[i].keywords[j].value;

    }

  }

​

}

​

​

function search() {

  var key = input.value();//keyword entered

  keyword.html('search for news related to ' + key + ':');//display key on the screen with the results

  input.value('');//clear input value

​

  for (var i = 0; i < newsData.response.docs.length; i++) {

    for (var j = 0; j < newsData.response.docs[i].keywords.length; j++) {

      // keycompare[i][j]=[];//3D array to split key phrases into words and search more accurately

      // var keyPhrases= keycompare[i][j];

      // var keywordarray=keyPhrases.split(" ");

      // for (var k=0;k<keywordarray.length;k++){

       if (keycompare[i][j] == key) {

         docno.push(i);

       }

      //}

    }

  }

​

}

​

/*2d array: i determines the position of news article, j determines the position of keyword within that article*/

/*docno stores the position of article founded to contain the same keyword as input*/

​

​

​

function draw() {

  display(k);

  //call function display with argument k, k=0 initially,meaning that data visualization starts from the first article number in docno

}

​

function nextpage() {

  k++;

  if (k >= docno.length) { 

    k = 0;

    //if data visualization is finished, starts from the first article, it's a loop~

  }

}

​

​

function display(docnumber) {

  var backgroundx=map(mouseX,0,windowWidth,0,255);

  var backgroundy=map(mouseY,0,windowHeight,0,255);//determine the color by moving mouse

  background(255-backgroundx, 255-backgroundy, 255-random(30, 200));

  if (docno.length == 0) { //*if docno does not yet exist (eg. the search function is still running)*

    return false; //*then stop this function here. the "return false" command is a way of stopping the function from running*

  } 

  //--------------------------------//

  //next page button//

  //if the button is clicked, function nextpage is called, so that article is flipped over to the next

  button = createButton('next page');

  button.position(250, 65);

  button.mousePressed(nextpage);

  //--------------------------------//

  //text headline//

  //docno[k]=docno[docnumber],indicating the position of found articles within the JSON file

  fill(200,diameter); 

  textSize(25);

  noStroke();

  rect(365,30,900,30);

  fill(backgroundx, backgroundy, random(30, 200));//colour will change depending on mouse position

  textFont(font2);

  text(newsData.response.docs[docno[docnumber]].headline.main, 310, 30,1000,30);

  //--------------------------------//

  //snippet//

  //split string so that each snippet is split into words and positioned randomly on the screen

  var str=newsData.response.docs[docno[docnumber]].snippet;

  var array=str.split(" ");

  for (var p=0;p<array.length;p++){

   textFont(font3);

   textSize(random(100));

   text(array[p],random(windowWidth),random(windowHeight));

  }

    //--------------------------------//

  //music speed and framerate//

  //depeding on the sequence of articles inside docno array, more clicks, faster speed, back to normal speed when k=0

  var speedofSound = map(docnumber,0, docno.length, 1, 3);

  speedofSound = constrain(speedofSound, 0.01, 4);//make the speed within 0.01 to 4 so it's not too fast

  song.rate(speedofSound);

  frameRate(speedofSound*20);

  //--------------------------------//

  //number of keywords: diversity//

  //keywords are displayed beside each petal, the number of petals = the number of keywords

​

  var NoOfPetals=newsData.response.docs[docno[docnumber]].keywords.length;

  for(var i=1;i<=NoOfPetals;i++){

    var theta=map(i,0,NoOfPetals,0,2*PI);

    var a=windowWidth/2+diameter/2*sin(theta);

    var b=windowHeight/2-diameter/2*cos(theta);

    fill(backgroundx, backgroundy, random(30, 200),diameter);

    noStroke();

    ellipse(a,b,diameter,diameter);

    diameter=diameter+speed;

    //the flower is growing at a speed of 50

    if (diameter==150){

      speed=-1;}else if (diameter==100){

        speed=1;}

    //if the diameter of each petal reaches 150, it will shrink back to 50 and grow again

    var textx=windowWidth/2+diameter*1.3*sin(theta);

    var texty=windowHeight/2-diameter*1.3*cos(theta);

    fill(backgroundx,backgroundy,0);

    textFont(font1);

    textSize(30);

    text(newsData.response.docs[docno[docnumber]].keywords[i-1].value,textx,texty);

  }

  //text at the side

  //i-1 because keyword array starts from 0 but i(number of petals) starts from 1

  //--------------------------------//

  //dragon//

  //the number of multimedia determines the number of randomly placed dragons on each page

  var numofpics=newsData.response.docs[docno[docnumber]].multimedia.length;

  for(var i=0;i<numofpics;i++){

  rotate(PI/18);

  image(img,random(windowWidth),random(windowHeight),40,40);

  }

​

}