playing around with circles, adding/deleting on screen

gwheaton · Mar 5, 2012 · 88e214d · 88e214d
1 parent 3d11463
commit 88e214d
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 40 deletions.
diff --git a/Stb_Logo.png b/Stb_Logo.png
diff --git a/default.css b/default.css
@@ -8,7 +8,9 @@ body {
 #wrapper {
 	width: 1024px;
 	height: 780px;
-	margin: 20px auto;
+	display: block;
+	margin: 0 auto;
+
 }
 
 header {

diff --git a/index.html b/index.html
@@ -1,65 +1,35 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
-	<link rel="stylesheet" href="string.css">
+	<title>Save the Bubble!</title>
+	<link rel="stylesheet" href="default.css">
+	<script type="text/javascript" src="main.js"></script>	
 </head>
-<body> 
-<div id="tambo-wrapper">
-<input type="radio" name="tambo" id="tambo1" checked="checked">
-<input type="radio" name="tambo" id="tambo2">
-<input type="radio" name="tambo" id="tambo3">
-<input type="radio" name="tambo" id="tambo4">
-<input type="radio" name="tambo" id="tambo5">
-<input type="radio" name="tambo" id="tambo6">
-<label for="tambo1" class="tambo1"></label>
-<label for="tambo2" class="tambo2"></label>
-<label for="tambo3" class="tambo3"></label>
-<label for="tambo4" class="tambo4"></label>
-<label for="tambo5" class="tambo5"></label>
-<label for="tambo6" class="tambo6"></label>
-<div class="tambo">
-  <ul class="tambo-container">
-      <li title="tambo2"><a href="index.html">Sports Bubbles</a> </li>
-      <li title="sub-title"><a href="index.html">Academic Bubbles</a> </li>
-      <li title="sub-title"><img src="http://de.flash-screen.com/free-wallpaper/uploads/200708/imgs/1187189697_1024x768_cartoon-tiger-picture.jpg"/> </li>
-      <li title="sub-title"><img src="http://www.deshow.net/d/file/cartoon/2009-03/games-fun-cartoon-illustrations-2-439-2.jpg"/> </li>
-      <li title="sub-title"><img src="http://www.hdcartoonwallpaper.com/wp-content/uploads/2011/08/Ice_Age_Cartoon_Wallpaper.jpg" /> </li>
-      <li title="sub-title"><img src="http://www.sriramatrix.com/gal3d/2008/tmnt3dc.jpg" /> </li>
-  </ul>
-</div>
 
+<body>
 <div id="wrapper">
-
 <header>
 
      <!-- logo -->
-    <img src="title.png" width="600" height="100" alt="Save the Bubble">
+    <img src="Stb_Logo.png" width="600" height="100" alt="Save the Bubble">
 
 </header>
 
+
 <!-- left nav items -->
 <nav>
     <!-- UL stands for unordered list -->
     <ul>
-        <!-- LI stands for list item -->
-        <li><a href="index.html">My Events</a></li>
-        <li><a href="index.html">Add Event</a></li>
+	<button type="button" onclick="setup();">Click Me!</button>
     </ul>
 </nav>
 
 <!-- HTML5 article tag -->    
 <article>
-    <div style="width:600px;height:600px;border:1px solid #000;">
-	<p> YO </p>
+    <div style="width:600px;height:800px;border:1px solid #000;">
+	<canvas id="canvas" height="800" width="600"></canvas>
 	</div>
 </article>
-
-
-<!-- Copyright footer -->
-<footer>
-    eecs330 Human-Computer Interaction
-</footer>
 </div>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -0,0 +1,116 @@
+var context;
+var currentBubbles = new Array();
+
+function Bubble(x, y) {
+	this.x = x;      // x coordinate
+	this.y = y;      // y coordinate
+	this.enlarged = false;
+
+	this.draw = function(context) {		
+
+			if (!this.enlarged) {
+				context.fillStyle = "rgba(0,100,180,0.5)";
+				context.beginPath();			
+				context.arc(this.x, this.y, 40, 0, Math.PI*2, true);
+				context.closePath();
+				context.fill();
+			}
+			else {
+				context.fillStyle = "rgba(0,100,180,0.5)";
+				context.beginPath();			
+				context.arc(this.x, this.y, 80, 0, Math.PI*2, true);
+				context.closePath();
+				context.fill();
+			}
+	}
+}
+
+function mouseDown(e)
+{	
+	var x; var y;
+
+	if (e.pageX || e.pageY) {
+		x = e.pageX;
+		y = e.pageY;
+	}
+	else {
+		x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+		y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
+	}
+
+	x -= this.offsetLeft;
+	y -= this.offsetTop;
+
+	var bubble = getClosestBubble(x, y);
+
+	bubble.enlarged = true;
+	redraw();	
+}
+
+function getClosestBubble(x, y)
+{
+	var mindist = 100000; var dist; var retBubble;
+
+	for (var i in currentBubbles) {
+		dist = distBetweenPoints(x, y, currentBubbles[i].x, currentBubbles[i].y);
+
+		if (dist < mindist) {
+			mindist = dist;
+			retBubble = currentBubbles[i];
+		}
+	}
+
+	return retBubble;
+}		
+
+
+function distBetweenPoints(x1, y1, x2, y2)
+{
+	var x = 0;
+	var y = 0;
+
+	x = x2 - x1;
+	x = x * x;
+
+	y = y2 - y1;
+	y = y * y;
+
+	return Math.sqrt( x + y );
+}
+
+function redraw() {
+// redraw the canvas bubbles
+	canvas.width = canvas.width;
+	currentBubbles2 = new Array();
+	var bubble;
+
+	for (var i in currentBubbles) {
+		bubble = new Bubble(currentBubbles[i].x, currentBubbles[i].y);
+		bubble.draw(context);
+		alert(i);
+		currentBubbles2.push(bubble);
+	}
+
+	currentBubbles = currentBubbles2;
+}
+
+function setup() {
+	var element = document.getElementById('canvas');
+
+	// event listeners for interaction
+	element.addEventListener('click', mouseDown, false);
+	//
+
+	if (element && element.getContext) {
+		var context = element.getContext('2d');
+
+		if (context) {
+
+			var bubble = new Bubble(Math.random()*600, Math.random()*600);
+
+			bubble.draw(context);
+
+			element.write(currentBubbles.push(bubble));
+		}
+	}
+}