Today we're going to work through an exercise that demonstrates how to send and receive JSON via a network connection, and how to integrate that into your code.
Step 1. Let's start with a basic Processing example that reviews many of the concepts from throughout the semester so far. Create a new Processing sketch and add one graphical element that the user can move with the mouse. I'll draw this graphical element with a simple rectangle, but I'll call this a "creature" and we can imagine that it could be something more visually interesting.
Start with one creature. If we want it to move horizontally and
vertically and to have it's own color, how many variables
do we need to represent it? Three: x, y, color. So create these
three variables, give them initial values, do all the usual
Processing stuff like specifying window size, and add
a keyPressed() block to respond to user input. You
should end up with something like
this:
.html extension so that
you can view this file in a browser. You can copy/paste this
code into a Processing window. Or, if you want to download and
run this code, save the file and remove the .html
extension, but you will also need to remove the HTML code from
the file, like <pre> tags.)
Step 2. Great. Now let's add a bunch of
other creatures. How do we do that? With
a list. And if we want these other creatures to
be represented in the same way as our single creature, how many
lists do we need? Three. A list for x, a list for y, and a list
for color. Add those lists, then append two initial values to
each list in setup(), and add a
loop in draw() to iterate over the lists to draw all
the creatures represented by the lists. Don't worry about
moving these around on the screen yet. After doing this, you
should end up with something like this:
Step 2b. We also paused here to talk about how you could eliminate some code duplication by adding a function here to draw your creature. That produced code that looked something like this:
But for the rest of this lesson, I'll go back to the non-function version.Step 3. Now let's say we want to add a size to our creatures, so that each one can have its own unique size. How would we do this? We could add a size variable. We would do this by adding one size variable for our single moving creature, and then a list to hold the size values for the creatures that we're representing with lists. But, there is a different way to do this — one that involves dictionaries. This demonstrates a good example of how to use this data structure.
Start by replacing the three variables that represent our moving
creature with one dictionary that contains
three key-value pairs holding those values. So go
from this:
myX = 250 myY = 250 myColor = color(155,155,255)to this:
myCreature = {}
myCreature["x"] = 250
myCreature["y"] = 250
myCreature["color"] = color(155,155,255)
Similarly, inside setup(), where we are
initializing our lists, instead of append()ing
values to three different lists, let's make some
dictionaries, and append those to one single list. So
in global space, go from this:
xList = [] yList = [] cList = []to this:
creatureList = []and then, inside
setup(), go from this:
xList.append(100) yList.append(100) cList.append( color(255,155,155) ) xList.append(200) yList.append(200) cList.append( color(155,255,155) )to this:
c = {}
c["x"] = 100
c["y"] = 100
c["color"] = color(255,155,155)
creatureList.append(c)
c = {}
c["x"] = 200
c["y"] = 200
c["color"] = color(155,255,155)
creatureList.append(c)
Note that now I only have one list, and it contains a
collection of dictionary objects. Putting that
altogether will look like
this:
Also note that I also needed to modify draw()
and keyPressed() to use these new dictionaries.
Step 4. Now we can finally add that size variable that I was talking about in Step 3. To do this, simply add this new line in global space:
myCreature["size"] = 10and use this new key-value pair inside
draw():
rect(myCreature["x"],myCreature["y"],myCreature["size"],myCreature["size"])
Then, do something similar for the list of
creatures. Inside setup(), add a
new key-value pair pair to each creature, like
this:
c["size"] = 30and use that when you are looping over the creatures to draw them. Putting that altogether should look something like this:
Step 5: Serializing this data. Hopefully you might see some advantages to working this way. There are some conveniences to working with key-value pairs instead of individual variables. But you could still do all of this work so far without using dictionaries, as we have been doing throughout the whole semester!
But one advantage to using data structures in this way is that they can be easily serialized.
So let's modify this sketch so that instead of hard-coding
the list of creature values, we are reading thata data from a
file. Add the following import statement as the
first line of your program:
import jsonThis will let us use some new commands to read and write JSON data. Now add the following lines inside
setup():
f = open("data.json","r")
j = json.load(f)
for c in j:
creatureList.append(c)
This is going to open a file named data.json, read
its contents, and populate your list of creatures automatically
with data from that file. But first you need to add this file to
your sketch directory. Have a look at this
file: week13_data.json. This file
is comprised of JSON data like we were working with the last two
week. It looks a lot like the way Python prints out the contents
of dictionaries and lists. Save this file into your sketch
folder, and run your sketch. Now, you should be able to modify
that JSON file to change values like size or color, or add new
creatures. Be careful when modifying a JSON file, the format is
very precise. You need commas separating each item, but you
cannot have a comma after the last item.
Putting that altogether should look something like this:
Step 6: Networking. In Step 5 we saw how we could read JSON data from a local file, in other words, a data file that is saved on disk, on the same computer that we are working on. (The word local perhaps get over-used in computer science. So far this semester we have talked about local in opposition to global, in terms of variable scope. But now, we are talking about local in opposition to remote, in terms of whether a file is located on your own computer, or, on a different computer over a network.)
(Note: when we were working through this in class there were some errors, but I believe I have fixed them all now. I believe that the below code should operate as explained below.)
Save the following code file: week13_network.pyde. Once you download it, you should be able to simply drag it into your sketch window to add it as a new tab to your sketch. Then, in your main tab, add the following line:
from week13_networking import *
Or if you have named your tab something else, specify that name instead.
Next, look in the tab. This code has two variables at the
top: ip_address and port. You'll need
to set these to the IP address and port of the server you're
trying to connect to. For this example, we'll be using:
ip_address = "174.138.45.118" port = "5000"
If you'd like, have a look at this code. It defines two
functions: getData(cList)
and sendData(c). getData() retrieves a
JSON file from a webserver with the given IP
address, then it populates a list of dictionaries, and
returns that list. You would use it like this:
creatureList = getData()
sendData(c) sends the data about one single
"creature" to this webserver. This webserver
has its own Python code which saves this data into a list and
distributes it to anyone who calls getData(cList).
In order to run this, you will also need to modify the main tab
to change myCreature["name"] to something. It
doesn't have to be your name obviously, but it does have to be
unique among everyone else in the class. You should also modify
the color values on line 10.
Putting that altogether would look like this:
Now, if you run this code (and the webserver is turned on and running!) you should be able to move your creature around, while also seeing the moving creatures of anyone else currently connecting to this webserver.
If you would like to see what the webserver code looks like, you can have a look here: week13-web-server.py. This is a relatively short amount of code! Just keep in mind that this looks simple, but it is using a lot of things that we have not talked about yet. Mainly, this is using a Python web server library called Flask, which you can read about if you are curious.