Author Topic: dota2 使用 processing.js 进行玩家状态可视化  (Read 3388 times)

vinjn

  • SuperManager
  • Hero Member
  • *****
  • Posts: 587
dota2 使用 processing.js 进行玩家状态可视化
« on: November 17, 2012, 02:46:07 PM »
http://dota2.com/overview

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

Code
/* @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);
}
« Last Edit: November 17, 2012, 03:15:24 PM by vinjn »

小雍子

  • Newbie
  • *
  • Posts: 20
Re: dota2 使用 processing.js 进行玩家状态可视化
« Reply #1 on: November 23, 2012, 05:23:07 PM »
数据从哪儿接的。。找了半天没看到。。

vinjn

  • SuperManager
  • Hero Member
  • *****
  • Posts: 587
Re: dota2 使用 processing.js 进行玩家状态可视化
« Reply #2 on: November 23, 2012, 08:25:51 PM »
位于第一个网址内

      <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},

Tags: dota2 processing