秋葉原パチンコ・パチスロデータまとめ

アイランド、ビッグアップル、UNO秋葉原店のパチンコ・パチスロ出玉情報をまとめてます。

【メモ】出玉をヒートマップで表してみる

ただのメモです。
興味ない方は読み飛ばしてください。(´・ω・`)

やりたいこと

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

試したこと

とりあえずパチスロの戦国乙女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>

結果

f:id:putikan:20190616150238j:plain

 
戦国乙女2の所だけそれっぽくできた。

メモ

heatmap.addDataのvalue
~-5000枚:0.1
-5000枚~-4000枚:0.2
4000枚~5000枚:0.9
5000枚~:1.0
みたいな感じにする。
 
heatmap.addDataのxとy座標の所をパチとスロの全台分指定する必要がある。
かなり面倒(;´・ω・`)
何か良いやり方ないかな。
heatmap.addData({ x: vw*0.666, y: vh*0.748, value: 0.1 });

参考

blog.mlkcca.com

hawksnowlog.blogspot.com

www.patrick-wied.at