├── LICENSE.txt
├── README.md
├── app.js
├── bin
    └── www
├── controllers
    └── SpotifyController.js
├── package.json
├── public
    ├── favicon.ico
    └── stylesheets
    │   └── style.css
├── routes
    └── index.js
└── views
    ├── index.ejs
    └── visualisation.ejs


/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) [2017] [Nadia Campo Woytuk, Stefan Aleksik]
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | [musicScapes](https://musicscapes.herokuapp.com/)
 3 | -------------------------------------------------
 4 | 
 5 | 
 6 | 
 7 | Hack for Spotify's devX Stockholm 2017
 8 | 
 9 | "musicScapes" generates a minimalistic landscape based on your recent Spotify activity.
10 | 
11 | The mountains and peaceful colors are generated from the audio features of the last 50 songs you've listened to. The landscape changes depending on if you listen to happy or sad songs, energetic or calm ones, if you've been a recent active listener and other track features.
12 | 
13 | Listen to a couple new songs and see how it reflects on your landscape.
14 | 
15 | This app was originally created as part of Spotify's devX hackathon in Stockholm, 2017.
16 | 
17 | The app has been developed by:
18 | Nadia Campo Woytuk - front end
19 | Stefan Aleksik - back end
20 | 
21 | Using [p5.js](https://p5js.org/), [randomColor](https://randomcolor.llllll.li/)
22 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var path = require('path');
 3 | var favicon = require('serve-favicon');
 4 | var logger = require('morgan');
 5 | var cookieParser = require('cookie-parser');
 6 | var bodyParser = require('body-parser');
 7 | var expressSession = require('express-session');
 8 | 
 9 | var index = require('./routes/index');
10 | var users = require('./routes/users');
11 | 
12 | var app = express();
13 | 
14 | // view engine setup
15 | app.set('views', path.join(__dirname, 'views'));
16 | app.set('view engine', 'ejs');
17 | 
18 | // uncomment after placing your favicon in /public
19 | app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
20 | app.use(logger('dev'));
21 | app.use(bodyParser.json());
22 | app.use(bodyParser.urlencoded({
23 |   extended: false
24 | }));
25 | app.use(cookieParser());
26 | app.use(express.static(path.join(__dirname, 'public')));
27 | app.use(expressSession({
28 |   secret: 'secret'
29 | }));
30 | 
31 | app.use('/', index);
32 | app.use('/users', users);
33 | 
34 | // catch 404 and forward to error handler
35 | app.use(function(req, res, next) {
36 |   var err = new Error('Not Found');
37 |   err.status = 404;
38 |   next(err);
39 | });
40 | 
41 | // error handler
42 | app.use(function(err, req, res, next) {
43 |   // set locals, only providing error in development
44 |   res.locals.message = err.message;
45 |   res.locals.error = req.app.get('env') === 'development' ? err : {};
46 | 
47 |   // render the error page
48 |   res.status(err.status || 500);
49 |   res.render('error');
50 | });
51 | 
52 | module.exports = app;
53 | 


--------------------------------------------------------------------------------
/bin/www:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | /**
 4 |  * Module dependencies.
 5 |  */
 6 | 
 7 | var app = require('../app');
 8 | var debug = require('debug')('three:server');
 9 | var http = require('http');
10 | 
11 | /**
12 |  * Get port from environment and store in Express.
13 |  */
14 | 
15 | var port = normalizePort(process.env.PORT || '3000');
16 | app.set('port', port);
17 | 
18 | /**
19 |  * Create HTTP server.
20 |  */
21 | 
22 | var server = http.createServer(app);
23 | 
24 | /**
25 |  * Listen on provided port, on all network interfaces.
26 |  */
27 | 
28 | server.listen(port);
29 | server.on('error', onError);
30 | server.on('listening', onListening);
31 | 
32 | /**
33 |  * Normalize a port into a number, string, or false.
34 |  */
35 | 
36 | function normalizePort(val) {
37 |   var port = parseInt(val, 10);
38 | 
39 |   if (isNaN(port)) {
40 |     // named pipe
41 |     return val;
42 |   }
43 | 
44 |   if (port >= 0) {
45 |     // port number
46 |     return port;
47 |   }
48 | 
49 |   return false;
50 | }
51 | 
52 | /**
53 |  * Event listener for HTTP server "error" event.
54 |  */
55 | 
56 | function onError(error) {
57 |   if (error.syscall !== 'listen') {
58 |     throw error;
59 |   }
60 | 
61 |   var bind = typeof port === 'string'
62 |     ? 'Pipe ' + port
63 |     : 'Port ' + port;
64 | 
65 |   // handle specific listen errors with friendly messages
66 |   switch (error.code) {
67 |     case 'EACCES':
68 |       console.error(bind + ' requires elevated privileges');
69 |       process.exit(1);
70 |       break;
71 |     case 'EADDRINUSE':
72 |       console.error(bind + ' is already in use');
73 |       process.exit(1);
74 |       break;
75 |     default:
76 |       throw error;
77 |   }
78 | }
79 | 
80 | /**
81 |  * Event listener for HTTP server "listening" event.
82 |  */
83 | 
84 | function onListening() {
85 |   var addr = server.address();
86 |   var bind = typeof addr === 'string'
87 |     ? 'pipe ' + addr
88 |     : 'port ' + addr.port;
89 |   debug('Listening on ' + bind);
90 | }
91 | 


--------------------------------------------------------------------------------
/controllers/SpotifyController.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by Stefan Aleksik on 05.1.2018.
  3 |  */
  4 | var SpotifyWebApi = require('spotify-web-api-node');
  5 | var querystring = require('querystring');
  6 | 
  7 | var client_id = '';
  8 | var client_secret = '';
  9 | var redirect_uri = '';
 10 | var stateKey = 'spotify_auth_state';
 11 | 
 12 | 
 13 | //Spotify Login
 14 | module.exports.spotifyLogin = function (res) {
 15 |     var state = generateRandomString(16);
 16 |     res.cookie(stateKey, state);
 17 |     // your application requests authorization
 18 |     var scope = 'user-read-email user-read-recently-played';
 19 |     res.redirect('https://accounts.spotify.com/authorize?' +
 20 |         querystring.stringify({
 21 |             response_type: 'code',
 22 |             client_id: client_id,
 23 |             scope: scope,
 24 |             redirect_uri: redirect_uri,
 25 |             state: state
 26 |         }));
 27 | };
 28 | 
 29 | function generateRandomString(length) {
 30 |     var text = '';
 31 |     var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 32 | 
 33 |     for (var i = 0; i < length; i++) {
 34 |         text += possible.charAt(Math.floor(Math.random() * possible.length));
 35 |     }
 36 |     return text;
 37 | };
 38 | 
 39 | //Spotify callback + sessions
 40 | 
 41 | var spotifyApi = new SpotifyWebApi({
 42 |     clientId: client_id,
 43 |     clientSecret: client_secret,
 44 |     redirectUri: redirect_uri
 45 | });
 46 | 
 47 | module.exports.spotifyCallback = function (req, res) {
 48 |     spotifyApi.authorizationCodeGrant(req.query.code).then(function(data) {
 49 |         spotifyApi.setAccessToken(data.body.access_token);
 50 |         spotifyApi.setRefreshToken(data.body.refresh_token);
 51 |         return spotifyApi.getMe()
 52 | 
 53 |     }).then(function(data) {
 54 |         spotifyApi.getMyRecentlyPlayedTracks({
 55 |             limit: 50
 56 |         }).then(function(data) {
 57 |             var arr = [], songIDs = [];
 58 |             data.body.items.forEach(function(p) {
 59 |                 var obj = {
 60 |                     id: p.track.id,
 61 |                     played_at: p.played_at,
 62 |                     name: p.track.name
 63 |                 };
 64 | 
 65 |                 arr.push(obj);
 66 |                 songIDs.push(p.track.id);
 67 | 
 68 |             });
 69 |             //calculating the time difference
 70 |             var startTime = Date.parse(arr[arr.length - 1].played_at);
 71 |             var endTime = Date.parse(arr[0].played_at);
 72 |             //convert to hours
 73 |             var timeDif = (endTime - startTime) / (1000 * 60 * 60);
 74 | 
 75 |             if (timeDif < 10) {
 76 |                 req.session.timeDiff = 0;
 77 |                 console.log('timeDIff' + 0)
 78 |             } else if (timeDif > 10 && timeDif < 18) {
 79 |                 req.session.timeDiff = 1;
 80 |                 console.log('timeDIff' + 1)
 81 |             } else {
 82 |                 req.session.timeDiff = 2;
 83 |                 console.log('timeDIff' + 2)
 84 |             }
 85 |             spotifyApi.getAudioFeaturesForTracks(songIDs).then(function(data) {
 86 | 
 87 |                 var danceability = 0, key = [], loudness = 0, valence = 0, tempo = 0, mode = 0, energy = 0, speechiness = 0,
 88 |                     acousticness = 0, instrumentalness = 0, liveness = 0;
 89 | 
 90 |                 data.body.audio_features.forEach(function(p1, p2, p3) {
 91 |                     danceability += p1.danceability;
 92 |                     key.push(p1.key);
 93 |                     loudness += p1.loudness;
 94 |                     valence += p1.valence;
 95 |                     tempo += p1.tempo;
 96 |                     mode += p1.mode;
 97 |                     energy += p1.energy;
 98 |                     speechiness += p1.speechiness;
 99 |                     acousticness += p1.acousticness;
100 |                     instrumentalness += p1.instrumentalness;
101 |                     liveness += p1.liveness;
102 |                 });
103 |                 var obj = {
104 |                     danceability: danceability / data.body.audio_features.length,
105 |                     key: frequent(key),
106 |                     loudness: loudness / data.body.audio_features.length,
107 |                     valence: valence / data.body.audio_features.length,
108 |                     tempo: tempo / data.body.audio_features.length,
109 |                     mode: Math.round(mode / data.body.audio_features.length),
110 |                     energy: energy / data.body.audio_features.length,
111 |                     speechiness: speechiness / data.body.audio_features.length,
112 |                     acousticness: acousticness / data.body.audio_features.length,
113 |                     instrumentalness: instrumentalness / data.body.audio_features.length,
114 |                     liveness: liveness / data.body.audio_features.length
115 |                 };
116 |                 req.session.obj = obj;
117 |                 res.redirect('/musicScape');
118 |             });
119 |         });
120 |         req.session.user = data.body.id.length > 10? data.body.display_name : data.body.id;
121 |     });
122 | };
123 | 
124 | //function from: https://stackoverflow.com/a/1053865/7044471
125 | function frequent(array) {
126 |     if(array.length == 0)
127 |         return null;
128 |     var modeMap = {};
129 |     var maxEl = array[0], maxCount = 1;
130 |     for(var i = 0; i < array.length; i++)
131 |     {
132 |         var el = array[i];
133 |         if(modeMap[el] == null)
134 |             modeMap[el] = 1;
135 |         else
136 |             modeMap[el]++;
137 |         if(modeMap[el] > maxCount)
138 |         {
139 |             maxEl = el;
140 |             maxCount = modeMap[el];
141 |         }
142 |     }
143 |     return maxEl;
144 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "three",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "start": "node ./bin/www"
 7 |   },
 8 |   "dependencies": {
 9 |     "body-parser": "~1.18.2",
10 |     "cookie-parser": "~1.4.3",
11 |     "debug": "~2.6.9",
12 |     "ejs": "~2.5.7",
13 |     "express": "~4.15.5",
14 |     "express-session": "^1.15.6",
15 |     "morgan": "~1.9.0",
16 |     "querystring": "^0.2.0",
17 |     "serve-favicon": "~2.4.5",
18 |     "spotify-web-api-node": "^2.5.0"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StefanAleksik/musicScape/d09b30483e21f7e8be4f64cb46bd8a12060ed4d3/public/favicon.ico


--------------------------------------------------------------------------------
/public/stylesheets/style.css:
--------------------------------------------------------------------------------
  1 | html, body {
  2 |   margin: 0;
  3 |   padding: 0;
  4 | }
  5 | 
  6 | /* Title and Tooltip container */
  7 | 
  8 | .t1 {
  9 |   font-family: 'Work Sans', sans-serif;
 10 |   text-align: center;
 11 |   margin-top: 80vh;
 12 |   color: #a0a0a0;
 13 |   font-size: 2em;
 14 |   cursor: pointer;
 15 | }
 16 | 
 17 | @media only screen and (max-device-width: 768px) {
 18 |   /* For mobile phones: */
 19 |   .t1 {
 20 |     font-size: 3em;
 21 |   }
 22 | }
 23 | 
 24 | .t2 {
 25 |   font-family: 'Work Sans', sans-serif;
 26 |   text-align: center;
 27 |   margin-top: 5vh;
 28 |   color: #a0a0a0;
 29 |   font-size: 20px;
 30 | }
 31 | 
 32 | .t3 {
 33 |   font-family: 'Work Sans', sans-serif;
 34 |   text-align: center;
 35 |   font-size: 2em;
 36 |   background-color: #d1d1d1;
 37 |   border: none;
 38 |   color: white;
 39 |   padding: 0.4em 0.8em;
 40 |   display: inline-block;
 41 |   outline: none;
 42 |   cursor: pointer;
 43 | }
 44 | 
 45 | .t3:hover {
 46 |   outline: none;
 47 | }
 48 | 
 49 | .t4 {
 50 |   font-family: 'Work Sans', sans-serif;
 51 |   text-align: center;
 52 |   line-height: 100px;
 53 |   margin-top: 5vh;
 54 |   color: #a0a0a0;
 55 |   font-size: 3em;
 56 | }
 57 | 
 58 | .t5 {
 59 |   font-family: 'Work Sans', sans-serif;
 60 |   text-align: center;
 61 |   margin-top: 1vh;
 62 |   margin-bottom: 5vh;
 63 |   color: #a0a0a0;
 64 |   font-size: 1.5em;
 65 | }
 66 | 
 67 | @media only screen and (max-device-width: 768px) {
 68 |   /* For mobile phones: */
 69 |   .t3 {
 70 |     font-size: 5em;
 71 |     padding: 0.2em 0.5em;
 72 |   }
 73 |   .t4 {
 74 |     font-size: 5em;
 75 |     margin-bottom: 0.5em;
 76 |   }
 77 |   .t5 {
 78 |     font-size: 2.5em;
 79 |     margin-bottom: 1em;
 80 |   }
 81 | }
 82 | 
 83 | canvas {
 84 |   padding: 0;
 85 |   margin: auto;
 86 |   display: block;
 87 |   width: 800px;
 88 |   height: 600px;
 89 |   position: absolute;
 90 |   top: 0;
 91 |   bottom: 0;
 92 |   left: 0;
 93 |   right: 0;
 94 | }
 95 | 
 96 | /* Tooltip suff */
 97 | 
 98 | /* Tooltip text */
 99 | 
100 | .t1 .tooltiptext {
101 |   font-family: 'Roboto', sans-serif;
102 |   visibility: hidden;
103 |   background-color: #f7f7f7;
104 |   opacity: 0.9;
105 |   color: #a0a0a0;
106 |   text-align: center;
107 |   padding: 0.5em 0.5em;
108 |   border-radius: 6px;
109 |   font-size: 0.35em;
110 |   text-align: center;
111 |   bottom: 20%;
112 |   position: absolute;
113 |   z-index: 1;
114 |   left: 50%;
115 |   margin-left: -15%;
116 |   width: 30%;
117 | }
118 | 
119 | @media only screen and (max-device-width: 768px) {
120 |   /* For mobile phones: */
121 |   .t1 .tooltiptext {
122 |     font-size: 0.5em;
123 |     margin-left: -40%;
124 |     width: 80%;
125 |   }
126 | }
127 | 
128 | /* Show the tooltip text when you mouse over the tooltip container */
129 | 
130 | .t1:hover .tooltiptext {
131 |   visibility: visible;
132 | }
133 | 


--------------------------------------------------------------------------------
/routes/index.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var router = express.Router();
 3 | var spotifyController = require('../controllers/SpotifyController')
 4 | 
 5 | 
 6 | /* GET home page. */
 7 | router.get('/', function(req, res, next) {
 8 |   res.render('index', {
 9 |     title: 'musicScape'
10 |   });
11 | });
12 | 
13 | router.get('/musicScape', function(req, res, next) {
14 | 
15 |   // this is an JSON obj that contains the avg of the song features
16 |   var obj = req.session.obj;
17 |   // this is the time difference between the first song and the last played song
18 |   var landscapeSize = req.session.timeDiff;
19 |   // this is userName
20 |   var user = req.session.user;
21 |   res.render('visualisation', {
22 |     title: 'musicScape',
23 |     d: obj,
24 |     t: landscapeSize,
25 |     u: user
26 |   });
27 | 
28 | });
29 | 
30 | router.get('/spotifycallback', function(req, res) {
31 | spotifyController.spotifyCallback(req, res)
32 | });
33 | 
34 | router.get('/login', function(req, res) {
35 |     spotifyController.spotifyLogin(res);
36 | });
37 | 
38 | module.exports = router;
39 | 


--------------------------------------------------------------------------------
/views/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>
 6 |     <%= title %>
 7 |   </title>
 8 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 9 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.js"></script>
10 |   <link href="https://fonts.googleapis.com/css?family=Work+Sans:100" rel="stylesheet">
11 | 
12 |   <link rel='stylesheet' href='/stylesheets/style.css' />
13 | </head>
14 | 
15 | <body>
16 |   <script>
17 |     // Fade in on start
18 |     $(document).ready(function() {
19 |       $("body").hide().fadeIn(2000);
20 |     });
21 |   </script>
22 | 
23 |   <div style="display: table; height: 100%; width:100%; margin: 15em auto; overflow: hidden;">
24 |     <div style="display: table-cell; vertical-align: middle; text-align:center;">
25 |       <div class="t4">musicScapes</div>
26 |       <div class="t5">landscapes based on your latest Spotify listens</div>
27 |       <button id="startButton" class="t3">START</button>
28 |     </div>
29 |   </div>
30 | 
31 | 
32 |   <script>
33 |     // Start button
34 |     document.getElementById("startButton").onclick = function() {
35 |       window.location.href = '/login';
36 |     };
37 |     // Button style
38 |     var c1 = randomColor({
39 |       luminosity: 'light'
40 |     });
41 |     var c2 = randomColor({
42 |       luminosity: 'light'
43 |     });
44 |     $("#startButton").mouseenter(function() {
45 |       $(this).css("background", "red").css("background", "-webkit-linear-gradient(" + c1 + ", " + c2 + ")").css("background", "-o-linear-gradient(" + c1 + ", " + c2 + ")").css("background", "-moz-linear-gradient(" + c1 + ", " + c2 + ")").css(
46 |         "background",
47 |         " linear-gradient(" + c1 + ", " + c2 + ")");
48 |     }).mouseleave(function() {
49 |       $(this).css("background", "#d1d1d1");
50 |     });
51 |   </script>
52 |   <!--<a href="/login">Login</a>-->
53 | </body>
54 | 
55 | </html>
56 | 


--------------------------------------------------------------------------------
/views/visualisation.ejs:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  6 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.js"></script>
  7 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
  8 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
  9 | 
 10 |   <link href="https://fonts.googleapis.com/css?family=Work+Sans:100,700" rel="stylesheet">
 11 |   <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
 12 | 
 13 |   <title>
 14 |     <%= title %>
 15 |   </title>
 16 |   <link rel='stylesheet' href='/stylesheets/style.css' />
 17 | </head>
 18 | 
 19 | <body>
 20 |   <div id="canvasDiv"></div>
 21 |   <div class="t1">
 22 |     <a id="username">
 23 |       <%= u %>
 24 |     </a><a>'s musicScape</a>
 25 |     <span class="tooltiptext">
 26 |       <p>The <b>backgound</b> of your musicScape is <a id="valenceColor"></a> because you've recently listened to music that relates to <b id="valenceString"></b> emotions.</p>
 27 |       <p>It's <b id="daynighttime"></b> in your musicScape because your recent music is mostly in <b id="mode"></b> mode.</p>
 28 |       <p>The mountains are <a id="energy"></a> jagged because you've listened to <b><a id="energy1"></a> energetic</b> songs.</p>
 29 |       <p>You've been <b><a id="listener"></a> listener</b> during the past 24 hours, so your musicScape has <a id="pairsMountains"></a> of mountains.</p>
 30 |       <p>The <b>mountains</b> are tones of <a id="keyColor"></a> because your songs are mostly in the <b>key</b> <a id="keyName"><a>.</p>
 31 |     </span>
 32 |   </div>
 33 | <!-- </body> -->
 34 | 
 35 | <script>
 36 |   // Fade in on start
 37 |   $(document).ready(function() {
 38 |     $("body").hide().fadeIn(2000);
 39 |   });
 40 | 
 41 |   if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
 42 |     var canvasW = 800;
 43 |     var canvasH = 800;
 44 |   } else {
 45 |     var canvasW = 960;
 46 |     var canvasH = 360;
 47 |   }
 48 | 
 49 |   var Y_AXIS = 1;
 50 |   var X_AXIS = 2;
 51 | 
 52 |   ////////// MUSIC VARIABLES ////////////
 53 |   var mode = '<%= d.mode %>';
 54 |   var valence = '<%= d.valence %>';
 55 |   var energy = '<%= d.energy %>';
 56 |   var landN = '<%= t %>'; // can be 0,1,2
 57 |   var musicKey = '<%= d.key %>'; // from 0 to 11
 58 | 
 59 | 
 60 |   //////////////////////////////////////
 61 | 
 62 |   var musicHues = ['monochrome', 'blue', 'green', 'purple', 'pink', 'red', 'orange', 'yellow'];
 63 |   var musicKHues = ['yellow', 'yellow', 'orange', 'red', 'red', 'pink', 'pink', 'purple', 'blue', 'blue', 'green', 'green'];
 64 |   var musicLums = ['light', 'bright', 'bright', 'bright', 'light', 'bright', 'light', 'bright', 'bright', 'light', 'bright', 'light'];
 65 |   var keyNames = ["C", "C♯/D♭", "D", "D♯/E♭", "E", "F", "F♯/G♭", "G", "G♯/A♭", "A", "A♯/B♭", "B"];
 66 | 
 67 |   var sunColors = [];
 68 |   var sunSize;
 69 |   var sunRange;
 70 |   var sunPos;
 71 | 
 72 |   var landColors;
 73 | 
 74 |   var backgroundColor1;
 75 |   var backgroundColor2;
 76 | 
 77 |   /////////////////////////////////////
 78 | 
 79 | 
 80 |   function setup() {
 81 | 
 82 |     // VALENCE -- Background color
 83 |     var valenceColor = musicHues[Math.round(map(valence, 0.0, 1.0, 0, 7))];
 84 | 
 85 |     // MODE -- day/night
 86 |     if (mode == 1) {
 87 |       // Major mode --- DAY
 88 |       backgroundColor1 = color(randomColor({
 89 |         hue: valenceColor,
 90 |         luminosity: 'light'
 91 |       }));
 92 |       backgroundColor2 = color(randomColor({
 93 |         luminosity: 'light'
 94 |       }));
 95 |       // Large yellow sun
 96 |       sunColors = randomColor({
 97 |         hue: 'yellow',
 98 |         count: 2
 99 |       });
100 |       sunSize = random(200, 300);
101 |       sunRange = random(20, 50);
102 |       document.getElementById("daynighttime").innerText = "daytime";
103 |       document.getElementById("mode").innerText = "major";
104 | 
105 |     } else if (mode == 0) {
106 |       // Minor mode --- NIGHT
107 |       backgroundColor1 = color(randomColor({
108 |         hue: valenceColor,
109 |         luminosity: 'dark'
110 |       }));
111 |       backgroundColor2 = color(randomColor({
112 |         luminosity: 'dark'
113 |       }));
114 |       // Small monochrome moon
115 |       sunColors = randomColor({
116 |         luminosity: 'light',
117 |         hue: 'monochrome',
118 |         count: 2
119 |       });
120 |       sunSize = random(75, 150);
121 |       sunRange = random(5, 10);
122 |       document.getElementById("daynighttime").innerText = "nighttime";
123 |       document.getElementById("mode").innerText = "minor";
124 | 
125 |     }
126 | 
127 |     // FOR THE TOOLTIP
128 |     document.getElementById("valenceColor").innerText = valenceColor.toString();
129 |     document.getElementById("valenceColor").style.color = backgroundColor1;
130 |     if (valence > 0.5)
131 |       document.getElementById("valenceString").innerText = "happy or cheerful";
132 |     else
133 |       document.getElementById("valenceString").innerText = "sad or angry";
134 | 
135 |     if (energy > 0.5) {
136 |       document.getElementById("energy").innerText = "more";
137 |       document.getElementById("energy1").innerText = "more";
138 |     } else {
139 |       document.getElementById("energy").innerText = "less";
140 |       document.getElementById("energy1").innerText = "less";
141 |     }
142 | 
143 | 
144 |     // KEY --- LAND COLORS
145 |     var currentHue = musicKHues[musicKey];
146 |     var currentLum = musicLums[musicKey];
147 | 
148 |     landColors = randomColor({
149 |       hue: currentHue,
150 |       luminosity: currentLum,
151 |       count: 5,
152 |       format: 'rgba',
153 |       alpha: 0.5
154 |     });
155 | 
156 |     // FOR THE TOOLTIP
157 |     document.getElementById("keyColor").innerText = currentLum.toString() + " " + currentHue.toString();
158 |     document.getElementById("keyColor").style.color = landColors[0];
159 |     document.getElementById("keyName").innerText = keyNames[musicKey];
160 | 
161 |     // LISTENS PER HOUR --- NUMBER OF LANDS
162 |     if (landN == 2) {
163 |       landN = 0;
164 |       document.getElementById("listener").innerText = "a less active";
165 |       document.getElementById("pairsMountains").innerText = "one pair";
166 |     } else if (landN == 0) {
167 |       landN = 2;
168 |       document.getElementById("listener").innerText = "a very active";
169 |       document.getElementById("pairsMountains").innerText = "three pairs";
170 |     } else if (landN == 1) {
171 |       document.getElementById("listener").innerText = "an active";
172 |       document.getElementById("pairsMountains").innerText = "two pairs";
173 |     }
174 | 
175 | 
176 |     // Canvas element
177 |     var canvas = createCanvas(canvasW, canvasH);
178 |     var div = document.createElement("div");
179 |     document.getElementById("canvasDiv").appendChild(div);
180 |     div.style.margin = "auto";
181 |     div.appendChild(document.getElementById("defaultCanvas0"));
182 | 
183 |     // Background
184 |     setGradient(0, 0, width, height + height / 3, backgroundColor1, backgroundColor2, Y_AXIS);
185 |   }
186 | 
187 |   /// Gradient function
188 |   function setGradient(x, y, w, h, c1, c2, axis) {
189 |     noFill();
190 |     if (axis == Y_AXIS) { // Top to bottom gradient
191 |       for (var i = y; i <= y + h; i++) {
192 |         var inter = map(i, y, y + h, 0, 1);
193 |         var c = lerpColor(c1, c2, inter);
194 |         stroke(c);
195 |         line(x, i, x + w, i);
196 |       }
197 |     } else if (axis == X_AXIS) { // Left to right gradient
198 |       for (var i = x; i <= x + w; i++) {
199 |         var inter = map(i, x, x + w, 0, 1);
200 |         var c = lerpColor(c1, c2, inter);
201 |         stroke(c);
202 |         line(i, y, i, y + h);
203 |       }
204 |     }
205 |   }
206 | 
207 |   function sun() {
208 |     noStroke();
209 |     var sunColor = sunColors[0];
210 |     sunPos = [random(20, width), random(20, (height / 2) - 50)];
211 |     for (i = sunSize; i > 0; i -= sunRange) {
212 |       fill(sunColor);
213 |       sunColor = lerpColor(color(sunColor), color(sunColors[1]), .25);
214 |       ellipse(sunPos[0], sunPos[1], i);
215 |     }
216 |   }
217 | 
218 |   function stars() {
219 |     noStroke();
220 |     fill(randomColor({
221 |       luminosity: 'light'
222 |     }));
223 |     for (i = 0; i < width; i += random(10, 100)) {
224 |       for (j = 0; j < height; j += random(10, 200)) {
225 |         ellipse(i, j, random(1, 4));
226 |       }
227 |     }
228 |   }
229 | 
230 |   function makeLand(level, landColor) {
231 | 
232 |     // mountains based on this openprocessing sketch: https://www.openprocessing.org/sketch/179401
233 | 
234 |     noStroke();
235 |     fill(landColor);
236 |     stroke(landColor);
237 |     strokeWeight(2);
238 |     noLoop();
239 | 
240 |     var yInit = 6 * height / 7; //initial  y
241 |     var repetition = level / 4;
242 | 
243 |     var yArray = [];
244 |     for (var j = 0; j < 4; j++) {
245 |       yArray[4 - j] = yInit;
246 |       yInit -= repetition / pow(1.2, j);
247 |     }
248 | 
249 |     var dx = 0;
250 | 
251 |     // Only two mountains at a time
252 |     for (var j = 1; j < 3; j++) {
253 | 
254 |       var n1 = random(-height / 2, height / 2);
255 |       var n2 = random(-height / 2, height / 2);
256 | 
257 |       var n3 = random(2, 4);
258 | 
259 |       var n4 = map(energy, 0.0, 1.0, 5, 100);
260 | 
261 |       var n5 = random(-width / 2, width / 2);
262 | 
263 |       var n6 = map(energy, 0.0, 1.0, 0.15, 3);
264 | 
265 |       for (var x = 0; x < width; x++) {
266 | 
267 |         var y = yArray[j];
268 |         y += 10 * j * sin(2 * dx / j + n1);
269 |         y += n3 * j * sin(5 * dx / j + n2);
270 |         y += n4 * j * noise(n6 * dx / j + n5);
271 |         y += 1.7 * j * noise(10 * dx);
272 | 
273 |         line(x, y, x, height);
274 | 
275 |         dx += 0.02;
276 |       }
277 |     }
278 |   }
279 | 
280 |   function makeSky(level) {
281 |     noStroke();
282 |     fill(getRandomColor());
283 |     noLoop();
284 |     var amount = width;
285 |     var frequency = random(1.0) / 50;
286 |     var offset = random(200) + 5;
287 |     var startY = level;
288 |     beginShape();
289 |     vertex(0, startY);
290 |     for (var c = 1; c < amount; c++) {
291 |       var sinoffset = sin(frequency * c);
292 |       var sinX = c * (width / amount);
293 |       var sinY = startY * random(1.5) + (sinoffset * offset);
294 |       bezierVertex(sinX, sinY, sinX, sinY - 1, sinX, sinY);
295 |     }
296 | 
297 |     vertex(width, height);
298 |     vertex(0, height);
299 |     endShape();
300 |   }
301 | 
302 |   function draw() {
303 | 
304 |     //makeSky(canvasH);
305 | 
306 |     // NIGHT
307 |     if (mode == 0)
308 |       stars();
309 | 
310 |     //skyRipples();
311 | 
312 |     sun();
313 | 
314 |     // Number of lands depends on how many songs we've listened to in the past hours
315 |     if (landN == 2) {
316 |       makeLand(4 * canvasH / 6, landColors[3]);
317 |     }
318 |     makeLand(canvasH / 2, landColors[0]);
319 |     if (landN >= 1) {
320 |       makeLand(random(1, 2) * canvasH / 6, landColors[1]);
321 |     }
322 | 
323 |     //makeLand(random(2, 3) * canvasH / 6, landColors[1]);
324 |     // makeLand(random(3, 4) * canvasH / 6, landColors[2]);
325 |     // makeLand(4 * canvasH / 6, landColors[3]);
326 |     // makeLand(5 * canvasH / 6, landColors[4]);
327 | 
328 |   }
329 | 
330 | 
331 |   // Other tests with interesting graphics but not used right now :)
332 | 
333 |   function getRandomColor() {
334 | 
335 |     var c = color(random(255), random(255), random(255), random(255));
336 |     return c;
337 | 
338 |   }
339 | 
340 |   function skyRipples() {
341 |     stroke(randomColor({
342 |       format: 'rgba'
343 |     }));
344 |     fill(randomColor({
345 |       format: 'rgba'
346 |     }));
347 |     var ellipseR = random(40, 100);
348 |     for (i = 0; i < width + ellipseR; i += 20) {
349 |       for (j = 0; j < height; j += 20) {
350 |         ellipse(i, j, ellipseR);
351 |       }
352 |     }
353 |   }
354 | 
355 |   function makeRibbons() {
356 |     noFill();
357 |     smooth(8);
358 |     noLoop();
359 | 
360 |     for (var i = 0; i < random(10) + 2; i++) {
361 | 
362 |       var strokeW = random(5) + 3;
363 | 
364 |       var amount = 500;
365 |       var frequency = random(1.0) / 15;
366 |       var offset = random(200) + 5;
367 | 
368 |       var col = getRandomColor();
369 | 
370 |       strokeWeight(strokeW);
371 |       stroke(col, 180);
372 |       var startY = height / 2;
373 |       beginShape();
374 |       curveVertex(canvasH / 3, startY);
375 |       for (var c = 1; c < amount; c++) {
376 |         var sinoffset = sin(frequency * c);
377 |         var sinX = c * (width / amount);
378 |         var sinY = startY + (sinoffset * offset);
379 |         bezierVertex(sinX, sinY, sinX, sinY - 1, sinX, sinY);
380 |       }
381 |       endShape();
382 | 
383 |     }
384 |   }
385 | </script>
386 | 
387 | </html>
388 | 


--------------------------------------------------------------------------------