Instagram Code

After the twitter code, we decided we wanted to create something similar to that for the instagram. We combined the code so that the twitter and instagram feed would be displayed all at once.

We had some difficulties trying to make the instagram do the same thing as the twitter. We managed to stop the images going into a grid and place the images in random positions by using a line of code in the draw similar to the twitter one. But they all appeared at once.

Screen Shot 2016-03-23 at 1.19.16 p.m..png

this line in the code placed the image at random points.Screen Shot 2016-03-23 at 1.19.24 p.m..png

Screen Shot 2016-03-17 at 11.21.50 a.m..png

Another thing changed was an array was created to store the instagram images, this was using PImage [] array, and declaring it in the setup with the JSONArray. It also controlled how many images were stored in the array.

Screen Shot 2016-03-23 at 1.20.25 p.m..png


After a while of searching and trying out various things in the code. We attempted to copy the twitter code we already had, we just had to figure out the bit that was making the images load one at a time. Eventually, after struggling and multiple errors. We were shown how to do it. In order to get the images to appear one at a time, we had to create an int for the images, so in the draw loop we could add one on each time, similar to the twitter code. This was declared above the setup with the rest of the arrays.

Screen Shot 2016-03-23 at 1.38.55 p.m..png

Then in the setup, the currentImage would work as it had been declared, this allowed the number of images to be stored from the loadEmUp function.

Screen Shot 2016-03-23 at 1.36.27 p.m..png

In the draw, just like the twitter code. It would load 1 currentImage stored, and keep adding one more each time.

Screen Shot 2016-03-23 at 1.36.42 p.m..png

The images then loaded one at a time in random places just like the twitter code, they faded in and out. However, the images still did not refresh as we had not created a function for it to do so.

Screen Shot 2016-03-23 at 1.37.26 p.m..png

In order to refresh the instagram posts, we decided to create a thread like the twitter sketch. So we created a function that happened within the setup with a similar name but instead of twitter we changed it to instagram.

The function worked, as it began to print “updated images” in the sketch, however the images were not refreshing. The sketch would run, but it would get to a null error exception and stop running the images. So we realised that it was probably in the draw where it was happening.

There was an if statement in the draw related to twitter. We realised that this was where the images were refreshing. So we copied the same twitter code and replaced tweets with images. We thought this was the array where the images were stored, however when we tried to use image/images/img the code could not find it. We then tried the other array listed which was the JSONArray, which was declared as all.

Screen Shot 2016-03-23 at 2.06.09 p.m..png

The sketch then began to run and the images refreshed. However, the refresh was not as smooth as the tweets, and it was clear that the images were refreshing. This was another problem needing to be fixed. We also had to decide the arrangement of the tweets and images, as at random with both of them happening it began to look messy. We decided to then go back to the grid of images with the tweets being displayed in the middle.

To do this, we went back to the original code we had, and replaced the random positioning line of code in the draw with the rows and columns again. However, it was loading one at a time into each column and then row. We wanted it to remain in a grid and each image randomly change. The int for column and row had to be declared again above set up.

Screen Shot 2016-03-23 at 2.09.59 p.m..png

In the draw we borrowed the code from an existing sketch and applied it to ours. We had to comment out the random positioning code so that the images would stay in the grid. Then random images in the grid would change to other images, and after a set time, the images would refresh from instagram. We then changed the twitter code to put it in the centre of the grid. The only issue we had now was similar images were repeating on the one sketch, and also we wanted to change the size of the images.

Screen Shot 2016-03-23 at 2.15.05 p.m..png

Screen Shot 2016-03-23 at 2.19.29 p.m..png

We also needed to get rid of the grey lines around the side and fill up the screen.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s