【メモ】出玉をヒートマップで表してみる - 秋葉原パチンコ・パチスロデータまとめ

ただのメモです。

興味ない方は読み飛ばしてください。(´･ω･`)

やりたいこと

島図にヒートマップ的な感じで、どこが出玉的に盛り上がっているのか視覚的に分かるようにしたい。

試したこと

とりあえずパチスロの戦国乙女2の所だけ、ヒートマップ的に表してみる

ソースコード

JavaScript

// 画像のオブジェクトを取得
var objHeatmapContainerImg = document.getElementById('heatmapContainerImg');

// 画像の元サイズと画面に合わせて縮小された画像サイズの比率
var ratio = objHeatmapContainerImg.clientWidth / objHeatmapContainerImg.naturalWidth;

var heatmap = h337.create({
// 表示したい要素
container: document.getElementById('heatmapContainer'),
// maxOpacity, radius, blurなどはこの数字をコピペで大丈夫です。
// ヒートマップの点のサイズ
radius: parseInt(75 * ratio),
// 背景色は薄い黒がいいでしょう
backgroundColor: 'rgba(0, 0, 0, 0.1)'
});

var vw = objHeatmapContainerImg.clientWidth;
var vh = objHeatmapContainerImg.clientHeight;

// #heatmapContainer の左から40、上から40移動した位置に1の度合いのデータを追加
// valueは点の濃さを0～1で指定
heatmap.addData({ x: vw*0.666, y: vh*0.748, value: 0.1 });
heatmap.addData({ x: vw*0.666, y: vh*0.755, value: 0.2 });
heatmap.addData({ x: vw*0.666, y: vh*0.762, value: 0.3 });
heatmap.addData({ x: vw*0.666, y: vh*0.770, value: 0.4 });
heatmap.addData({ x: vw*0.666, y: vh*0.777, value: 0.5 });
heatmap.addData({ x: vw*0.666, y: vh*0.784, value: 0.6 });
heatmap.addData({ x: vw*0.666, y: vh*0.792, value: 0.7 });
heatmap.addData({ x: vw*0.666, y: vh*0.799, value: 0.8 });
heatmap.addData({ x: vw*0.666, y: vh*0.806, value: 0.9 });
heatmap.addData({ x: vw*0.666, y: vh*0.813, value: 1.0 });

HTML

<script type="text/javascript" src="https://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js"></script>
<script type="text/javascript" src="https://s3-ap-northeast-1.amazonaws.com/jscss-pachipachiland/test.js"></script>


<div id="heatmapContainer" style="position: relative;">
<img id="heatmapContainerImg" src="http://island.pt.teramoba2.com/images/328/machineMap/5cfcc7a7aff82.jpg?mode=noresize.jpg">
</div>