Skip to content

A simple 2D bin-packing algorithm for packing words with spatial weights

Notifications You must be signed in to change notification settings

seveibar/js-word-packing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Javascript Simple 2D Bin Packing

This is a simply javascript library to pack 2D bins, it supported weighting locations, and was built for the purpose of building word maps where the location of the word is important (e.g. a word map overlaying a geographical map). It does not always pack all the supplied rectangles.

Most Popular English Words Example

Most Popular English Words (Circle) Most Popular English Words

<html>
	<head>
		<script src='binpacking.js'></script>
	</head>
	<body>
		<canvas id='canvas'></canvas>
		<script type='text/javascript'>
		// Here's the 100 most popular words in english, first is most popular
		var mostPopularWords = ["the","be","to","of","and","a","in","that","have","I","it","for","not","on","with","he","as","you","do","at","this","but","his","by","from","they","we","say","her","she","or","an","will","my","one","all","would","there","their","what","so","up","out","if","about","who","get","which","go","me","when","make","can","like","time","no","just","him","know","take","person","into","year","your","good","some","could","them","see","other","than","then","now","look","only","come","its","over","think","also","back","after","use","two","how","our","work","first","well","way","even","new","want","because","any","these","give","day","most","us"];

		var rects = [];
		for (var i = 0; i < mostPopularWords.length;i++){
			var word = mostPopularWords[i];

			// The size of the word will be a function of it's popularity
			var fontSize = 12 + Math.floor(Math.pow((100 - i)/100,4) * 96);

			// Measure the word's size
			context.font = fontSize + "px Arial";
			context.textAlign = "center";
			var wordWidth = context.measureText(word).width;

			// Place all the words randomly
			var rect = new binpacking.Rect(Math.random() * 600,Math.random() * 600,wordWidth+5,fontSize+5);

			// Store some meta-information
			rect.addProperty("fontSize", fontSize);
			rect.addProperty("text", word);

			rects.push(rect);
		}

		// Draw the area that the rects will show up in
		area.draw(context);

		// Draw the rects in their initial position
		for (var i = 0; i < rects.length;i++){
			rects[i].draw(context);
		}

		// Fade all the previous drawings to show that they are just the initial positions
		context.globalAlpha = .7;
		context.fillStyle = "#fff";
		context.fillRect(0,0,canvas.width, canvas.height);

		var placedRects = binpacking.pack(area, rects, 10);

		// Draw the rects in their final position
		context.globalAlpha = 1;
		for (var i = 0; i < placedRects.length;i++){
			placedRects[i].draw(context);
		}

		// Draw the text into each rect
		context.fillStyle = "#000";
		for (var i = 0;i < placedRects.length;i++){
			var fontSize = placedRects[i].getProperty("fontSize");
			context.font = fontSize + "px Arial";
			context.fillText(placedRects[i].getProperty("text"), placedRects[i].x, placedRects[i].y + fontSize/4);
		}

		</script>
	</body>
</html>

About

A simple 2D bin-packing algorithm for packing words with spatial weights

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published