​

// generate access Token with 

​

/*

curl -X POST "https://accounts.spotify.com/api/token" \

     -H "Content-Type: application/x-www-form-urlencoded" \

     -d "grant_type=client_credentials&client_id=b2cc0a3604154457ac2d7c216d8e55a1&client_secret=38e579a2942f4930af3c4eed0737696a"

​

*/

​

const accessToken = 'BQBAOwEJJ8-rYLLzkTNMG2kI5sbHgNBhW-3XpblLucc_kJXb3V0aXhV42p4cx-E0IiGecvmtyxXpocf8rdB9LICLRanpYvq2Z8hG8SS8UpV7g-1Ol7k';

​

let songParams, data;

let x_length = 500;

let y_length = 500;

const max_size = 500;

​

​

function getTrackParams(trackId){

  const requestOptions = {

    method: 'GET',

    headers: {'Authorization': `Bearer ${accessToken}`},

  };

 fetch(`https://api.spotify.com/v1/audio-analysis/${trackId}`, requestOptions)

  .then(data => data.json())

  .then((data) => {

   songParams.analysis = data;

   console.log(data);

   redraw();

 })

  fetch(`https://api.spotify.com/v1/audio-features/${trackId}`, requestOptions)

  .then(data => data.json())

  .then((data) => {

   songParams.features = data;

   console.log(data);

   redraw();

 })

   fetch(`https://api.spotify.com/v1/tracks/${trackId}`, requestOptions)

  .then(data => data.json())

  .then((data) => {

   songParams.trackInfo = data;

   console.log(data);

   redraw();

 })

}

​

function setup() {

  songParams = {}

  getTrackParams(trackId);

  createCanvas(800, 800);

  colorMode(HSL, 360, 100, 100);

  rectMode(CENTER);

  blendMode(LIGHTEST);

  noLoop(); // Static drawing, call 'redraw()' in the console to refresh

}

​

function draw() {

 // background(0);

  noStroke();

  console.log(songParams);

  background(0);

  translate(width/2, height/2);

  let numPetals = songParams.analysis.sections.length;

  let numHues = map(

    songParams.features.energy * songParams.features.valence,

    0, 1,

    0, numPetals

  );

  numHues = round(numHues);

  let hues = [];

  for(let i = 0; i < numHues; i++){

   hues.push(i * 360/numHues); 

  }

  console.log(hues);

  beginShape();

  songParams.analysis.sections.forEach((section, i) =>{

    let keycolor = map(section.key, 0, 11, 0, 100);

    let hue = hues[i%numHues];

    fill(color(hue, 70, keycolor));

//     noFill();

    // stroke(255)

    let wide = log(pow(10, section.loudness/10) * 400) * 15;

    ellipse(sin(i), sin(i) + section.tempo, wide, section.duration * 10);

    let checkwith = 0;

    rotate(TWO_PI/numPetals);

  })

}