Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: gigasquid/roomba-dreams
base: d214f15dcc
...
head fork: gigasquid/roomba-dreams
compare: a1eac88dce
Checking mergeability… Don't worry, you can still create the pull request.
  • 14 commits
  • 2 files changed
  • 0 commit comments
  • 1 contributor
Showing with 50 additions and 61 deletions.
  1. +4 −1 README.md
  2. +46 −60 roomba.js
View
5 README.md
@@ -1,4 +1,7 @@
roomba-dreams
=============
-Experiments with D3 and @SelfAwareROOMBA
+Experiments with D3 and @SelfAwareROOMBA
+
+[See it in action](http://gigasquid.github.com/roomba-dreams/)
+
View
106 roomba.js
@@ -2,8 +2,13 @@ var roomba_data = [[200, 200]];
var tweets = ["(Becomes Self-Aware)"];
var tweet_num = 0;
var dirt_data = [];
-var new_dirt_data = [];
-var cleaned_dirt = [];
+var w = 500;
+var h = 500;
+var roomba_image = 48;
+var dirt_radius = 2;
+var dirt_num = 50;
+
+init_dirt();
function getTweets() {
var url = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=SelfAwareROOMBA&count=200&callback=?'
@@ -17,8 +22,6 @@ function getTweets() {
});
}
-getTweets();
-
function random_from_to(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
@@ -37,51 +40,6 @@ function show_tweet(){
d3.select(".tweet").text(tweets[tweet_num]);
}
-var dirt_radius = 2;
-var dirt_num = 50;
-function init_dirt(){
- for (i=0; i<dirt_num; i++){
- dirt_data.push([random_from_to(10, 490), random_from_to(10,490), i])
- }
-}
-init_dirt();
-
-
-//Width and height
-var w = 500;
-var h = 500;
-var roomba_image = 48;
-
-d3.select("body").append("h1").text("Roomba Dreams");
-var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
-//setup the room
-svg.append("rect").attr("width", w).attr("height", h).attr("fill", "#ffffee")
- .attr("stroke", "black").attr("stroke-width", "10");
-//setup the tweet area
-d3.select("body").append("div").attr("class", "tweet");
-//now add the dirt
-
-var dirt = svg.selectAll("dirt").data(dirt_data, function(d){ return d[2];}).enter()
- .append("circle")
- .attr("class", "dirt")
- .attr("cx", function(d) {return d[0];})
- .attr("cy", function(d) {return d[1];})
- .attr("r", dirt_radius)
- .attr("fill", "#996663");
-
-svg.selectAll("roomba").data(roomba_data).enter()
- .append("g")
- .append("svg:image")
- .attr("class", "roomba")
- .attr("xlink:href", "roomba.gif")
- .attr("width", roomba_image)
- .attr("height", roomba_image)
- .attr("x", function(d) { return d[0];})
- .attr("y", function(d) { return d[1];});
-
-var tweet = svg.selectAll("g")
- .append("text");
-
function dirt_clean_up(old_x, old_y, new_x, new_y){
cleaned_dirt = [];
new_dirt_data = [];
@@ -98,19 +56,11 @@ function dirt_clean_up(old_x, old_y, new_x, new_y){
var dirt_y = dirt_data[i][1];
if(inside_poly([dirt_x, dirt_y], poly)){
cleaned_dirt.push(dirt_data[i]);
- console.log("cleaned");
- }else{
- new_dirt_data.push(dirt_data[i]);
}
}
- console.log(poly);
- console.log(cleaned_dirt);
- dirt_data = new_dirt_data;
svg.selectAll(".dirt").data(cleaned_dirt, function(d){ return d[2];})
.transition().remove().duration(800).delay(300);
-
-
}
function move(){
@@ -120,16 +70,52 @@ function move(){
var new_x = next_position();
var new_y = next_position();
-
svg.selectAll("image.roomba").transition()
.attr("x", new_x)
.attr("y", new_y).duration(1000).delay(100);
dirt_clean_up(old_x, old_y, new_x, new_y);
-
show_tweet();
-
setTimeout(move, 5000);
}
+function init_dirt(){
+ for (i=0; i<dirt_num; i++){
+ dirt_data.push([random_from_to(10, 490), random_from_to(10,490), i])
+ }
+}
+
+//Begin the SVG Magic!
+
+d3.select("body").append("h1").text("Roomba Dreams");
+var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
+//setup the room
+svg.append("rect").attr("width", w).attr("height", h).attr("fill", "#ffffee")
+ .attr("stroke", "black").attr("stroke-width", "10");
+//setup the tweet area
+d3.select("body").append("div").attr("class", "tweet");
+//now add the dirt
+
+svg.selectAll("dirt").data(dirt_data, function(d){ return d[2];}).enter()
+ .append("circle")
+ .attr("class", "dirt")
+ .attr("cx", function(d) {return d[0];})
+ .attr("cy", function(d) {return d[1];})
+ .attr("r", dirt_radius)
+ .attr("fill", "#996663");
+
+svg.selectAll("roomba").data(roomba_data).enter()
+ .append("g")
+ .append("svg:image")
+ .attr("class", "roomba")
+ .attr("xlink:href", "roomba.gif")
+ .attr("width", roomba_image)
+ .attr("height", roomba_image)
+ .attr("x", function(d) { return d[0];})
+ .attr("y", function(d) { return d[1];});
+
+tweet = svg.selectAll("g").append("text");
+
+
+getTweets();
move();

No commit comments for this range

Something went wrong with that request. Please try again.