This is a crazy pulsing slideshow made with a combination of javascript and spoon.js. The images are randomly grabbed from flickr and each moving sphere is linked to a randomly grabbed tweet.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
paperjs-nightly
Streamer.html
jquery.js
readMe.rtf
title.png

readMe.rtf

{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf360
{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
\margl1440\margr1440\vieww13200\viewh9940\viewkind0
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural

\f0\fs24 \cf0 Concept:\
	-playing with impermanence of information on the web.  \
\
Brief Summary of Functionalities:\
- Flickr pulse Slide show:\
	* uses the flickr method .getRecent to get a list 100 of the most recent tweets\
	* reconstructs the direct link\
	* iterates through the given 100 images (drawing each one as a paper.js raster image) and then does another 	   call for the newest 100.\
\
	* All of these images loaded into a sin wave animated pulsing circle mask\
\
- Line w/ Circles\
	* a random procession of circles will follow a given path at a given speed with random scales and rates \
	* there is a whole section of code that is commented out that allows me to draw a line directly on the screen and 	then output the essential piece of code to the console to use later. \
	* currently there are three lines that are chosen randomly when the page loads\
\
- Twitter Api calls (Please note: the functionality isn't fully displayed on the UI) \
	* I wanted to simulate a random twitter stream. However, after thorough research I could not find a reasonable way 	   of using the twitter status/sample method, due to the limitations of OAuth and the twitter API's transitional state.\
	* I turned instead to creating my own random stream of tweets using the twitter searches method (which finds tweets 	  by looking up a user defined search term)\
	* I used the wordnik api to create a random word generator\
	* I maintained two parallel lists (one of tweets and one of random words) every time I needed one of these I popped 	it out to ensure I used each item once. (Coordinating the refresh rates of these lists still occasionally throw an error.)\
	* the twitter list contained a list of objects that contained only the text and the accompanying profile image.\
\
	* I then linked circle hover events to a new random twitter tweet. I had to use a special release of paperjs because 	these methods are still in development.\
	* I displayed the resulting random tweet on the screen. ( this is were I lost steam and I did not implement my ideas 	about how I would like to dynamically display both the tweet content and the user's profile pic.)\
\
\
Sources:\
\
obtaining IP address:\
{\field{\*\fldinst{HYPERLINK "http://javascript.about.com/library/blip.htm"}}{\fldrslt http://javascript.about.com/library/blip.htm}}\
\
Find connection speed:\
{\field{\*\fldinst{HYPERLINK "http://ditio.net/2008/08/06/detect-connection-speed-with-javascript/"}}{\fldrslt http://ditio.net/2008/08/06/detect-connection-speed-with-javascript/}} \
\
Using the flickr API:\
{\field{\*\fldinst{HYPERLINK "http://net.tutsplus.com/tutorials/php/how-to-create-a-photo-gallery-using-the-flickr-api/"}}{\fldrslt http://net.tutsplus.com/tutorials/php/how-to-create-a-photo-gallery-using-the-flickr-api/}}\
{\field{\*\fldinst{HYPERLINK "http://api.jquery.com/jQuery.getJSON/"}}{\fldrslt http://api.jquery.com/jQuery.getJSON/}}\
{\field{\*\fldinst{HYPERLINK "http://www.flickr.com/services/api/flickr.photos.search.html"}}{\fldrslt http://www.flickr.com/services/api/flickr.photos.search.html}}\
{\field{\*\fldinst{HYPERLINK "http://www.justinspradlin.com/programming/create-a-photostream-using-jquery-and-the-flickr-api/"}}{\fldrslt http://www.justinspradlin.com/programming/create-a-photostream-using-jquery-and-the-flickr-api/}}\
\
Html 5\
{\field{\*\fldinst{HYPERLINK "http://www.html5canvastutorials.com/tutorials/html5-canvas-images/"}}{\fldrslt http://www.html5canvastutorials.com/tutorials/html5-canvas-images/}}\
\
animations with Sine wave\
{\field{\*\fldinst{HYPERLINK "http://coding.smashingmagazine.com/2011/10/04/quick-look-math-animations-javascript/"}}{\fldrslt http://coding.smashingmagazine.com/2011/10/04/quick-look-math-animations-javascript/}}\
\
scaling in paper js\
{\field{\*\fldinst{HYPERLINK "https://groups.google.com/forum/?fromgroups=#!searchin/paperjs/scale/paperjs/xVlCg8Mhj2A/bNZSD1ymntwJ"}}{\fldrslt https://groups.google.com/forum/?fromgroups=#!searchin/paperjs/scale/paperjs/xVlCg8Mhj2A/bNZSD1ymntwJ}}\
\
All twitter recourses:\
\
the standard twitter page:\
- {\field{\*\fldinst{HYPERLINK "https://dev.twitter.com/docs/api/1/get/statuses/sample"}}{\fldrslt https://dev.twitter.com/docs/api/1/get/statuses/sample}}\
\
Document Explaining Oath\
\
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural
{\field{\*\fldinst{HYPERLINK "http://hueniverse.com/oauth/guide/workflow/"}}{\fldrslt \cf0 http://hueniverse.com/oauth/guide/workflow/}}\
\
Example attempting to use son and twitter on js fiddle:\
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural
{\field{\*\fldinst{HYPERLINK "http://jsfiddle.net/elijahmanor/Nstnx/22/"}}{\fldrslt \cf0 http://jsfiddle.net/elijahmanor/Nstnx/22/}}\
\
Explain JsonP\
{\field{\*\fldinst{HYPERLINK "http://stackoverflow.com/questions/2067472/please-explain-jsonp"}}{\fldrslt http://stackoverflow.com/questions/2067472/please-explain-jsonp}}\
\
get streams of tweets from terminal!\
{\field{\*\fldinst{HYPERLINK "http://mike.teczno.com/notes/streaming-data-from-twitter.html"}}{\fldrslt http://mike.teczno.com/notes/streaming-data-from-twitter.html}}}