Skip to content

Commit 51d1a5a

Browse files
author
Lauren McCarthy
committed
Merge pull request #275 from therewasaguy/input
loadStrings and loadJSON examples
2 parents 001cda2 + 5ed9211 commit 51d1a5a

File tree

10 files changed

+220
-0
lines changed

10 files changed

+220
-0
lines changed

‎examples/async/loadJSON_callback/index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<head>
2+
<script language="javascript" type="text/javascript" src="../../../lib/p5.js"></script>
3+
<script language="javascript" type="text/javascript" src="../../../lib/addons/p5.dom.js"></script>
4+
<script language="javascript" type="text/javascript" src="sketch.js"></script>
5+
</head>
6+
7+
<body>
8+
</body>

‎examples/async/loadJSON_callback/sketch.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// This example gets weather for any city based on user input.
2+
//
3+
// We'll use loadJSON() to get weather data from the API at
4+
// openweather.org.
5+
//
6+
// The results will not be available immediately. Just like when
7+
// you point your browser to a URL, it takes a moment to load. So
8+
// at the moment loadJSON is called, our 'result' will be empty.
9+
//
10+
// A callback is the name of a function that handles our data
11+
// when it is ready.
12+
//
13+
// We'll add a callback as the 2nd parameter to loadJSON, like this:
14+
//
15+
// loadJSON(url, callback)
16+
17+
var result;
18+
var userInput;
19+
20+
function setup(){
21+
createCanvas(600,100);
22+
textSize(18);
23+
textAlign(CENTER);
24+
fill(0);
25+
26+
// Using p5dom addon (linked via index.html) to get user input.
27+
p = createP('Enter City Name To Return Current Temperature');
28+
userInput = createInput('New York');
29+
button = createButton('submit');
30+
31+
button.mousePressed(getWeather); //getWeather() is the callback.
32+
}
33+
34+
function getWeather(){
35+
background(255);
36+
37+
var cityName = userInput.value();
38+
var URL = 'http://api.openweathermap.org/data/2.5/weather?q='+cityName+'&units=metric';
39+
result = loadJSON(URL, displayWeather); // displayWeather is the callback
40+
41+
print('At the moment the mouse is clicked, the JSON object is empty: ');
42+
print(result); // result is not ready
43+
}
44+
45+
// Callback: loadJSON calls this function when finished loading.
46+
function displayWeather(){
47+
print('In the callback function, the JSON object is ready: ')
48+
print(result); // result is ready!
49+
50+
var location = result.name;
51+
var currentTemp = result.main.temp;
52+
text('Current temperature in ' + location +' is ' + currentTemp +' celsius',width/2,height/2);
53+
}

‎examples/async/loadJSON_preload/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<head>
2+
<script language="javascript" type="text/javascript" src="../../../lib/p5.js"></script>
3+
<script language="javascript" type="text/javascript" src="sketch.js"></script>
4+
</head>
5+
6+
<body>
7+
</body>

‎examples/async/loadJSON_preload/sketch.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// In this example, we want to load JSON (a JavaScript Object)
2+
// from a URL at openweathermap.org, and display it in setup().
3+
//
4+
// Since setup() happens faster than you can load a website, the
5+
// data does not have time to properly load before setup() is done.
6+
//
7+
// We are introducing preload() where you can run load
8+
// operations that are guaranteed to complete by setup().
9+
// This is called asynchronous loading, because it happens whenever
10+
// the computer is done and ready, not necessarily when you call it.
11+
12+
var result;
13+
14+
function preload() {
15+
result = loadJSON('http://api.openweathermap.org/data/2.5/weather?id=5128581&units=imperial');
16+
17+
18+
print('In preload(), the result has not finished loading: ');
19+
print(result);
20+
}
21+
22+
function setup(){
23+
createCanvas(400,100);
24+
textSize(18);
25+
textAlign(CENTER);
26+
fill(0);
27+
noStroke();
28+
29+
print('In setup(), here is the result: ');
30+
print(result);
31+
32+
var location = result.name;
33+
var currentTemp = result.main.temp;
34+
text('Current temperature in ' + location +' is ' + currentTemp +'F',width/2,height/2);
35+
}

‎examples/async/loadStrings_callback/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<head>
2+
<script language="javascript" type="text/javascript" src="../../../lib/p5.js"></script>
3+
<script language="javascript" type="text/javascript" src="sketch.js"></script>
4+
</head>
5+
6+
<body>
7+
</body>

‎examples/async/loadStrings_callback/sketch.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* Load strings of text into an array of lines.
3+
*
4+
* Display a random line every time the mouse is clicked.
5+
*/
6+
7+
var result;
8+
9+
function setup(){
10+
createCanvas(600,100);
11+
textAlign(CENTER);
12+
fill(0);
13+
noStroke();
14+
15+
// pickLine is a function called by loadStrings when it's loaded.
16+
result = loadStrings('tenderbuttons_excerpt.txt', pickLine);
17+
18+
print('In setup(), there are ' + result.length + ' lines in the result');
19+
}
20+
21+
function pickLine(){
22+
background(255);
23+
var randomLineNumber = floor(random(0, result.length-1));
24+
var randomLine = result[randomLineNumber];
25+
text(randomLine, width/2, height/2);
26+
27+
print('Displaying random line number ' + randomLineNumber + ' of ' + result.length);
28+
print('Click the mouse to display a different random line!');
29+
}
30+
31+
// refresh text every time the mouse is clicked
32+
function mouseClicked(){
33+
pickLine();
34+
}

‎examples/async/loadStrings_callback/tenderbuttons_excerpt.txt‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
SALAD.
2+
It is a winning cake.
3+
SAUCE.
4+
What is bay labored what is all be section, what is no much. Sauce sam
5+
in.
6+
SALMON.
7+
It was a peculiar bin a bin fond in beside.
8+
ORANGE.
9+
Why is a feel oyster an egg stir. Why is it orange centre.
10+
A show at tick and loosen loosen it so to speak sat.
11+
It was an extra leaker with a see spoon, it was an extra licker with a
12+
see spoon.
13+
ORANGE.
14+
A type oh oh new new not no not knealer knealer of old show beefsteak,
15+
neither neither.
16+
ORANGES.
17+
Build is all right.

‎examples/async/loadStrings_preload/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<head>
2+
<script language="javascript" type="text/javascript" src="../../../lib/p5.js"></script>
3+
<script language="javascript" type="text/javascript" src="sketch.js"></script>
4+
</head>
5+
6+
<body>
7+
</body>

‎examples/async/loadStrings_preload/sketch.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* Load strings of text into an array of lines.
3+
*
4+
* Display a random line every time the mouse is clicked.
5+
*/
6+
7+
var result;
8+
9+
function preload() {
10+
result = loadStrings('tenderbuttons_excerpt.txt');
11+
}
12+
13+
function setup(){
14+
createCanvas(600,100);
15+
textAlign(CENTER);
16+
fill(0);
17+
noStroke();
18+
19+
pickLine();
20+
}
21+
22+
function pickLine(){
23+
background(255);
24+
var randomLineNumber = floor(random(0, result.length-1));
25+
var randomLine = result[randomLineNumber];
26+
text(randomLine, width/2, height/2);
27+
28+
print('Displaying random line number ' + randomLineNumber + ' of ' + result.length);
29+
print('Click the mouse to display a different random line!');
30+
}
31+
32+
// refresh text every time the mouse is clicked
33+
function mouseClicked(){
34+
pickLine();
35+
}

‎examples/async/loadStrings_preload/tenderbuttons_excerpt.txt‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
SALAD.
2+
It is a winning cake.
3+
SAUCE.
4+
What is bay labored what is all be section, what is no much. Sauce sam
5+
in.
6+
SALMON.
7+
It was a peculiar bin a bin fond in beside.
8+
ORANGE.
9+
Why is a feel oyster an egg stir. Why is it orange centre.
10+
A show at tick and loosen loosen it so to speak sat.
11+
It was an extra leaker with a see spoon, it was an extra licker with a
12+
see spoon.
13+
ORANGE.
14+
A type oh oh new new not no not knealer knealer of old show beefsteak,
15+
neither neither.
16+
ORANGES.
17+
Build is all right.

0 commit comments

Comments
 (0)