Weather Bots in p5.js

Shib S. Sahoo
Oct 6, 2018 · 3 min read

This weekend I spent my time hunting for libraries that are best in creative web animation, with some level of interactivity.

As usual, I started with chrome experiment to look for inspiration There were couple of projects like Soft Buddy, Distort, Circular Noise.

Distort By Yoichi Kobayashi

As a beginner in web based javascript animation, I had to start with a very basic library called two.js which had a bunch of examples.


Libraries


Sound Blob

The next step was to integrate (ofcourse!) an audio reactive component. Luckily p5.js has an extremely well documentation. I used the p5.FFT commands like fft.analyze() for frequency domain and fft.waveform() for time domain values.


Weather Bots

I used p5.dom library load HTML, JSON etc. and p5.play library to create and animate sprites that we see on canvas.

// using Weather API: city, weather interactive charactersvar stretchy;
var face;
var weather;
var api = "http://api.openweathermap.org/data/2.5/weather?q=";
var apikey = "&APPID=**";
var units = "&units=metric";
function setup() {
createCanvas(1920, 1080);
face = loadImage('assets/face.png');
var button = select("#submit");
button.mousePressed(askWeather);
input = select('#city');
stretchy = createSprite();stretchy.draw = function() {//make the ellipse stretch in the sprite direction
//proportionally to its speed
push();
rotate(radians(this.getDirection()));
if (weather) {
var temp = weather.main.temp;
var radius = temp * 10;
var red = map(temp, 0, 30, 40, 250);
fill(red, red, 255 - red) ;
ellipse(0, 0, radius + this.getSpeed(), radius - this.getSpeed());
}
pop();
//this.deltaX and this.deltaY are the position increment
//since the last frame, move the face image toward the direction
image(face, this.deltaX * 2, this.deltaY * 2);
};
stretchy.maxSpeed = 60;}function draw() {
background(255, 255, 255);
//mouse trailer, the speed is inversely proportional to the mouse distance
stretchy.velocity.x = (mouseX - stretchy.position.x) / 10;
stretchy.velocity.y = (mouseY - stretchy.position.y) / 10;
drawSprites();}function gotData(data) {
weather = data;
console.log(weather.main.temp);
}
function askWeather() {
var url = api + input.value() + apikey + units;
loadJSON(url, gotData, 'jsonp');
}

Result

The Mumbai weather bot gets yellow and bulky in of summer (29°C).

The weather bots change their behavior and appearance depending on the weather of the city.

The London weather bot has shrunk in size and blue in cold (8°C).

That’s it for now!

Shib S. Sahoo

Written by

Masters in Interaction Design. Umeå Institute of Design . http://www.shibhash.com