반응형

HTML5 Canvas: Lunch Wheel - javascript 룰렛

 

blog.bramp.net/post/2011/07/27/html5-canvas-lunch-wheel/

 

HTML5 Canvas: Lunch Wheel

In the on going battle to make my lunch time more optimised I decided to learn some Javascript, and how to use the HTML5 Canvas element. Turns out it’s not that hard, and I have now created Click to …

blog.bramp.net

 

blog.bramp.net/wheel/

 

Lunch Wheel

 

blog.bramp.net

<html><head>
<meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible">
<title>Lunch Wheel</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tinysort.min.js"></script>
<!--[if IE]><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jit/2.0.2/Extras/excanvas.min.js"></script><![endif]-->
<script type="text/javascript">
// Helpers
	shuffle = function(o) {
		for ( var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x)
			;
		return o;
	};

	String.prototype.hashCode = function(){
		// See http://www.cse.yorku.ca/~oz/hash.html		
		var hash = 5381;
		for (i = 0; i < this.length; i++) {
			char = this.charCodeAt(i);
			hash = ((hash<<5)+hash) + char;
			hash = hash & hash; // Convert to 32bit integer
		}
		return hash;
	}

	Number.prototype.mod = function(n) {
		return ((this%n)+n)%n;
	}
</script>
<script type="text/javascript">
venues = {
		"116208"  : "Jerry's Subs and Pizza",
		"66271"   : "Starbucks",
		"5518"    : "Ireland's Four Courts",
		"392360"  : "Five Guys",
		"2210952" : "Uptown Cafe",
		"207306"  : "Corner Bakery Courthouse",
		"41457"   : "Delhi Dhaba",
		"101161"  : "TNR Cafe",
		"257424"  : "Afghan Kabob House",
		"512060"  : "The Perfect Pita",
		"66244"   : "California Tortilla",
		"352867"  : "Pho 75 - Rosslyn",
		"22493"   : "Ragtime",
		"268052"  : "Subway",
		"5665"    : "Summers Restaurant & Sports Bar",
		"129724"  : "Cosi",
		"42599"   : "Ray's Hell Burger"
	};

	$(function() {

		var venueContainer = $('#venues ul');
		$.each(venues, function(key, item) {
			venueContainer.append(
		        $(document.createElement("li"))
		        .append(
	                $(document.createElement("input")).attr({
                         id:    'venue-' + key
                        ,name:  item
                        ,value: item
                        ,type:  'checkbox'
                        ,checked:true
	                })
	                .change( function() {
	                	var cbox = $(this)[0];
	                	var segments = wheel.segments;
	                	var i = segments.indexOf(cbox.value);

	                	if (cbox.checked && i == -1) {
	                		segments.push(cbox.value);

	                	} else if ( !cbox.checked && i != -1 ) {
	                		segments.splice(i, 1);
	                	}

	                	segments.sort();
	                	wheel.update();
	                } )

		        ).append(
	                $(document.createElement('label')).attr({
	                    'for':  'venue-' + key
	                })
	                .text( item )
		        )
		    )
		});

		$('#venues ul>li').tsort("input", {attr: "value"});
	});
</script>
<script type="text/javascript">
// WHEEL!
	var wheel = {

		timerHandle : 0,
		timerDelay : 33,

		angleCurrent : 0,
		angleDelta : 0,

		size : 290,

		canvasContext : null,

		colors : [ '#ffff00', '#ffc700', '#ff9100', '#ff6301', '#ff0000', '#c6037e',
		           '#713697', '#444ea1', '#2772b2', '#0297ba', '#008e5b', '#8ac819' ],

		//segments : [ 'Andrew', 'Bob', 'Fred', 'John', 'China', 'Steve', 'Jim', 'Sally', 'Andrew', 'Bob', 'Fred', 'John', 'China', 'Steve', 'Jim'],
		segments : [],

		seg_colors : [], // Cache of segments to colors
		
		maxSpeed : Math.PI / 16,

		upTime : 1000, // How long to spin up for (in ms)
		downTime : 17000, // How long to slow down for (in ms)

		spinStart : 0,

		frames : 0,

		centerX : 300,
		centerY : 300,

		spin : function() {

			// Start the wheel only if it's not already spinning
			if (wheel.timerHandle == 0) {
				wheel.spinStart = new Date().getTime();
				wheel.maxSpeed = Math.PI / (16 + Math.random()); // Randomly vary how hard the spin is
				wheel.frames = 0;
				wheel.sound.play();

				wheel.timerHandle = setInterval(wheel.onTimerTick, wheel.timerDelay);
			}
		},

		onTimerTick : function() {

			wheel.frames++;

			wheel.draw();

			var duration = (new Date().getTime() - wheel.spinStart);
			var progress = 0;
			var finished = false;

			if (duration < wheel.upTime) {
				progress = duration / wheel.upTime;
				wheel.angleDelta = wheel.maxSpeed
						* Math.sin(progress * Math.PI / 2);
			} else {
				progress = duration / wheel.downTime;
				wheel.angleDelta = wheel.maxSpeed
						* Math.sin(progress * Math.PI / 2 + Math.PI / 2);
				if (progress >= 1)
					finished = true;
			}

			wheel.angleCurrent += wheel.angleDelta;
			while (wheel.angleCurrent >= Math.PI * 2)
				// Keep the angle in a reasonable range
				wheel.angleCurrent -= Math.PI * 2;

			if (finished) {
				clearInterval(wheel.timerHandle);
				wheel.timerHandle = 0;
				wheel.angleDelta = 0;

				$("#counter").html((wheel.frames / duration * 1000) + " FPS");
			}

			/*
			// Display RPM
			var rpm = (wheel.angleDelta * (1000 / wheel.timerDelay) * 60) / (Math.PI * 2);
			$("#counter").html( Math.round(rpm) + " RPM" );
			 */
		},

		init : function(optionList) {
			try {
				wheel.initWheel();
				wheel.initAudio();
				wheel.initCanvas();
				wheel.draw();

				$.extend(wheel, optionList);

			} catch (exceptionData) {
				alert('Wheel is not loaded ' + exceptionData);
			}

		},

		initAudio : function() {
			var sound = document.createElement('audio');
			sound.setAttribute('src', 'wheel.mp3');
			wheel.sound = sound;
		},

		initCanvas : function() {
			var canvas = $('#wheel #canvas').get(0);

			if ($.browser.msie) {
				canvas = document.createElement('canvas');
				$(canvas).attr('width', 1000).attr('height', 600).attr('id', 'canvas').appendTo('.wheel');
				canvas = G_vmlCanvasManager.initElement(canvas);
			}

			canvas.addEventListener("click", wheel.spin, false);
			wheel.canvasContext = canvas.getContext("2d");
		},

		initWheel : function() {
			shuffle(wheel.colors);
		},

		// Called when segments have changed
		update : function() {
			// Ensure we start mid way on a item
			//var r = Math.floor(Math.random() * wheel.segments.length);
			var r = 0;
			wheel.angleCurrent = ((r + 0.5) / wheel.segments.length) * Math.PI * 2;

			var segments = wheel.segments;
			var len      = segments.length;
			var colors   = wheel.colors;
			var colorLen = colors.length;

			// Generate a color cache (so we have consistant coloring)
			var seg_color = new Array();
			for (var i = 0; i < len; i++)
				seg_color.push( colors [ segments[i].hashCode().mod(colorLen) ] );

			wheel.seg_color = seg_color;

			wheel.draw();
		},

		draw : function() {
			wheel.clear();
			wheel.drawWheel();
			wheel.drawNeedle();
		},

		clear : function() {
			var ctx = wheel.canvasContext;
			ctx.clearRect(0, 0, 1000, 800);
		},

		drawNeedle : function() {
			var ctx = wheel.canvasContext;
			var centerX = wheel.centerX;
			var centerY = wheel.centerY;
			var size = wheel.size;

			ctx.lineWidth = 1;
			ctx.strokeStyle = '#000000';
			ctx.fileStyle = '#ffffff';

			ctx.beginPath();

			ctx.moveTo(centerX + size - 40, centerY);
			ctx.lineTo(centerX + size + 20, centerY - 10);
			ctx.lineTo(centerX + size + 20, centerY + 10);
			ctx.closePath();

			ctx.stroke();
			ctx.fill();

			// Which segment is being pointed to?
			var i = wheel.segments.length - Math.floor((wheel.angleCurrent / (Math.PI * 2))	* wheel.segments.length) - 1;

			// Now draw the winning name
			ctx.textAlign = "left";
			ctx.textBaseline = "middle";
			ctx.fillStyle = '#000000';
			ctx.font = "2em Arial";
			ctx.fillText(wheel.segments[i], centerX + size + 25, centerY);
		},

		drawSegment : function(key, lastAngle, angle) {
			var ctx = wheel.canvasContext;
			var centerX = wheel.centerX;
			var centerY = wheel.centerY;
			var size = wheel.size;

			var segments = wheel.segments;
			var len = wheel.segments.length;
			var colors = wheel.seg_color;

			var value = segments[key];
			
			ctx.save();
			ctx.beginPath();

			// Start in the centre
			ctx.moveTo(centerX, centerY);
			ctx.arc(centerX, centerY, size, lastAngle, angle, false); // Draw a arc around the edge
			ctx.lineTo(centerX, centerY); // Now draw a line back to the centre

			// Clip anything that follows to this area
			//ctx.clip(); // It would be best to clip, but we can double performance without it
			ctx.closePath();

			ctx.fillStyle = colors[key];
			ctx.fill();
			ctx.stroke();

			// Now draw the text
			ctx.save(); // The save ensures this works on Android devices
			ctx.translate(centerX, centerY);
			ctx.rotate((lastAngle + angle) / 2);

			ctx.fillStyle = '#000000';
			ctx.fillText(value.substr(0, 20), size / 2 + 20, 0);
			ctx.restore();

			ctx.restore();
		},

		drawWheel : function() {
			var ctx = wheel.canvasContext;

			var angleCurrent = wheel.angleCurrent;
			var lastAngle    = angleCurrent;

			var segments  = wheel.segments;
			var len       = wheel.segments.length;
			var colors    = wheel.colors;
			var colorsLen = wheel.colors.length;

			var centerX = wheel.centerX;
			var centerY = wheel.centerY;
			var size    = wheel.size;

			var PI2 = Math.PI * 2;

			ctx.lineWidth    = 1;
			ctx.strokeStyle  = '#000000';
			ctx.textBaseline = "middle";
			ctx.textAlign    = "center";
			ctx.font         = "1.4em Arial";

			for (var i = 1; i <= len; i++) {
				var angle = PI2 * (i / len) + angleCurrent;
				wheel.drawSegment(i - 1, lastAngle, angle);
				lastAngle = angle;
			}
			// Draw a center circle
			ctx.beginPath();
			ctx.arc(centerX, centerY, 20, 0, PI2, false);
			ctx.closePath();

			ctx.fillStyle   = '#ffffff';
			ctx.strokeStyle = '#000000';
			ctx.fill();
			ctx.stroke();

			// Draw outer circle
			ctx.beginPath();
			ctx.arc(centerX, centerY, size, 0, PI2, false);
			ctx.closePath();

			ctx.lineWidth   = 10;
			ctx.strokeStyle = '#000000';
			ctx.stroke();
		},
	}

	window.onload = function() {
		wheel.init();

		var segments = new Array();
		$.each($('#venues input:checked'), function(key, cbox) {
			segments.push( cbox.value );
		});

		wheel.segments = segments;
		wheel.update();

		// Hide the address bar (for mobile devices)!
		setTimeout(function() {
			window.scrollTo(0, 1);
		}, 0);
	}
</script>
</head>
<body>
<div id="venues" style="float:left"><ul><li><input id="venue-257424" name="Afghan Kabob House" value="Afghan Kabob House" type="checkbox" checked="checked"><label for="venue-257424">Afghan Kabob House</label></li><li><input id="venue-66244" name="California Tortilla" value="California Tortilla" type="checkbox" checked="checked"><label for="venue-66244">California Tortilla</label></li><li><input id="venue-207306" name="Corner Bakery Courthouse" value="Corner Bakery Courthouse" type="checkbox" checked="checked"><label for="venue-207306">Corner Bakery Courthouse</label></li><li><input id="venue-129724" name="Cosi" value="Cosi" type="checkbox" checked="checked"><label for="venue-129724">Cosi</label></li><li><input id="venue-41457" name="Delhi Dhaba" value="Delhi Dhaba" type="checkbox" checked="checked"><label for="venue-41457">Delhi Dhaba</label></li><li><input id="venue-392360" name="Five Guys" value="Five Guys" type="checkbox" checked="checked"><label for="venue-392360">Five Guys</label></li><li><input id="venue-5518" name="Ireland's Four Courts" value="Ireland's Four Courts" type="checkbox" checked="checked"><label for="venue-5518">Ireland's Four Courts</label></li><li><input id="venue-116208" name="Jerry's Subs and Pizza" value="Jerry's Subs and Pizza" type="checkbox" checked="checked"><label for="venue-116208">Jerry's Subs and Pizza</label></li><li><input id="venue-352867" name="Pho 75 - Rosslyn" value="Pho 75 - Rosslyn" type="checkbox" checked="checked"><label for="venue-352867">Pho 75 - Rosslyn</label></li><li><input id="venue-22493" name="Ragtime" value="Ragtime" type="checkbox" checked="checked"><label for="venue-22493">Ragtime</label></li><li><input id="venue-42599" name="Ray's Hell Burger" value="Ray's Hell Burger" type="checkbox" checked="checked"><label for="venue-42599">Ray's Hell Burger</label></li><li><input id="venue-66271" name="Starbucks" value="Starbucks" type="checkbox" checked="checked"><label for="venue-66271">Starbucks</label></li><li><input id="venue-268052" name="Subway" value="Subway" type="checkbox" checked="checked"><label for="venue-268052">Subway</label></li><li><input id="venue-5665" name="Summers Restaurant &amp; Sports Bar" value="Summers Restaurant &amp; Sports Bar" type="checkbox" checked="checked"><label for="venue-5665">Summers Restaurant &amp; Sports Bar</label></li><li><input id="venue-512060" name="The Perfect Pita" value="The Perfect Pita" type="checkbox" checked="checked"><label for="venue-512060">The Perfect Pita</label></li><li><input id="venue-101161" name="TNR Cafe" value="TNR Cafe" type="checkbox" checked="checked"><label for="venue-101161">TNR Cafe</label></li><li><input id="venue-2210952" name="Uptown Cafe" value="Uptown Cafe" type="checkbox" checked="checked"><label for="venue-2210952">Uptown Cafe</label></li></ul></div>
<div id="wheel">
<canvas height="600" id="canvas" width="1000"></canvas>
</div>
<div id="stats">
<div id="counter">30.278136368970777 FPS</div>
</div>


</body></html>
반응형

+ Recent posts