dota2 使用 processing.js 进行玩家状态可视化

[vinjn]

http://dota2.com/overview

使用的 processing 代码为
http://dota2.com/public/processing/heatmap.pde

程序代码

/* @pjs preload="http://dota2.com/public/images/world.jpg,http://dota2.com/public/images/heatmap_gradient.png"; */
PImage		backgroundImage;
PImage		heatmapGradientImage;
PGraphics 	heatmapBuffer;

void setup() {
	size(800, 600);
	ellipseMode(CENTER);

	backgroundImage = loadImage("http://dota2.com/public/images/world.jpg");
	heatmapGradientImage = loadImage("http://dota2.com/public/images/heatmap_gradient.png");
	heatmapBuffer = createGraphics(backgroundImage.width, backgroundImage.height, JAVA2D)

	background(0);
	image(backgroundImage, 0, 0);

	var k_countScaleFactor = 4;
	var k_ellipseRadius = 4;
	var k_drawIntensity = 3 * k_countScaleFactor;
	heatmapBuffer.beginDraw();
	heatmapBuffer.stroke(0, 0);
	heatmapBuffer.fill(255, k_drawIntensity);
	for (var i in heatmapData) {
		var pt = heatmapData[i];
		int count = pt.count;
		if (count < 3 * k_countScaleFactor)
			count = 3 * k_countScaleFactor;
		count = count / k_countScaleFactor;
		for (var j = 0; j < count; j++) {
			// Do some ugly hacks to stretch it out to fit the map...
			var px = pt.x;
			var py = ((pt.y - 300) / 300) * 380 + 300;

			// Offset the point by up to a radius in order to help prevent
			// too much stacking from blowing the graph out. We use a uniform
			// distribution within a circle for this right now.
			var t = 2 * Math.PI * Math.random();
			var u = Math.random() * Math.random();
			var r = (Math.random() > 0.5 ? 1 - u : u);
			var divergence = Math.pow(3 * k_countScaleFactor * j, 0.32);
			var ox = divergence * r * Math.cos(t);
			var oy = divergence * r * Math.sin(t);

			heatmapBuffer.ellipse(px + ox, py + oy, k_ellipseRadius, k_ellipseRadius);
		}
	}
	heatmapBuffer.endDraw();

	// Convert the off-screen buffer into an image
	PImage heatmapOverlayImage = heatmapBuffer.get(0, 0, heatmapBuffer.width, heatmapBuffer.height);
	
	// Prepare the pixel buffers
	heatmapGradientImage.loadPixels();
	heatmapOverlayImage.loadPixels();

	for (int i = 0; i < heatmapOverlayImage.pixels.length; i++) {
		int a = alpha(heatmapOverlayImage.pixels[i]);
		if (a > 0) {
			int gi = parseInt((a / 255.0) * heatmapGradientImage.pixels.length);
			color rg = heatmapGradientImage.pixels[gi];
			a = lerp(0, 300, (a - 10) / 50)
			heatmapOverlayImage.pixels[i] = color(red(rg), green(rg), blue(rg), a);
			//heatmapOverlayImage.pixels[i] = color(red(gradientColor), green(gradientColor), blue(gradientColor), 255);
		}
		else {
			heatmapOverlayImage.pixels[i] = color(0, 0, 0, 0);
		}
	}
	heatmapOverlayImage.updatePixels();

	image(heatmapOverlayImage, 0, 0);
}

[小雍子]

数据从哪儿接的。。找了半天没看到。。

[vinjn]

位于第一个网址内

      <script type="text/javascript">
var heatmapData = [
{x: 442, y: 135, count: 4},
{x: 473, y: 139, count: 263},
{x: 433, y: 141, count: 2},
{x: 438, y: 141, count: 1},
{x: 474, y: 145, count: 10},
{x: 542, y: 145, count: 1},
{x: 432, y: 146, count: 3},
{x: 445, y: 147, count: 1},
{x: 451, y: 147, count: 1},
{x: 431, y: 150, count: 1},
{x: 457, y: 150, count: 7},
{x: 533, y: 151, count: 5},
{x: 448, y: 152, count: 2},
{x: 527, y: 152, count: 1},
{x: 574, y: 152, count: 4},