Printing the location of the ISS onto an instance of a p5.js canvas

yovendofruta · August 2017

I am attempting to print the location of the International Space Station in an instance of a p5.js sketch.

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="PaintStyle.css">.
        <script src="Resources/p5.js"></script>
        <script language="javascript" type="text/javascript" src="Resources/p5.dom.js"></script>
        <script language="javascript" type="text/javascript" src="Resources/p5.sound.js"></script>
        <script language="javascript" type="text/javascript" src="Sketches/Painthead/Painthead.js"></script>
        <script language="javascript" type="text/javascript" src="Resources/ISSTrack.js"></script>
        <title>painthead</title>
    </head>
    <body>
        <div id="back">
            <a href="/projects.html">back</a>
        </div>
    </body>
</html>

ISSTrack.js

function GetValue() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var requestResponse = xhr.responseText;
                    var issInfo = JSON.parse(requestResponse);
                    var Lat = issInfo.iss_position.latitude;
                    var Long = issInfo.iss_position.longitude;
                    callback(Lat, Long); //Calls function to print to console
                    ReverseGeoCode(Lat, Long); //Call to reverse geocode
                }
            };
            xhr.open("GET", "http://api.open-notify.org/iss-now.json", true);
            xhr.send();
        }

//****PRINT LAT AND LONG TO CONSOLE*****            
            function callback(Lat, Long) {
                console.log(Lat); 
                console.log(Long);
            }
//            
            GetValue(); //initial call
            setInterval(GetValue, 5000); //Repeat every 5 seconds

// *******REVERSE GEOCODING TO FIND LOCATION*******            
function ReverseGeoCode (Lat, Long) {        
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "http://"+"locationiq.org/v1/reverse.php?format=json&key=APIKEYHERE&lat="+Lat+"&lon="+Long, true);
            xhr.send();
            xhr.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var requestResponse = xhr.responseText; //Store full response in var
                    var geoCodeInfo = JSON.parse(requestResponse); //turn received information into a javascript object
                    if (geoCodeInfo.error) {
                        var Display = "somewhere over an ocean"; 
                    } else {
                        var Display = geoCodeInfo.display_name; //Set display name to var
                    }
                    console.log(Display);
                }
            };
}

Painthead.js (the important instance)

var PH13 = function ( p ) {
    var myCanvas;
    var mic;

    p.centerCanvas = function() {
        var x = (p.windowWidth - p.width) / 2;
        myCanvas.position(x, 8450);
        }

    p.setup = function() {
        myCanvas = p.createCanvas(1000, 600);
        p.centerCanvas();
        mic = new p5.AudioIn()
        mic.start();
        p.centerCanvas();
        }

    p.windowResized = function() {
        p.centerCanvas();
        } 

    p.draw = function() {
        if (p.mouseIsPressed) {
            micLevel = mic.getLevel();
            if ((micLevel >= 0) && (micLevel <.003)) {
                vol = 0.0001;
                volspec = 0.1;
            } else if ((micLevel >= 0.003) && (micLevel <= .4)){
                vol = 1.4;
                volspec = 0.06;
            } else {
                vol = 1000;
                volspec = 0;
            }
            p.background('#fff1e1');
           //print Lat & Long of ISS as well as Display var from ISSTrack.js
        }
        else {
            p.background(255);
        }
    }
}
myp5 = new p5(PH13);

I want to be able to make the strings Lat, Long, and Display move based on the input mic from the users computer. I know how to make the text responsive, I just do not know how to pass the string to p.draw() and print it through the p5.js call text(). The only fix I can think of would be to call GetValue within p.draw(), but I do not want to run the function that often as notify-open (ISS tracking api) states "So polling more than 1 Hz would be useless except to add unnecessary strain to the servers." So in total I want to be able to poll the location of the ISS, have it go through the reverse GeoCoding function once every 5 seconds, send those variables into the correct instance, and print them on the canvas.

GoToLoop · August 2017

Got this sketch which grabs the astronauts who are currently in the ISS:
http://Bl.ocks.org/GoSubRoutine/7a567f0510b338b6d0fc1ef53f24f10e

yovendofruta · August 2017

@GoToLoop, thanks that is helpful. I still have a few questions as what I am trying to do is a little different, since the location of the ISS is always changing, so the request for JSON happens many times. The only problem I am having now is that I want the information to display when mouseIsPressed. The info only displays when the information is updated (as I have the request for JSON ISS data and ReverseGeoCod function running every 5 seconds). Here is a working example of my problem. (Want to solve the problem before converting to instance mode).

//********GET LAT AND LONG VALUES*******   
   function GetValue() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var requestResponse = xhr.responseText;
                    var issInfo = JSON.parse(requestResponse);
                    var Lat = issInfo.iss_position.latitude;
                    var Long = issInfo.iss_position.longitude;
                    ReverseGeoCode(Lat, Long); //Call to reverse geocode
                }
            };
            xhr.open("GET", "http://"+"api.open-notify.org/iss-now.json", true);
            xhr.send();
   }

// *******REVERSE GEOCODING TO FIND LOCATION*******            
function ReverseGeoCode (Lat, Long) {        
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "http://"+"locationiq.org/v1/reverse.php?format=json&key=APIKEYHERE&lat="+Lat+"&lon="+Long, true);
            xhr.send();
            xhr.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var requestResponse = xhr.responseText; //Store full response in var
                    var geoCodeInfo = JSON.parse(requestResponse); //turn received information into a javascript object
                    if (geoCodeInfo.error) {
                        var Display = "Location: somewhere over an ocean";    
                    } else {
                        Display = geoCodeInfo.display_name; //Set display name to var
                    }
                    draw(Lat, Long, Display);//send values to draw function to be printed
                }
            };
}


function setup() {
 createCanvas(300,300);
 setInterval(GetValue, 5000);
}

function draw(lat, long, location) {
    print(lat);
    print(lat);
  if (mouseIsPressed){ //Problem is here, lat, long, and location only displayed on information update
    background(255);
    text(lat, 0, 30);
    text(long, 0, 60); 
    text(location, 0, 90);
  } else {
    background(0);
  }
}

koogs · August 2017

(might be an idea to remove the personal key from that second request, assuming that's what it is)

yovendofruta · August 2017

@koogs ah yes, thank you.

Howdy, Stranger!

Categories

In this Discussion

Printing the location of the ISS onto an instance of a p5.js canvas

Answers